diff --git a/js/components/clin_fields.js b/js/components/clin_fields.js index eb958780..3edd7583 100644 --- a/js/components/clin_fields.js +++ b/js/components/clin_fields.js @@ -6,7 +6,10 @@ import { emitEvent } from '../lib/emitters' import Modal from '../mixins/modal' import optionsinput from './options_input' import textinput from './text_input' +import clindollaramount from './clin_dollar_amount' +const TOTAL_AMOUNT = 'total_amount' +const OBLIGATED_AMOUNT = 'obligated_amount' const START_DATE = 'start_date' const END_DATE = 'end_date' const POP = 'period_of_performance' @@ -19,12 +22,21 @@ export default { DateSelector, optionsinput, textinput, + clindollaramount, }, mixins: [Modal], props: { initialClinIndex: Number, + initialTotal: { + type: Number, + default: 0, + }, + initialObligated: { + type: Number, + default: 0, + }, initialStartDate: { type: String, default: null, @@ -54,6 +66,10 @@ export default { const end = !!this.initialEndDate ? new Date(this.initialEndDate) : undefined + const fundingValidation = + this.initialObligated && this.initialTotal + ? false + : this.initialObligated <= this.initialTotal const popValidation = !this.initialStartDate ? false : start < end const clinNumber = !!this.initialClinNumber ? this.initialClinNumber @@ -63,6 +79,7 @@ export default { return { clinIndex: this.initialClinIndex, + clinNumber: clinNumber, startDate: start, endDate: end, popValid: popValidation, @@ -93,6 +110,9 @@ export default { )}.`, }, ], + totalAmount: this.initialTotal || 0, + obligatedAmount: this.initialObligated || 0, + fundingValid: fundingValidation, } }, @@ -101,14 +121,37 @@ export default { }, created: function() { + emitEvent('clin-change', this, { + id: this._uid, + obligatedAmount: this.initialObligated, + totalAmount: this.initialTotal, + }) emitEvent('field-mount', this, { optional: false, name: 'clins-' + this.clinIndex + '-' + POP, valid: this.checkPopValid(), }) + emitEvent('field-mount', this, { + optional: false, + name: TOTAL_AMOUNT, + valid: this.checkFundingValid(), + }) + emitEvent('field-mount', this, { + optional: false, + name: OBLIGATED_AMOUNT, + valid: this.checkFundingValid(), + }) }, methods: { + clinChangeEvent: function() { + emitEvent('clin-change', this, { + id: this._uid, + obligatedAmount: this.initialObligated, + totalAmount: this.initialTotal, + }) + }, + checkPopValid: function() { return ( this.popDateOrder() && @@ -153,9 +196,30 @@ export default { return true }, + checkFundingValid: function() { + return this.obligatedAmount <= this.totalAmount + }, + + validateFunding: function() { + if (this.totalAmount && this.obligatedAmount) { + this.fundingValid = this.checkFundingValid() + } + + emitEvent('field-change', this, { + name: OBLIGATED_AMOUNT, + valid: this.checkFundingValid(), + }) + }, + handleFieldChange: function(event) { if (this._uid === event.parent_uid) { - if (event.name.includes(START_DATE)) { + if (event.name.includes(TOTAL_AMOUNT)) { + this.totalAmount = parseFloat(event.value) + this.validateFunding() + } else if (event.name.includes(OBLIGATED_AMOUNT)) { + this.obligatedAmount = parseFloat(event.value) + this.validateFunding() + } else if (event.name.includes(START_DATE)) { if (!!event.value) this.startDate = new Date(event.value) if (!!event.valid) this.startDateValid = event.valid this.validatePop() @@ -186,6 +250,10 @@ export default { return `CLIN` } }, + percentObligated: function() { + const percentage = (this.obligatedAmount / this.totalAmount) * 100 + return !!percentage ? `${percentage.toFixed(1)}%` : '0%' + }, removeModalId: function() { return `remove-clin-${this.clinIndex}`