Add vue component for save button and integrate into FormMixin

js/components/save_button.js

@@ -0,0 +1,18 @@
+export default {
+  name: 'savebutton',
+
+  props: {
+    text: String,
+    disabled: Boolean,
+    classes: String,
+  },
+
+  data: function() {
+    return {
+      displayClasses: `usa-button usa-button-primary ${this.classes}`,
+    }
+  },
+
+  template:
+    '<button type="submit" :class="displayClasses" tabindex="0" :disabled="disabled">{{ text }}</button>',
+}

js/index.js

@@ -33,6 +33,7 @@ import { isNotInVerticalViewport } from './lib/viewport'
 import DateSelector from './components/date_selector'
 import SidenavToggler from './components/sidenav_toggler'
 import KoReview from './components/forms/ko_review'
+import savebutton from './components/save_button'
 
 Vue.config.productionTip = false
 
@@ -68,6 +69,7 @@ const app = new Vue({
     EditOfficerForm,
     SidenavToggler,
     KoReview,
+    savebutton,
   },
 
   mounted: function() {

js/mixins/form.js

@@ -1,3 +1,5 @@
+import savebutton from '../components/save_button'
+
 export default {
   mounted: function() {
     this.$root.$on('field-change', this.handleFieldChange)
@@ -8,7 +10,25 @@ export default {
       const { value, name } = event
       if (typeof this[name] !== undefined) {
         this[name] = value
+        this.disabled = false
       }
     },
   },
+
+  data: function() {
+    return {
+      disabled: this.disableSave,
+    }
+  },
+
+  props: {
+    disableSave: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  components: {
+    savebutton,
+  },
 }