New TotalsBox vue component
- update to_form data when CLIN amounts change
This commit is contained in:
parent
52be812292
commit
4074f11e25
@ -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()
|
||||
|
||||
|
@ -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: {
|
||||
|
22
js/components/totals_box.js
Normal file
22
js/components/totals_box.js
Normal 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
|
||||
),
|
||||
}
|
||||
},
|
||||
}
|
@ -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,
|
||||
},
|
||||
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user