Add front end validation that enforces that PoP end is after start
This commit is contained in:
parent
25ab64f748
commit
e1fbac5a52
@ -5,6 +5,8 @@ import textinput from './text_input'
|
||||
|
||||
const JEDI_CLIN_TYPE = 'jedi_clin_type'
|
||||
const OBLIGATED_AMOUNT = 'obligated_amount'
|
||||
const START_DATE = 'start_date'
|
||||
const END_DATE = 'end_date'
|
||||
|
||||
export default {
|
||||
name: 'clin-fields',
|
||||
@ -26,11 +28,22 @@ export default {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
initialStartDate: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
initialEndDate: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
|
||||
data: function() {
|
||||
const loas = this.initialLoaCount == 0 ? 1 : 0
|
||||
const indexOffset = this.initialLoaCount
|
||||
const start = new Date(this.initialStartDate)
|
||||
const end = new Date(this.initialEndDate)
|
||||
const popValidation = !this.initialStartDate ? false : start < end
|
||||
|
||||
return {
|
||||
clinIndex: this.initialClinIndex,
|
||||
@ -38,6 +51,10 @@ export default {
|
||||
loas: loas,
|
||||
clinType: this.initialClinType,
|
||||
amount: this.initialAmount || 0,
|
||||
startDate: start,
|
||||
endDate: end,
|
||||
popValid: popValidation,
|
||||
showPopError: !popValidation,
|
||||
}
|
||||
},
|
||||
|
||||
@ -70,6 +87,10 @@ export default {
|
||||
})
|
||||
},
|
||||
|
||||
checkPopValid: function() {
|
||||
return this.startDate < this.endDate
|
||||
},
|
||||
|
||||
handleFieldChange: function(event) {
|
||||
if (this._uid === event.parent_uid) {
|
||||
if (event.name.includes(JEDI_CLIN_TYPE)) {
|
||||
@ -78,6 +99,14 @@ export default {
|
||||
} else if (event.name.includes(OBLIGATED_AMOUNT)) {
|
||||
this.amount = parseFloat(event.value)
|
||||
this.clinChangeEvent()
|
||||
} else if (event.name.includes(START_DATE)) {
|
||||
this.startDate = new Date(event.value)
|
||||
this.popValid = this.checkPopValid()
|
||||
this.showPopError = !this.popValid
|
||||
} else if (event.name.includes(END_DATE)) {
|
||||
this.endDate = new Date(event.value)
|
||||
this.popValid = this.checkPopValid()
|
||||
this.showPopError = !this.popValid
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -51,18 +51,24 @@ export default {
|
||||
month(newMonth, oldMonth) {
|
||||
if (!!newMonth && newMonth.length > 2) {
|
||||
this.month = oldMonth
|
||||
} else {
|
||||
this.month = newMonth
|
||||
}
|
||||
},
|
||||
|
||||
day(newDay, oldDay) {
|
||||
if (!!newDay && newDay.length > 2) {
|
||||
this.day = oldDay
|
||||
} else {
|
||||
this.day = newDay
|
||||
}
|
||||
},
|
||||
|
||||
year(newYear, oldYear) {
|
||||
if (!!newYear && newYear.length > 4) {
|
||||
this.year = oldYear
|
||||
} else {
|
||||
this.year = newYear
|
||||
}
|
||||
},
|
||||
},
|
||||
@ -96,7 +102,7 @@ export default {
|
||||
isYearValid: function() {
|
||||
// Emit a change event
|
||||
var valid = parseInt(this.year) >= 1
|
||||
// this._emitChange('year', this.year, valid)
|
||||
this._emitChange('year', this.year, valid)
|
||||
return valid
|
||||
},
|
||||
|
||||
@ -154,9 +160,8 @@ export default {
|
||||
|
||||
methods: {
|
||||
onInput: function(e) {
|
||||
console.log('emitting event')
|
||||
emitEvent('field-change', this, {
|
||||
value: e.target.value,
|
||||
value: this.formattedDate,
|
||||
name: this.name,
|
||||
watch: this.watch,
|
||||
valid: this.isDateValid,
|
||||
|
@ -44,6 +44,7 @@
|
||||
type="number"
|
||||
v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
|
||||
v-model="month"
|
||||
v-on:change="onInput"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -79,12 +80,6 @@
|
||||
{{ Icon("ok", classes="icon--green") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="usa-input-error-message" v-bind:class='{% if field.errors %}"form-has-errors"{% endif %}'>
|
||||
{% if field.errors %}
|
||||
{{ field.errors[0] }}
|
||||
{% endif %}
|
||||
</p>
|
||||
</fieldset>
|
||||
</date-selector>
|
||||
|
||||
|
@ -50,6 +50,8 @@
|
||||
v-bind:initial-loa-count="{{ fields.loas.data | length or 0 }}"
|
||||
v-bind:initial-clin-type="'{{ fields.jedi_clin_type.data }}'"
|
||||
v-bind:initial-amount='{{ fields.obligated_amount.data or 0 }}'
|
||||
v-bind:initial-start-date="'{{ fields.start_date.data | string }}'"
|
||||
v-bind:initial-end-date="'{{ fields.end_date.data | string }}'"
|
||||
{% else %}
|
||||
v-bind:initial-clin-index='clinIndex'
|
||||
v-bind:initial-clin-type="'JEDI_CLIN_1'"
|
||||
@ -201,11 +203,6 @@
|
||||
{{ Icon("ok", classes="icon--green") }}
|
||||
</div>
|
||||
</div>
|
||||
<p class="usa-input-error-message" v-bind:class="{ 'form-has-errors': !isWithinDateRange }">
|
||||
{% if maxdate and mindate %}Date must be between {{mindate.strftime("%m/%d/%Y")}} and {{maxdate.strftime("%m/%d/%Y")}}{% endif %}
|
||||
{% if maxdate and not mindate %}Date must be before or on {{maxdate.strftime("%m/%d/%Y")}}{% endif %}
|
||||
{% if mindate and not maxdate %}Date must be after or on {{mindate.strftime("%m/%d/%Y")}}{% endif %}
|
||||
</p>
|
||||
</fieldset>
|
||||
</date-selector>
|
||||
</div>
|
||||
@ -265,16 +262,22 @@
|
||||
{{ Icon("ok", classes="icon--green") }}
|
||||
</div>
|
||||
</div>
|
||||
<p class="usa-input-error-message" v-bind:class="{ 'form-has-errors': !isWithinDateRange }">
|
||||
{% if maxdate and mindate %}Date must be between {{mindate.strftime("%m/%d/%Y")}} and {{maxdate.strftime("%m/%d/%Y")}}{% endif %}
|
||||
{% if maxdate and not mindate %}Date must be before or on {{maxdate.strftime("%m/%d/%Y")}}{% endif %}
|
||||
{% if mindate and not maxdate %}Date must be after or on {{mindate.strftime("%m/%d/%Y")}}{% endif %}
|
||||
</p>
|
||||
</fieldset>
|
||||
</date-selector>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<p class="usa-input-error-message form-has-errors">
|
||||
<template v-if='showPopError'>
|
||||
{% if fields and fields.start_date.errors %}
|
||||
{{ fields.start_date.errors[0] }}
|
||||
{% else %}
|
||||
{{ "forms.task_order.start_date_error" | translate }}
|
||||
{% endif %}
|
||||
</template>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% if fields %}
|
||||
{{ TextInput(fields.obligated_amount, validation='dollars', watch=True) }}
|
||||
|
Loading…
x
Reference in New Issue
Block a user