Remove old field-mount and field-change emitters and listeners.

Replace FormMixin with new functionality.

js/components/checkbox_input.js

@@ -1,5 +1,3 @@
-import { emitEvent } from '../lib/emitters'
-
 export default {
   name: 'checkboxinput',
 
@@ -15,22 +13,9 @@ export default {
     }
   },
 
-  created: function() {
-    emitEvent('field-mount', this, {
-      optional: this.optional,
-      name: this.name,
-      valid: this.optional || this.isChecked,
-    })
-  },
-
   methods: {
-    onInput: function(e) {
+    onInput: function() {
       this.$parent.$emit('field-change')
-      emitEvent('field-change', this, {
-        value: e.target.checked,
-        name: this.name,
-        valid: this.optional || this.isChecked,
-      })
     },
   },
 

js/components/date_selector.js

@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import { getDaysInMonth } from 'date-fns'
-import { emitEvent } from '../lib/emitters'
 
 let paddedNumber = function(number) {
   if ((number + '').length === 1) {
@@ -37,14 +36,6 @@ export default {
     }
   },
 
-  created: function() {
-    emitEvent('field-mount', this, {
-      optional: this.optional,
-      name: this.name,
-      valid: this.isDateValid,
-    })
-  },
-
   watch: {
     month(newMonth, oldMonth) {
       if (!!newMonth && newMonth.length > 2) {
@@ -217,13 +208,7 @@ export default {
   },
 
   methods: {
-    onInput: function(e) {
-      emitEvent('field-change', this, {
-        value: this.formattedDate,
-        name: this.name,
-        valid: this.isDateValid,
-      })
-
+    onInput: function() {
       this.$parent.$emit('field-change', {
         value: this.formattedDate,
         name: this.name,

js/components/forms/base_form.js

@@ -2,7 +2,7 @@ import ally from 'ally.js'
 import stickybits from 'stickybits'
 
 import DateSelector from '../date_selector'
-import FormMixin from '../../mixins/form_mixin'
+import FormMixin from '../../mixins/form'
 import Modal from '../../mixins/modal'
 import MultiStepModalForm from './multi_step_modal_form'
 import checkboxinput from '../checkbox_input'

js/components/forms/multi_step_modal_form.js

@@ -1,4 +1,4 @@
-import FormMixin from '../../mixins/form_mixin'
+import FormMixin from '../../mixins/form'
 import textinput from '../text_input'
 import optionsinput from '../options_input'
 import checkboxinput from '../checkbox_input'

js/components/forms/to_form.js

@@ -2,7 +2,7 @@ import stickybits from 'stickybits'
 
 import checkboxinput from '../checkbox_input'
 import ClinFields from '../clin_fields'
-import FormMixin from '../../mixins/form_mixin'
+import FormMixin from '../../mixins/form'
 import textinput from '../text_input'
 import uploadinput from '../upload_input'
 

js/components/options_input.js

@@ -1,5 +1,3 @@
-import { emitEvent } from '../lib/emitters'
-
 export default {
   name: 'optionsinput',
 
@@ -21,14 +19,6 @@ export default {
     },
   },
 
-  created: function() {
-    emitEvent('field-mount', this, {
-      optional: this.optional,
-      name: this.name,
-      valid: this._isValid(this.value),
-    })
-  },
-
   data: function() {
     const showError = (this.initialErrors && this.initialErrors.length) || false
     return {
@@ -40,18 +30,8 @@ export default {
   },
 
   methods: {
-    onInput: function(e) {
-      this.showError = false
-      this.showValid = true
-      this.value = e.target.value
-
+    onInput: function() {
       this.$parent.$emit('field-change')
-      emitEvent('field-change', this, {
-        value: e.target.value,
-        name: this.name,
-        watch: this.watch,
-        valid: this._isValid(e.target.value),
-      })
     },
 
     _isValid: function(value) {

js/mixins/form.js

@@ -11,56 +11,30 @@ export default {
     },
   },
 
-  mounted: function() {
-    this.$root.$on('field-change', this.handleFieldChange)
-    this.$on('field-change', this.handleFieldChange)
+  data: function() {
+    return {
+      changed: this.hasChanges,
+      valid: false,
+    }
   },
 
-  created: function() {
-    this.$root.$on('field-mount', this.handleFieldMount)
-    this.$on('field-mount', this.handleFieldMount)
+  mounted: function() {
+    this.$on('field-change', this.handleFieldChange)
+    this.valid = this.validateFields()
   },
 
   methods: {
     handleFieldChange: function(event) {
-      const { value, name, valid, parent_uid, watch } = event
-      if (typeof this.fields[name] !== undefined) {
-        this.fields[name] = valid
-        if (parent_uid === this._uid || watch) {
+      this.valid = this.validateFields()
       this.changed = true
-        }
-      }
-
-      this.validateForm()
     },
 
-    handleChildFieldChange: function(event) {
-      // need to temporarily use this function because we will no longer be passing
-      // parent_uid or watch from the child components
-      const { name, valid } = event
-      if (typeof this.fields[name] !== 'undefined') {
-        this.fields[name] = valid
-        this.changed = true
-      }
-
-      this.validateForm()
-    },
-
-    handleFieldMount: function(event) {
-      const { name, optional, valid } = event
-      this.fields[name] = optional || valid
-      const formValid = this.validateForm()
-      this.invalid = !formValid
-    },
-
-    validateForm: function() {
-      const valid = !Object.values(this.fields).some(field => field === false)
-      this.invalid = !valid
-      return valid
+    validateFields: function() {
+      return this.$children.every(child => child.valid)
     },
 
     handleSubmit: function(event) {
-      if (this.invalid) {
+      if (!this.valid) {
         event.preventDefault()
       }
     },
@@ -68,23 +42,13 @@ export default {
 
   computed: {
     canSave: function() {
-      const formValid = !this.invalid
-
-      if (this.changed && formValid) {
+      if (this.changed && this.valid) {
         return true
-      } else if (this.enableSave && formValid) {
+      } else if (this.enableSave && this.valid) {
         return true
       } else {
         return false
       }
     },
   },
-
-  data: function() {
-    return {
-      changed: this.hasChanges,
-      fields: {},
-      invalid: true,
-    }
-  },
 }

js/mixins/form_mixin.js

@@ -1,54 +0,0 @@
-export default {
-  props: {
-    initialSelectedSection: String,
-    hasChanges: {
-      type: Boolean,
-      default: false,
-    },
-    enableSave: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  data: function() {
-    return {
-      changed: this.hasChanges,
-      valid: false,
-    }
-  },
-
-  mounted: function() {
-    this.$on('field-change', this.handleFieldChange)
-    this.valid = this.validateFields()
-  },
-
-  methods: {
-    handleFieldChange: function(event) {
-      this.valid = this.validateFields()
-      this.changed = true
-    },
-
-    validateFields: function() {
-      return this.$children.every(child => child.valid)
-    },
-
-    handleSubmit: function(event) {
-      if (!this.valid) {
-        event.preventDefault()
-      }
-    },
-  },
-
-  computed: {
-    canSave: function() {
-      if (this.changed && this.valid) {
-        return true
-      } else if (this.enableSave && this.valid) {
-        return true
-      } else {
-        return false
-      }
-    },
-  },
-}

js/mixins/text_input_mixin.js

@@ -1,7 +1,6 @@
 import MaskedInput, { conformToMask } from 'vue-text-mask'
 import inputValidations from '../lib/input_validations'
 import { formatDollars } from '../lib/dollars'
-import { emitEvent } from '../lib/emitters'
 
 export default {
   name: 'textinput',
@@ -78,14 +77,6 @@ export default {
     }
   },
 
-  created: function() {
-    emitEvent('field-mount', this, {
-      optional: this.optional,
-      name: this.name,
-      valid: this._isValid(this.value),
-    })
-  },
-
   methods: {
     // When user types a character
     onInput: function(e) {
@@ -144,12 +135,6 @@ export default {
         value: this._rawValue(value),
         name: this.name,
       })
-      emitEvent('field-change', this, {
-        value: this._rawValue(value),
-        valid: this._isValid(value),
-        name: this.name,
-        watch: this.watch,
-      })
     },
 
     _rawValue: function(value) {