leigh-mil
GitHub
commit
52be812292
@ -41,6 +41,7 @@ class TaskOrderForm(BaseForm):
|
||||
)
|
||||
pdf = FileField(
|
||||
None,
|
||||
description="Your file may not exceed 50MB",
|
||||
validators=[
|
||||
FileAllowed(["pdf"], translate("forms.task_order.file_format_not_allowed")),
|
||||
FileLength(message=translate("forms.validators.file_length")),
|
||||
|
||||
@ -20,6 +20,10 @@ export default {
|
||||
mindate: { type: String },
|
||||
maxdate: { type: String },
|
||||
nameTag: { type: String },
|
||||
watch: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
data: function() {
|
||||
@ -138,7 +142,11 @@ export default {
|
||||
|
||||
methods: {
|
||||
_emitChange: function(name, value, valid) {
|
||||
emitEvent('field-change', this, { value, name })
|
||||
emitEvent('field-change', this, {
|
||||
value: value,
|
||||
name: name,
|
||||
watch: this.watch,
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import stickybits from 'stickybits'
|
||||
|
||||
import ClinFields from '../clin_fields'
|
||||
import DateSelector from '../date_selector'
|
||||
import FormMixin from '../../mixins/form'
|
||||
@ -40,4 +42,12 @@ export default {
|
||||
++this.clinIndex
|
||||
},
|
||||
},
|
||||
|
||||
directives: {
|
||||
sticky: {
|
||||
inserted: el => {
|
||||
stickybits(el)
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@ -27,6 +27,10 @@ export default {
|
||||
paragraph: String,
|
||||
noMaxWidth: String,
|
||||
optional: Boolean,
|
||||
watch: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
data: function() {
|
||||
@ -122,6 +126,7 @@ export default {
|
||||
value: this._rawValue(value),
|
||||
valid,
|
||||
name: this.name,
|
||||
watch: this.watch,
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import createNumberMask from 'text-mask-addons/dist/createNumberMask'
|
||||
import { conformToMask } from 'vue-text-mask'
|
||||
|
||||
import { emitEvent } from '../lib/emitters'
|
||||
import FormMixin from '../mixins/form'
|
||||
import textinput from './text_input'
|
||||
import optionsinput from './options_input'
|
||||
@ -22,6 +23,10 @@ export default {
|
||||
initialErrors: {
|
||||
type: Boolean,
|
||||
},
|
||||
watch: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
data: function() {
|
||||
@ -38,6 +43,12 @@ export default {
|
||||
this.attachment = e.target.value
|
||||
this.showErrors = false
|
||||
this.changed = true
|
||||
|
||||
emitEvent('field-change', this, {
|
||||
value: e.target.value,
|
||||
name: this.name,
|
||||
watch: this.watch,
|
||||
})
|
||||
},
|
||||
removeAttachment: function(e) {
|
||||
e.preventDefault()
|
||||
@ -47,6 +58,12 @@ export default {
|
||||
}
|
||||
this.showErrors = false
|
||||
this.changed = true
|
||||
|
||||
emitEvent('field-change', this, {
|
||||
value: e.target.value,
|
||||
name: this.name,
|
||||
watch: this.watch,
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
1
static/icons/question.svg
Normal file
1
static/icons/question.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="question-circle" class="svg-inline--fa fa-question-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"></path></svg>
|
||||
|
After Width: | Height: | Size: 999 B |
@ -58,18 +58,37 @@
|
||||
}
|
||||
|
||||
&.task_order__form {
|
||||
hr {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.totals-box {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
left: 100%;
|
||||
&.icon--question {
|
||||
@include icon-color($color-blue);
|
||||
}
|
||||
}
|
||||
|
||||
.usa-input--validation--dollars input {
|
||||
input {
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
.usa-input__title,
|
||||
.usa-input__title-inline {
|
||||
font-weight: $font-normal;
|
||||
}
|
||||
|
||||
.date-picker {
|
||||
.usa-input__title {
|
||||
font-weight: $font-bold;
|
||||
margin-bottom: $gap;
|
||||
}
|
||||
}
|
||||
|
||||
.usa-form-group-year {
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
@ -77,15 +96,65 @@
|
||||
.usa-alert {
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
}
|
||||
|
||||
.row.row__form-fields {
|
||||
.col {
|
||||
margin-left: $gap;
|
||||
.usa-input {
|
||||
margin-top: $gap;
|
||||
margin-bottom: $gap;
|
||||
}
|
||||
|
||||
.col:first-child {
|
||||
.form-row {
|
||||
margin-bottom: 0;
|
||||
|
||||
.usa-input {
|
||||
margin-left: $gap;
|
||||
margin-right: $gap;
|
||||
}
|
||||
|
||||
.form-col:first-child {
|
||||
.usa-input {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-col:last-child {
|
||||
.usa-input {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.task-order__loa-fieldset {
|
||||
.usa-input {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
margin: $gap 0;
|
||||
}
|
||||
|
||||
input:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
input:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
button.icon-link {
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
font-size: $base-font-size;
|
||||
|
||||
&.icon-link__add-another-clin {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.task-order__pdf-help-text {
|
||||
margin-bottom: 4 * $gap;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -5,7 +5,8 @@
|
||||
label=field.label | striptags,
|
||||
description=field.description,
|
||||
mindate=None,
|
||||
maxdate=None) -%}
|
||||
maxdate=None,
|
||||
watch=False) -%}
|
||||
|
||||
<date-selector
|
||||
{% if maxdate %}maxdate="{{ maxdate.strftime("%Y-%m-%d") }}"{% endif %}
|
||||
@ -13,6 +14,7 @@
|
||||
initialmonth="{{ field.data.month }}"
|
||||
initialday="{{ field.data.day }}"
|
||||
initialyear="{{ field.data.year }}"
|
||||
v-bind:watch='{{ watch | string | lower }}'
|
||||
inline-template>
|
||||
|
||||
<fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
|
||||
|
||||
@ -15,7 +15,8 @@
|
||||
classes='',
|
||||
noMaxWidth=False,
|
||||
optional=False,
|
||||
showLabel=True) -%}
|
||||
showLabel=True,
|
||||
watch=False) -%}
|
||||
|
||||
<textinput
|
||||
v-cloak
|
||||
@ -27,6 +28,7 @@
|
||||
{% if field.errors %}v-bind:initial-errors='{{ field.errors | list }}'{% endif %}
|
||||
v-bind:optional={{ optional|lower }}
|
||||
key='{{ field.name }}'
|
||||
:watch='{{ watch | string | lower }}'
|
||||
inline-template>
|
||||
|
||||
<div
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{% from "components/icon.html" import Icon %}
|
||||
|
||||
{% macro UploadInput(field, show_label=False) -%}
|
||||
{% macro UploadInput(field, show_label=False, watch=False) -%}
|
||||
<uploadinput
|
||||
inline-template
|
||||
{% if not field.errors %}
|
||||
@ -8,6 +8,7 @@
|
||||
{% else %}
|
||||
v-bind:initial-errors='true'
|
||||
{% endif %}
|
||||
v-bind:watch='{{ watch | string | lower }}'
|
||||
>
|
||||
<div>
|
||||
<div v-show="hasAttachment" class="uploaded-file">
|
||||
|
||||
@ -12,9 +12,8 @@
|
||||
|
||||
{% macro LOAInput() %}
|
||||
<div v-for="loa in loas">
|
||||
<textinput :name="'clins-' + clinIndex + '-loas-' + loaIndex(loa)" inline-template>
|
||||
<div>
|
||||
|
||||
<textinput :name="'clins-' + clinIndex + '-loas-' + loaIndex(loa)" :watch='true' inline-template>
|
||||
<div class="usa-input usa-input--validation--anything">
|
||||
<masked-input
|
||||
v-on:input='onInput'
|
||||
v-on:blur='onBlur'
|
||||
@ -41,6 +40,7 @@
|
||||
</textinput>
|
||||
</div>
|
||||
|
||||
<!-- TODO: Update icon to match designs -->
|
||||
<button
|
||||
class="icon-link"
|
||||
v-on:click="addLoa"
|
||||
@ -61,24 +61,33 @@
|
||||
v-bind:initial-loa-count="{{ fields.loas.data | length }}"
|
||||
inline-template>
|
||||
<div>
|
||||
<div class="row row__form-fields">
|
||||
<div class="col">
|
||||
{{ OptionsInput(fields.jedi_clin_type) }}
|
||||
<div class="form-row">
|
||||
<div class="form-col form-col--two-thirds">
|
||||
{{ OptionsInput(fields.jedi_clin_type, watch=True) }}
|
||||
</div>
|
||||
<div class="col">
|
||||
{{ TextInput(fields.number) }}
|
||||
<div class="form-col form-col--third">
|
||||
{{ TextInput(fields.number, watch=True) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>Line of accounting (43 characters)</div>
|
||||
{% for loa in fields.loas %}
|
||||
{{ TextInput(loa, showLabel=False) }}
|
||||
{% endfor %}
|
||||
<div class="usa-input">
|
||||
<fieldset class="usa-input__choices task-order__loa-fieldset">
|
||||
<legend>
|
||||
<div class="usa-input__title">
|
||||
Line of accounting (43 characters)
|
||||
</div>
|
||||
</legend>
|
||||
{% for loa in fields.loas %}
|
||||
{{ TextInput(loa, showLabel=False, watch=True) }}
|
||||
{% endfor %}
|
||||
|
||||
{{ LOAInput() }}
|
||||
{{ DatePicker(fields.start_date) }}
|
||||
{{ DatePicker(fields.end_date) }}
|
||||
{{ TextInput(fields.obligated_amount, validation='dollars') }}
|
||||
{{ LOAInput() }}
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
{{ DatePicker(fields.start_date, watch=True) }}
|
||||
{{ DatePicker(fields.end_date, watch=True) }}
|
||||
{{ TextInput(fields.obligated_amount, validation='dollars', watch=True) }}
|
||||
</div>
|
||||
</clin-fields>
|
||||
{% endmacro %}
|
||||
@ -93,269 +102,288 @@
|
||||
{% endif %}
|
||||
<form id="new-task-order" action='{{ action }}' method="POST" autocomplete="off" enctype="multipart/form-data">
|
||||
{{ form.csrf_token }}
|
||||
|
||||
{% call StickyCTA(text="Add Funding") %}
|
||||
<span class="action-group">
|
||||
<input type="submit" formaction="{{ review_action }}" tabindex="0" value="Review task order" form="new-task-order" class="usa-button usa-button-primary">
|
||||
<input type="submit" tabindex="0" value="Save" form="new-task-order" class="usa-button usa-button-secondary">
|
||||
<a
|
||||
href="{{ cancel_url }}"
|
||||
class="action-group__action icon-link">
|
||||
{{ "common.cancel" | translate }}
|
||||
</a>
|
||||
</span>
|
||||
{% endcall %}
|
||||
|
||||
<to-form inline-template v-bind:initial-clin-count="{{ form.clins.data | length }}">
|
||||
<div class="task-order task_order__form">
|
||||
<p class="section-description">
|
||||
{{ "task_orders.new.form_help_text" | translate }}
|
||||
</p>
|
||||
<div>
|
||||
{% call StickyCTA(text="Add Funding") %}
|
||||
<span class="action-group">
|
||||
<!-- todo: implement the review button -->
|
||||
<input type="submit" formaction="{{ review_action }}" tabindex="0" value="Review task order" form="new-task-order" class="usa-button usa-button-primary">
|
||||
<input
|
||||
type="submit"
|
||||
class="usa-button usa-button-secondary"
|
||||
tabindex="0"
|
||||
:disabled="!changed"
|
||||
value="{{ 'common.save' | translate }}"
|
||||
form="new-task-order"/>
|
||||
<a
|
||||
href="{{ cancel_url }}"
|
||||
class="action-group__action icon-link">
|
||||
{{ "common.cancel" | translate }}
|
||||
</a>
|
||||
</span>
|
||||
{% endcall %}
|
||||
|
||||
<hr>
|
||||
<div class="task-order task_order__form">
|
||||
<p class="section-description">
|
||||
{{ "task_orders.new.form_help_text" | translate }}
|
||||
</p>
|
||||
|
||||
{% include "fragments/flash.html" %}
|
||||
<hr>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="h1">Add your task order</div>
|
||||
{{ TextInput(form.number, validation='taskOrderNumber') }}
|
||||
{% include "fragments/flash.html" %}
|
||||
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="h1">Add your task order</div>
|
||||
{{ TextInput(form.number, validation='taskOrderNumber') }}
|
||||
|
||||
<div class="h3">Add the summary of cloud funding</div>
|
||||
<div>
|
||||
Data must match with what is in your uploaded document.
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
{% for clin in form.clins %}
|
||||
{{ CLINFields(clin, index=loop.index - 1) }}
|
||||
{% endfor %}
|
||||
<div class="h3">Add the summary of cloud funding</div>
|
||||
<div>
|
||||
Data must match with what is in your uploaded document.
|
||||
</div>
|
||||
|
||||
<div v-for="clin in clins">
|
||||
<hr v-if="clinIndex !== 0">
|
||||
<clin-fields v-bind:initial-clin-index='clinIndex' inline-template>
|
||||
<div>
|
||||
<div class="row row__form-fields">
|
||||
<div class="col">
|
||||
<div class="usa-input">
|
||||
<fieldset data-ally-disabled="true" class="usa-input__choices">
|
||||
<legend>
|
||||
<div class="usa-input__title">
|
||||
CLIN type
|
||||
</div>
|
||||
</legend>
|
||||
<select :id="'clins-' + clinIndex + '-jedi_clin_type'" :name="'clins-' + clinIndex + '-jedi_clin_type'">
|
||||
<option value="JEDI_CLIN_1">{{ "forms.task_order.clin_01_label" | translate }}</option>
|
||||
<option value="JEDI_CLIN_2">{{ "forms.task_order.clin_02_label" | translate }}</option>
|
||||
<option value="JEDI_CLIN_3">{{ "forms.task_order.clin_03_label" | translate }}</option>
|
||||
<option value="JEDI_CLIN_4">{{ "forms.task_order.clin_04_label" | translate }}</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
{% for clin in form.clins %}
|
||||
{{ CLINFields(clin, index=loop.index - 1) }}
|
||||
{% endfor %}
|
||||
|
||||
<div v-for="clin in clins">
|
||||
<hr v-if="clinIndex !== 0">
|
||||
<clin-fields v-bind:initial-clin-index='clinIndex' inline-template>
|
||||
<div>
|
||||
<div class="form-row">
|
||||
<div class="form-col form-col--two-thirds">
|
||||
<optionsinput :name="'clins-' + clinIndex + '-jedi_clin_type'" :watch='true' inline-template>
|
||||
<div class="usa-input">
|
||||
<fieldset data-ally-disabled="true" class="usa-input__choices" v-on:change="onInput">
|
||||
<legend>
|
||||
<div class="usa-input__title">
|
||||
CLIN type
|
||||
</div>
|
||||
</legend>
|
||||
<select :id='name' :name='name'>
|
||||
<option value="JEDI_CLIN_1">{{ "forms.task_order.clin_01_label" | translate }}</option>
|
||||
<option value="JEDI_CLIN_2">{{ "forms.task_order.clin_02_label" | translate }}</option>
|
||||
<option value="JEDI_CLIN_3">{{ "forms.task_order.clin_03_label" | translate }}</option>
|
||||
<option value="JEDI_CLIN_4">{{ "forms.task_order.clin_04_label" | translate }}</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
</div>
|
||||
</optionsinput>
|
||||
</div>
|
||||
<div class="form-col form-col--third">
|
||||
<textinput :name="'clins-' + clinIndex + '-number'" :watch='true' inline-template>
|
||||
<div class="usa-input">
|
||||
<label :for="name">
|
||||
<span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
|
||||
<span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
|
||||
<div class="usa-input__title">CLIN</div>
|
||||
</label>
|
||||
|
||||
<masked-input
|
||||
v-on:input='onInput'
|
||||
v-on:blur='onBlur'
|
||||
v-on:change='onChange'
|
||||
v-bind:value='value'
|
||||
v-bind:mask='mask'
|
||||
v-bind:pipe='pipe'
|
||||
v-bind:keep-char-positions='keepCharPositions'
|
||||
v-bind:aria-invalid='showError'
|
||||
type='text'
|
||||
:id='name'
|
||||
ref='input'>
|
||||
</masked-input>
|
||||
|
||||
<input type='hidden' v-bind:value='rawValue' :name='name' />
|
||||
|
||||
<template v-if='showError'>
|
||||
<span class='usa-input__message' v-html='validationError'></span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class='usa-input__message'></span>
|
||||
</template>
|
||||
</div>
|
||||
</textinput>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<textinput :name="'clins-' + clinIndex + '-number'" inline-template>
|
||||
<div class="usa-input">
|
||||
<label :for="name">
|
||||
<span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
|
||||
<span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
|
||||
<div class="usa-input__title">CLIN</div>
|
||||
</label>
|
||||
|
||||
<masked-input
|
||||
v-on:input='onInput'
|
||||
v-on:blur='onBlur'
|
||||
v-on:change='onChange'
|
||||
v-bind:value='value'
|
||||
v-bind:mask='mask'
|
||||
v-bind:pipe='pipe'
|
||||
v-bind:keep-char-positions='keepCharPositions'
|
||||
v-bind:aria-invalid='showError'
|
||||
type='text'
|
||||
:id='name'
|
||||
ref='input'>
|
||||
</masked-input>
|
||||
|
||||
<input type='hidden' v-bind:value='rawValue' :name='name' />
|
||||
|
||||
<template v-if='showError'>
|
||||
<span class='usa-input__message' v-html='validationError'></span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class='usa-input__message'></span>
|
||||
</template>
|
||||
</div>
|
||||
</textinput>
|
||||
<div class="usa-input">
|
||||
<fieldset class="usa-input__choices task-order__loa-fieldset">
|
||||
<legend>
|
||||
<div class="usa-input__title">
|
||||
Line of accounting (43 characters)
|
||||
</div>
|
||||
</legend>
|
||||
{{ LOAInput() }}
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<date-selector :name-tag="'clins-' + clinIndex + '-start_date'" :watch='true' 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'" :watch='true' 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>
|
||||
|
||||
<textinput :name="'clins-' + clinIndex + '-obligated_amount'" validation="dollars" :watch='true' inline-template>
|
||||
<div class="usa-input usa-input--validation--dollars noMaxWidth">
|
||||
<label :for="name">
|
||||
<div class="usa-input__title">Funds obligated for cloud</div>
|
||||
<span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
|
||||
<span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
|
||||
</label>
|
||||
|
||||
<masked-input
|
||||
v-on:input='onInput'
|
||||
v-on:blur='onBlur'
|
||||
v-on:change='onChange'
|
||||
v-bind:value='value'
|
||||
v-bind:mask='mask'
|
||||
v-bind:pipe='pipe'
|
||||
v-bind:keep-char-positions='keepCharPositions'
|
||||
v-bind:aria-invalid='showError'
|
||||
v-bind:show-mask='true'
|
||||
type='text'
|
||||
:id='name'
|
||||
ref='input'>
|
||||
</masked-input>
|
||||
|
||||
<input type='hidden' v-bind:value='rawValue' :name='name' />
|
||||
|
||||
<template v-if='showError'>
|
||||
<span class='usa-input__message' v-html='validationError'></span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class='usa-input__message'></span>
|
||||
</template>
|
||||
</div>
|
||||
</textinput>
|
||||
</div>
|
||||
</clin-fields>
|
||||
</div>
|
||||
|
||||
<div>Line of accounting (43 characters)</div>
|
||||
{{ LOAInput() }}
|
||||
<!-- TODO: Update icon to match designs -->
|
||||
<button
|
||||
class="icon-link icon-link__add-another-clin"
|
||||
v-on:click="addClin"
|
||||
type="button">
|
||||
{{ Icon('plus') }}
|
||||
<span>Add another CLIN or Sub-CLIN</span>
|
||||
</button>
|
||||
|
||||
<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>
|
||||
|
||||
<textinput :name="'clins-' + clinIndex + '-obligated_amount'" validation="dollars" inline-template>
|
||||
<div>
|
||||
<label :for="name">
|
||||
<span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
|
||||
<span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
|
||||
<div class="usa-input__title">Funds obligated for cloud</div>
|
||||
</label>
|
||||
|
||||
<masked-input
|
||||
v-on:input='onInput'
|
||||
v-on:blur='onBlur'
|
||||
v-on:change='onChange'
|
||||
v-bind:value='value'
|
||||
v-bind:mask='mask'
|
||||
v-bind:pipe='pipe'
|
||||
v-bind:keep-char-positions='keepCharPositions'
|
||||
v-bind:aria-invalid='showError'
|
||||
v-bind:show-mask='true'
|
||||
type='text'
|
||||
:id='name'
|
||||
ref='input'>
|
||||
</masked-input>
|
||||
|
||||
<input type='hidden' v-bind:value='rawValue' :name='name' />
|
||||
|
||||
<template v-if='showError'>
|
||||
<span class='usa-input__message' v-html='validationError'></span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class='usa-input__message'></span>
|
||||
</template>
|
||||
</div>
|
||||
</textinput>
|
||||
</div>
|
||||
</clin-fields>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="icon-link"
|
||||
v-on:click="addClin"
|
||||
type="button">
|
||||
{{ Icon('plus') }}
|
||||
<span>Add another CLIN or Sub-CLIN</span>
|
||||
</button>
|
||||
|
||||
<hr>
|
||||
<div class="h3">Upload your supporting documentation</div>
|
||||
<div>
|
||||
Upload a single PDF containing all relevant information. {{ Icon('help')}}
|
||||
</div>
|
||||
{{ UploadInput(form.pdf) }}
|
||||
<hr>
|
||||
<div class="h3">Upload your supporting documentation</div>
|
||||
<div class="task-order__pdf-help-text">
|
||||
Upload a single PDF containing all relevant information. {{ Icon('question')}}
|
||||
</div>
|
||||
{{ UploadInput(form.pdf, watch=True) }}
|
||||
</div>
|
||||
{{ TotalsBox(task_order=task_order) }}
|
||||
</div>
|
||||
{{ TotalsBox(task_order=task_order) }}
|
||||
</div>
|
||||
</div>
|
||||
</to-form>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user