Reimplement SaveButton disabled until input change
This commit is contained in:
leigh-mil
parent
ab761d9d88
commit
5be4efb9d9
@ -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,
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@ -74,7 +74,8 @@
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
.usa-input__title, .usa-input__title-inline {
|
||||
.usa-input__title,
|
||||
.usa-input__title-inline {
|
||||
font-weight: $font-normal;
|
||||
}
|
||||
|
||||
|
||||
@ -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,7 +12,7 @@
|
||||
|
||||
{% macro LOAInput() %}
|
||||
<div v-for="loa in loas">
|
||||
<textinput :name="'clins-' + clinIndex + '-loas-' + loaIndex(loa)" inline-template>
|
||||
<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'
|
||||
@ -62,10 +62,10 @@
|
||||
<div>
|
||||
<div class="form-row">
|
||||
<div class="form-col form-col--two-thirds">
|
||||
{{ OptionsInput(fields.jedi_clin_type) }}
|
||||
{{ OptionsInput(fields.jedi_clin_type, watch=True) }}
|
||||
</div>
|
||||
<div class="form-col form-col--third">
|
||||
{{ TextInput(fields.number) }}
|
||||
{{ TextInput(fields.number, watch=True) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -77,16 +77,16 @@
|
||||
</div>
|
||||
</legend>
|
||||
{% for loa in fields.loas %}
|
||||
{{ TextInput(loa, showLabel=False) }}
|
||||
{{ TextInput(loa, showLabel=False, watch=True) }}
|
||||
{% endfor %}
|
||||
|
||||
{{ LOAInput() }}
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
{{ DatePicker(fields.start_date) }}
|
||||
{{ DatePicker(fields.end_date) }}
|
||||
{{ TextInput(fields.obligated_amount, validation='dollars') }}
|
||||
{{ DatePicker(fields.start_date, watch=True) }}
|
||||
{{ DatePicker(fields.end_date, watch=True) }}
|
||||
{{ TextInput(fields.obligated_amount, validation='dollars', watch=True) }}
|
||||
</div>
|
||||
</clin-fields>
|
||||
{% endmacro %}
|
||||
@ -101,277 +101,287 @@
|
||||
{% 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="form-row">
|
||||
<div class="form-col form-col--two-thirds">
|
||||
<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="form-col form-col--third">
|
||||
<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 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>
|
||||
<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 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>
|
||||
|
||||
<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>
|
||||
|
||||
<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('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('help')}}
|
||||
</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