diff --git a/js/components/checkbox_input.js b/js/components/checkbox_input.js index 16e1a9b6..d161c26f 100644 --- a/js/components/checkbox_input.js +++ b/js/components/checkbox_input.js @@ -1,5 +1,3 @@ -import { emitEvent } from '../lib/emitters' - export default { name: 'checkboxinput', @@ -15,22 +13,9 @@ export default { } }, - created: function() { - emitEvent('field-mount', this, { - optional: this.optional, - name: this.name, - valid: this.optional || this.isChecked, - }) - }, - methods: { - onInput: function(e) { + onInput: function() { this.$parent.$emit('field-change') - emitEvent('field-change', this, { - value: e.target.checked, - name: this.name, - valid: this.optional || this.isChecked, - }) }, }, diff --git a/js/components/date_selector.js b/js/components/date_selector.js index 70fc8f64..c96a97f8 100644 --- a/js/components/date_selector.js +++ b/js/components/date_selector.js @@ -1,6 +1,5 @@ import Vue from 'vue' import { getDaysInMonth } from 'date-fns' -import { emitEvent } from '../lib/emitters' let paddedNumber = function(number) { if ((number + '').length === 1) { @@ -37,14 +36,6 @@ export default { } }, - created: function() { - emitEvent('field-mount', this, { - optional: this.optional, - name: this.name, - valid: this.isDateValid, - }) - }, - watch: { month(newMonth, oldMonth) { if (!!newMonth && newMonth.length > 2) { @@ -217,13 +208,7 @@ export default { }, methods: { - onInput: function(e) { - emitEvent('field-change', this, { - value: this.formattedDate, - name: this.name, - valid: this.isDateValid, - }) - + onInput: function() { this.$parent.$emit('field-change', { value: this.formattedDate, name: this.name, diff --git a/js/components/forms/base_form.js b/js/components/forms/base_form.js index 149304ae..699b4028 100644 --- a/js/components/forms/base_form.js +++ b/js/components/forms/base_form.js @@ -2,7 +2,7 @@ import ally from 'ally.js' import stickybits from 'stickybits' import DateSelector from '../date_selector' -import FormMixin from '../../mixins/form_mixin' +import FormMixin from '../../mixins/form' import Modal from '../../mixins/modal' import MultiStepModalForm from './multi_step_modal_form' import checkboxinput from '../checkbox_input' diff --git a/js/components/forms/multi_step_modal_form.js b/js/components/forms/multi_step_modal_form.js index f4b73b5d..0dfcaba0 100644 --- a/js/components/forms/multi_step_modal_form.js +++ b/js/components/forms/multi_step_modal_form.js @@ -1,4 +1,4 @@ -import FormMixin from '../../mixins/form_mixin' +import FormMixin from '../../mixins/form' import textinput from '../text_input' import optionsinput from '../options_input' import checkboxinput from '../checkbox_input' diff --git a/js/components/forms/to_form.js b/js/components/forms/to_form.js index b041219e..a615013b 100644 --- a/js/components/forms/to_form.js +++ b/js/components/forms/to_form.js @@ -2,7 +2,7 @@ import stickybits from 'stickybits' import checkboxinput from '../checkbox_input' import ClinFields from '../clin_fields' -import FormMixin from '../../mixins/form_mixin' +import FormMixin from '../../mixins/form' import textinput from '../text_input' import uploadinput from '../upload_input' diff --git a/js/components/options_input.js b/js/components/options_input.js index 06bb73d9..a0cf15cf 100644 --- a/js/components/options_input.js +++ b/js/components/options_input.js @@ -1,5 +1,3 @@ -import { emitEvent } from '../lib/emitters' - export default { name: 'optionsinput', @@ -21,14 +19,6 @@ export default { }, }, - created: function() { - emitEvent('field-mount', this, { - optional: this.optional, - name: this.name, - valid: this._isValid(this.value), - }) - }, - data: function() { const showError = (this.initialErrors && this.initialErrors.length) || false return { @@ -40,18 +30,8 @@ export default { }, methods: { - onInput: function(e) { - this.showError = false - this.showValid = true - this.value = e.target.value - + onInput: function() { this.$parent.$emit('field-change') - emitEvent('field-change', this, { - value: e.target.value, - name: this.name, - watch: this.watch, - valid: this._isValid(e.target.value), - }) }, _isValid: function(value) { diff --git a/js/mixins/form.js b/js/mixins/form.js index a0643f3a..45aa6261 100644 --- a/js/mixins/form.js +++ b/js/mixins/form.js @@ -11,56 +11,30 @@ export default { }, }, - mounted: function() { - this.$root.$on('field-change', this.handleFieldChange) - this.$on('field-change', this.handleFieldChange) + data: function() { + return { + changed: this.hasChanges, + valid: false, + } }, - created: function() { - this.$root.$on('field-mount', this.handleFieldMount) - this.$on('field-mount', this.handleFieldMount) + mounted: function() { + this.$on('field-change', this.handleFieldChange) + this.valid = this.validateFields() }, methods: { handleFieldChange: function(event) { - const { value, name, valid, parent_uid, watch } = event - if (typeof this.fields[name] !== undefined) { - this.fields[name] = valid - if (parent_uid === this._uid || watch) { - this.changed = true - } - } - - this.validateForm() + this.valid = this.validateFields() + this.changed = true }, - handleChildFieldChange: function(event) { - // need to temporarily use this function because we will no longer be passing - // parent_uid or watch from the child components - const { name, valid } = event - if (typeof this.fields[name] !== 'undefined') { - this.fields[name] = valid - this.changed = true - } - - this.validateForm() - }, - - handleFieldMount: function(event) { - const { name, optional, valid } = event - this.fields[name] = optional || valid - const formValid = this.validateForm() - this.invalid = !formValid - }, - - validateForm: function() { - const valid = !Object.values(this.fields).some(field => field === false) - this.invalid = !valid - return valid + validateFields: function() { + return this.$children.every(child => child.valid) }, handleSubmit: function(event) { - if (this.invalid) { + if (!this.valid) { event.preventDefault() } }, @@ -68,23 +42,13 @@ export default { computed: { canSave: function() { - const formValid = !this.invalid - - if (this.changed && formValid) { + if (this.changed && this.valid) { return true - } else if (this.enableSave && formValid) { + } else if (this.enableSave && this.valid) { return true } else { return false } }, }, - - data: function() { - return { - changed: this.hasChanges, - fields: {}, - invalid: true, - } - }, } diff --git a/js/mixins/form_mixin.js b/js/mixins/form_mixin.js deleted file mode 100644 index 45aa6261..00000000 --- a/js/mixins/form_mixin.js +++ /dev/null @@ -1,54 +0,0 @@ -export default { - props: { - initialSelectedSection: String, - hasChanges: { - type: Boolean, - default: false, - }, - enableSave: { - type: Boolean, - default: false, - }, - }, - - data: function() { - return { - changed: this.hasChanges, - valid: false, - } - }, - - mounted: function() { - this.$on('field-change', this.handleFieldChange) - this.valid = this.validateFields() - }, - - methods: { - handleFieldChange: function(event) { - this.valid = this.validateFields() - this.changed = true - }, - - validateFields: function() { - return this.$children.every(child => child.valid) - }, - - handleSubmit: function(event) { - if (!this.valid) { - event.preventDefault() - } - }, - }, - - computed: { - canSave: function() { - if (this.changed && this.valid) { - return true - } else if (this.enableSave && this.valid) { - return true - } else { - return false - } - }, - }, -} diff --git a/js/mixins/text_input_mixin.js b/js/mixins/text_input_mixin.js index 229621f9..f859e362 100644 --- a/js/mixins/text_input_mixin.js +++ b/js/mixins/text_input_mixin.js @@ -1,7 +1,6 @@ import MaskedInput, { conformToMask } from 'vue-text-mask' import inputValidations from '../lib/input_validations' import { formatDollars } from '../lib/dollars' -import { emitEvent } from '../lib/emitters' export default { name: 'textinput', @@ -78,14 +77,6 @@ export default { } }, - created: function() { - emitEvent('field-mount', this, { - optional: this.optional, - name: this.name, - valid: this._isValid(this.value), - }) - }, - methods: { // When user types a character onInput: function(e) { @@ -144,12 +135,6 @@ export default { value: this._rawValue(value), name: this.name, }) - emitEvent('field-change', this, { - value: this._rawValue(value), - valid: this._isValid(value), - name: this.name, - watch: this.watch, - }) }, _rawValue: function(value) {