Move html out of clin fields macro and fix initial values in pop date range when there is no form data
This commit is contained in:
leigh-mil
parent
eef15f311f
commit
5e1ce65662
@ -199,5 +199,5 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
"version": "0.12.5"
|
||||
"version": "0.12.6"
|
||||
}
|
||||
|
||||
@ -15,14 +15,20 @@ export default {
|
||||
props: {
|
||||
initialMinStartDate: String,
|
||||
initialMaxEndDate: String,
|
||||
initialStartDate: String,
|
||||
initialEndDate: String,
|
||||
initialStartDate: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
initialEndDate: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
clinIndex: Number,
|
||||
},
|
||||
|
||||
data: function() {
|
||||
var start = new Date(this.initialStartDate)
|
||||
var end = new Date(this.initialEndDate)
|
||||
var start = !!this.initialStartDate ? new Date(this.initialStartDate) : null
|
||||
var end = !!this.initialEndDate ? new Date(this.initialEndDate) : null
|
||||
var contractStart = new Date(this.initialMinStartDate)
|
||||
var contractEnd = new Date(this.initialMaxEndDate)
|
||||
|
||||
@ -60,7 +66,7 @@ export default {
|
||||
},
|
||||
|
||||
calcMaxStartDate: function(date, end = this.contractEnd) {
|
||||
if (date < end) {
|
||||
if (!!date && date < end) {
|
||||
return date
|
||||
} else {
|
||||
return end
|
||||
@ -68,7 +74,7 @@ export default {
|
||||
},
|
||||
|
||||
calcMinEndDate: function(date, start = this.contractStart) {
|
||||
if (date > start) {
|
||||
if (!!date && date > start) {
|
||||
return date
|
||||
} else {
|
||||
return start
|
||||
|
||||
@ -312,120 +312,143 @@
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<date-selector
|
||||
|
||||
|
||||
name-tag='start_date'
|
||||
initialmonth=""
|
||||
initialday=""
|
||||
initialyear=""
|
||||
v-bind:watch='true'
|
||||
:optional='false'
|
||||
inline-template>
|
||||
|
||||
<fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation }">
|
||||
<legend>
|
||||
<div class="usa-input__title">
|
||||
Start Date
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<pop-date-range
|
||||
initial-min-start-date="2019-09-14"
|
||||
initial-max-end-date="2022-09-14"
|
||||
|
||||
v-bind:clin-index="clinIndex"
|
||||
|
||||
|
||||
initial-start-date="None"
|
||||
|
||||
|
||||
initial-end-date="None"
|
||||
|
||||
inline-template>
|
||||
|
||||
|
||||
<p class='usa-input__help'>
|
||||
For example: 07 04 1776
|
||||
</p>
|
||||
|
||||
</legend>
|
||||
|
||||
<div class="date-picker-component">
|
||||
<input name="start_date" v-bind:value="formattedDate" v-on:change="onInput" 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"
|
||||
v-on:change="onInput"
|
||||
/>
|
||||
</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"
|
||||
v-on:change="onInput"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="usa-form-group usa-form-group-year">
|
||||
<label>Year</label>
|
||||
<input
|
||||
id="date-year"
|
||||
maxlength="4"
|
||||
type="number"
|
||||
v-model="year"
|
||||
<div>
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<date-selector
|
||||
:mindate="initialMinStartDate"
|
||||
:maxdate="maxStartProp"
|
||||
|
||||
name-tag='start_date'
|
||||
initialmonth=""
|
||||
initialday=""
|
||||
initialyear=""
|
||||
|
||||
v-on:change="onInput"
|
||||
/>
|
||||
v-bind:watch='true'
|
||||
:optional='false'
|
||||
inline-template>
|
||||
|
||||
</div>
|
||||
<fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation, 'usa-input--error': !isDateValid && showValidation }">
|
||||
<legend>
|
||||
<div class="usa-input__title">
|
||||
Start Date
|
||||
</div>
|
||||
|
||||
<div v-if="showValidation">
|
||||
<div class="usa-form-group-date-ok" v-if="isDateValid">
|
||||
|
||||
<p class='usa-input__help'>
|
||||
For example: 07 04 1776
|
||||
</p>
|
||||
|
||||
<div v-if='minError' class="usa-input-error-message">
|
||||
PoP start date must be on or after September 14, 2019.
|
||||
</div>
|
||||
<div v-if='maxError' class="usa-input-error-message">
|
||||
PoP start date must be before end date.
|
||||
</div>
|
||||
</legend>
|
||||
|
||||
<div class="date-picker-component">
|
||||
<input :name="name" v-bind:value="formattedDate" v-on:change="onInput" 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"
|
||||
v-on:change="onInput"
|
||||
/>
|
||||
</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"
|
||||
v-on:change="onInput"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="usa-form-group usa-form-group-year">
|
||||
<label>Year</label>
|
||||
<input
|
||||
name="date-year"
|
||||
maxlength="4"
|
||||
type="number"
|
||||
v-model="year"
|
||||
max=""
|
||||
min=""
|
||||
v-on:change="onInput"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<div v-if="showValidation">
|
||||
<div class="usa-form-group-date-ok" v-if="isDateValid">
|
||||
|
||||
<span class="icon icon--ok icon--green" aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
|
||||
|
||||
</div>
|
||||
<div class="usa-form-group-date-ok" v-else>
|
||||
|
||||
</div>
|
||||
<div class="usa-form-group-date-ok" v-else>
|
||||
|
||||
<span class="icon icon--alert icon--red" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#fdb81e">
|
||||
<path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"/>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</date-selector>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</date-selector>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<date-selector
|
||||
|
||||
|
||||
name-tag='end_date'
|
||||
initialmonth=""
|
||||
initialday=""
|
||||
initialyear=""
|
||||
v-bind:watch='true'
|
||||
:optional='false'
|
||||
inline-template>
|
||||
|
||||
<fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation }">
|
||||
<legend>
|
||||
<div class="usa-input__title">
|
||||
End Date
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<date-selector
|
||||
:mindate="minEndProp"
|
||||
:maxdate="initialMaxEndDate"
|
||||
|
||||
name-tag='end_date'
|
||||
initialmonth=""
|
||||
initialday=""
|
||||
initialyear=""
|
||||
|
||||
v-bind:watch='true'
|
||||
:optional='false'
|
||||
inline-template>
|
||||
|
||||
<fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation, 'usa-input--error': !isDateValid && showValidation }">
|
||||
<legend>
|
||||
<div class="usa-input__title">
|
||||
End Date
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -436,7 +459,7 @@
|
||||
|
||||
|
||||
<p class='usa-alert-text'>
|
||||
A CLIN's period of performance must end before September 14, 2022.
|
||||
A CLIN's period of performance must end before .
|
||||
</p>
|
||||
|
||||
|
||||
@ -447,87 +470,85 @@
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<p class='usa-input__help'>
|
||||
For example: 07 04 1776
|
||||
</p>
|
||||
|
||||
</legend>
|
||||
<p class='usa-input__help'>
|
||||
For example: 07 04 1776
|
||||
</p>
|
||||
|
||||
<div class="date-picker-component">
|
||||
<input name="end_date" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
|
||||
<div v-if='minError' class="usa-input-error-message">
|
||||
PoP end date must be after start date.
|
||||
</div>
|
||||
<div v-if='maxError' class="usa-input-error-message">
|
||||
PoP end date must be on or after September 14, 2022.
|
||||
</div>
|
||||
</legend>
|
||||
|
||||
<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"
|
||||
v-on:change="onInput"
|
||||
/>
|
||||
</div>
|
||||
<div class="date-picker-component">
|
||||
<input :name="name" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
|
||||
|
||||
<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"
|
||||
v-on:change="onInput"
|
||||
/>
|
||||
</div>
|
||||
<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"
|
||||
v-on:change="onInput"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="usa-form-group usa-form-group-year">
|
||||
<label>Year</label>
|
||||
<input
|
||||
id="date-year"
|
||||
maxlength="4"
|
||||
type="number"
|
||||
v-model="year"
|
||||
|
||||
|
||||
v-on:change="onInput"
|
||||
/>
|
||||
<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"
|
||||
v-on:change="onInput"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="usa-form-group usa-form-group-year">
|
||||
<label>Year</label>
|
||||
<input
|
||||
name="date-year"
|
||||
maxlength="4"
|
||||
type="number"
|
||||
v-model="year"
|
||||
v-on:change="onInput"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="showValidation">
|
||||
<div class="usa-form-group-date-ok" v-if="isDateValid">
|
||||
|
||||
<div v-if="showValidation">
|
||||
<div class="usa-form-group-date-ok" v-if="isDateValid">
|
||||
|
||||
<span class="icon icon--ok icon--green" aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
|
||||
|
||||
</div>
|
||||
<div class="usa-form-group-date-ok" v-else>
|
||||
|
||||
</div>
|
||||
<div class="usa-form-group-date-ok" v-else>
|
||||
|
||||
<span class="icon icon--alert icon--red" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#fdb81e">
|
||||
<path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"/>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</date-selector>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</date-selector>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pop-date-range>
|
||||
|
||||
|
||||
<div class="form-row">
|
||||
<div class="usa-input-error-message form-has-errors">
|
||||
<p v-for="error in popErrors" :key="error" v-html='error'></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="$root.activeModal === removeModalId" v-cloak>
|
||||
|
||||
@ -199,17 +199,25 @@
|
||||
Period of Performance
|
||||
</div>
|
||||
</div>
|
||||
<pop-date-range initial-max-end-date="2022-09-14" initial-min-start-date="2019-09-14" inline-template="" v-bind:clin-index="clinIndex">
|
||||
<div>
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<date-selector :name-tag="'clins-' + clinIndex + '-start_date'" :optional="false" :watch="true" inline-template="">
|
||||
<fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation }">
|
||||
<date-selector :maxdate="maxStartProp" :mindate="initialMinStartDate" :name-tag="'clins-' + clinIndex + '-start_date'" :optional="false" inline-template="" v-bind:watch="true">
|
||||
<fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation, 'usa-input--error': !isDateValid && showValidation }">
|
||||
<legend>
|
||||
<div class="usa-input__title">
|
||||
Start Date
|
||||
</div>
|
||||
Start Date
|
||||
</div>
|
||||
<p class="usa-input__help">
|
||||
For example: 07 04 1776
|
||||
</p>
|
||||
For example: 07 04 1776
|
||||
</p>
|
||||
<div class="usa-input-error-message" v-if="minError">
|
||||
PoP start date must be on or after September 14, 2019.
|
||||
</div>
|
||||
<div class="usa-input-error-message" v-if="maxError">
|
||||
PoP start date must be before end date.
|
||||
</div>
|
||||
</legend>
|
||||
<div class="date-picker-component">
|
||||
<input :name="name" type="hidden" v-bind:value="formattedDate" v-on:change="onInput"/>
|
||||
@ -223,11 +231,19 @@
|
||||
</div>
|
||||
<div class="usa-form-group usa-form-group-year">
|
||||
<label>Year</label>
|
||||
<input maxlength="4" name="date-year" type="number" v-model="year" v-on:change="onInput"/>
|
||||
<input max="" maxlength="4" min="" name="date-year" type="number" v-model="year" v-on:change="onInput"/>
|
||||
</div>
|
||||
<div v-if="showValidation">
|
||||
<div class="usa-form-group-date-ok" v-if="isDateValid">
|
||||
<span aria-hidden="true" class="icon icon--ok icon--green"><svg aria-hidden="true" class="svg-inline--fa fa-check-circle fa-w-16" data-icon="check-circle" data-prefix="fas" focusable="false" role="img" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z" fill="currentColor"></path></svg></span>
|
||||
</div>
|
||||
<div class="usa-form-group-date-ok" v-else="">
|
||||
<span aria-hidden="true" class="icon icon--alert icon--red"><svg fill="#fdb81e" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</date-selector>
|
||||
@ -235,22 +251,28 @@
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<date-selector :name-tag="'clins-' + clinIndex + '-end_date'" :optional="false" :watch="true" inline-template="">
|
||||
<fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation }">
|
||||
<date-selector :maxdate="initialMaxEndDate" :mindate="minEndProp" :name-tag="'clins-' + clinIndex + '-end_date'" :optional="false" inline-template="" v-bind:watch="true">
|
||||
<fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation, 'usa-input--error': !isDateValid && showValidation }">
|
||||
<legend>
|
||||
<div class="usa-input__title">
|
||||
End Date
|
||||
</div>
|
||||
End Date
|
||||
</div>
|
||||
<div aria-live="polite" class="usa-alert usa-alert-info" role="alert">
|
||||
<div class="usa-alert-body">
|
||||
<p class="usa-alert-text">
|
||||
A CLIN's period of performance must end before September 14, 2022.
|
||||
A CLIN's period of performance must end before .
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="usa-input__help">
|
||||
For example: 07 04 1776
|
||||
</p>
|
||||
For example: 07 04 1776
|
||||
</p>
|
||||
<div class="usa-input-error-message" v-if="minError">
|
||||
PoP end date must be after start date.
|
||||
</div>
|
||||
<div class="usa-input-error-message" v-if="maxError">
|
||||
PoP end date must be on or after September 14, 2022.
|
||||
</div>
|
||||
</legend>
|
||||
<div class="date-picker-component">
|
||||
<input :name="name" type="hidden" v-bind:value="formattedDate" v-on:change="onInput"/>
|
||||
@ -266,19 +288,24 @@
|
||||
<label>Year</label>
|
||||
<input maxlength="4" name="date-year" type="number" v-model="year" v-on:change="onInput"/>
|
||||
</div>
|
||||
<div v-if="showValidation">
|
||||
<div class="usa-form-group-date-ok" v-if="isDateValid">
|
||||
<span aria-hidden="true" class="icon icon--ok icon--green"><svg aria-hidden="true" class="svg-inline--fa fa-check-circle fa-w-16" data-icon="check-circle" data-prefix="fas" focusable="false" role="img" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z" fill="currentColor"></path></svg></span>
|
||||
</div>
|
||||
<div class="usa-form-group-date-ok" v-else="">
|
||||
<span aria-hidden="true" class="icon icon--alert icon--red"><svg fill="#fdb81e" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</date-selector>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="usa-input-error-message form-has-errors">
|
||||
<p :key="error" v-for="error in popErrors" v-html="error"></p>
|
||||
</div>
|
||||
</div>
|
||||
</pop-date-range>
|
||||
</div>
|
||||
<div v-cloak="" v-show="$root.activeModal === removeModalId">
|
||||
<div :id='"modal--" + removeModalId' class="modal modal--dismissable">
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
{% from "components/clin_dollar_amount.html" import CLINDollarAmount %}
|
||||
{% from 'components/alert.html' import Alert %}
|
||||
{% from 'components/date_picker.html' import DatePicker %}
|
||||
{% from 'components/icon.html' import Icon %}
|
||||
{% from 'components/options_input.html' import OptionsInput %}
|
||||
{% from 'components/text_input.html' import TextInput %}
|
||||
@ -129,11 +128,12 @@
|
||||
{{ 'task_orders.form.pop' | translate }}
|
||||
</div>
|
||||
</div>
|
||||
{% set contract_end_formatted = contract_end | dateFromString(formatter="%Y-%m-%d") | formattedDate(formatter="%B %d, %Y") %}
|
||||
{% set contract_start_formatted = contract_start | dateFromString(formatter="%Y-%m-%d") %}
|
||||
{% set contract_end_formatted = contract_end | dateFromString(formatter="%Y-%m-%d") %}
|
||||
{% if fields %}
|
||||
{{ PopDateRange(start_field=fields.start_date, end_field=fields.end_date, watch=True, optional=False, mindate=contract_start | dateFromString(formatter="%Y-%m-%d"), maxdate=contract_end | dateFromString(formatter="%Y-%m-%d")) }}
|
||||
{{ PopDateRange(start_field=fields.start_date, end_field=fields.end_date, watch=True, optional=False, mindate=contract_start, maxdate=contract_end) }}
|
||||
{% else %}
|
||||
{{ PopDateRange(watch=True, optional=False, mindate=contract_start | dateFromString(formatter="%Y-%m-%d"), maxdate=contract_end | dateFromString(formatter="%Y-%m-%d")) }}
|
||||
{{ PopDateRange(watch=True, optional=False, mindate=contract_start, maxdate=contract_end) }}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,11 +1,15 @@
|
||||
{% from 'components/alert.html' import Alert %}
|
||||
{% from 'components/icon.html' import Icon %}
|
||||
|
||||
{% macro PopDateRange(start_field=None, end_field=None, mindate=mindate, maxdate=maxdate, watch=False, optional=True) %}
|
||||
{% macro PopDateRange(start_field=None, end_field=None, mindate=mindate, maxdate=maxdate, watch=False, optional=True, index=None) %}
|
||||
<pop-date-range
|
||||
initial-min-start-date="{{ mindate.strftime('%Y-%m-%d') }}"
|
||||
initial-max-end-date="{{ maxdate.strftime('%Y-%m-%d') }}"
|
||||
:clin-index="clinIndex"
|
||||
initial-min-start-date="{{ mindate }}"
|
||||
initial-max-end-date="{{ maxdate }}"
|
||||
{% if index %}
|
||||
v-bind:clin-index="{{ index }}"
|
||||
{% else %}
|
||||
v-bind:clin-index="clinIndex"
|
||||
{% endif %}
|
||||
{% if start_field %}
|
||||
initial-start-date="{{ start_field.data }}"
|
||||
{% endif %}
|
||||
@ -43,7 +47,7 @@
|
||||
</p>
|
||||
|
||||
<div v-if='minError' class="usa-input-error-message">
|
||||
PoP start date must be on or after {{ mindate | formattedDate(formatter="%B %d, %Y") }}.
|
||||
PoP start date must be on or after {{ mindate | dateFromString(formatter="%Y-%m-%d") | formattedDate(formatter="%B %d, %Y") }}.
|
||||
</div>
|
||||
<div v-if='maxError' class="usa-input-error-message">
|
||||
PoP start date must be before end date.
|
||||
@ -84,7 +88,7 @@
|
||||
<div class="usa-form-group usa-form-group-year">
|
||||
<label>{{ 'components.date_selector.year' | translate }}</label>
|
||||
<input
|
||||
id="date-year"
|
||||
name="date-year"
|
||||
maxlength="4"
|
||||
type="number"
|
||||
v-model="year"
|
||||
@ -142,7 +146,7 @@
|
||||
PoP end date must be after start date.
|
||||
</div>
|
||||
<div v-if='maxError' class="usa-input-error-message">
|
||||
PoP end date must be on or after {{ maxdate | formattedDate(formatter="%B %d, %Y") }}.
|
||||
PoP end date must be on or after {{ maxdate | dateFromString(formatter="%Y-%m-%d") | formattedDate(formatter="%B %d, %Y") }}.
|
||||
</div>
|
||||
</legend>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user