From b8a983f4dc95d4c8e13879cbfc002f4fe4f92bc7 Mon Sep 17 00:00:00 2001
From: Patrick Smith <patrick+dds@promptworks.com>
Date: Thu, 23 Aug 2018 16:33:13 -0400
Subject: [PATCH] Use form mixin for add field change handler

---
 js/components/forms/details_of_use.js | 15 ++++-----------
 js/components/forms/financial.js      | 16 +++-------------
 js/components/forms/poc.js            | 16 +++-------------
 js/mixins/form.js                     | 14 ++++++++++++++
 4 files changed, 24 insertions(+), 37 deletions(-)
 create mode 100644 js/mixins/form.js

diff --git a/js/components/forms/details_of_use.js b/js/components/forms/details_of_use.js
index ff1abccc..0c11d192 100644
--- a/js/components/forms/details_of_use.js
+++ b/js/components/forms/details_of_use.js
@@ -1,12 +1,15 @@
 import createNumberMask from 'text-mask-addons/dist/createNumberMask'
 import { conformToMask } from 'vue-text-mask'
 
+import FormMixin from '../../mixins/form'
 import textinput from '../text_input'
 import optionsinput from '../options_input'
 
 export default {
   name: 'details-of-use',
 
+  mixins: [FormMixin],
+
   components: {
     textinput,
     optionsinput,
@@ -33,10 +36,6 @@ export default {
     }
   },
 
-  mounted: function () {
-    this.$root.$on('field-change', this.handleFieldChange)
-  },
-
   computed: {
     annualSpend: function () {
       const monthlySpend = this.estimated_monthly_spend || 0
@@ -60,12 +59,6 @@ export default {
     formatDollars: function (intValue) {
       const mask = createNumberMask({ prefix: '$', allowDecimal: true })
       return conformToMask(intValue.toString(), mask).conformedValue
-    },
-    handleFieldChange: function (event) {
-      const { value, name } = event
-      if (typeof this[name] !== undefined) {
-        this[name] = value
-      }
-    },
+    }
   }
 }
diff --git a/js/components/forms/financial.js b/js/components/forms/financial.js
index 2a1fb43b..c4c3b02d 100644
--- a/js/components/forms/financial.js
+++ b/js/components/forms/financial.js
@@ -1,9 +1,12 @@
+import FormMixin from '../../mixins/form'
 import optionsinput from '../options_input'
 import textinput from '../text_input'
 
 export default {
   name: 'financial',
 
+  mixins: [FormMixin],
+
   components: {
     optionsinput,
     textinput,
@@ -24,18 +27,5 @@ export default {
     return {
       funding_type
     }
-  },
-
-  mounted: function () {
-    this.$root.$on('field-change', this.handleFieldChange)
-  },
-
-  methods: {
-    handleFieldChange: function (event) {
-      const { value, name } = event
-      if (typeof this[name] !== undefined) {
-        this[name] = value
-      }
-    },
   }
 }
diff --git a/js/components/forms/poc.js b/js/components/forms/poc.js
index 255c1b04..8b60c0b6 100644
--- a/js/components/forms/poc.js
+++ b/js/components/forms/poc.js
@@ -1,3 +1,4 @@
+import FormMixin from '../../mixins/form'
 import optionsinput from '../options_input'
 import textinput from '../text_input'
 import checkboxinput from '../checkbox_input'
@@ -5,6 +6,8 @@ import checkboxinput from '../checkbox_input'
 export default {
   name: 'poc',
 
+  mixins: [FormMixin],
+
   components: {
     optionsinput,
     textinput,
@@ -26,18 +29,5 @@ export default {
     return {
         am_poc
     }
-  },
-
-  mounted: function () {
-    this.$root.$on('field-change', this.handleFieldChange)
-  },
-
-  methods: {
-    handleFieldChange: function (event) {
-      const { value, name } = event
-      if (typeof this[name] !== undefined) {
-        this[name] = value
-      }
-    },
   }
 }
diff --git a/js/mixins/form.js b/js/mixins/form.js
new file mode 100644
index 00000000..620ccfcd
--- /dev/null
+++ b/js/mixins/form.js
@@ -0,0 +1,14 @@
+export default {
+  mounted: function () {
+    this.$root.$on('field-change', this.handleFieldChange)
+  },
+
+  methods: {
+    handleFieldChange: function (event) {
+      const { value, name } = event
+      if (typeof this[name] !== undefined) {
+        this[name] = value
+      }
+    },
+  }
+}