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

App team form submit

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: {

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,

templates/components/modal.html

@@ -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'>

templates/components/multi_step_modal_form.html

@@ -25,21 +25,13 @@
   </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 }}'">
+        <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) }}
@@ -49,6 +41,5 @@
         </div>
       </form>
     {% endcall %}
-    </div>
   </multi-step-modal-form>
 {% endmacro %}

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",
   ) }}

templates/fragments/admin/change_ppoc.html

@@ -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>

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" %}
+            <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>

templates/fragments/applications/add_new_application_member.html

@@ -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",
-  ) }}

templates/fragments/applications/edit_team.html

@@ -1,6 +1,5 @@
 {% 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 }}
 
 {% for member_form in team_form.members %}
@@ -45,4 +44,3 @@
     </li>
   </toggler>
 {% endfor %}
-</form>

templates/portfolios/applications/team.html

@@ -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,6 +46,7 @@
 
     <section class="member-list application-list" id="application-members">
       <base-form inline-template>
+        <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" %}
@@ -94,14 +97,30 @@
                   {{ 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>
+        </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 %}