From 4074f11e25730bbdecbec7fd5786b3518fdca47b Mon Sep 17 00:00:00 2001
From: Montana <montana-ctr@friends.dds.mil>
Date: Wed, 12 Jun 2019 16:54:36 -0400
Subject: [PATCH] New TotalsBox vue component

- update to_form data when CLIN amounts change
---
 atst/routes/task_orders/new.py  |  1 +
 js/components/forms/to_form.js  | 15 +++++++++++++++
 js/components/totals_box.js     | 22 ++++++++++++++++++++++
 js/index.js                     |  2 ++
 templates/task_orders/edit.html | 19 +++++++++++++++++++
 5 files changed, 59 insertions(+)
 create mode 100644 js/components/totals_box.js

diff --git a/atst/routes/task_orders/new.py b/atst/routes/task_orders/new.py
index b8284a35..ce699603 100644
--- a/atst/routes/task_orders/new.py
+++ b/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()
 
diff --git a/js/components/forms/to_form.js b/js/components/forms/to_form.js
index 6903ebe4..7c02624c 100644
--- a/js/components/forms/to_form.js
+++ b/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: {
diff --git a/js/components/totals_box.js b/js/components/totals_box.js
new file mode 100644
index 00000000..d7f4e49f
--- /dev/null
+++ b/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
+      ),
+    }
+  },
+}
diff --git a/js/index.js b/js/index.js
index 42a7b7c5..91706a2f 100644
--- a/js/index.js
+++ b/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,
   },
diff --git a/templates/task_orders/edit.html b/templates/task_orders/edit.html
index 5ee999b1..e63bb8ed 100644
--- a/templates/task_orders/edit.html
+++ b/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>