From bc0382834b99173ec734d6634641f50153bffe7f Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Wed, 13 Nov 2019 15:59:43 -0500
Subject: [PATCH 1/3] Remove old field-mount and field-change emitters and
 listeners. Replace FormMixin with new functionality.

---
 js/components/checkbox_input.js              | 17 +----
 js/components/date_selector.js               | 17 +----
 js/components/forms/base_form.js             |  2 +-
 js/components/forms/multi_step_modal_form.js |  2 +-
 js/components/forms/to_form.js               |  2 +-
 js/components/options_input.js               | 22 +------
 js/mixins/form.js                            | 66 +++++---------------
 js/mixins/form_mixin.js                      | 54 ----------------
 js/mixins/text_input_mixin.js                | 15 -----
 9 files changed, 21 insertions(+), 176 deletions(-)
 delete mode 100644 js/mixins/form_mixin.js

diff --git a/js/components/checkbox_input.js b/js/components/checkbox_input.js
index 16e1a9b6..d161c26f 100644
--- a/js/components/checkbox_input.js
+++ b/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,
-      })
     },
   },
 
diff --git a/js/components/date_selector.js b/js/components/date_selector.js
index 70fc8f64..c96a97f8 100644
--- a/js/components/date_selector.js
+++ b/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,
diff --git a/js/components/forms/base_form.js b/js/components/forms/base_form.js
index 149304ae..699b4028 100644
--- a/js/components/forms/base_form.js
+++ b/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'
diff --git a/js/components/forms/multi_step_modal_form.js b/js/components/forms/multi_step_modal_form.js
index f4b73b5d..0dfcaba0 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_mixin'
+import FormMixin from '../../mixins/form'
 import textinput from '../text_input'
 import optionsinput from '../options_input'
 import checkboxinput from '../checkbox_input'
diff --git a/js/components/forms/to_form.js b/js/components/forms/to_form.js
index b041219e..a615013b 100644
--- a/js/components/forms/to_form.js
+++ b/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'
 
diff --git a/js/components/options_input.js b/js/components/options_input.js
index 06bb73d9..a0cf15cf 100644
--- a/js/components/options_input.js
+++ b/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) {
diff --git a/js/mixins/form.js b/js/mixins/form.js
index a0643f3a..45aa6261 100644
--- a/js/mixins/form.js
+++ b/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.changed = true
-        }
-      }
-
-      this.validateForm()
+      this.valid = this.validateFields()
+      this.changed = true
     },
 
-    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,
-    }
-  },
 }
