Keep track of children CLINS to update amount

- emit CLIN amount and type when amount changes
- totals are added correctly based on CLIN type

js/components/clin_fields.js

@@ -3,8 +3,8 @@ 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"
+const JEDI_CLIN_TYPE = 'jedi_clin_type'
+const OBLIGATED_AMOUNT = 'obligated_amount'
 
 export default {
   name: 'clin-fields',
@@ -22,6 +22,10 @@ export default {
       default: 0,
     },
     initialClinType: String,
+    initialAmount: {
+      type: Number,
+      default: 0,
+    },
   },
 
   data: function() {
@@ -40,6 +44,14 @@ export default {
     this.$root.$on('field-change', this.handleFieldChange)
   },
 
+  created: function() {
+    emitEvent('clin-change', this, {
+      id: this._uid,
+      clinType: this.clinType,
+      amount: this.initialAmount,
+    })
+  },
+
   methods: {
     addLoa: function(event) {
       ++this.loas
@@ -56,12 +68,12 @@ export default {
         }
         else if (event.name.includes(OBLIGATED_AMOUNT)) {
           emitEvent('clin-change', this, {
+            id: this._uid,
             clinType: this.clinType,
-            amount: event.value,
+            amount: parseFloat(event.value),
           })
         }
       }
-
     },
   },
 }

js/components/forms/to_form.js

@@ -39,6 +39,7 @@ export default {
       clinIndex,
       obligated: this.initialObligated || 0,
       total: this.initialTotal || 0,
+      clinChildren: {},
     }
   },
 
@@ -52,11 +53,24 @@ export default {
       ++this.clinIndex
     },
 
-    calculateClinAmounts: function (event) {
-      this.total += parseFloat(event.amount - this.total)
-      if (event.clinType.includes('1') || event.clinType.includes('3')) {
-        this.obligated += parseFloat(event.amount - this.obligated)
+    calculateClinAmounts: function(event) {
+      this.clinChildren[event.id] = {
+        amount: event.amount,
+        type: event.clinType,
       }
+
+      let newTotal = 0
+      let newObligated = 0
+      Object.values(this.clinChildren).forEach(
+        function(clin) {
+          newTotal += clin.amount
+          if (clin.type.includes('1', '3')) {
+            newObligated += clin.amount
+          }
+        }
+      )
+      this.total = newTotal
+      this.obligated = newObligated
     },
   },
 

js/components/totals_box.js

@@ -10,10 +10,10 @@ export default {
   },
 
   computed: {
-    formattedObligated: function () {
+    formattedObligated: function() {
       return formatDollars(this.obligated)
     },
-    formattedContractAmount: function () {
+    formattedContractAmount: function() {
       return formatDollars(this.contractAmount)
     },
   },

templates/task_orders/edit.html

@@ -60,6 +60,7 @@
     v-bind:initial-clin-index='{{ index }}'
     v-bind:initial-loa-count="{{ fields.loas.data | length }}"
     v-bind:initial-clin-type="'{{ fields.jedi_clin_type.data }}'"
+    v-bind:initial-amount='{{ fields.obligated_amount.data }}'
     inline-template>
     <div>
       <div class="form-row">
@@ -159,7 +160,10 @@
 
                 <div v-for="clin in clins">
                   <hr v-if="clinIndex !== 0">
-                  <clin-fields v-bind:initial-clin-index='clinIndex' inline-template>
+                  <clin-fields
+                    v-bind:initial-clin-index='clinIndex'
+                    v-bind:initial-clin-type="'JEDICLINType.JEDI_CLIN_1'"
+                    inline-template>
                     <div>
                       <div class="form-row">
                         <div class="form-col form-col--two-thirds">
@@ -214,6 +218,7 @@
                               </template>
                             </div>
                           </textinput>
+
                         </div>
                       </div>
 
@@ -398,14 +403,14 @@
             v-bind:contract-amount='total'
             >
               <div class="col totals-box">
-                  <div class="h4">Total obligated funds</div>
-                  <div class="h3" v-html="formattedObligated"></div>
-                  <div>This is the funding allocated to cloud services. It may be 100% or a portion of the total task order budget.</div>
+                <div class="h4">Total obligated funds</div>
+                <div class="h3" v-html="formattedObligated"></div>
+                <div>This is the funding allocated to cloud services. It may be 100% or a portion of the total task order budget.</div>
 
-                  <hr>
+                <hr>
 
-                  <div class="h4">Total contract amount</div>
-                  <div class="h3" v-html="formattedContractAmount"></div>
+                <div class="h4">Total contract amount</div>
+                <div class="h3" v-html="formattedContractAmount"></div>
                 <div>This is the value of all funds obligated for this contract, including -- but not limited to -- funds obligated for the cloud.</div>
               </div>
             </totals-box>