pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #811 from dod-ccpo/app-team-form-submit

Browse Source 
App team form submit
This commit is contained in:
dandds 2019-05-09 11:00:51 -04:00 committed by GitHub
commit d3b775150c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 149 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/components/forms/multi_step_modal_form.js
View File

@ -9,7 +9,7 @@ import toggler from '../toggler'
export default {
name: 'multi-step-modal-form',
mixins: [FormMixin, Modal],
mixins: [FormMixin],
components: {
toggler,
@ -38,7 +38,7 @@ export default {
mounted: function() {
this.$root.$on('field-change', this.handleValidChange)
this.$on('modalOpen', this.handleModalOpen)
this.$root.$on('modalOpen', this.handleModalOpen)
},
methods: {

13
js/mixins/modal.js
View File

@ -17,8 +17,21 @@ export default {
filter: idSelector,
})
},
// TODO: activeModal should be tracked on the root
handleModalOpen: function(event) {
if (!event.isOpen) {
this.activeModal = null
}
},
},
mounted: function() {
this.$root.$on('modalOpen', this.handleModalOpen)
},
data: function() {
// TODO: only the root component should know about the activeModal
return {
activeModal: null,
allyHandler: null,

2
templates/components/modal.html
View File

@ -1,7 +1,7 @@
{% from "components/icon.html" import Icon %}
{% macro Modal(name, dismissable=False, classes="") -%}
<div v-show="activeModal === '{{name}}'" v-cloak>
<div v-show="this.$root.activeModal === '{{name}}'" v-cloak>
<div id='modal--{{name}}' class='modal {% if dismissable %}modal--dismissable{% endif%} {{ classes }}'>
<div class='modal__container'>
<div class='modal__dialog' role='dialog' aria-modal='true'>

35
templates/components/multi_step_modal_form.html
View File

@ -25,30 +25,21 @@
</div>
{% endmacro %}
{% macro MultiStepModalForm(name, form, form_action, steps, button_icon="", button_text="", link_classes="icon-link modal-link", dismissable=False) -%}
{% macro MultiStepModalForm(name, form, form_action, steps, dismissable=False) -%}
{% set step_count = steps|length %}
<multi-step-modal-form inline-template :steps={{ step_count }}>
<div>
<a class='{{ link_classes }}' v-on:click="openModal('{{ name }}')">
{{ button_text }}
{% if button_icon != "" %}
{{ Icon(button_icon) }}
{% endif %}
</a>
{% call Modal(name=name, dismissable=dismissable, classes="wide") %}
<form id="{{ name }}" action="{{ form_action }}" method="POST" v-on:submit="handleSubmit">
{{ form.csrf_token }}
<div v-if="activeModal === '{{ name }}'">
{% for step in steps %}
<div class="modal__form" v-show="step === {{ loop.index0 }}">
{{ FormSteps(step_count, loop.index) }}
{{ step }}
</div>
{% endfor %}
{% call Modal(name=name, dismissable=dismissable, classes="wide") %}
<form id="{{ name }}" action="{{ form_action }}" method="POST" v-on:submit="handleSubmit">
{{ form.csrf_token }}
<div v-if="this.$root.activeModal === '{{ name }}'">
{% for step in steps %}
<div class="modal__form" v-show="step === {{ loop.index0 }}">
{{ FormSteps(step_count, loop.index) }}
{{ step }}
</div>
</form>
{% endcall %}
</div>
{% endfor %}
</div>
</form>
{% endcall %}
</multi-step-modal-form>
{% endmacro %}

2
templates/fragments/admin/add_new_portfolio_member.html
View File

@ -80,6 +80,4 @@
member_form,
url_for("portfolios.create_member", portfolio_id=portfolio.id),
[step_one, step_two],
button_text=("portfolios.admin.add_new_member" | translate),
button_icon="plus",
) }}

5
templates/fragments/admin/change_ppoc.html
View File

@ -69,14 +69,15 @@
{% endset %}
<div class="flex-reverse-row">
<a class="usa-button-primary" v-on:click="openModal('change-ppoc-form')">
{{ "fragments.ppoc.update_btn" | translate }}
</a>
{{
MultiStepModalForm(
'change-ppoc-form',
assign_ppoc_form,
form_action=url_for("portfolios.update_ppoc", portfolio_id=portfolio.id),
steps=[step_one, step_two],
button_text=("fragments.ppoc.update_btn" | translate),
link_classes="usa-button-primary"
)
}}
</div>

5
templates/fragments/admin/portfolio_members.html
View File

@ -66,6 +66,11 @@
{% if user_can(permissions.CREATE_PORTFOLIO_USERS) %}
{% include "fragments/admin/add_new_portfolio_member.html" %}
<a class="icon-link modal-link" v-on:click="openModal('add-port-mem')">
{{ "portfolios.admin.add_new_member" | translate }}
{{ Icon("plus") }}
</a>
{% endif %}
</div>
</div>

