From 457b1f9523c73466d767fcd366c859b62518729f Mon Sep 17 00:00:00 2001 From: dandds Date: Wed, 8 May 2019 11:16:56 -0400 Subject: [PATCH] Detangle the MultiStepModalForm modal-open link from the modal. In order to place modal forms in other places on the page (so that forms are not nested) it's necessary to move MultiStepModalForm links out of the component. They just need to refer to the correct modal. This PR also makes changes to ensure that the active modal is being unset everywhere correctly when a modal is closed. --- js/components/forms/multi_step_modal_form.js | 4 +-- js/mixins/modal.js | 13 +++++++ templates/components/modal.html | 2 +- .../components/multi_step_modal_form.html | 35 +++++++------------ .../admin/add_new_portfolio_member.html | 2 -- templates/fragments/admin/change_ppoc.html | 5 +-- .../fragments/admin/portfolio_members.html | 5 +++ .../add_new_application_member.html | 15 -------- templates/portfolios/applications/team.html | 27 +++++++++++--- 9 files changed, 60 insertions(+), 48 deletions(-) delete mode 100644 templates/fragments/applications/add_new_application_member.html 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/portfolios/applications/team.html b/templates/portfolios/applications/team.html index a9d22924..d08e6e0b 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 %}
@@ -94,14 +96,31 @@ {{ 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) %} - {% include "fragments/applications/add_new_application_member.html" %} + + {{ "portfolios.admin.add_new_member" | translate }} + + {{ Icon("plus") }} + {% 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 %}