diff --git a/js/components/toggler.js b/js/components/toggler.js index b083587f..39eca87f 100644 --- a/js/components/toggler.js +++ b/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() - } - }, }, } diff --git a/js/mixins/form.js b/js/mixins/form.js index 5436f821..497497b1 100644 --- a/js/mixins/form.js +++ b/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, } }, diff --git a/script/format b/script/format index c25b320e..376531d4 100755 --- a/script/format +++ b/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