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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
js/components/date_selector.js
View File

@ -24,6 +24,10 @@ export default {
type: Boolean,
default: false,
},
optional: {
type: Boolean,
default: true,
},
},
data: function() {
@ -35,6 +39,14 @@ export default {
}
},
created: function() {
emitEvent('field-mount', this, {
optional: this.optional,
name: this.name,
valid: this.isDateValid,
})
},
watch: {
month(newMonth, oldMonth) {
if (!!newMonth && newMonth.length > 2) {
@ -84,7 +96,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
},
@ -106,9 +118,9 @@ export default {
isDateValid: function() {
return (
this.day &&
this.month &&
this.year &&
!!this.day &&
!!this.month &&
!!this.year &&
this.isDayValid &&
this.isMonthValid &&
this.isYearValid &&
@ -141,13 +153,19 @@ export default {
},
methods: {
_emitChange: function(name, value, valid) {
onInput: function(e) {
console.log('emitting event')
emitEvent('field-change', this, {
value: value,
name: name,
value: e.target.value,
name: this.name,
watch: this.watch,
valid: this.isDateValid,
})
},
_emitChange: function(name, value, valid) {
emitEvent('field-change', this, { value, name })
},
},
render: function(createElement) {

3
js/components/text_input.js
View File

@ -31,6 +31,7 @@ export default {
type: Boolean,
default: false,
},
optional: Boolean,
},
data: function() {
@ -124,7 +125,7 @@ export default {
// Emit a change event
emitEvent('field-change', this, {
value: this._rawValue(value),
valid,
valid: this._isValid(value),
name: this.name,
watch: this.watch,
})

14
js/components/upload_input.js
View File

@ -17,6 +17,7 @@ export default {
},
props: {
name: String,
initialData: {
type: String,
},
@ -27,6 +28,10 @@ export default {
type: Boolean,
default: false,
},
optional: {
type: Boolean,
default: true,
},
},
data: function() {
@ -38,6 +43,14 @@ export default {
}
},
created: function() {
emitEvent('field-mount', this, {
optional: this.optional,
name: this.name,
valid: this.hasAttachment,
})
},
methods: {
addAttachment: function(e) {
this.attachment = e.target.value
@ -48,6 +61,7 @@ export default {
value: e.target.value,
name: this.name,
watch: this.watch,
valid: this.hasAttachment,
})
},
removeAttachment: function(e) {

2
js/mixins/form.js
View File

@ -27,6 +27,8 @@ export default {
handleFieldMount: function(event) {
const { name, optional, valid } = event
this.fields[name] = optional || valid
const formValid = this.validateForm()
this.invalid = !formValid
},
validateForm: function() {

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>