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

Update edit user form to use base-form and update date-selector to emit changes

Browse Source
This commit is contained in:
leigh-mil 2019-04-02 15:04:17 -04:00
parent 7fca19ebee
commit ade3f38b5e
2 changed files with 48 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
js/components/date_selector.js
View File

@ -62,18 +62,23 @@ export default {
isMonthValid: function() { isMonthValid: function() {
var _month = parseInt(this.month) var _month = parseInt(this.month)
var valid = _month >= 0 && _month <= 12
return _month >= 0 && _month <= 12 this._emitChange('month', this.month, valid)
return valid
}, },
isDayValid: function() { isDayValid: function() {
var _day = parseInt(this.day) var _day = parseInt(this.day)
var valid = _day >= 0 && _day <= this.daysMaxCalculation
return _day >= 0 && _day <= this.daysMaxCalculation this._emitChange('day', this.day, valid)
return valid
}, },
isYearValid: function() { isYearValid: function() {
return parseInt(this.year) >= 1 // Emit a change event
var valid = parseInt(this.year) >= 1
this._emitChange('year', this.year, valid)
return valid
}, },
isWithinDateRange: function() { isWithinDateRange: function() {
@ -128,6 +133,12 @@ export default {
}, },
}, },
methods: {
_emitChange: function(name, value, valid) {
this.$root.$emit('field-change', { value, valid, name })
},
},
render: function(createElement) { render: function(createElement) {
return createElement('p', 'Please implement inline-template') return createElement('p', 'Please implement inline-template')
}, },

60
templates/fragments/edit_user_form.html
View File

@ -4,37 +4,41 @@
{% from "components/phone_input.html" import PhoneInput %} {% from "components/phone_input.html" import PhoneInput %}
{% from "components/date_picker.html" import DatePicker %} {% from "components/date_picker.html" import DatePicker %}
<form method="POST" action='{{ form_action }}'> <base-form inline-template>
{{ form.csrf_token }} <form method="POST" action='{{ form_action }}'>
<div class='panel'> {{ form.csrf_token }}
<div class='panel__content'> <div class='panel'>
<div class='form-row'> <div class='panel__content'>
<div class='form-col form-col--half'> <div class='form-row'>
{{ TextInput(form.first_name, validation='requiredField') }} <div class='form-col form-col--half'>
{{ TextInput(form.first_name, validation='requiredField') }}
</div>
<div class='form-col form-col--half'>
{{ TextInput(form.last_name, validation='requiredField') }}
</div>
</div> </div>
<div class='form-col form-col--half'> {{ TextInput(form.email, validation='email') }}
{{ TextInput(form.last_name, validation='requiredField') }} {{ PhoneInput(form.phone_number, form.phone_ext) }}
{{ OptionsInput(form.service_branch) }}
{{ OptionsInput(form.citizenship) }}
{{ OptionsInput(form.designation) }}
<div class="usa-input">
{{ DatePicker(form.date_latest_training, mindate=mindate, maxdate=maxdate) }}
</div> </div>
</div> </div>
{{ TextInput(form.email, validation='email') }}
{{ PhoneInput(form.phone_number, form.phone_ext) }}
{{ OptionsInput(form.service_branch) }}
{{ OptionsInput(form.citizenship) }}
{{ OptionsInput(form.designation) }}
<div class="usa-input">
{{ DatePicker(form.date_latest_training, mindate=mindate, maxdate=maxdate) }}
</div>
</div> </div>
</div>
<div class='action-group'> <div class='action-group'>
<button class='usa-button usa-button-big' type='submit'> <savebutton
{{ "fragments.edit_user_form.save_details_button" | translate }} text='{{ "fragments.edit_user_form.save_details_button" | translate }}'
</button> classes="usa-button-big"
</div> :disabled="disabled">
</form> </savebutton>
</div>
</form>
</base-form>