Create emitter function for field-change event

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)
     },
   },
 

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() {

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,

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

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) {

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) {

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

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)
+}

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,
       })