203 lines
8.7 KiB
HTML
203 lines
8.7 KiB
HTML
{% extends "portfolios/base.html" %}
|
|
|
|
{% from 'components/date_picker.html' import DatePicker %}
|
|
{% from 'components/icon.html' import Icon %}
|
|
{% from 'components/save_button.html' import SaveButton %}
|
|
{% from 'components/options_input.html' import OptionsInput %}
|
|
{% from 'components/text_input.html' import TextInput %}
|
|
{% from 'components/upload_input.html' import UploadInput %}
|
|
|
|
{% macro CLINFields(fields) %}
|
|
<div>
|
|
<hr>
|
|
{{ OptionsInput(fields.jedi_clin_type) }}
|
|
{{ TextInput(fields.number) }}
|
|
{{ DatePicker(fields.start_date) }}
|
|
{{ DatePicker(fields.end_date) }}
|
|
{{ 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 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>
|
|
|
|
<date-selector :name-tag="'clins-' + clinIndex + '-start_date'" inline-template>
|
|
<fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
|
|
<legend>
|
|
<div class="usa-input__title">
|
|
Start of period of performance (PoP)
|
|
</div>
|
|
</legend>
|
|
|
|
<div class="date-picker-component">
|
|
<input :name="name" v-bind:value="formattedDate" 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"
|
|
v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
|
|
v-model="month"
|
|
/>
|
|
</div>
|
|
|
|
<div class="usa-form-group usa-form-group-day">
|
|
<label>Day</label>
|
|
<input
|
|
name="date-day"
|
|
maxlength="2"
|
|
min="1"
|
|
type="number"
|
|
v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
|
|
v-bind:max="daysMaxCalculation"
|
|
v-model="day"
|
|
/>
|
|
</div>
|
|
|
|
<div class="usa-form-group usa-form-group-year">
|
|
<label>Year</label>
|
|
<input
|
|
name="date-year"
|
|
maxlength="4"
|
|
type="number"
|
|
v-model="year"
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div class="usa-form-group-date-ok" v-if="isDateValid">
|
|
{{ Icon("ok", classes="icon--green") }}
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</date-selector>
|
|
|
|
<date-selector :name-tag="'clins-' + clinIndex + '-end_date'" inline-template>
|
|
<fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
|
|
<legend>
|
|
<div class="usa-input__title">
|
|
End of period of performance (PoP)
|
|
</div>
|
|
</legend>
|
|
|
|
<div class="date-picker-component">
|
|
<input :name="name" v-bind:value="formattedDate" 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"
|
|
v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
|
|
v-model="month"
|
|
/>
|
|
</div>
|
|
|
|
<div class="usa-form-group usa-form-group-day">
|
|
<label>Day</label>
|
|
<input
|
|
name="date-day"
|
|
maxlength="2"
|
|
min="1"
|
|
type="number"
|
|
v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
|
|
v-bind:max="daysMaxCalculation"
|
|
v-model="day"
|
|
/>
|
|
</div>
|
|
|
|
<div class="usa-form-group usa-form-group-year">
|
|
<label>Year</label>
|
|
<input
|
|
name="date-year"
|
|
maxlength="4"
|
|
type="number"
|
|
v-model="year"
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div class="usa-form-group-date-ok" v-if="isDateValid">
|
|
{{ Icon("ok", classes="icon--green") }}
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</date-selector>
|
|
|
|
<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
|
|
</button>
|
|
{{ UploadInput(form.pdf) }}
|
|
</form>
|
|
</to-form>
|
|
</div>
|
|
{% endblock %}
|