Merge pull request #1191 from dod-ccpo/vue-emitters-fix_part-3

Vue emitters fix part 3 - Portfolio Settings page

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

js/components/forms/poc.js

@@ -1,29 +0,0 @@
-import FormMixin from '../../mixins/form'
-import textinput from '../text_input'
-import checkboxinput from '../checkbox_input'
-
-export default {
-  name: 'poc',
-
-  mixins: [FormMixin],
-
-  components: {
-    textinput,
-    checkboxinput,
-  },
-
-  props: {
-    initialData: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  data: function() {
-    const { am_poc = false } = this.initialData
-
-    return {
-      am_poc,
-    }
-  },
-}

js/index.js

@@ -12,7 +12,6 @@ import optionsinput from './components/options_input'
 import multicheckboxinput from './components/multi_checkbox_input'
 import textinput from './components/text_input'
 import checkboxinput from './components/checkbox_input'
-import poc from './components/forms/poc'
 import toggler from './components/toggler'
 import ApplicationEnvironments from './components/forms/new_application/environments'
 import MultiStepModalForm from './components/forms/multi_step_modal_form'
@@ -47,7 +46,6 @@ const app = new Vue({
     multicheckboxinput,
     textinput,
     checkboxinput,
-    poc,
     ApplicationEnvironments,
     BudgetChart,
     SpendTable,

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>

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')">

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 %}
+    <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,10 +72,7 @@
           </div>
         </div>
       </form>
-      {% if user_can(permissions.CREATE_PORTFOLIO_USERS) %}
+    </base-form>
-        {% 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) %}
@@ -102,5 +99,7 @@
       {% endfor %}
     {% endif %}
   </div>
-  </base-form>
+  {% if user_can(permissions.CREATE_PORTFOLIO_USERS) %}
+    {% include "portfolios/fragments/add_new_portfolio_member.html" %}
+  {% endif %}
 </section>