pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

vue component for tracking CLIN total on task order funding page

Browse Source
This commit is contained in:
dandds 2018-12-21 09:29:39 -05:00
parent e8dde759ad
commit a610e92340
3 changed files with 136 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
js/components/forms/funding.js Normal file
View File

@ -0,0 +1,69 @@
import createNumberMask from 'text-mask-addons/dist/createNumberMask'
import { conformToMask } from 'vue-text-mask'
import FormMixin from '../../mixins/form'
import textinput from '../text_input'
export default {
name: 'funding',
mixins: [FormMixin],
components: {
textinput,
},
props: {
initialData: {
type: Object,
default: () => ({})
}
},
data: function () {
const {
clin_01 = 0,
clin_02 = 0,
clin_03 = 0,
clin_04 = 0,
} = this.initialData
return {
clin_01,
clin_02,
clin_03,
clin_04,
}
},
computed: {
totalBudget: function () {
return [this.clin_01, this.clin_02, this.clin_03, this.clin_04].reduce(
function(acc, curr) {
curr = curr === null ? 0 : parseInt(curr)
return acc + curr;
}, 0
)
},
totalBudgetStr: function () {
return this.formatDollars(this.totalBudget);
},
},
methods: {
formatDollars: function (intValue) {
const mask = createNumberMask({ prefix: '$', allowDecimal: true })
return conformToMask(intValue.toString(), mask).conformedValue
},
updateBudget: function() {
document.querySelector('#to-target').innerText = this.totalBudgetStr
}
},
watch: {
clin_01: 'updateBudget',
clin_02: 'updateBudget',
clin_03: 'updateBudget',
clin_04: 'updateBudget',
}
}

2
js/index.js
View File

@ -15,6 +15,7 @@ import toggler from './components/toggler'
import NewProject from './components/forms/new_project' import NewProject from './components/forms/new_project'
import EditEnvironmentRole from './components/forms/edit_environment_role' import EditEnvironmentRole from './components/forms/edit_environment_role'
import EditProjectRoles from './components/forms/edit_project_roles' import EditProjectRoles from './components/forms/edit_project_roles'
import funding from './components/forms/funding'
import Modal from './mixins/modal' import Modal from './mixins/modal'
import selector from './components/selector' import selector from './components/selector'
import BudgetChart from './components/charts/budget_chart' import BudgetChart from './components/charts/budget_chart'
@ -52,6 +53,7 @@ const app = new Vue({
EditProjectRoles, EditProjectRoles,
RequestsList, RequestsList,
ConfirmationPopover, ConfirmationPopover,
funding,
}, },
mounted: function() { mounted: function() {

114
templates/task_orders/new/funding.html
View File

@ -12,68 +12,84 @@
{% include "fragments/flash.html" %} {% include "fragments/flash.html" %}
<!-- Get Funding Section --> <funding inline-template v-bind:initial-data='{{ form.data|tojson }}'>
<h3>Period of Performance</h3> <div>
<!-- Get Funding Section -->
<h3>Period of Performance</h3>
<p>Choose the dates your task order will cover.</p> <p>Choose the dates your task order will cover.</p>
<p> <p>
Because your funds will be lost if you don’t use them, we strongly recommend Because your funds will be lost if you don’t use them, we strongly recommend
submitting small, short-duration task orders, usually a three month period. submitting small, short-duration task orders, usually a three month period.
We’ll notify you when your period of performance is nearing the end so you can We’ll notify you when your period of performance is nearing the end so you can
request your next set of funds with a new task order. request your next set of funds with a new task order.
</p> </p>
{{ DateInput(form.start_date, placeholder='MM / DD / YYYY', validation='date') }} {{ DateInput(form.start_date, placeholder='MM / DD / YYYY', validation='date') }}
{{ DateInput(form.end_date, placeholder='MM / DD / YYYY', validation='date') }} {{ DateInput(form.end_date, placeholder='MM / DD / YYYY', validation='date') }}
<hr> <hr>
<h3>Cloud Usage Estimate</h3> <h3>Cloud Usage Estimate</h3>
<p> <p>
Calculate how much your cloud usage will cost. A technical representative Calculate how much your cloud usage will cost. A technical representative
should help you complete this calculation. should help you complete this calculation.
<a href="{{ url_for('atst.jedi_csp_calculator') }}"> <a href="{{ url_for('atst.jedi_csp_calculator') }}">
Cloud Service Provider's estimate calculator Cloud Service Provider's estimate calculator
</a> </a>
</p> </p>
<h4>Upload a copy of your CSP Cost Estimate Research</h4> <h4>Upload a copy of your CSP Cost Estimate Research</h4>
<p> <p>
Upload your anticipated cloud usage from the CSP tool linked above. PDFs and Upload your anticipated cloud usage from the CSP tool linked above. PDFs and
screengrabs of the tool are sufficient. screengrabs of the tool are sufficient.
</p> </p>
<p> <p>
This is only an estimation tool to help you make and informed evaluation of This is only an estimation tool to help you make and informed evaluation of
what you expect to use. While you're tied to the dollar amount you specify in what you expect to use. While you're tied to the dollar amount you specify in
your task order, you're not obligated by the resources you indicate in the your task order, you're not obligated by the resources you indicate in the
calculator. calculator.
</p> </p>
<input type="file"> <input type="file">
<hr> <hr>
<h3>Cloud Usage Calculations</h3> <h3>Cloud Usage Calculations</h3>
<p> <p>
Enter the results of your cloud usage calculations. These will correspond with Enter the results of your cloud usage calculations. These will correspond with
your task order's period of performance. your task order's period of performance.
</p> </p>
<h4>Cloud Offerings</h4> <h4>Cloud Offerings</h4>
<p> <p>
Infrastructure as a Service (IaaS) and Platform as a Service (PaaS) offerings Infrastructure as a Service (IaaS) and Platform as a Service (PaaS) offerings
</p> </p>
{{ TextInput(form.clin_01, validation='dollars') }} {{ TextInput(form.clin_01, validation='dollars') }}
{{ TextInput(form.clin_02, validation='dollars') }} {{ TextInput(form.clin_02, validation='dollars') }}
<h4>Cloud Support and Assistance</h4>
<p>
Technical guidance from the cloud service provider, including architecture,
configuration of IaaS and PaaS, integration, troubleshooting assistance, and
other services.
</p>
{{ TextInput(form.clin_03, validation='dollars', tooltip='The cloud support and assistance packages cannot be used as a primary development resource.') }}
{{ TextInput(form.clin_04, validation='dollars', tooltip='The cloud support and assistance packages cannot be used as a primary development resource.') }}
<p>Total Task Order Value</p>
<h4>Cloud Support and Assistance</h4>
<p>
Technical guidance from the cloud service provider, including architecture,
configuration of IaaS and PaaS, integration, troubleshooting assistance, and
other services.
</p>
{{ TextInput(form.clin_03, validation='dollars', tooltip='The cloud support and assistance packages cannot be used as a primary development resource.') }}
{{ TextInput(form.clin_04, validation='dollars', tooltip='The cloud support and assistance packages cannot be used as a primary development resource.') }}
</div>
</funding>
{% endblock %} {% endblock %}
{% block next %}
<div class="row">
<div class="col col--grow">
<p>Total Task Order Value:<br><span id="to-target"></span></p>
</div>
<div class="col col--grow">
{{ super() }}
</div>
</div>
{% endblock %}