Remove old field-mount and field-change emitters and listeners.

Replace FormMixin with new functionality.
This commit is contained in:
leigh-mil 2019-11-13 15:59:43 -05:00
parent 3576551f42
commit bc0382834b
9 changed files with 21 additions and 176 deletions

View File

@ -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,
})
},
},

View File

@ -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,

View File

@ -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'

View File

@ -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'

View File

@ -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'

View File

@ -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) {

View File

@ -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,
}
},
}

View File

@ -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
}
},
},
}

View File

@ -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) {