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.
This commit is contained in:
parent
f52f2a9ade
commit
457b1f9523
@ -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: {
|
||||
|
@ -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,
|
||||
|
@ -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'>
|
||||
|
@ -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 %}
|
||||
|
@ -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",
|
||||
) }}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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",
|
||||
) }}
|
@ -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>
|
||||
@ -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" %}
|
||||
<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>
|
||||
|
||||
</div>
|
||||
</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 %}
|
||||
|
Loading…
x
Reference in New Issue
Block a user