vue component for tracking CLIN total on task order funding page

This commit is contained in:
dandds
2018-12-21 09:29:39 -05:00
parent e8dde759ad
commit a610e92340
3 changed files with 136 additions and 49 deletions

View File

@@ -0,0 +1,69 @@
import createNumberMask from 'text-mask-addons/dist/createNumberMask'
import { conformToMask } from 'vue-text-mask'
import FormMixin from '../../mixins/form'
import textinput from '../text_input'
export default {
name: 'funding',
mixins: [FormMixin],
components: {
textinput,
},
props: {
initialData: {
type: Object,
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 === null ? 0 : parseInt(curr)
return acc + curr;
}, 0
)
},
totalBudgetStr: function () {
return this.formatDollars(this.totalBudget);
},
},
methods: {
formatDollars: function (intValue) {
const mask = createNumberMask({ prefix: '$', allowDecimal: true })
return conformToMask(intValue.toString(), mask).conformedValue
},
updateBudget: function() {
document.querySelector('#to-target').innerText = this.totalBudgetStr
}
},
watch: {
clin_01: 'updateBudget',
clin_02: 'updateBudget',
clin_03: 'updateBudget',
clin_04: 'updateBudget',
}
}

View File

@@ -15,6 +15,7 @@ import toggler from './components/toggler'
import NewProject from './components/forms/new_project'
import EditEnvironmentRole from './components/forms/edit_environment_role'
import EditProjectRoles from './components/forms/edit_project_roles'
import funding from './components/forms/funding'
import Modal from './mixins/modal'
import selector from './components/selector'
import BudgetChart from './components/charts/budget_chart'
@@ -52,6 +53,7 @@ const app = new Vue({
EditProjectRoles,
RequestsList,
ConfirmationPopover,
funding,
},
mounted: function() {