Move js to form component

js/components/toggler.js

@@ -6,10 +6,6 @@ export default {
 
   mixins: [FormMixin],
 
-  props: {
-    initialSelectedSection: String,
-  },
-
   components: {
     textinput,
   },
@@ -17,37 +13,10 @@ export default {
   data: function() {
     return {
       selectedSection: this.initialSelectedSection,
-      invalid: true,
-      fields: {},
     }
   },
 
-  created: function() {
-    this.$root.$on('field-mount', this.handleFieldMount)
-  },
-
-  mounted: function() {
-    this.$root.$on('field-change', this.handleChange)
-  },
-
   methods: {
-    handleFieldMount: function(event) {
-      const { name, optional } = event
-      this.fields[name] = optional
-    },
-
-    handleChange: function(event) {
-      const { name, valid, parent_uid } = event
-      this.fields[name] = valid
-      this.validateForm()
-    },
-
-    validateForm: function() {
-      const valid = !Object.values(this.fields).some(field => field === false)
-      this.invalid = !valid
-      return valid
-    },
-
     toggleSection: function(sectionName) {
       if (this.selectedSection === sectionName) {
         this.selectedSection = null
@@ -55,11 +24,5 @@ export default {
         this.selectedSection = sectionName
       }
     },
-
-    handleSubmit: function(event) {
-      if (this.invalid) {
-        event.preventDefault()
-      }
-    },
   },
 }

js/mixins/form.js

@@ -1,23 +1,53 @@
 export default {
+  props: {
+    initialSelectedSection: String,
+  },
+
   mounted: function() {
     this.$root.$on('field-change', this.handleFieldChange)
   },
 
+  created: function() {
+    this.$root.$on('field-mount', this.handleFieldMount)
+  },
+
   methods: {
     handleFieldChange: function(event) {
-      const { value, name } = event
+      const { name, valid, parent_uid } = event
       if (typeof this[name] !== undefined) {
-        this[name] = value
-        if (event['parent_uid'] === this._uid) {
+        this.fields[name] = valid
+
+        if (parent_uid === this._uid) {
           this.changed = true
         }
       }
+
+      this.validateForm()
+    },
+
+    handleFieldMount: function(event) {
+      const { name, optional } = event
+      this.fields[name] = optional
+    },
+
+    validateForm: function() {
+      const valid = !Object.values(this.fields).some(field => field === false)
+      this.invalid = !valid
+      return valid
+    },
+
+    handleSubmit: function(event) {
+      if (this.invalid) {
+        event.preventDefault()
+      }
     },
   },
 
   data: function() {
     return {
       changed: this.hasChanges,
+      fields: {},
+      invalid: true,
     }
   },
 

script/format

@@ -9,6 +9,5 @@ if [ "$1" == "check" ]; then
 else
   pipenv run black ${FILES_TO_FORMAT}
   yarn run prettier --list-different --write "js/**/*.js" --config ./prettier.config.json
-  tt
   yarn run prettier --list-different --write "styles/**/*.scss"
 fi