Vue for adding multiple CLINs
This commit is contained in:
leigh-mil
parent
cca101b50c
commit
e017cd12af
@ -27,3 +27,10 @@ class CLIN(Base, mixins.TimestampsMixin):
|
||||
end_date = Column(Date, nullable=False)
|
||||
obligated_amount = Column(Numeric(scale=2), nullable=False)
|
||||
jedi_clin_type = Column(SQLAEnum(JEDICLINType, native_enum=False), nullable=False)
|
||||
|
||||
def to_dictionary(self):
|
||||
return {
|
||||
c.name: getattr(self, c.name)
|
||||
for c in self.__table__.columns
|
||||
if c.name not in ["id"]
|
||||
}
|
||||
|
||||
@ -129,6 +129,9 @@ class TaskOrder(Base, mixins.TimestampsMixin):
|
||||
def to_dictionary(self):
|
||||
return {
|
||||
"portfolio_name": self.portfolio_name,
|
||||
"clins": [
|
||||
clin.to_dictionary() for clin in self.clins
|
||||
],
|
||||
**{
|
||||
c.name: getattr(self, c.name)
|
||||
for c in self.__table__.columns
|
||||
|
||||
@ -6,87 +6,14 @@ export default {
|
||||
name: 'clin-fields',
|
||||
|
||||
components: {
|
||||
DateSelector,
|
||||
optionsinput,
|
||||
textinput,
|
||||
},
|
||||
|
||||
props: {
|
||||
clinIndex: String,
|
||||
initialClinIndex: Number,
|
||||
},
|
||||
|
||||
data: function() {
|
||||
return {clinIndex: this.initialClinIndex}
|
||||
},
|
||||
// get clin index from props and pass into template
|
||||
template: `
|
||||
<div>
|
||||
<optionsinput name="clins-0-jedi_clin_type">
|
||||
</optionsinput>
|
||||
<div class=" usa-input usa-input--validation--anything usa-input--success">
|
||||
<label for="clins-0-number">
|
||||
<div class="usa-input__title"> Number </div>
|
||||
</label>
|
||||
<input type="text" id="clins-0-number" placeholder="">
|
||||
<input type="hidden" name="clins-0-number" value="123">
|
||||
</div>
|
||||
<fieldset class="usa-input date-picker">
|
||||
<legend>
|
||||
<div class="usa-input__title"> Start Date
|
||||
</div>
|
||||
</legend>
|
||||
<div class="date-picker-component">
|
||||
<input name="clins-0-start_date" type="hidden">
|
||||
<div class="usa-form-group usa-form-group-month">
|
||||
<label>Month
|
||||
</label>
|
||||
<input name="date-month" max="12" maxlength="2" min="1" type="number" class="">
|
||||
</div>
|
||||
<div class="usa-form-group usa-form-group-day">
|
||||
<label>Day
|
||||
</label>
|
||||
<input name="date-day" maxlength="2" min="1" type="number" max="31" class="">
|
||||
</div>
|
||||
<div class="usa-form-group usa-form-group-year">
|
||||
<label>Year
|
||||
</label>
|
||||
<input id="date-year" maxlength="4" type="number">
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<p class="usa-input-error-message">
|
||||
</p>
|
||||
</fieldset>
|
||||
<fieldset class="usa-input date-picker">
|
||||
<legend>
|
||||
<div class="usa-input__title"> End Date
|
||||
</div>
|
||||
</legend>
|
||||
<div class="date-picker-component">
|
||||
<input name="clins-0-end_date" type="hidden">
|
||||
<div class="usa-form-group usa-form-group-month">
|
||||
<label>Month
|
||||
</label>
|
||||
<input name="date-month" max="12" maxlength="2" min="1" type="number" class="">
|
||||
</div>
|
||||
<div class="usa-form-group usa-form-group-day">
|
||||
<label>Day
|
||||
</label>
|
||||
<input name="date-day" maxlength="2" min="1" type="number" max="31" class="">
|
||||
</div>
|
||||
<div class="usa-form-group usa-form-group-year">
|
||||
<label>Year
|
||||
</label>
|
||||
<input id="date-year" maxlength="4" type="number">
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<p class="usa-input-error-message">
|
||||
</p>
|
||||
</fieldset>
|
||||
<div class=" usa-input usa-input--validation--anything">
|
||||
<label for="clins-0-obligated_amount">
|
||||
<div class="usa-input__title"> Obligated Amount
|
||||
</div>
|
||||
</label>
|
||||
<input type="text" id="clins-0-obligated_amount" placeholder="">
|
||||
<input type="hidden" name="clins-0-obligated_amount">
|
||||
</div>
|
||||
</div>`,
|
||||
}
|
||||
|
||||
@ -17,15 +17,16 @@ export default {
|
||||
},
|
||||
|
||||
props: {
|
||||
initialClinCount: String,
|
||||
initialClinCount: Number,
|
||||
},
|
||||
|
||||
data: function() {
|
||||
const clins = this.initialClinCount == 0 ? [''] : []
|
||||
const clinIndex = this.initialClinCount == 0 ? 0 : this.initialClinCount - 1
|
||||
|
||||
return {
|
||||
clins,
|
||||
clinCount: this.initalClinCount - 1,
|
||||
clinIndex,
|
||||
}
|
||||
// pass initialCLINIndex in props and add one each time a clin is added...
|
||||
// this way we can keep track of the clin id for the html name/id/etc
|
||||
@ -34,7 +35,7 @@ export default {
|
||||
methods: {
|
||||
addClin: function(event) {
|
||||
this.clins.push('')
|
||||
this.clinCount = this.clinCount + 1
|
||||
this.clinIndex = this.clinIndex + 1
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@ -12,47 +12,126 @@
|
||||
{{ TextInput(fields.number) }}
|
||||
{{ DatePicker(fields.start_date) }}
|
||||
{{ DatePicker(fields.end_date) }}
|
||||
{{ TextInput(fields.obligated_amount) }}
|
||||
{{ TextInput(fields.obligated_amount, validation='dollars') }}
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% block portfolio_content %}
|
||||
<div class="col task-order-form">
|
||||
{% include "fragments/flash.html" %}
|
||||
<to-form inline-template initial-clin-count='{{ form.clins | length }}'>
|
||||
{% if task_order_id %}
|
||||
{% set action = url_for("task_orders.update", portfolio_id=portfolio.id, task_order_id=task_order_id) %}
|
||||
{% else %}
|
||||
{% set action = url_for("task_orders.update", portfolio_id=portfolio.id) %}
|
||||
{% endif %}
|
||||
<form id="new-task-order" action='{{ action }}' method="POST" autocomplete="off">
|
||||
{{ form.csrf_token }}
|
||||
<!-- TODO: implement save bar with component -->
|
||||
<span class="h3">Add Funding</span>
|
||||
<a
|
||||
href="{{ cancel_url }}"
|
||||
class="action-group__action icon-link">
|
||||
<span class="icon icon--x"></span>
|
||||
{{ "common.cancel" | translate }}
|
||||
</a>
|
||||
{{ SaveButton(text=('common.save' | translate), element='input', form='new-task-order') }}
|
||||
<p>
|
||||
{{ "task_orders.new.form_help_text" | translate }}
|
||||
</p>
|
||||
<hr>
|
||||
{{ TextInput(form.number, validation='taskOrderNumber') }}
|
||||
{% for clin in form.clins %}
|
||||
{{ CLINFields(clin) }}
|
||||
{% endfor %}
|
||||
<div v-for="clin in clins">
|
||||
<!-- do something to display this when no clins exist -->
|
||||
<!-- fix names and ids -->
|
||||
<!-- make new vue component for clin -->
|
||||
<!-- try <clin inline-template v-for="clin in clins"> -->
|
||||
<!-- create CLIN vue component with a template in the component -->
|
||||
<!-- use it to iterate through or if clinCount === 0 -->
|
||||
<clin-fields v-bind:clin-index='clinCount'></clin-fields>
|
||||
</div>
|
||||
<to-form inline-template v-bind:initial-clin-count='{{ form.clins.data | length }}'>
|
||||
{% if task_order_id %}
|
||||
{% set action = url_for("task_orders.update", portfolio_id=portfolio.id, task_order_id=task_order_id) %}
|
||||
{% else %}
|
||||
{% set action = url_for("task_orders.update", portfolio_id=portfolio.id) %}
|
||||
{% endif %}
|
||||
<form id="new-task-order" action='{{ action }}' method="POST" autocomplete="off">
|
||||
{{ form.csrf_token }}
|
||||
<!-- TODO: implement save bar with component -->
|
||||
<span class="h3">Add Funding</span>
|
||||
<a
|
||||
href="{{ cancel_url }}"
|
||||
class="action-group__action icon-link">
|
||||
<span class="icon icon--x"></span>
|
||||
{{ "common.cancel" | translate }}
|
||||
</a>
|
||||
<input type="submit" tabindex="0" value="Save" form="new-task-order" class="usa-button usa-button-primary">
|
||||
{{ "task_orders.new.form_help_text" | translate }}
|
||||
<hr>
|
||||
{{ TextInput(form.number, validation='taskOrderNumber') }}
|
||||
{% for clin in form.clins %}
|
||||
{{ CLINFields(clin) }}
|
||||
{% endfor %}
|
||||
<div v-for="clin in clins">
|
||||
<hr>
|
||||
<clin-fields v-bind:initial-clin-index='clinIndex' inline-template>
|
||||
<div>
|
||||
<div class="usa-input">
|
||||
<fieldset data-ally-disabled="true" class="usa-input__choices">
|
||||
<legend>
|
||||
<div class="usa-input__title">
|
||||
</div>
|
||||
</legend>
|
||||
<select :id="'clins-' + clinIndex + '-jedi_clin_type'" :name="'clins-' + clinIndex + '-jedi_clin_type'">
|
||||
<option value="JEDI_CLIN_1">CLIN 01 : Unclassified</option>
|
||||
<option value="JEDI_CLIN_2">CLIN 02: Classified</option>
|
||||
<option value="JEDI_CLIN_3">CLIN 03: Unclassified</option>
|
||||
<option value="JEDI_CLIN_4">CLIN 04: Classified</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="usa-input usa-input--validation--anything usa-input--success">
|
||||
<label :for="'clins-' + clinIndex + '-number'">
|
||||
<div class="usa-input__title"> Number </div>
|
||||
</label>
|
||||
<input type="text" :id="'clins-' + clinIndex + '-number'" placeholder="">
|
||||
<input type="hidden" :name="'clins-' + clinIndex + '-number'">
|
||||
</div>
|
||||
<fieldset class="usa-input date-picker">
|
||||
<legend>
|
||||
<div class="usa-input__title"> Start Date
|
||||
</div>
|
||||
</legend>
|
||||
<div class="date-picker-component">
|
||||
<input :name="'clins-' + clinIndex + '-start_date'" type="hidden">
|
||||
<div class="usa-form-group usa-form-group-month">
|
||||
<label>Month
|
||||
</label>
|
||||
<input name="date-month" max="12" maxlength="2" min="1" type="number" class="">
|
||||
</div>
|
||||
<div class="usa-form-group usa-form-group-day">
|
||||
<label>Day
|
||||
</label>
|
||||
<input name="date-day" maxlength="2" min="1" type="number" max="31" class="">
|
||||
</div>
|
||||
<div class="usa-form-group usa-form-group-year">
|
||||
<label>Year
|
||||
</label>
|
||||
<input id="date-year" maxlength="4" type="number">
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<p class="usa-input-error-message">
|
||||
</p>
|
||||
</fieldset>
|
||||
<fieldset class="usa-input date-picker">
|
||||
<legend>
|
||||
<div class="usa-input__title"> End Date
|
||||
</div>
|
||||
</legend>
|
||||
<div class="date-picker-component">
|
||||
<input :name="'clins-' + clinIndex + '-end_date'" type="hidden">
|
||||
<div class="usa-form-group usa-form-group-month">
|
||||
<label>Month
|
||||
</label>
|
||||
<input name="date-month" max="12" maxlength="2" min="1" type="number" class="">
|
||||
</div>
|
||||
<div class="usa-form-group usa-form-group-day">
|
||||
<label>Day
|
||||
</label>
|
||||
<input name="date-day" maxlength="2" min="1" type="number" max="31" class="">
|
||||
</div>
|
||||
<div class="usa-form-group usa-form-group-year">
|
||||
<label>Year
|
||||
</label>
|
||||
<input id="date-year" maxlength="4" type="number">
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
<p class="usa-input-error-message">
|
||||
</p>
|
||||
</fieldset>
|
||||
<div class=" usa-input usa-input--validation--anything">
|
||||
<label :for="'clins-' + clinIndex + '-obligated_amount'">
|
||||
<div class="usa-input__title"> Obligated Amount
|
||||
</div>
|
||||
</label>
|
||||
<input type="text" :id="'clins-' + clinIndex + '-obligated_amount'" placeholder="">
|
||||
<input type="hidden" :name="'clins-' + clinIndex + '-obligated_amount'">
|
||||
</div>
|
||||
</div>
|
||||
</clin-fields>
|
||||
</div>
|
||||
|
||||
<button v-on:click="addClin" type="button">
|
||||
Add CLIN
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user