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

Add min and max range values to date selector so a more accurate error message can be displayed when a date is out of the range

Browse Source
This commit is contained in:
leigh-mil 2019-10-03 16:12:49 -04:00
parent da6916b1a1
commit 07b3c68422
9 changed files with 126 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
atst/forms/task_order.py
View File

@ -91,6 +91,8 @@ class CLINForm(FlaskForm):
self.start_date.data
and self.end_date.data
and self.start_date.data > self.end_date.data
and self.start_date.data <= contract_end
and self.end_date.data >= contract_start
):
self.start_date.errors.append(
translate("forms.task_order.pop_errors.date_order")
@ -100,7 +102,7 @@ class CLINForm(FlaskForm):
if self.start_date.data and self.start_date.data <= contract_start:
self.start_date.errors.append(
translate(
"forms.task_order.pop_errors.start",
"forms.task_order.pop_errors.start_pre_contract",
{"date": contract_start.strftime("%b %d, %Y")},
)
)
@ -109,12 +111,30 @@ class CLINForm(FlaskForm):
if self.end_date.data and self.end_date.data >= contract_end:
self.end_date.errors.append(
translate(
"forms.task_order.pop_errors.end",
"forms.task_order.pop_errors.end_past_contract",
{"date": contract_end.strftime("%b %d, %Y")},
)
)
valid = False
if self.start_date.data and self.start_date.data > contract_end:
self.start_date.errors.append(
translate(
"forms.task_order.pop_errors.start_past_contract",
{"date": contract_end.strftime("%b %d, %Y")},
)
)
valid = False
if self.end_date.data and self.end_date.data < contract_start:
self.end_date.errors.append(
translate(
"forms.task_order.pop_errors.end_pre_contract",
{"date": contract_start.strftime("%b %d, %Y")},
)
)
valid = False
return valid

29
js/components/__tests__/date_selector.test.js
View File

@ -250,4 +250,33 @@ describe('DateSelector', () => {
expect(component.maxError).toEqual(false)
})
})
describe('outsideRange', () => {
it('should return true if the date is before the minrange', () => {
component.minrange = '2020-01-01'
component.maxrange = '2025-01-01'
component.day = 1
component.month = 1
component.year = 2005
expect(component.outsideRange).toEqual(true)
})
it('should return true if the date is after the maxrange', () => {
component.minrange = '2020-01-01'
component.maxrange = '2025-01-01'
component.day = 1
component.month = 1
component.year = 2030
expect(component.outsideRange).toEqual(true)
})
it('should return false if the date is betwen minrange and maxrange', () => {
component.minrange = '2020-01-01'
component.maxrange = '2025-01-01'
component.day = 1
component.month = 1
component.year = 2022
expect(component.outsideRange).toEqual(false)
})
})
})

19
js/components/date_selector.js
View File

