From 457b1f9523c73466d767fcd366c859b62518729f Mon Sep 17 00:00:00 2001 From: dandds Date: Wed, 8 May 2019 11:16:56 -0400 Subject: [PATCH 1/2] 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="") -%} -
+
@@ -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 %} From 4afa88a3b27c0536be6d3346c7d65cdc0a2513c4 Mon Sep 17 00:00:00 2001 From: dandds Date: Wed, 8 May 2019 11:24:13 -0400 Subject: [PATCH 2/2] Move application team permissions form. The submit input needs to be inside the form to work on IE 10. --- .../fragments/applications/edit_team.html | 80 ++++++------- templates/portfolios/applications/team.html | 112 +++++++++--------- 2 files changed, 95 insertions(+), 97 deletions(-) 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) }}
    -
  • +
    +
    {{ 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) }}
    + + {{ + 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 d08e6e0b..c7270c05 100644 --- a/templates/portfolios/applications/team.html +++ b/templates/portfolios/applications/team.html @@ -46,68 +46,68 @@
    -
    - {% 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) %} - {% 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.CREATE_APPLICATION_MEMBER) %} {% import "fragments/applications/new_member_modal_content.html" as member_steps %}