Break new-application JS component into form steps

This commit is contained in:
graham-dds 2019-09-23 11:30:08 -04:00
parent 8914419dac
commit 1a11182eef
3 changed files with 34 additions and 35 deletions

View File

@ -1,11 +1,11 @@
import FormMixin from '../../mixins/form'
import textinput from '../text_input'
import FormMixin from '../../../mixins/form'
import textinput from '../../text_input'
import * as R from 'ramda'
const createEnvironment = name => ({ name })
export default {
name: 'new-application',
name: 'application-environments',
mixins: [FormMixin],
@ -18,7 +18,6 @@ export default {
type: Object,
default: () => ({}),
},
modalName: String,
},
data: function() {
@ -47,16 +46,18 @@ export default {
errors: [],
environments,
name,
readyToSubmit: false,
changed: true,
}
},
mounted: function() {
this.$root.$on('onEnvironmentAdded', this.addEnvironment)
this.validate()
},
methods: {
addEnvironment: function(event) {
addEnvironment: function(_event) {
this.changed = false
this.environments.push(createEnvironment(''))
},
@ -64,6 +65,7 @@ export default {
if (this.environments.length > 1) {
this.environments.splice(index, 1)
}
this.validate()
},
validate: function() {
@ -75,6 +77,7 @@ export default {
R.filter(Boolean),
R.take(1)
)(this.validations)
this.invalid = this.errors.length > 0
},
hasEnvironments: function() {
@ -99,34 +102,9 @@ export default {
return names.every((n, index) => names.indexOf(n) === index)
},
handleSubmit: function(event) {
if (!this.readyToSubmit) {
event.preventDefault()
this.validateAndOpenModal()
}
},
handleCancelSubmit: function() {
this.readyToSubmit = false
this.closeModal(this.modalName)
},
validateAndOpenModal: function() {
let isValid = this.$children.reduce((previous, newVal) => {
// display textInput error if it is not valid
if (!newVal.showValid) {
newVal.showError = true
}
return newVal.showValid && previous
}, true)
onInput: function(e) {
this.changed = true
this.validate()
isValid = this.errors.length == 0 && isValid
if (isValid) {
this.readyToSubmit = true
this.openModal(this.modalName)
}
},
},
}

View File

@ -0,0 +1,19 @@
import FormMixin from '../../../mixins/form'
import textinput from '../../text_input'
import * as R from 'ramda'
export default {
name: 'application-name-and-description',
mixins: [FormMixin],
components: {
textinput,
},
data: function() {
return {
errors: [],
}
},
}

View File

@ -17,7 +17,8 @@ import EditOfficerForm from './components/forms/edit_officer_form'
import poc from './components/forms/poc'
import oversight from './components/forms/oversight'
import toggler from './components/toggler'
import NewApplication from './components/forms/new_application'
import ApplicationNameAndDescription from './components/forms/new_application/name_and_description'
import ApplicationEnvironments from './components/forms/new_application/environments'
import { EditEnvironmentRole } from './components/forms/edit_environment_role'
import EditApplicationRoles from './components/forms/edit_application_roles'
import MultiStepModalForm from './components/forms/multi_step_modal_form'
@ -60,7 +61,8 @@ const app = new Vue({
checkboxinput,
poc,
oversight,
NewApplication,
ApplicationNameAndDescription,
ApplicationEnvironments,
selector,
BudgetChart,
SpendTable,