Add JS component for form to edit officer info
The component will control when the form is displayed using the `editing` attribute.
This commit is contained in:
parent
d43c1febea
commit
19169e76ed
36
js/components/forms/__tests__/edit_officer_form.test.js
Normal file
36
js/components/forms/__tests__/edit_officer_form.test.js
Normal file
@ -0,0 +1,36 @@
|
||||
import { shallowMount } from '@vue/test-utils'
|
||||
|
||||
import EditOfficerForm from '../edit_officer_form'
|
||||
|
||||
describe('EditOfficerForm', () => {
|
||||
it('defaults to not editing', () => {
|
||||
const wrapper = shallowMount(EditOfficerForm)
|
||||
expect(wrapper.vm.$data.editing).toEqual(false)
|
||||
})
|
||||
|
||||
it('does not start in editing mode when no errors', () => {
|
||||
const wrapper = shallowMount(EditOfficerForm, {
|
||||
propsData: { hasErrors: false },
|
||||
})
|
||||
expect(wrapper.vm.$data.editing).toEqual(false)
|
||||
})
|
||||
|
||||
it('does start in editing mode when the form has errors', () => {
|
||||
const wrapper = shallowMount(EditOfficerForm, {
|
||||
propsData: { hasErrors: true },
|
||||
})
|
||||
expect(wrapper.vm.$data.editing).toEqual(true)
|
||||
})
|
||||
|
||||
it('starts editing when edit method called', () => {
|
||||
const wrapper = shallowMount(EditOfficerForm)
|
||||
wrapper.vm.edit({ preventDefault: () => null })
|
||||
expect(wrapper.vm.$data.editing).toEqual(true)
|
||||
})
|
||||
|
||||
it('stops editing when cancel method called', () => {
|
||||
const wrapper = shallowMount(EditOfficerForm)
|
||||
wrapper.vm.cancel()
|
||||
expect(wrapper.vm.$data.editing).toEqual(false)
|
||||
})
|
||||
})
|
40
js/components/forms/edit_officer_form.js
Normal file
40
js/components/forms/edit_officer_form.js
Normal file
@ -0,0 +1,40 @@
|
||||
import FormMixin from '../../mixins/form'
|
||||
import checkboxinput from '../checkbox_input'
|
||||
import textinput from '../text_input'
|
||||
|
||||
export default {
|
||||
name: 'edit-officer-form',
|
||||
|
||||
mixins: [FormMixin],
|
||||
|
||||
components: {
|
||||
checkboxinput,
|
||||
textinput,
|
||||
},
|
||||
|
||||
props: {
|
||||
hasErrors: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
},
|
||||
|
||||
data: function() {
|
||||
return {
|
||||
editing: this.hasErrors,
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
edit: function(event) {
|
||||
event.preventDefault()
|
||||
this.editing = true
|
||||
},
|
||||
|
||||
cancel: function(event) {
|
||||
this.editing = false
|
||||
},
|
||||
},
|
||||
|
||||
template: '<div></div>',
|
||||
}
|
@ -11,6 +11,7 @@ import multicheckboxinput from './components/multi_checkbox_input'
|
||||
import textinput from './components/text_input'
|
||||
import checkboxinput from './components/checkbox_input'
|
||||
import DetailsOfUse from './components/forms/details_of_use'
|
||||
import EditOfficerForm from './components/forms/edit_officer_form'
|
||||
import poc from './components/forms/poc'
|
||||
import oversight from './components/forms/oversight'
|
||||
import financial from './components/forms/financial'
|
||||
@ -64,6 +65,7 @@ const app = new Vue({
|
||||
ConfirmationPopover,
|
||||
funding,
|
||||
DateSelector,
|
||||
EditOfficerForm,
|
||||
},
|
||||
|
||||
mounted: function() {
|
||||
|
Loading…
x
Reference in New Issue
Block a user