pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show validation icon only if the date is complete

Browse Source
This commit is contained in:
leigh-mil 2019-09-25 14:23:33 -04:00
parent e41aeaee25
commit ad86dc33fc
6 changed files with 23 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
js/components/date_selector.js
View File

@ -36,7 +36,6 @@ export default {
month: this.initialmonth,
year: this.initialyear,
name: this.nameTag,
showValidation: false,
}
},
@ -190,8 +189,6 @@ export default {
methods: {
onInput: function(e) {
if (this.isDateComplete) this.showValidation = true
emitEvent('field-change', this, {
value: this.formattedDate,
name: this.name,

12
js/test_templates/clin_fields.html
View File

@ -344,7 +344,7 @@
:optional='false'
inline-template>
<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation, 'usa-input--error': !isDateValid && showValidation }">
<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && isDateComplete, 'usa-input--error': !isDateValid && isDateComplete }">
<legend>
<div class="usa-input__title">
Start Date
@ -407,7 +407,7 @@
</div>
<div v-if="showValidation">
<div v-if="isDateComplete">
<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>
@ -443,12 +443,12 @@
:optional='false'
inline-template>
<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation, 'usa-input--error': !isDateValid && showValidation }">
<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && isDateComplete, 'usa-input--error': !isDateValid && isDateComplete }">
<legend>
<div class="usa-input__title">
End Date
</div>
@ -459,7 +459,7 @@
<p class='usa-alert-text'>
A CLIN's period of performance must end before .
A CLIN's period of performance must end before September 14, 2022.
</p>
@ -525,7 +525,7 @@
/>
</div>
<div v-if="showValidation">
<div v-if="isDateComplete">
<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>

12
js/test_templates/pop_date_range.html
View File

@ -29,7 +29,7 @@
:optional='true'
inline-template>
<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation, 'usa-input--error': !isDateValid && showValidation }">
<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && isDateComplete, 'usa-input--error': !isDateValid && isDateComplete }">
<legend>
<div class="usa-input__title">
Start Date
@ -92,7 +92,7 @@
</div>
<div v-if="showValidation">
<div v-if="isDateComplete">
<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>
@ -128,12 +128,12 @@
:optional='true'
inline-template>
<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation, 'usa-input--error': !isDateValid && showValidation }">
<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && isDateComplete, 'usa-input--error': !isDateValid && isDateComplete }">
<legend>
<div class="usa-input__title">
End Date
</div>
@ -144,7 +144,7 @@
<p class='usa-alert-text'>
A CLIN's period of performance must end before .
A CLIN's period of performance must end before September 14, 2022.
</p>
@ -210,7 +210,7 @@
/>
</div>
<div v-if="showValidation">
<div v-if="isDateComplete">
<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>

10
js/test_templates/to_form.html
View File

@ -204,7 +204,7 @@
<div class="form-row">
<div class="form-col">
<date-selector :maxdate="maxStartProp" :mindate="initialMinStartDate" :name-tag="'clins-' + clinIndex + '-start_date'" :optional="false" inline-template="" v-bind:watch="true">
<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid &amp;&amp; showValidation, 'usa-input--error': !isDateValid &amp;&amp; showValidation }">
<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid &amp;&amp; isDateComplete, 'usa-input--error': !isDateValid &amp;&amp; isDateComplete }">
<legend>
<div class="usa-input__title">
Start Date
@ -233,7 +233,7 @@
<label>Year</label>
<input max="" maxlength="4" min="" name="date-year" type="number" v-model="year" v-on:change="onInput"/>
</div>
<div v-if="showValidation">
<div v-if="isDateComplete">
<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>
@ -252,7 +252,7 @@
<div class="form-row">
<div class="form-col">
<date-selector :maxdate="initialMaxEndDate" :mindate="minEndProp" :name-tag="'clins-' + clinIndex + '-end_date'" :optional="false" inline-template="" v-bind:watch="true">
<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid &amp;&amp; showValidation, 'usa-input--error': !isDateValid &amp;&amp; showValidation }">
<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid &amp;&amp; isDateComplete, 'usa-input--error': !isDateValid &amp;&amp; isDateComplete }">
<legend>
<div class="usa-input__title">
End Date
@ -260,7 +260,7 @@
<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 .
A CLIN's period of performance must end before September 14, 2022.
</p>
</div>
</div>
@ -288,7 +288,7 @@
<label>Year</label>
<input maxlength="4" name="date-year" type="number" v-model="year" v-on:change="onInput"/>
</div>
<div v-if="showValidation">
<div v-if="isDateComplete">
<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>

4
templates/components/date_picker.html
View File

@ -21,7 +21,7 @@
:optional='{{ optional | string | lower }}'
inline-template>
<fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation }">
<fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && isDateComplete }">
<legend>
<div class="usa-input__title">
{{ label }}
@ -83,7 +83,7 @@
</div>
<div v-if="showValidation">
<div v-if="isDateComplete">
<div class="usa-form-group-date-ok" v-if="isDateValid">
{{ Icon("ok", classes="icon--green") }}
</div>

8
templates/components/pop_date_range.html
View File

@ -36,7 +36,7 @@
:optional='{{ optional | string | lower }}'
inline-template>
<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation, 'usa-input--error': !isDateValid && showValidation }">
<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && isDateComplete, 'usa-input--error': !isDateValid && isDateComplete }">
<legend>
<div class="usa-input__title">
{{ "task_orders.form.pop_start" | translate }}
@ -99,7 +99,7 @@
</div>
<div v-if="showValidation">
<div v-if="isDateComplete">
<div class="usa-form-group-date-ok" v-if="isDateValid">
{{ Icon("ok", classes="icon--green") }}
</div>
@ -130,7 +130,7 @@
:optional='{{ optional | string | lower }}'
inline-template>
<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation, 'usa-input--error': !isDateValid && showValidation }">
<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && isDateComplete, 'usa-input--error': !isDateValid && isDateComplete }">
<legend>
<div class="usa-input__title">
{{ 'task_orders.form.pop_end' | translate }}
@ -192,7 +192,7 @@
/>
</div>
<div v-if="showValidation">
<div v-if="isDateComplete">
<div class="usa-form-group-date-ok" v-if="isDateValid">
{{ Icon("ok", classes="icon--green") }}
</div>