atst/js/components/forms/funding.js
2019-02-07 13:21:31 -05:00

82 lines
1.5 KiB
JavaScript

import createNumberMask from 'text-mask-addons/dist/createNumberMask'
import { conformToMask } from 'vue-text-mask'
import FormMixin from '../../mixins/form'
import textinput from '../text_input'
import optionsinput from '../options_input'
import uploadinput from '../upload_input'
export default {
name: 'funding',
mixins: [FormMixin],
components: {
textinput,
optionsinput,
uploadinput,
},
props: {
initialData: {
type: Object,
default: () => ({}),
},
uploadErrors: {
type: Array,
default: () => [],
},
},
data: function() {
const {
clin_01 = 0,
clin_02 = 0,
clin_03 = 0,
clin_04 = 0,
} = this.initialData
return {
clin_01,
clin_02,
clin_03,
clin_04,
}
},
computed: {
totalBudget: function() {
return [this.clin_01, this.clin_02, this.clin_03, this.clin_04].reduce(
function(acc, curr) {
curr = !curr ? 0 : parseFloat(curr)
return acc + curr
},
0
)
},
totalBudgetStr: function() {
return this.totalBudget.toLocaleString('us-US', {
style: 'currency',
currency: 'USD',
})
},
},
methods: {
updateBudget: function() {
document.querySelector('#to-target').innerText = this.totalBudgetStr
},
},
watch: {
clin_01: 'updateBudget',
clin_02: 'updateBudget',
clin_03: 'updateBudget',
clin_04: 'updateBudget',
},
mounted: function() {
this.updateBudget()
},
}