diff --git a/js/mixins/form_mixin.js b/js/mixins/form_mixin.js
deleted file mode 100644
index 45aa6261..00000000
--- a/js/mixins/form_mixin.js
+++ /dev/null
@@ -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
-      }
-    },
-  },
-}
diff --git a/js/mixins/text_input_mixin.js b/js/mixins/text_input_mixin.js
index 229621f9..f859e362 100644
--- a/js/mixins/text_input_mixin.js
+++ b/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) {

From 04b9250ea13c09c277ce91d58b2d07bf744e21d0 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Wed, 13 Nov 2019 16:42:03 -0500
Subject: [PATCH 2/3] Create emitter function for field-change event

---
 js/components/checkbox_input.js       | 4 +++-
 js/components/clin_fields.js          | 4 ++--
 js/components/date_selector.js        | 3 ++-
 js/components/multi_checkbox_input.js | 4 +++-
 js/components/options_input.js        | 4 +++-
 js/components/pop_date_range.js       | 4 ++--
 js/components/upload_input.js         | 5 +++--
 js/lib/emitters.js                    | 4 ++++
 js/mixins/text_input_mixin.js         | 3 ++-
 9 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/js/components/checkbox_input.js b/js/components/checkbox_input.js
index d161c26f..6f942265 100644
--- a/js/components/checkbox_input.js
+++ b/js/components/checkbox_input.js
@@ -1,3 +1,5 @@
+import { emitFieldChange } from '../lib/emitters'
+
 export default {
   name: 'checkboxinput',
 
@@ -15,7 +17,7 @@ export default {
 
   methods: {
     onInput: function() {
-      this.$parent.$emit('field-change')
+      emitFieldChange(this)
     },
   },
 
diff --git a/js/components/clin_fields.js b/js/components/clin_fields.js
index 212c607c..b51c8b62 100644
--- a/js/components/clin_fields.js
+++ b/js/components/clin_fields.js
@@ -1,4 +1,4 @@
-import { emitEvent } from '../lib/emitters'
+import { emitFieldChange, emitEvent } from '../lib/emitters'
 import optionsinput from './options_input'
 import textinput from './text_input'
 import clindollaramount from './clin_dollar_amount'
@@ -98,7 +98,7 @@ export default {
       } else if (event && event.name.includes(NUMBER)) {
         this.clinNumber = event.value
       }
-      this.$parent.$emit('field-change')
+      emitFieldChange(this)
     },
 
     removeClin: function() {
diff --git a/js/components/date_selector.js b/js/components/date_selector.js
index c96a97f8..c7cc4da3 100644
--- a/js/components/date_selector.js
+++ b/js/components/date_selector.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import { getDaysInMonth } from 'date-fns'
+import { emitFieldChange } from '../lib/emitters'
 
 let paddedNumber = function(number) {
   if ((number + '').length === 1) {
@@ -209,7 +210,7 @@ export default {
 
   methods: {
     onInput: function() {
-      this.$parent.$emit('field-change', {
+      emitFieldChange(this, {
         value: this.formattedDate,
         name: this.name,
         valid: this.isDateValid,
diff --git a/js/components/multi_checkbox_input.js b/js/components/multi_checkbox_input.js
index 3c1839f5..8ef4e880 100644
--- a/js/components/multi_checkbox_input.js
+++ b/js/components/multi_checkbox_input.js
@@ -1,3 +1,5 @@
+import { emitFieldChange } from '../lib/emitters'
+
 export default {
   name: 'multicheckboxinput',
 
@@ -32,7 +34,7 @@ export default {
 
   methods: {
     onInput: function(e) {
-      this.$parent.$emit('field-change')
+      emitFieldChange(this)
       this.showError = false
       this.showValid = true
     },
diff --git a/js/components/options_input.js b/js/components/options_input.js
index a0cf15cf..639c8454 100644
--- a/js/components/options_input.js
+++ b/js/components/options_input.js
@@ -1,3 +1,5 @@
+import { emitFieldChange } from '../lib/emitters'
+
 export default {
   name: 'optionsinput',
 
@@ -31,7 +33,7 @@ export default {
 
   methods: {
     onInput: function() {
-      this.$parent.$emit('field-change')
+      emitFieldChange(this)
     },
 
     _isValid: function(value) {
diff --git a/js/components/pop_date_range.js b/js/components/pop_date_range.js
index 525a7cb9..4240c852 100644
--- a/js/components/pop_date_range.js
+++ b/js/components/pop_date_range.js
@@ -1,5 +1,5 @@
 import { format } from 'date-fns'
-
+import { emitFieldChange } from '../lib/emitters'
 import DateSelector from './date_selector'
 
 const START_DATE = 'start_date'
@@ -63,7 +63,7 @@ export default {
         let date = new Date(event.value)
         this.maxStartDate = this.calcMaxStartDate(date)
       }
-      this.$parent.$emit('field-change')
+      emitFieldChange(this)
     },
 
     calcMaxStartDate: function(date) {
diff --git a/js/components/upload_input.js b/js/components/upload_input.js
index c2108a2f..52cd8bf8 100644
--- a/js/components/upload_input.js
+++ b/js/components/upload_input.js
@@ -1,4 +1,5 @@
 import { buildUploader } from '../lib/upload'
+import { emitFieldChange } from '../lib/emitters'
 
 export default {
   name: 'uploadinput',
@@ -68,7 +69,7 @@ export default {
 
       this.changed = true
 
-      this.$parent.$emit('field-change')
+      emitFieldChange(this)
     },
     removeAttachment: function(e) {
       e.preventDefault()
@@ -80,7 +81,7 @@ export default {
       this.clearErrors()
       this.changed = true
 
-      this.$parent.$emit('field-change')
+      emitFieldChange(this)
     },
     clearErrors: function() {
       this.uploadError = false
diff --git a/js/lib/emitters.js b/js/lib/emitters.js
index fa0567d7..dbc5b37f 100644
--- a/js/lib/emitters.js
+++ b/js/lib/emitters.js
@@ -4,3 +4,7 @@ export const emitEvent = (event_type, el, data) => {
     parent_uid: el.$parent && el.$parent._uid,
   })
 }
+
+export const emitFieldChange = (el, data = null) => {
+  el.$parent.$emit('field-change', data)
+}
diff --git a/js/mixins/text_input_mixin.js b/js/mixins/text_input_mixin.js
index f859e362..54f8a7cf 100644
--- a/js/mixins/text_input_mixin.js
+++ b/js/mixins/text_input_mixin.js
@@ -1,6 +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'
 
 export default {
   name: 'textinput',
@@ -131,7 +132,7 @@ export default {
       }
 
       // Emit a change event
-      this.$parent.$emit('field-change', {
+      emitFieldChange(this, {
         value: this._rawValue(value),
         name: this.name,
       })

From a6a908ae55536beb712ba6a4817c3445d5e0f345 Mon Sep 17 00:00:00 2001
From: leigh-mil <leigh-ctr@friends.dds.mil>
Date: Wed, 13 Nov 2019 16:52:02 -0500
Subject: [PATCH 3/3] Remove other events emitted from root

---
 js/components/clin_fields.js   | 20 ++------------------
 js/components/forms/to_form.js |  2 +-
 js/lib/emitters.js             |  7 -------
 3 files changed, 3 insertions(+), 26 deletions(-)

diff --git a/js/components/clin_fields.js b/js/components/clin_fields.js
index b51c8b62..327bedf0 100644
--- a/js/components/clin_fields.js
+++ b/js/components/clin_fields.js
@@ -1,4 +1,4 @@
-import { emitFieldChange, emitEvent } from '../lib/emitters'
+import { emitFieldChange } from '../lib/emitters'
 import optionsinput from './options_input'
 import textinput from './text_input'
 import clindollaramount from './clin_dollar_amount'
@@ -61,23 +61,7 @@ export default {
     this.validateFunding()
   },
 
-  created: function() {
-    emitEvent('clin-change', this, {
-      id: this._uid,
-      obligatedAmount: this.initialObligated,
-      totalAmount: this.initialTotal,
-    })
-  },
-
   methods: {
-    clinChangeEvent: function() {
-      emitEvent('clin-change', this, {
-        id: this._uid,
-        obligatedAmount: this.initialObligated,
-        totalAmount: this.initialTotal,
-      })
-    },
-
     checkFundingValid: function() {
       return this.obligatedAmount <= this.totalAmount
     },
@@ -103,7 +87,7 @@ export default {
 
     removeClin: function() {
       this.showClin = false
-      emitEvent('remove-clin', this, {
+      this.$parent.$emit('remove-clin', this, {
         clinIndex: this.clinIndex,
       })
       this.removed = true
diff --git a/js/components/forms/to_form.js b/js/components/forms/to_form.js
index a615013b..832a625f 100644
--- a/js/components/forms/to_form.js
+++ b/js/components/forms/to_form.js
@@ -36,7 +36,7 @@ export default {
   },
 
   mounted: function() {
-    this.$root.$on('remove-clin', this.handleRemoveClin)
+    this.$on('remove-clin', this.handleRemoveClin)
   },
 
   methods: {
diff --git a/js/lib/emitters.js b/js/lib/emitters.js
index dbc5b37f..70314863 100644
--- a/js/lib/emitters.js
+++ b/js/lib/emitters.js
@@ -1,10 +1,3 @@
-export const emitEvent = (event_type, el, data) => {
-  el.$root.$emit(event_type, {
-    ...data,
-    parent_uid: el.$parent && el.$parent._uid,
-  })
-}
-
 export const emitFieldChange = (el, data = null) => {
   el.$parent.$emit('field-change', data)
 }