15
templates/fragments/applications/add_new_application_member.html
View File

@ -1,15 +0,0 @@
{% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
{% import "fragments/applications/new_member_modal_content.html" as member_steps %}
{{ MultiStepModalForm(
name='add-app-mem',
form=new_member_form,
form_action=url_for("applications.create_member", application_id=application.id),
steps=[
member_steps.MemberStepOne(new_member_form),
member_steps.MemberStepTwo(new_member_form, application)
],
button_text=("portfolios.admin.add_new_member" | translate),
button_icon="plus",
) }}

80
templates/fragments/applications/edit_team.html
View File

@ -1,48 +1,46 @@
{% from "components/options_input.html" import OptionsInput %}
<form method='POST' id="team" action='{{ url_for("applications.update_team", application_id=application.id) }}' autocomplete="off" enctype="multipart/form-data">
{{ team_form.csrf_token }}
{{ team_form.csrf_token }}
{% for member_form in team_form.members %}
{% set environment_roles_form = member_form.environment_roles %}
{% set permissions_form = member_form.permission_sets %}
{% for member_form in team_form.members %}
{% set environment_roles_form = member_form.environment_roles %}
{% set permissions_form = member_form.permission_sets %}
<toggler inline-template>
<li class="accordion-table__item">
<div class="accordion-table__item-content row">
<div class="col col--grow">{{ member_form.user_name.data }}</div>
<div class="col col--grow">{{ OptionsInput(permissions_form.perms_team_mgmt, label=False, watch=True) }}</div>
<div class="col col--grow">{{ OptionsInput(permissions_form.perms_env_mgmt, label=False, watch=True) }}</div>
<div class="col col--grow">{{ OptionsInput(permissions_form.perms_del_env, label=False, watch=True) }}</div>
<div class="col col--grow icon-link icon-link--large accordion-table__item__toggler">
{% set open_html %}
{{ "portfolios.applications.team_settings.environments" | translate }} ({{ environment_roles_form | length }}) {{ Icon('caret_down') }}
{% endset %}
<toggler inline-template>
<li class="accordion-table__item">
<div class="accordion-table__item-content row">
<div class="col col--grow">{{ member_form.user_name.data }}</div>
<div class="col col--grow">{{ OptionsInput(permissions_form.perms_team_mgmt, label=False, watch=True) }}</div>
<div class="col col--grow">{{ OptionsInput(permissions_form.perms_env_mgmt, label=False, watch=True) }}</div>
<div class="col col--grow">{{ OptionsInput(permissions_form.perms_del_env, label=False, watch=True) }}</div>
<div class="col col--grow icon-link icon-link--large accordion-table__item__toggler">
{% set open_html %}
{{ "portfolios.applications.team_settings.environments" | translate }} ({{ environment_roles_form | length }}) {{ Icon('caret_down') }}
{% endset %}
{% set close_html %}
{{ "portfolios.applications.team_settings.environments" | translate }} ({{ environment_roles_form | length }}) {{ Icon('caret_up') }}
{% endset %}
{% set close_html %}
{{ "portfolios.applications.team_settings.environments" | translate }} ({{ environment_roles_form | length }}) {{ Icon('caret_up') }}
{% endset %}
{{
ToggleButton(
open_html=open_html,
close_html=close_html,
section_name="environments"
)
}}
</div>
{{
ToggleButton(
open_html=open_html,
close_html=close_html,
section_name="environments"
)
}}
</div>
{% call ToggleSection(section_name="environments") %}
<ul>
{% for environment_form in environment_roles_form %}
<li class="accordion-table__item__expanded">
{{ environment_form.environment_name.data }}
</li>
{% endfor %}
</ul>
{% endcall %}
{{ member_form.user_id() }}
</li>
</toggler>
{% endfor %}
</form>
</div>
{% call ToggleSection(section_name="environments") %}
<ul>
{% for environment_form in environment_roles_form %}
<li class="accordion-table__item__expanded">
{{ environment_form.environment_name.data }}
</li>
{% endfor %}
</ul>
{% endcall %}
{{ member_form.user_id() }}
</li>
</toggler>
{% endfor %}

127
templates/portfolios/applications/team.html
View File

@ -23,16 +23,18 @@
{% endif %}
{% if user_can_invite %}
{% set new_member_modal_name = "add-app-mem" %}
<a class="usa-button usa-button-big" v-on:click="openModal('{{ new_member_modal_name }}')">
{{ "portfolios.applications.team_settings.blank_slate.action_label" | translate }}
</a>
{{ MultiStepModalForm(
name='add-app-mem',
name=new_member_modal_name,
form=new_member_form,
form_action=url_for("applications.create_member", application_id=application.id),
steps=[
member_steps.MemberStepOne(new_member_form),
member_steps.MemberStepTwo(new_member_form, application)
],
button_text=("portfolios.applications.team_settings.blank_slate.action_label" | translate),
link_classes="usa-button usa-button-big"
) }}
{% endif %}
</div>
@ -44,64 +46,81 @@
<section class="member-list application-list" id="application-members">
<base-form inline-template>
<div class='responsive-table-wrapper panel'>
{% if g.matchesPath("application-members") %}
{% include "fragments/flash.html" %}
{% endif %}
<header>
<div class="responsive-table-wrapper__header">
<div class="responsive-table-wrapper__title row">
<div class="h3">
{{ "portfolios.applications.team_settings.section.title" | translate({ "application_name": application.name }) }}
<form method='POST' id="team" action='{{ url_for("applications.update_team", application_id=application.id) }}' autocomplete="off" enctype="multipart/form-data">
<div class='responsive-table-wrapper panel'>
{% if g.matchesPath("application-members") %}
{% include "fragments/flash.html" %}
{% endif %}
<header>
<div class="responsive-table-wrapper__header">
<div class="responsive-table-wrapper__title row">
<div class="h3">
{{ "portfolios.applications.team_settings.section.title" | translate({ "application_name": application.name }) }}
</div>
<a class="icon-link">
{{ Icon('info') }}
{{ "portfolios.admin.settings_info" | translate }}
</a>
</div>
<a class="icon-link">
{{ Icon('info') }}
{{ "portfolios.admin.settings_info" | translate }}
</a>
</div>
</header>
</header>
<div class="accordion-table accordion-table-list">
<div class="accordion-table__head row">
<div class="col col--grow">
{{ "common.name" | translate }}
<div class="accordion-table accordion-table-list">
<div class="accordion-table__head row">
<div class="col col--grow">
{{ "common.name" | translate }}
</div>
<div class="col col--grow">
{{ "portfolios.applications.team_settings.section.table.team_management" | translate }}
</div>
<div class="col col--grow">
{{ "portfolios.applications.team_settings.section.table.environment_management" | translate }}
</div>
<div class="col col--grow">
{{ "portfolios.applications.team_settings.section.table.delete_access" | translate }}
</div>
<div class="col col--grow">
&nbsp;
</div>
</div>
<div class="col col--grow">
{{ "portfolios.applications.team_settings.section.table.team_management" | translate }}
</div>
<div class="col col--grow">
{{ "portfolios.applications.team_settings.section.table.environment_management" | translate }}
</div>
<div class="col col--grow">
{{ "portfolios.applications.team_settings.section.table.delete_access" | translate }}
</div>
<div class="col col--grow">
&nbsp;
<ul class="accordion-table__items">
{% if user_can(permissions.EDIT_APPLICATION_MEMBER) %}
{% include "fragments/applications/edit_team.html" %}
{% elif user_can(permissions.VIEW_APPLICATION_MEMBER) %}
{% include "fragments/applications/read_only_team.html" %}
{% endif %}
</ul>
</div>
<div class="panel__footer">
<div class="action-group save">
{% if user_can(permissions.EDIT_APPLICATION_MEMBER) %}
{{ SaveButton(text=('common.save' | translate), element="input", form="team") }}
{% endif %}
{% set new_member_modal_name = "add-app-mem" %}
{% if user_can(permissions.CREATE_APPLICATION_MEMBER) %}
<a class="icon-link modal-link" v-on:click="openModal('{{ new_member_modal_name }}')">
{{ "portfolios.admin.add_new_member" | translate }}
{{ Icon("plus") }}
</a>
{% endif %}
</div>
</div>
<ul class="accordion-table__items">
{% if user_can(permissions.EDIT_APPLICATION_MEMBER) %}
{% include "fragments/applications/edit_team.html" %}
{% elif user_can(permissions.VIEW_APPLICATION_MEMBER) %}
{% include "fragments/applications/read_only_team.html" %}
{% endif %}
</ul>
</div>
<div class="panel__footer">
<div class="action-group save">
{% if user_can(permissions.EDIT_APPLICATION_MEMBER) %}
{{ SaveButton(text=('common.save' | translate), element="input", form="team") }}
{% endif %}
{% if user_can(permissions.CREATE_APPLICATION_MEMBER) %}
{% include "fragments/applications/add_new_application_member.html" %}
{% endif %}
</div>
</div>
</div>
</form>
</base-form>
{% if user_can(permissions.CREATE_APPLICATION_MEMBER) %}
{% import "fragments/applications/new_member_modal_content.html" as member_steps %}
{{ MultiStepModalForm(
name=new_member_modal_name,
form=new_member_form,
form_action=url_for("applications.create_member", application_id=application.id),
steps=[
member_steps.MemberStepOne(new_member_form),
member_steps.MemberStepTwo(new_member_form, application)
],
) }}
{% endif %}
</section>
{% endif %}
{% endblock %}