diff --git a/js/components/toggler.js b/js/components/toggler.js index d61b594c..b083587f 100644 --- a/js/components/toggler.js +++ b/js/components/toggler.js @@ -17,10 +17,37 @@ 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 @@ -28,5 +55,11 @@ export default { this.selectedSection = sectionName } }, + + handleSubmit: function(event) { + if (this.invalid) { + event.preventDefault() + } + }, }, } diff --git a/templates/fragments/applications/edit_environments.html b/templates/fragments/applications/edit_environments.html index 53412825..f821e4bf 100644 --- a/templates/fragments/applications/edit_environments.html +++ b/templates/fragments/applications/edit_environments.html @@ -108,7 +108,7 @@ {% call ToggleSection(section_name="edit") %}