diff --git a/js/components/forms/multi_step_modal_form.js b/js/components/forms/multi_step_modal_form.js index f0742336..3ef31b81 100644 --- a/js/components/forms/multi_step_modal_form.js +++ b/js/components/forms/multi_step_modal_form.js @@ -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: { diff --git a/js/mixins/modal.js b/js/mixins/modal.js index b865097d..1a2fec6c 100644 --- a/js/mixins/modal.js +++ b/js/mixins/modal.js @@ -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, diff --git a/templates/components/modal.html b/templates/components/modal.html index c7b582ff..cb9426c1 100644 --- a/templates/components/modal.html +++ b/templates/components/modal.html @@ -1,7 +1,7 @@ {% from "components/icon.html" import Icon %} {% macro Modal(name, dismissable=False, classes="") -%} -
+
{% 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 %} -
- - {{ button_text }} - - {% if button_icon != "" %} - {{ Icon(button_icon) }} - {% endif %} - - {% call Modal(name=name, dismissable=dismissable, classes="wide") %} -
- {{ form.csrf_token }} -
- {% for step in steps %} -
- {{ FormSteps(step_count, loop.index) }} - {{ step }} -
- {% endfor %} + {% call Modal(name=name, dismissable=dismissable, classes="wide") %} + + {{ form.csrf_token }} +
+ {% for step in steps %} +
+ {{ FormSteps(step_count, loop.index) }} + {{ step }}
- - {% endcall %} -
+ {% endfor %} +
+ + {% endcall %} {% endmacro %} diff --git a/templates/fragments/admin/add_new_portfolio_member.html b/templates/fragments/admin/add_new_portfolio_member.html index aaab74db..85db3a12 100644 --- a/templates/fragments/admin/add_new_portfolio_member.html +++ b/templates/fragments/admin/add_new_portfolio_member.html @@ -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", ) }} diff --git a/templates/fragments/admin/change_ppoc.html b/templates/fragments/admin/change_ppoc.html index d42782ac..0d16dbfa 100644 --- a/templates/fragments/admin/change_ppoc.html +++ b/templates/fragments/admin/change_ppoc.html @@ -69,14 +69,15 @@ {% endset %}
+ + {{ "fragments.ppoc.update_btn" | translate }} + {{ 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" ) }}
diff --git a/templates/fragments/admin/portfolio_members.html b/templates/fragments/admin/portfolio_members.html index 98bd8d13..5b47009c 100644 --- a/templates/fragments/admin/portfolio_members.html +++ b/templates/fragments/admin/portfolio_members.html @@ -66,6 +66,11 @@ {% if user_can(permissions.CREATE_PORTFOLIO_USERS) %} {% include "fragments/admin/add_new_portfolio_member.html" %} + + {{ "portfolios.admin.add_new_member" | translate }} + + {{ Icon("plus") }} + {% endif %}
diff --git a/templates/fragments/applications/add_new_application_member.html b/templates/fragments/applications/add_new_application_member.html deleted file mode 100644 index b47ff87c..00000000 --- a/templates/fragments/applications/add_new_application_member.html +++ /dev/null @@ -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", - ) }} diff --git a/templates/fragments/applications/edit_team.html b/templates/fragments/applications/edit_team.html index 2283c70e..d5d9f300 100644 --- a/templates/fragments/applications/edit_team.html +++ b/templates/fragments/applications/edit_team.html @@ -1,48 +1,46 @@ {% from "components/options_input.html" import OptionsInput %} -
- {{ 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 %} - -
  • -
    -
    {{ member_form.user_name.data }}
    -
    {{ OptionsInput(permissions_form.perms_team_mgmt, label=False, watch=True) }}
    -
    {{ OptionsInput(permissions_form.perms_env_mgmt, label=False, watch=True) }}
    -
    {{ OptionsInput(permissions_form.perms_del_env, label=False, watch=True) }}
    -
    - {% set open_html %} - {{ "portfolios.applications.team_settings.environments" | translate }} ({{ environment_roles_form | length }}) {{ Icon('caret_down') }} - {% endset %} + +
  • +
    +
    {{ member_form.user_name.data }}
    +
    {{ OptionsInput(permissions_form.perms_team_mgmt, label=False, watch=True) }}
    +
    {{ OptionsInput(permissions_form.perms_env_mgmt, label=False, watch=True) }}
    +
    {{ OptionsInput(permissions_form.perms_del_env, label=False, watch=True) }}
    +
    + {% 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" - ) - }} -
    + {{ + ToggleButton( + open_html=open_html, + close_html=close_html, + section_name="environments" + ) + }}
    - {% call ToggleSection(section_name="environments") %} -
      - {% for environment_form in environment_roles_form %} -
    • - {{ environment_form.environment_name.data }} -
      • - {% endfor %} -
    - {% endcall %} - {{ member_form.user_id() }} -
    • -     - {% endfor %} -
    +
    + {% call ToggleSection(section_name="environments") %} + + {% endcall %} + {{ member_form.user_id() }} + + +{% endfor %} diff --git a/templates/portfolios/applications/team.html b/templates/portfolios/applications/team.html index a9d22924..c7270c05 100644 --- a/templates/portfolios/applications/team.html +++ b/templates/portfolios/applications/team.html @@ -23,16 +23,18 @@ {% endif %} {% if user_can_invite %} + {% set new_member_modal_name = "add-app-mem" %} + + {{ "portfolios.applications.team_settings.blank_slate.action_label" | translate }} + {{ 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 %}
    @@ -44,64 +46,81 @@
    -
    - {% if g.matchesPath("application-members") %} - {% include "fragments/flash.html" %} - {% endif %} -
    -
    -
    -
    - {{ "portfolios.applications.team_settings.section.title" | translate({ "application_name": application.name }) }} +
    +
    + {% if g.matchesPath("application-members") %} + {% include "fragments/flash.html" %} + {% endif %} +
    +
    +
    +
    + {{ "portfolios.applications.team_settings.section.title" | translate({ "application_name": application.name }) }} +
    + + {{ Icon('info') }} + {{ "portfolios.admin.settings_info" | translate }} +
    - - {{ Icon('info') }} - {{ "portfolios.admin.settings_info" | translate }} - -
    -
    +
    -
    -
    -
    - {{ "common.name" | translate }} +
    +
    +
    + {{ "common.name" | translate }} +
    +
    + {{ "portfolios.applications.team_settings.section.table.team_management" | translate }} +
    +
    + {{ "portfolios.applications.team_settings.section.table.environment_management" | translate }} +
    +
    + {{ "portfolios.applications.team_settings.section.table.delete_access" | translate }} +
    +
    +   +
    -
    - {{ "portfolios.applications.team_settings.section.table.team_management" | translate }} -
    -
    - {{ "portfolios.applications.team_settings.section.table.environment_management" | translate }} -
    -
    - {{ "portfolios.applications.team_settings.section.table.delete_access" | translate }} -
    -
    -   +
      + {% 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 %} +
    +
    + +
    +
    + {% 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) %} + + {{ "portfolios.admin.add_new_member" | translate }} + {{ Icon("plus") }} + + {% endif %}
    -
      - {% 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 %} -
    - -
    -
    - {% 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 %} -
    -
    - -
    + + {% 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 %}
    {% endif %} {% endblock %}