New TotalsBox vue component

- update to_form data when CLIN amounts change
This commit is contained in:
Montana 2019-06-12 16:54:36 -04:00 committed by montana
parent 52be812292
commit 4074f11e25
5 changed files with 59 additions and 0 deletions

View File

@ -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()

View File

@ -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: {

View File

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

View File

@ -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,
},

View File

@ -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>