Add vue component for save button and integrate into FormMixin

This commit is contained in:
leigh-mil 2019-04-01 20:37:21 -04:00
parent 40a4e205d9
commit 3ece7b4c89
3 changed files with 40 additions and 0 deletions

View File

@ -0,0 +1,18 @@
export default {
name: 'savebutton',
props: {
text: String,
disabled: Boolean,
classes: String,
},
data: function() {
return {
displayClasses: `usa-button usa-button-primary ${this.classes}`,
}
},
template:
'<button type="submit" :class="displayClasses" tabindex="0" :disabled="disabled">{{ text }}</button>',
}

View File

@ -33,6 +33,7 @@ import { isNotInVerticalViewport } from './lib/viewport'
import DateSelector from './components/date_selector'
import SidenavToggler from './components/sidenav_toggler'
import KoReview from './components/forms/ko_review'
import savebutton from './components/save_button'
Vue.config.productionTip = false
@ -68,6 +69,7 @@ const app = new Vue({
EditOfficerForm,
SidenavToggler,
KoReview,
savebutton,
},
mounted: function() {

View File

@ -1,3 +1,5 @@
import savebutton from '../components/save_button'
export default {
mounted: function() {
this.$root.$on('field-change', this.handleFieldChange)
@ -8,7 +10,25 @@ export default {
const { value, name } = event
if (typeof this[name] !== undefined) {
this[name] = value
this.disabled = false
}
},
},
data: function() {
return {
disabled: this.disableSave,
}
},
props: {
disableSave: {
type: Boolean,
default: true,
},
},
components: {
savebutton,
},
}