From d4facd1e36e166fe5924f88016909d48fe6f3957 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Wed, 13 Nov 2019 15:42:01 -0500
Subject: [PATCH] Update emitters for vue components on portfolio settings page

---
 js/components/forms/multi_step_modal_form.js  | 34 ++-------
 .../fragments/add_new_portfolio_member.html   |  2 +-
 .../portfolios/fragments/change_ppoc.html     |  2 +-
 .../fragments/portfolio_members.html          | 71 +++++++++----------
 4 files changed, 41 insertions(+), 68 deletions(-)

diff --git a/js/components/forms/multi_step_modal_form.js b/js/components/forms/multi_step_modal_form.js
index 968e20cb..f4b73b5d 100644
--- a/js/components/forms/multi_step_modal_form.js
+++ b/js/components/forms/multi_step_modal_form.js
@@ -1,4 +1,4 @@
-import FormMixin from '../../mixins/form'
+import FormMixin from '../../mixins/form_mixin'
 import textinput from '../text_input'
 import optionsinput from '../options_input'
 import checkboxinput from '../checkbox_input'
@@ -25,23 +25,16 @@ export default {
   data: function() {
     return {
       step: 0,
-      fields: {},
-      invalid: true,
     }
   },
 
-  created: function() {
-    this.$root.$on('field-mount', this.handleFieldMount)
-  },
-
   mounted: function() {
-    this.$root.$on('field-change', this.handleValidChange)
     this.$root.$on('modalOpen', this.handleModalOpen)
   },
 
   methods: {
     next: function() {
-      if (this._checkIsValid()) {
+      if (this.validateFields()) {
         this.step += 1
       }
     },
@@ -49,27 +42,10 @@ export default {
       this.step -= 1
     },
     goToStep: function(step) {
-      if (this._checkIsValid()) {
+      if (this.validateFields()) {
         this.step = step
       }
     },
-    handleValidChange: function(event) {
-      const { name, valid, parent_uid } = event
-      // check that this field is in the modal and not on some other form
-      if (parent_uid === this._uid) {
-        this.fields[name] = valid
-        this._checkIsValid()
-      }
-    },
-    _checkIsValid: function() {
-      const valid = !Object.values(this.fields).some(field => field === false)
-      this.invalid = !valid
-      return valid
-    },
-    handleFieldMount: function(event) {
-      const { name, optional } = event
-      this.fields[name] = optional
-    },
     handleModalOpen: function(_bool) {
       this.step = 0
     },
@@ -77,12 +53,10 @@ export default {
       return this.step === this.steps - 1
     },
     handleSubmit: function(e) {
-      if (this.invalid || !this._onLastPage()) {
+      if (!this.validateFields() || !this._onLastPage()) {
         e.preventDefault()
         this.next()
       }
     },
   },
-
-  computed: {},
 }
diff --git a/templates/portfolios/fragments/add_new_portfolio_member.html b/templates/portfolios/fragments/add_new_portfolio_member.html
index f2e0b4be..06ca6038 100644
--- a/templates/portfolios/fragments/add_new_portfolio_member.html
+++ b/templates/portfolios/fragments/add_new_portfolio_member.html
@@ -45,7 +45,7 @@
     <input
         type='button'
         v-on:click="next()"
-        v-bind:disabled="invalid"
+        v-bind:disabled="!canSave"
         class='action-group__action usa-button usa-button-primary'
         value='Next'>
     <a class='action-group__action' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a>
diff --git a/templates/portfolios/fragments/change_ppoc.html b/templates/portfolios/fragments/change_ppoc.html
index 7500e20d..1eb9a03c 100644
--- a/templates/portfolios/fragments/change_ppoc.html
+++ b/templates/portfolios/fragments/change_ppoc.html
@@ -32,7 +32,7 @@
     <input
         type='button'
         v-on:click="next()"
-        v-bind:disabled="invalid"
+        v-bind:disabled="!canSave"
         class='action-group__action usa-button'
         value='{{ "fragments.ppoc.assign_user_button_text" | translate }}'>
     <a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('change-ppoc-form')">
diff --git a/templates/portfolios/fragments/portfolio_members.html b/templates/portfolios/fragments/portfolio_members.html
index e6980126..4c29b509 100644
--- a/templates/portfolios/fragments/portfolio_members.html
+++ b/templates/portfolios/fragments/portfolio_members.html
@@ -4,11 +4,11 @@
 {% from "components/alert.html" import Alert %}
 
 <section class="member-list" id="portfolio-members">
-  <base-form inline-template>
-    <div class='responsive-table-wrapper panel accordion-table'>
-    {% if g.matchesPath("portfolio-members") %}
-      {% include "fragments/flash.html" %}
-    {% endif %}
+  <div class='responsive-table-wrapper panel accordion-table'>
+  {% if g.matchesPath("portfolio-members") %}
+    {% include "fragments/flash.html" %}
+  {% endif %}
+    <base-form inline-template>
       <form method='POST' id="member-perms" action='{{ url_for("portfolios.edit_members", portfolio_id=portfolio.id) }}' autocomplete="off" enctype="multipart/form-data">
       {{ member_perms_form.csrf_token }}
 
@@ -72,35 +72,34 @@
           </div>
         </div>
       </form>
-      {% if user_can(permissions.CREATE_PORTFOLIO_USERS) %}
-        {% include "portfolios/fragments/add_new_portfolio_member.html" %}
-      {% endif %}
-
-      {% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
-        {% for subform in member_perms_form.members_permissions %}
-          {% set modal_id = "portfolio_id_{}_user_id_{}".format(portfolio.id, subform.member_id.data) %}
-          {% call Modal(name=modal_id, dismissable=False) %}
-            <h1>{{ "portfolios.admin.alert_header" | translate }}</h1>
-            <hr>
-            {{
-              Alert(
-                title="portfolios.admin.alert_title" | translate,
-                message="portfolios.admin.alert_message" | translate,
-                level="warning"
-              )
-            }}
-            <div class="action-group">
-              <form method="POST" action="{{ url_for('portfolios.remove_member', portfolio_id=portfolio.id, portfolio_role_id=subform.member_id.data)}}">
-                {{ member_perms_form.csrf_token }}
-                <button class="usa-button usa-button-danger">
-                  {{ "portfolios.members.archive_button" | translate }}
-                </button>
-              </form>
-              <a v-on:click="closeModal('{{ modal_id }}')" class="action-group__action icon-link icon-link--default">{{ "common.cancel" | translate }}</a>
-            </div>
-          {% endcall %}
-        {% endfor %}
-      {% endif %}
-    </div>
-  </base-form>
+    </base-form>
+    {% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
+      {% for subform in member_perms_form.members_permissions %}
+        {% set modal_id = "portfolio_id_{}_user_id_{}".format(portfolio.id, subform.member_id.data) %}
+        {% call Modal(name=modal_id, dismissable=False) %}
+          <h1>{{ "portfolios.admin.alert_header" | translate }}</h1>
+          <hr>
+          {{
+            Alert(
+              title="portfolios.admin.alert_title" | translate,
+              message="portfolios.admin.alert_message" | translate,
+              level="warning"
+            )
+          }}
+          <div class="action-group">
+            <form method="POST" action="{{ url_for('portfolios.remove_member', portfolio_id=portfolio.id, portfolio_role_id=subform.member_id.data)}}">
+              {{ member_perms_form.csrf_token }}
+              <button class="usa-button usa-button-danger">
+                {{ "portfolios.members.archive_button" | translate }}
+              </button>
+            </form>
+            <a v-on:click="closeModal('{{ modal_id }}')" class="action-group__action icon-link icon-link--default">{{ "common.cancel" | translate }}</a>
+          </div>
+        {% endcall %}
+      {% endfor %}
+    {% endif %}
+  </div>
+  {% if user_can(permissions.CREATE_PORTFOLIO_USERS) %}
+    {% include "portfolios/fragments/add_new_portfolio_member.html" %}
+  {% endif %}
 </section>