New TotalsBox vue component

- update to_form data when CLIN amounts change

atst/routes/task_orders/new.py

@@ -16,6 +16,7 @@ def render_task_orders_edit(portfolio_id=None, task_order_id=None, form=None):
         portfolio_id = task_order.portfolio_id
         render_args["form"] = form or TaskOrderForm(**task_order.to_dictionary())
         render_args["task_order_id"] = task_order_id
+        render_args["task_order"] = task_order
     else:
         render_args["form"] = form or TaskOrderForm()
 

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

js/index.js

@@ -41,6 +41,7 @@ import DeleteConfirmation from './components/delete_confirmation'
 import NewEnvironment from './components/forms/new_environment'
 import EnvironmentRole from './components/environment_role'
 import SemiCollapsibleText from './components/semi_collapsible_text'
+import TotalsBox from './components/totals_box'
 import ToForm from './components/forms/to_form'
 import ClinFields from './components/clin_fields'
 
@@ -85,6 +86,7 @@ const app = new Vue({
     NewEnvironment,
     EnvironmentRole,
     SemiCollapsibleText,
+    TotalsBox,
     ToForm,
     ClinFields,
   },

templates/task_orders/edit.html

@@ -384,6 +384,25 @@
             </div>
             {{ TotalsBox(task_order=task_order) }}
           </div>
+
+          <totals-box
+            inline-template
+            v-bind:additional-obligated='additionalObligatedAmount'
+            v-bind:additional-contract-amount='totalClinAmount'
+            >
+            <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>
+
+                <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>
       </div>
     </to-form>