@ -19,6 +19,8 @@ export default {
initialyear: { type: String },
mindate: { type: String },
maxdate: { type: String },
minrange: { type: String },
maxrange: { type: String },
nameTag: { type: String },
optional: {
type: Boolean,
@ -179,6 +181,15 @@ export default {
return false
},
outsideRange: function() {
if (!!this.maxrange && !!this.minrange && this.isDateComplete) {
return (
this.dateParsed < this.minRangeParsed ||
this.dateParsed > this.maxRangeParsed
)
}
},
maxDateParsed: function() {
return new Date(this.maxdate)
},
@ -187,6 +198,14 @@ export default {
return new Date(this.mindate)
},
maxRangeParsed: function() {
return new Date(this.maxrange)
},
minRangeParsed: function() {
return new Date(this.minrange)
},
dateParsed: function() {
return new Date(this.formattedDate)
},

16
js/test_templates/clin_fields.html
View File

@ -332,6 +332,8 @@
<date-selector
:mindate="initialMinStartDate"
:maxdate="maxStartProp"
:minrange='initialMinStartDate'
:maxrange='initialMaxEndDate'
name-tag='start_date'
initialmonth=""
@ -352,10 +354,13 @@
For example: 07 04 1776
</p>
<div v-if='outsideRange && !minError' class="usa-input-error-message">
PoP start date must be before or on September 14, 2022.
</div>
<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">
<div v-if='maxError && !outsideRange' class="usa-input-error-message">
PoP start date must be before end date.
</div>
</legend>
@ -431,6 +436,8 @@
<date-selector
:mindate="minEndProp"
:maxdate="initialMaxEndDate"
:minrange='initialMinStartDate'
:maxrange='initialMaxEndDate'
name-tag='end_date'
initialmonth=""
@ -473,11 +480,14 @@
For example: 07 04 1776
</p>
<div v-if='minError' class="usa-input-error-message">
<div v-if='outsideRange && !maxError' class="usa-input-error-message">
PoP end date must be on or after September 14, 2019.
</div>
<div v-if='minError && !outsideRange' 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.
PoP end date must be before or on September 14, 2022.
</div>
</legend>

16
js/test_templates/pop_date_range.html
View File

@ -19,6 +19,8 @@
<date-selector
:mindate="initialMinStartDate"
:maxdate="maxStartProp"
:minrange='initialMinStartDate'
:maxrange='initialMaxEndDate'
name-tag='start_date'
initialmonth=""
@ -39,10 +41,13 @@
For example: 07 04 1776
</p>
<div v-if='outsideRange && !minError' class="usa-input-error-message">
PoP start date must be before or on September 14, 2022.
</div>
<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">
<div v-if='maxError && !outsideRange' class="usa-input-error-message">
PoP start date must be before end date.
</div>
</legend>
@ -118,6 +123,8 @@
<date-selector
:mindate="minEndProp"
:maxdate="initialMaxEndDate"
:minrange='initialMinStartDate'
:maxrange='initialMaxEndDate'
name-tag='end_date'
initialmonth=""
@ -160,11 +167,14 @@
For example: 07 04 1776
</p>
<div v-if='minError' class="usa-input-error-message">
<div v-if='outsideRange && !maxError' class="usa-input-error-message">
PoP end date must be on or after September 14, 2019.
</div>
<div v-if='minError && !outsideRange' 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.
PoP end date must be before or on September 14, 2022.
</div>
</legend>

16
js/test_templates/to_form.html
View File

@ -203,7 +203,7 @@
<div>
<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-on:date-change="handleDateChange">
<date-selector :maxdate="maxStartProp" :maxrange="initialMaxEndDate" :mindate="initialMinStartDate" :minrange="initialMinStartDate" :name-tag="'clins-' + clinIndex + '-start_date'" :optional="false" inline-template="" v-on:date-change="handleDateChange">
<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">
@ -212,10 +212,13 @@
<p class="usa-input__help">
For example: 07 04 1776
</p>
<div class="usa-input-error-message" v-if="outsideRange &amp;&amp; !minError">
PoP start date must be before or on September 14, 2022.
</div>
<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">
<div class="usa-input-error-message" v-if="maxError &amp;&amp; !outsideRange">
PoP start date must be before end date.
</div>
</legend>
@ -251,7 +254,7 @@
</div>
<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-on:date-change="handleDateChange">
<date-selector :maxdate="initialMaxEndDate" :maxrange="initialMaxEndDate" :mindate="minEndProp" :minrange="initialMinStartDate" :name-tag="'clins-' + clinIndex + '-end_date'" :optional="false" inline-template="" v-on:date-change="handleDateChange">
<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">
@ -267,11 +270,14 @@
<p class="usa-input__help">
For example: 07 04 1776
</p>
<div class="usa-input-error-message" v-if="minError">
<div class="usa-input-error-message" v-if="outsideRange &amp;&amp; !maxError">
PoP end date must be on or after September 14, 2019.
</div>
<div class="usa-input-error-message" v-if="minError &amp;&amp; !outsideRange">
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.
PoP end date must be before or on September 14, 2022.
</div>
</legend>
<div class="date-picker-component">

16
templates/components/pop_date_range.html
View File

@ -24,6 +24,8 @@
<date-selector
:mindate="initialMinStartDate"
:maxdate="maxStartProp"
:minrange='initialMinStartDate'
:maxrange='initialMaxEndDate'
{% if start_field %}
name-tag='{{ start_field.name }}'
initialmonth="{{ start_field.data.month }}"
@ -46,10 +48,13 @@
{{ "task_orders.form.pop_example" | translate | safe }}
</p>
<div v-if='outsideRange && !minError' class="usa-input-error-message">
PoP start date must be before or on {{ maxdate | formattedDate(formatter="%B %d, %Y") }}.
</div>
<div v-if='minError' class="usa-input-error-message">
PoP start date must be on or after {{ mindate | formattedDate(formatter="%B %d, %Y") }}.
</div>
<div v-if='maxError' class="usa-input-error-message">
<div v-if='maxError && !outsideRange' class="usa-input-error-message">
PoP start date must be before end date.
</div>
</legend>
@ -118,6 +123,8 @@
<date-selector
:mindate="minEndProp"
:maxdate="initialMaxEndDate"
:minrange='initialMinStartDate'
:maxrange='initialMaxEndDate'
{% if end_field %}
name-tag='{{ end_field.name }}'
initialmonth="{{ end_field.data.month }}"
@ -142,11 +149,14 @@
{{ 'task_orders.form.pop_example' | translate }}
</p>
<div v-if='minError' class="usa-input-error-message">
<div v-if='outsideRange && !maxError' class="usa-input-error-message">
PoP end date must be on or after {{ mindate | formattedDate(formatter="%B %d, %Y") }}.
</div>
<div v-if='minError && !outsideRange' 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 {{ formatted_end_date }}.
PoP end date must be before or on {{ formatted_end_date }}.
</div>
</legend>

4
tests/forms/test_task_order.py
View File

@ -50,13 +50,13 @@ def test_clin_form_pop_dates_within_contract_dates():
assert not clin_form.validate()
assert (
translate(
"forms.task_order.pop_errors.start",
"forms.task_order.pop_errors.start_pre_contract",
{"date": CONTRACT_START_DATE.strftime("%b %d, %Y")},
)
) in clin_form.start_date.errors
assert (
translate(
"forms.task_order.pop_errors.end",
"forms.task_order.pop_errors.end_past_contract",
{"date": CONTRACT_END_DATE.strftime("%b %d, %Y")},
)
) in clin_form.end_date.errors

6
translations.yaml
View File

@ -210,8 +210,10 @@ forms:
number_description: Task order number (13 digits)
pop_errors:
date_order: PoP start date must be before end date.
end: PoP end date must be before or on {date}.
start: PoP start date must be on or after {date}.
end_past_contract: PoP end date must be before or on {date}.
end_pre_contract: PoP end date must be after or on {date}.
start_past_contract: PoP start date must be before or on {date}.
start_pre_contract: PoP start date must be on or after {date}.
scope_description: 'What do you plan to do on the cloud? Some examples might include migrating an existing application or creating a prototype. You don’t need to include a detailed plan of execution, but should list key requirements. This section will be reviewed by your contracting officer, but won’t be sent to the CCPO. <p>Not sure how to describe your scope? <a href="#">Read some examples</a> to get some inspiration.</p>'
scope_label: Cloud project scope
clin_funding_errors: