Create vue component to manage date range logic
This commit is contained in:
leigh-mil
parent
ae57baf455
commit
0e641a9064
@ -7,6 +7,7 @@ import Modal from '../mixins/modal'
|
||||
import optionsinput from './options_input'
|
||||
import textinput from './text_input'
|
||||
import clindollaramount from './clin_dollar_amount'
|
||||
import PopDateRange from './pop_date_range'
|
||||
|
||||
const TOTAL_AMOUNT = 'total_amount'
|
||||
const OBLIGATED_AMOUNT = 'obligated_amount'
|
||||
@ -23,6 +24,7 @@ export default {
|
||||
optionsinput,
|
||||
textinput,
|
||||
clindollaramount,
|
||||
PopDateRange,
|
||||
},
|
||||
|
||||
mixins: [Modal],
|
||||
|
||||
30
js/components/pop_date_range.js
Normal file
30
js/components/pop_date_range.js
Normal file
@ -0,0 +1,30 @@
|
||||
import DateSelector from './date_selector'
|
||||
|
||||
export default {
|
||||
name: 'pop-date-range',
|
||||
|
||||
components: {
|
||||
DateSelector,
|
||||
},
|
||||
|
||||
props: {
|
||||
initialMinStartDate: String,
|
||||
initialMaxEndDate: String,
|
||||
initialStartDate: String,
|
||||
initialEndDate: String,
|
||||
clinIndex: Number,
|
||||
},
|
||||
|
||||
data: function() {
|
||||
return {
|
||||
startDate: this.initialStartDate,
|
||||
endDate: this.initialEndDate,
|
||||
startValid: false,
|
||||
endValid: false,
|
||||
minStartDate: this.initialMinStartDate,
|
||||
maxStartDate: this.initialMaxEndDate,
|
||||
minEndDate: this.initialMinStartDate,
|
||||
maxEndDate: this.initialMaxEndDate,
|
||||
}
|
||||
},
|
||||
}
|
||||
@ -32,6 +32,7 @@ import NewEnvironment from './components/forms/new_environment'
|
||||
import SemiCollapsibleText from './components/semi_collapsible_text'
|
||||
import ToForm from './components/forms/to_form'
|
||||
import ClinFields from './components/clin_fields'
|
||||
import PopDateRange from './components/pop_date_range'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
@ -65,6 +66,7 @@ const app = new Vue({
|
||||
SemiCollapsibleText,
|
||||
ToForm,
|
||||
ClinFields,
|
||||
PopDateRange,
|
||||
},
|
||||
|
||||
mounted: function() {
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
{% from 'components/icon.html' import Icon %}
|
||||
{% from 'components/options_input.html' import OptionsInput %}
|
||||
{% from 'components/text_input.html' import TextInput %}
|
||||
{% from 'components/pop_date_range.html' import PopDateRange %}
|
||||
|
||||
{% macro CLINFields(contract_start, contract_end, fields=None, index=None) %}
|
||||
<clin-fields
|
||||
@ -130,148 +131,9 @@
|
||||
</div>
|
||||
{% set contract_end_formatted = contract_end | dateFromString(formatter="%Y-%m-%d") | formattedDate(formatter="%B %d, %Y") %}
|
||||
{% if fields %}
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
{{ DatePicker(fields.start_date, watch=True, optional=False) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
{% call DatePicker(fields.end_date, watch=True, optional=False) %}
|
||||
{{ Alert(message="task_orders.form.pop_end_alert" | translate({'end_date': contract_end_formatted})) }}
|
||||
{% endcall %}
|
||||
</div>
|
||||
</div>
|
||||
{{ 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")) }}
|
||||
{% else %}
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<date-selector :name-tag="'clins-' + clinIndex + '-start_date'" :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">
|
||||
{{ 'task_orders.form.pop_start' | translate }}
|
||||
</div>
|
||||
<p class='usa-input__help'>
|
||||
{{ 'task_orders.form.pop_example' | translate }}
|
||||
</p>
|
||||
</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>{{ 'components.date_selector.month' | translate }}</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>{{ 'components.date_selector.day' | translate }}</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>{{ 'components.date_selector.year' | translate }}</label>
|
||||
<input
|
||||
name="date-year"
|
||||
maxlength="4"
|
||||
type="number"
|
||||
v-model="year"
|
||||
v-on:change="onInput"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="usa-form-group-date-ok" v-if="isDateValid">
|
||||
{{ Icon("ok", classes="icon--green") }}
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</date-selector>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<date-selector :name-tag="'clins-' + clinIndex + '-end_date'" :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">
|
||||
{{ 'task_orders.form.pop_end' | translate }}
|
||||
</div>
|
||||
|
||||
{{ Alert(message="task_orders.form.pop_end_alert" | translate({'end_date': contract_end_formatted})) }}
|
||||
|
||||
<p class='usa-input__help'>
|
||||
{{ 'task_orders.form.pop_example' | translate }}
|
||||
</p>
|
||||
</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>{{ 'components.date_selector.month' | translate }}</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>{{ 'components.date_selector.day' | translate }}</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>{{ 'components.date_selector.year' | translate }}</label>
|
||||
<input
|
||||
name="date-year"
|
||||
maxlength="4"
|
||||
type="number"
|
||||
v-model="year"
|
||||
v-on:change="onInput"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="usa-form-group-date-ok" v-if="isDateValid">
|
||||
{{ Icon("ok", classes="icon--green") }}
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</date-selector>
|
||||
</div>
|
||||
</div>
|
||||
{{ PopDateRange(watch=True, optional=False, mindate=contract_start | dateFromString(formatter="%Y-%m-%d"), maxdate=contract_end | dateFromString(formatter="%Y-%m-%d")) }}
|
||||
{% endif %}
|
||||
<div class="form-row">
|
||||
<div class="usa-input-error-message form-has-errors">
|
||||
|
||||
192
templates/components/pop_date_range.html
Normal file
192
templates/components/pop_date_range.html
Normal file
@ -0,0 +1,192 @@
|
||||
{% 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) %}
|
||||
<pop-date-range
|
||||
initial-min-start-date="{{ mindate.strftime('%Y-%m-%d') }}"
|
||||
initial-max-end-date="{{ maxdate.strftime('%Y-%m-%d') }}"
|
||||
:clin-index="clinIndex"
|
||||
{% if start_field %}
|
||||
initial-start-date="{{ start_field.data }}"
|
||||
{% endif %}
|
||||
{% if end_field %}
|
||||
initial-end-date="{{ end_field.data }}"
|
||||
{% endif %}
|
||||
inline-template>
|
||||
|
||||
<div>
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<date-selector
|
||||
:mindate="minStartDate"
|
||||
:maxdate="maxStartDate"
|
||||
{% if start_field %}
|
||||
name-tag='{{ start_field.name }}'
|
||||
initialmonth="{{ start_field.data.month }}"
|
||||
initialday="{{ start_field.data.day }}"
|
||||
initialyear="{{ start_field.data.year }}"
|
||||
{% else %}
|
||||
:name-tag="'clins-' + clinIndex + '-start_date'"
|
||||
{% endif %}
|
||||
v-bind:watch='{{ watch | string | lower }}'
|
||||
:optional='{{ optional | string | lower }}'
|
||||
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">
|
||||
{{ "task_orders.form.pop_start" | translate }}
|
||||
</div>
|
||||
|
||||
<p class='usa-input__help'>
|
||||
{{ "task_orders.form.pop_example" | translate | safe }}
|
||||
</p>
|
||||
</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>{{ 'components.date_selector.month' | translate }}</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>{{ 'components.date_selector.day' | translate }}</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>{{ 'components.date_selector.year' | translate }}</label>
|
||||
<input
|
||||
id="date-year"
|
||||
maxlength="4"
|
||||
type="number"
|
||||
v-model="year"
|
||||
{% if maxdate %}max="{{ maxdate.year }}"{% endif %}
|
||||
{% if mindate %}min="{{ mindate.year }}"{% endif %}
|
||||
v-on:change="onInput"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<div v-if="showValidation">
|
||||
<div class="usa-form-group-date-ok" v-if="isDateValid">
|
||||
{{ Icon("ok", classes="icon--green") }}
|
||||
</div>
|
||||
<div class="usa-form-group-date-ok" v-else>
|
||||
{{ Icon("alert", classes="icon--red")}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</date-selector>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-col">
|
||||
<date-selector
|
||||
:mindate="minEndDate"
|
||||
:maxdate="maxEndDate"
|
||||
{% if end_field %}
|
||||
name-tag='{{ end_field.name }}'
|
||||
initialmonth="{{ end_field.data.month }}"
|
||||
initialday="{{ end_field.data.day }}"
|
||||
initialyear="{{ end_field.data.year }}"
|
||||
{% else %}
|
||||
:name-tag="'clins-' + clinIndex + '-end_date'"
|
||||
{% endif %}
|
||||
v-bind:watch='{{ watch | string | lower }}'
|
||||
:optional='{{ optional | string | lower }}'
|
||||
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">
|
||||
{{ 'task_orders.form.pop_end' | translate }}
|
||||
</div>
|
||||
|
||||
{{ Alert(message="task_orders.form.pop_end_alert" | translate({'end_date': contract_end_formatted})) }}
|
||||
|
||||
<p class='usa-input__help'>
|
||||
{{ 'task_orders.form.pop_example' | translate }}
|
||||
</p>
|
||||
</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>{{ 'components.date_selector.month' | translate }}</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>{{ 'components.date_selector.day' | translate }}</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>{{ 'components.date_selector.year' | translate }}</label>
|
||||
<input
|
||||
name="date-year"
|
||||
maxlength="4"
|
||||
type="number"
|
||||
v-model="year"
|
||||
v-on:change="onInput"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="showValidation && isDateComplete">
|
||||
<div class="usa-form-group-date-ok" v-if="isDateValid">
|
||||
{{ Icon("ok", classes="icon--green") }}
|
||||
</div>
|
||||
<div class="usa-form-group-date-ok" v-else>
|
||||
{{ Icon("alert", classes="icon--red")}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</date-selector>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pop-date-range>
|
||||
{% endmacro %}
|
||||
Loading…
x
Reference in New Issue
Block a user