New TotalsBox vue component

- update to_form data when CLIN amounts change

js/components/forms/to_form.js

@@ -6,6 +6,7 @@ import FormMixin from '../../mixins/form'
 import optionsinput from '../options_input'
 import SemiCollapsibleText from '../semi_collapsible_text'
 import textinput from '../text_input'
+import TotalsBox from '../totals_box'
 import uploadinput from '../upload_input'
 
 export default {
@@ -19,6 +20,7 @@ export default {
     optionsinput,
     SemiCollapsibleText,
     textinput,
+    TotalsBox,
     uploadinput,
   },
 
@@ -33,14 +35,27 @@ export default {
     return {
       clins,
       clinIndex,
+      totalClinAmount: 0,
+      additionalObligatedAmount: 0,
     }
   },
 
+  mounted: function() {
+    this.$root.$on('clin-change', this.calculateClinAmounts)
+  },
+
   methods: {
     addClin: function(event) {
       ++this.clins
       ++this.clinIndex
     },
+
+    calculateClinAmounts: function (event) {
+      this.totalClinAmount += parseFloat(event.amount - this.totalClinAmount)
+      if (event.clinType.includes('1') || event.clinType.includes('3')) {
+        this.additionalObligatedAmount += parseFloat(event.amount - this.additionalObligatedAmount)
+      }
+    },
   },
 
   directives: {

js/components/totals_box.js

@@ -0,0 +1,22 @@
+import { formatDollars } from '../lib/dollars'
+
+export default {
+  name: 'totalsbox',
+
+  props: {
+    name: String,
+    additionalObligated: Number,
+    additionalContractAmount: Number,
+  },
+
+  data: function() {
+    return {
+      obligated: formatDollars(
+        this.additionalObligated
+      ),
+      contractAmount: formatDollars(
+        this.additionalContractAmount
+      ),
+    }
+  },
+}