Merge pull request #779 from dod-ccpo/disable-next-button

Disable Next Button in Modal

js/components/checkbox_input.js

@@ -1,4 +1,4 @@
-import { emitFieldChange } from '../lib/emitters'
+import { emitEvent } from '../lib/emitters'
 
 export default {
   name: 'checkboxinput',
@@ -9,7 +9,10 @@ export default {
 
   methods: {
     onInput: function(e) {
-      emitFieldChange(this, { value: e.target.checked, name: this.name })
+      emitEvent('field-change', this, {
+        value: e.target.checked,
+        name: this.name,
+      })
     },
   },
 }

js/components/date_selector.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import { getDaysInMonth } from 'date-fns'
-import { emitFieldChange } from '../lib/emitters'
+import { emitEvent } from '../lib/emitters'
 
 var paddedNumber = function(number) {
   if ((number + '').length === 1) {
@@ -136,7 +136,7 @@ export default {
 
   methods: {
     _emitChange: function(name, value, valid) {
-      emitFieldChange(this, { value, name })
+      emitEvent('field-change', this, { value, name })
     },
   },
 

js/components/forms/multi_step_modal_form.js

@@ -51,9 +51,12 @@ export default {
       }
     },
     handleValidChange: function(event) {
-      const { name, valid } = event
-      this.fields[name] = valid
-      this._checkIsValid()
+      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)

js/components/multi_checkbox_input.js

@@ -1,6 +1,6 @@
 import optionsinput from '../components/options_input'
 import textinput from '../components/text_input'
-import { emitFieldChange } from '../lib/emitters'
+import { emitEvent } from '../lib/emitters'
 
 export default {
   name: 'multicheckboxinput',
@@ -41,7 +41,10 @@ export default {
 
   methods: {
     onInput: function(e) {
-      emitFieldChange(this, { value: e.target.value, name: this.name })
+      emitEvent('field-change', this, {
+        value: e.target.value,
+        name: this.name,
+      })
       this.showError = false
       this.showValid = true
     },

js/components/options_input.js

@@ -1,4 +1,4 @@
-import { emitFieldChange } from '../lib/emitters'
+import { emitEvent } from '../lib/emitters'
 
 export default {
   name: 'optionsinput',
@@ -23,7 +23,10 @@ export default {
 
   methods: {
     onInput: function(e) {
-      emitFieldChange(this, { value: e.target.value, name: this.name })
+      emitEvent('field-change', this, {
+        value: e.target.value,
+        name: this.name,
+      })
       this.showError = false
       this.showValid = true
     },

js/components/text_input.js

@@ -1,7 +1,7 @@
 import MaskedInput, { conformToMask } from 'vue-text-mask'
 import inputValidations from '../lib/input_validations'
 import { formatDollars } from '../lib/dollars'
-import { emitFieldChange } from '../lib/emitters'
+import { emitEvent } from '../lib/emitters'
 
 export default {
   name: 'textinput',
@@ -67,9 +67,9 @@ export default {
   },
 
   created: function() {
-    this.$root.$emit('field-mount', {
-      name: this.name,
+    emitEvent('field-mount', this, {
       optional: this.optional,
+      name: this.name,
     })
   },
 
@@ -125,7 +125,7 @@ export default {
       this.showValid = this.value != '' && valid
 
       // Emit a change event
-      emitFieldChange(this, {
+      emitEvent('field-change', this, {
         value: this._rawValue(value),
         valid,
         name: this.name,

js/lib/emitters.js

@@ -1,5 +1,5 @@
-export const emitFieldChange = (el, data) => {
-  el.$root.$emit('field-change', {
+export const emitEvent = (event_type, el, data) => {
+  el.$root.$emit(event_type, {
     ...data,
     parent_uid: el.$parent && el.$parent._uid,
   })

templates/fragments/admin/members_edit.html

@@ -1,4 +1,4 @@
-{% from "components/confirmation_button.html" import ConfirmationButton %}
+{% from "components/options_input.html" import OptionsInput %}
 
 {% for subform in member_perms_form.members_permissions %}
   {% set modal_id = "portfolio_id_{}_user_id_{}".format(portfolio.id, subform.user_id.data) %}

templates/fragments/admin/portfolio_members.html

@@ -1,7 +1,5 @@
 {% from "components/icon.html" import Icon %}
-{% from "components/options_input.html" import OptionsInput %}
 {% from 'components/save_button.html' import SaveButton %}
-
 {% from "components/modal.html" import Modal %}
 {% from "components/alert.html" import Alert %}
 

templates/portfolios/admin.html

@@ -1,9 +1,7 @@
 {% extends "portfolios/base.html" %}
 
 {% from "components/pagination.html" import Pagination %}
-{% from "components/icon.html" import Icon %}
 {% from "components/text_input.html" import TextInput %}
-{% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
 {% from 'components/save_button.html' import SaveButton %}
 
 {% set secondary_breadcrumb = "navigation.portfolio_navigation.portfolio_admin" | translate %}