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

update components to emit valid on field-change and use in TO form

Browse Source
This commit is contained in:
leigh-mil
2019-06-15 13:24:17 -04:00
parent 414e5989f5
commit 56bc9dd4e5
8 changed files with 75 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
templates/components/date_picker.html
View File

@@ -6,15 +6,18 @@
description=field.description,
mindate=None,
maxdate=None,
watch=False) -%}
watch=False,
optional=True) -%}
<date-selector
{% if maxdate %}maxdate="{{ maxdate.strftime("%Y-%m-%d") }}"{% endif %}
{% if mindate %}mindate="{{ mindate.strftime("%Y-%m-%d") }}"{% endif %}
name-tag='{{ field.name }}'
initialmonth="{{ field.data.month }}"
initialday="{{ field.data.day }}"
initialyear="{{ field.data.year }}"
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 }">
@@ -29,7 +32,7 @@
</legend>
<div class="date-picker-component">
<input name="{{ field.name }}" v-bind:value="formattedDate" type="hidden" />
<input name="{{ field.name }}" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
<div class="usa-form-group usa-form-group-month">
<label>Month</label>
@@ -54,6 +57,7 @@
v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
v-bind:max="daysMaxCalculation"
v-model="day"
v-on:change="onInput"
/>
</div>
@@ -66,6 +70,7 @@
v-model="year"
{% if maxdate %}max="{{ maxdate.year }}"{% endif %}
{% if mindate %}min="{{ mindate.year }}"{% endif %}
v-on:change="onInput"
/>
</div>

2
templates/components/text_input.html
View File

@@ -14,7 +14,7 @@
initial_value='',
classes='',
noMaxWidth=False,
optional=False,
optional=True,
showLabel=True,
watch=False) -%}

2
templates/components/upload_input.html
View File

@@ -9,6 +9,8 @@
v-bind:initial-errors='true'
{% endif %}
v-bind:watch='{{ watch | string | lower }}'
name='{{ field.name }}'
:optional='false'
>
<div>
<div v-show="hasAttachment" class="uploaded-file">

31
templates/task_orders/edit.html
View File

@@ -87,8 +87,8 @@
</fieldset>
</div>
{{ DatePicker(fields.start_date, watch=True) }}
{{ DatePicker(fields.end_date, watch=True) }}
{{ DatePicker(fields.start_date, watch=True, optional=False) }}
{{ DatePicker(fields.end_date, watch=True, optional=False) }}
{{ TextInput(fields.obligated_amount, validation='dollars', watch=True) }}
</div>
</clin-fields>
@@ -117,7 +117,14 @@
{% call StickyCTA(text="Add Funding") %}
<span class="action-group">
<!-- todo: implement the review button -->
<input type="submit" formaction="{{ review_action }}" tabindex="0" value="Review task order" form="new-task-order" class="usa-button usa-button-primary">
<input
type="submit"
formaction="{{ review_action }}"
tabindex="0"
:disabled="invalid"
value="Review task order"
form="new-task-order"
class="usa-button usa-button-primary">
<input
type="submit"
class="usa-button usa-button-secondary"
@@ -145,7 +152,7 @@
<div class="row">
<div class="col">
<div class="h1">Add your task order</div>
{{ TextInput(form.number, validation='taskOrderNumber') }}
{{ TextInput(form.number, validation='taskOrderNumber', optional=False) }}
<hr>
@@ -167,7 +174,7 @@
<div>
<div class="form-row">
<div class="form-col form-col--two-thirds">
<optionsinput :name="'clins-' + clinIndex + '-jedi_clin_type'" :watch='true' inline-template>
<optionsinput :name="'clins-' + clinIndex + '-jedi_clin_type'" :watch='true' :optional='false' inline-template>
<div class="usa-input">
<fieldset data-ally-disabled="true" class="usa-input__choices" v-on:change="onInput">
<legend>
@@ -233,7 +240,7 @@
</fieldset>
</div>
<date-selector :name-tag="'clins-' + clinIndex + '-start_date'" :watch='true' inline-template>
<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 }">
<legend>
<div class="usa-input__title">
@@ -242,7 +249,7 @@
</legend>
<div class="date-picker-component">
<input :name="name" v-bind:value="formattedDate" type="hidden" />
<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>
@@ -254,6 +261,7 @@
type="number"
v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
v-model="month"
v-on:change="onInput"
/>
</div>
@@ -267,6 +275,7 @@
v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
v-bind:max="daysMaxCalculation"
v-model="day"
v-on:change="onInput"
/>
</div>
@@ -277,6 +286,7 @@
maxlength="4"
type="number"
v-model="year"
v-on:change="onInput"
/>
</div>
@@ -288,7 +298,7 @@
</fieldset>
</date-selector>
<date-selector :name-tag="'clins-' + clinIndex + '-end_date'" :watch='true' inline-template>
<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 }">
<legend>
<div class="usa-input__title">
@@ -297,7 +307,7 @@
</legend>
<div class="date-picker-component">
<input :name="name" v-bind:value="formattedDate" type="hidden" />
<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>
@@ -309,6 +319,7 @@
type="number"
v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
v-model="month"
v-on:change="onInput"
/>
</div>
@@ -322,6 +333,7 @@
v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
v-bind:max="daysMaxCalculation"
v-model="day"
v-on:change="onInput"
/>
</div>
@@ -332,6 +344,7 @@
maxlength="4"
type="number"
v-model="year"
v-on:change="onInput"
/>
</div>