69 lines
1.3 KiB
JavaScript
69 lines
1.3 KiB
JavaScript
import FormMixin from '../../mixins/form'
|
|
import textinput from '../text_input'
|
|
import optionsinput from '../options_input'
|
|
import checkboxinput from '../checkbox_input'
|
|
import Modal from '../../mixins/modal'
|
|
import toggler from '../toggler'
|
|
|
|
export default {
|
|
name: 'multi-step-modal-form',
|
|
|
|
mixins: [FormMixin],
|
|
|
|
components: {
|
|
toggler,
|
|
Modal,
|
|
textinput,
|
|
optionsinput,
|
|
checkboxinput,
|
|
},
|
|
|
|
props: {
|
|
steps: Number,
|
|
},
|
|
|
|
data: function() {
|
|
return {
|
|
step: 0,
|
|
}
|
|
},
|
|
|
|
mounted: function() {
|
|
this.$root.$on('modalOpen', this.handleModalOpen)
|
|
},
|
|
|
|
methods: {
|
|
next: function() {
|
|
this.submitted = true
|
|
if (this.validateFields()) {
|
|
this.step += 1
|
|
this.submitted = false
|
|
}
|
|
},
|
|
previous: function() {
|
|
this.step -= 1
|
|
},
|
|
goToStep: function(step) {
|
|
if (this.validateFields()) {
|
|
this.step = step
|
|
}
|
|
},
|
|
handleModalOpen: function(_bool) {
|
|
this.step = 0
|
|
},
|
|
_onLastPage: function() {
|
|
return this.step === this.steps - 1
|
|
},
|
|
handleSubmit: function(e) {
|
|
if (this._onLastPage) {
|
|
this.submitted = true
|
|
}
|
|
|
|
if (!this.validateFields() || !this._onLastPage()) {
|
|
e.preventDefault()
|
|
this.next()
|
|
}
|
|
},
|
|
},
|
|
}
|