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)
+    },
   },
 }

templates/task_orders/edit.html

@@ -59,6 +59,7 @@
   <clin-fields
     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 }}'"
     inline-template>
     <div>
       <div class="form-row">
@@ -102,7 +103,15 @@
   {% endif %}
   <form id="new-task-order" action='{{ action }}' method="POST" autocomplete="off" enctype="multipart/form-data">
     {{ form.csrf_token }}
-    <to-form inline-template v-bind:initial-clin-count="{{ form.clins.data | length }}">
+
+    {% set obligated = task_order.total_obligated_funds if task_order else 0 %}
+    {% set total = task_order.total_contract_amount if task_order else 0 %}
+
+    <to-form
+      inline-template
+      v-bind:initial-obligated='{{ obligated }}'
+      v-bind:initial-total='{{ total }}'
+      v-bind:initial-clin-count="{{ form.clins.data | length }}">
       <div>
         {% call StickyCTA(text="Add Funding") %}
           <span class="action-group">
@@ -382,26 +391,26 @@
                 </div>
               {{ UploadInput(form.pdf, watch=True) }}
             </div>
-            {{ TotalsBox(task_order=task_order) }}
-          </div>
 
-          <totals-box
+            <totals-box
             inline-template
-            v-bind:additional-obligated='additionalObligatedAmount'
-            v-bind:additional-contract-amount='totalClinAmount'
+            v-bind:obligated='obligated'
+            v-bind:contract-amount='total'
             >
-            <div class="col totals-box">
-                <div class="h4">Total obligated funds</div>
-                <div class="h3">!{ obligated }</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="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>
 
-                <hr>
+                  <hr>
 
-                <div class="h4">Total contract amount</div>
-                <div class="h3">!{ contractAmount }</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>
+                  <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>
+
+          </div>
 
         </div>
       </div>