Add funding validation to clinfields vue component

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}`