457b1f9523
In order to place modal forms in other places on the page (so that forms are not nested) it's necessary to move MultiStepModalForm links out of the component. They just need to refer to the correct modal. This PR also makes changes to ensure that the active modal is being unset everywhere correctly when a modal is closed.
91 lines
1.9 KiB
JavaScript
91 lines
1.9 KiB
JavaScript
import FormMixin from '../../mixins/form'
|
|
import textinput from '../text_input'
|
|
import optionsinput from '../options_input'
|
|
import checkboxinput from '../checkbox_input'
|
|
import Selector from '../selector'
|
|
import Modal from '../../mixins/modal'
|
|
import toggler from '../toggler'
|
|
|
|
export default {
|
|
name: 'multi-step-modal-form',
|
|
|
|
mixins: [FormMixin],
|
|
|
|
components: {
|
|
toggler,
|
|
Modal,
|
|
Selector,
|
|
textinput,
|
|
optionsinput,
|
|
checkboxinput,
|
|
},
|
|
|
|
props: {
|
|
steps: Number,
|
|
},
|
|
|
|
data: function() {
|
|
return {
|
|
step: 0,
|
|
fields: {},
|
|
invalid: true,
|
|
}
|
|
},
|
|
|
|
created: function() {
|
|
this.$root.$on('field-mount', this.handleFieldMount)
|
|
},
|
|
|
|
mounted: function() {
|
|
this.$root.$on('field-change', this.handleValidChange)
|
|
this.$root.$on('modalOpen', this.handleModalOpen)
|
|
},
|
|
|
|
methods: {
|
|
next: function() {
|
|
if (this._checkIsValid()) {
|
|
this.step += 1
|
|
}
|
|
},
|
|
previous: function() {
|
|
this.step -= 1
|
|
},
|
|
goToStep: function(step) {
|
|
if (this._checkIsValid()) {
|
|
this.step = step
|
|
}
|
|
},
|
|
handleValidChange: function(event) {
|
|
const { name, valid, parent_uid } = event
|
|
// check that this field is in the modal and not on some other form
|
|
if (parent_uid === this._uid) {
|
|
this.fields[name] = valid
|
|
this._checkIsValid()
|
|
}
|
|
},
|
|
_checkIsValid: function() {
|
|
const valid = !Object.values(this.fields).some(field => field === false)
|
|
this.invalid = !valid
|
|
return valid
|
|
},
|
|
handleFieldMount: function(event) {
|
|
const { name, optional } = event
|
|
this.fields[name] = optional
|
|
},
|
|
handleModalOpen: function(_bool) {
|
|
this.step = 0
|
|
},
|
|
_onLastPage: function() {
|
|
return this.step === this.steps - 1
|
|
},
|
|
handleSubmit: function(e) {
|
|
if (this.invalid || !this._onLastPage()) {
|
|
e.preventDefault()
|
|
this.next()
|
|
}
|
|
},
|
|
},
|
|
|
|
computed: {},
|
|
}
|