Remove old field-mount and field-change emitters and listeners.
Replace FormMixin with new functionality.
This commit is contained in:
parent
3576551f42
commit
bc0382834b
@ -1,5 +1,3 @@
|
|||||||
import { emitEvent } from '../lib/emitters'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'checkboxinput',
|
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: {
|
methods: {
|
||||||
onInput: function(e) {
|
onInput: function() {
|
||||||
this.$parent.$emit('field-change')
|
this.$parent.$emit('field-change')
|
||||||
emitEvent('field-change', this, {
|
|
||||||
value: e.target.checked,
|
|
||||||
name: this.name,
|
|
||||||
valid: this.optional || this.isChecked,
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import { getDaysInMonth } from 'date-fns'
|
import { getDaysInMonth } from 'date-fns'
|
||||||
import { emitEvent } from '../lib/emitters'
|
|
||||||
|
|
||||||
let paddedNumber = function(number) {
|
let paddedNumber = function(number) {
|
||||||
if ((number + '').length === 1) {
|
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: {
|
watch: {
|
||||||
month(newMonth, oldMonth) {
|
month(newMonth, oldMonth) {
|
||||||
if (!!newMonth && newMonth.length > 2) {
|
if (!!newMonth && newMonth.length > 2) {
|
||||||
@ -217,13 +208,7 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
onInput: function(e) {
|
onInput: function() {
|
||||||
emitEvent('field-change', this, {
|
|
||||||
value: this.formattedDate,
|
|
||||||
name: this.name,
|
|
||||||
valid: this.isDateValid,
|
|
||||||
})
|
|
||||||
|
|
||||||
this.$parent.$emit('field-change', {
|
this.$parent.$emit('field-change', {
|
||||||
value: this.formattedDate,
|
value: this.formattedDate,
|
||||||
name: this.name,
|
name: this.name,
|
||||||
|
@ -2,7 +2,7 @@ import ally from 'ally.js'
|
|||||||
import stickybits from 'stickybits'
|
import stickybits from 'stickybits'
|
||||||
|
|
||||||
import DateSelector from '../date_selector'
|
import DateSelector from '../date_selector'
|
||||||
import FormMixin from '../../mixins/form_mixin'
|
import FormMixin from '../../mixins/form'
|
||||||
import Modal from '../../mixins/modal'
|
import Modal from '../../mixins/modal'
|
||||||
import MultiStepModalForm from './multi_step_modal_form'
|
import MultiStepModalForm from './multi_step_modal_form'
|
||||||
import checkboxinput from '../checkbox_input'
|
import checkboxinput from '../checkbox_input'
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import FormMixin from '../../mixins/form_mixin'
|
import FormMixin from '../../mixins/form'
|
||||||
import textinput from '../text_input'
|
import textinput from '../text_input'
|
||||||
import optionsinput from '../options_input'
|
import optionsinput from '../options_input'
|
||||||
import checkboxinput from '../checkbox_input'
|
import checkboxinput from '../checkbox_input'
|
||||||
|
@ -2,7 +2,7 @@ import stickybits from 'stickybits'
|
|||||||
|
|
||||||
import checkboxinput from '../checkbox_input'
|
import checkboxinput from '../checkbox_input'
|
||||||
import ClinFields from '../clin_fields'
|
import ClinFields from '../clin_fields'
|
||||||
import FormMixin from '../../mixins/form_mixin'
|
import FormMixin from '../../mixins/form'
|
||||||
import textinput from '../text_input'
|
import textinput from '../text_input'
|
||||||
import uploadinput from '../upload_input'
|
import uploadinput from '../upload_input'
|
||||||
|
|
||||||
|
@ -1,5 +1,3 @@
|
|||||||
import { emitEvent } from '../lib/emitters'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'optionsinput',
|
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() {
|
data: function() {
|
||||||
const showError = (this.initialErrors && this.initialErrors.length) || false
|
const showError = (this.initialErrors && this.initialErrors.length) || false
|
||||||
return {
|
return {
|
||||||
@ -40,18 +30,8 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
onInput: function(e) {
|
onInput: function() {
|
||||||
this.showError = false
|
|
||||||
this.showValid = true
|
|
||||||
this.value = e.target.value
|
|
||||||
|
|
||||||
this.$parent.$emit('field-change')
|
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) {
|
_isValid: function(value) {
|
||||||
|
@ -11,56 +11,30 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted: function() {
|
data: function() {
|
||||||
this.$root.$on('field-change', this.handleFieldChange)
|
return {
|
||||||
this.$on('field-change', this.handleFieldChange)
|
changed: this.hasChanges,
|
||||||
|
valid: false,
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
created: function() {
|
mounted: function() {
|
||||||
this.$root.$on('field-mount', this.handleFieldMount)
|
this.$on('field-change', this.handleFieldChange)
|
||||||
this.$on('field-mount', this.handleFieldMount)
|
this.valid = this.validateFields()
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
handleFieldChange: function(event) {
|
handleFieldChange: function(event) {
|
||||||
const { value, name, valid, parent_uid, watch } = event
|
this.valid = this.validateFields()
|
||||||
if (typeof this.fields[name] !== undefined) {
|
this.changed = true
|
||||||
this.fields[name] = valid
|
|
||||||
if (parent_uid === this._uid || watch) {
|
|
||||||
this.changed = true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.validateForm()
|
|
||||||
},
|
},
|
||||||
|
|
||||||
handleChildFieldChange: function(event) {
|
validateFields: function() {
|
||||||
// need to temporarily use this function because we will no longer be passing
|
return this.$children.every(child => child.valid)
|
||||||
// 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
|
|
||||||
},
|
},
|
||||||
|
|
||||||
handleSubmit: function(event) {
|
handleSubmit: function(event) {
|
||||||
if (this.invalid) {
|
if (!this.valid) {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -68,23 +42,13 @@ export default {
|
|||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
canSave: function() {
|
canSave: function() {
|
||||||
const formValid = !this.invalid
|
if (this.changed && this.valid) {
|
||||||
|
|
||||||
if (this.changed && formValid) {
|
|
||||||
return true
|
return true
|
||||||
} else if (this.enableSave && formValid) {
|
} else if (this.enableSave && this.valid) {
|
||||||
return true
|
return true
|
||||||
} else {
|
} else {
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
data: function() {
|
|
||||||
return {
|
|
||||||
changed: this.hasChanges,
|
|
||||||
fields: {},
|
|
||||||
invalid: true,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
|
@ -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
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
@ -1,7 +1,6 @@
|
|||||||
import MaskedInput, { conformToMask } from 'vue-text-mask'
|
import MaskedInput, { conformToMask } from 'vue-text-mask'
|
||||||
import inputValidations from '../lib/input_validations'
|
import inputValidations from '../lib/input_validations'
|
||||||
import { formatDollars } from '../lib/dollars'
|
import { formatDollars } from '../lib/dollars'
|
||||||
import { emitEvent } from '../lib/emitters'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'textinput',
|
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: {
|
methods: {
|
||||||
// When user types a character
|
// When user types a character
|
||||||
onInput: function(e) {
|
onInput: function(e) {
|
||||||
@ -144,12 +135,6 @@ export default {
|
|||||||
value: this._rawValue(value),
|
value: this._rawValue(value),
|
||||||
name: this.name,
|
name: this.name,
|
||||||
})
|
})
|
||||||
emitEvent('field-change', this, {
|
|
||||||
value: this._rawValue(value),
|
|
||||||
valid: this._isValid(value),
|
|
||||||
name: this.name,
|
|
||||||
watch: this.watch,
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
|
|
||||||
_rawValue: function(value) {
|
_rawValue: function(value) {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user