Add change handler to clin field components

- emit clin type and obligated amount

js/components/clin_fields.js

@@ -1,7 +1,11 @@
 import DateSelector from './date_selector'
+import { emitEvent } from '../lib/emitters'
 import optionsinput from './options_input'
 import textinput from './text_input'
 
+const JEDI_CLIN_TYPE = "jedi_clin_type"
+const OBLIGATED_AMOUNT = "obligated_amount"
+
 export default {
   name: 'clin-fields',
 
@@ -17,6 +21,7 @@ export default {
       type: Number,
       default: 0,
     },
+    initialClinType: String,
   },
 
   data: function() {
@@ -27,9 +32,14 @@ export default {
       clinIndex: this.initialClinIndex,
       indexOffset: this.initialLoaCount,
       loas: loas,
+      clinType: this.initialClinType,
     }
   },
 
+  mounted: function() {
+    this.$root.$on('field-change', this.handleFieldChange)
+  },
+
   methods: {
     addLoa: function(event) {
       ++this.loas
@@ -38,5 +48,20 @@ export default {
     loaIndex: function(index) {
       return index + this.indexOffset - 1
     },
+
+    handleFieldChange: function(event) {
+      if (this._uid === event.parent_uid) {
+        if (event.name.includes(JEDI_CLIN_TYPE)) {
+          this.clinType = event.value
+        }
+        else if (event.name.includes(OBLIGATED_AMOUNT)) {
+          emitEvent('clin-change', this, {
+            clinType: this.clinType,
+            amount: event.value,
+          })
+        }
+      }
+
+    },
   },
 }

js/components/forms/to_form.js

@@ -26,6 +26,8 @@ export default {
 
   props: {
     initialClinCount: Number,
+    initialObligated: Number,
+    initialTotal: Number,
   },
 
   data: function() {
@@ -35,8 +37,8 @@ export default {
     return {
       clins,
       clinIndex,
-      totalClinAmount: 0,
-      additionalObligatedAmount: 0,
+      obligated: this.initialObligated || 0,
+      total: this.initialTotal || 0,
     }
   },
 
@@ -51,9 +53,9 @@ export default {
     },
 
     calculateClinAmounts: function (event) {
-      this.totalClinAmount += parseFloat(event.amount - this.totalClinAmount)
+      this.total += parseFloat(event.amount - this.total)
       if (event.clinType.includes('1') || event.clinType.includes('3')) {
-        this.additionalObligatedAmount += parseFloat(event.amount - this.additionalObligatedAmount)
+        this.obligated += parseFloat(event.amount - this.obligated)
       }
     },
   },

js/components/totals_box.js

@@ -5,18 +5,16 @@ export default {
 
   props: {
     name: String,
-    additionalObligated: Number,
-    additionalContractAmount: Number,
+    obligated: Number,
+    contractAmount: Number,
   },
 
-  data: function() {
-    return {
-      obligated: formatDollars(
-        this.additionalObligated
-      ),
-      contractAmount: formatDollars(
-        this.additionalContractAmount
-      ),
-    }
+  computed: {
+    formattedObligated: function () {
+      return formatDollars(this.obligated)
+    },
+    formattedContractAmount: function () {
+      return formatDollars(this.contractAmount)
+    },
   },
 }