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() {
var _month = parseInt(this.month)
return _month >= 0 && _month <= 12
var valid = _month >= 0 && _month <= 12
this._emitChange('month', this.month, valid)
return valid
},
isDayValid: function() {
var _day = parseInt(this.day)
return _day >= 0 && _day <= this.daysMaxCalculation
var valid = _day >= 0 && _day <= this.daysMaxCalculation
this._emitChange('day', this.day, valid)
return valid
},
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() {
@ -128,6 +133,12 @@ export default {
},
},
methods: {
_emitChange: function(name, value, valid) {
this.$root.$emit('field-change', { value, valid, name })
},
},
render: function(createElement) {
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/date_picker.html" import DatePicker %}
<form method="POST" action='{{ form_action }}'>
{{ form.csrf_token }}
<div class='panel'>
<div class='panel__content'>
<div class='form-row'>
<div class='form-col form-col--half'>
{{ TextInput(form.first_name, validation='requiredField') }}
<base-form inline-template>
<form method="POST" action='{{ form_action }}'>
{{ form.csrf_token }}
<div class='panel'>
<div class='panel__content'>
<div class='form-row'>
<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 class='form-col form-col--half'>
{{ TextInput(form.last_name, validation='requiredField') }}
{{ 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>
{{ 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 class='action-group'>
<button class='usa-button usa-button-big' type='submit'>
{{ "fragments.edit_user_form.save_details_button" | translate }}
</button>
</div>
</form>
<div class='action-group'>
<savebutton
text='{{ "fragments.edit_user_form.save_details_button" | translate }}'
classes="usa-button-big"
:disabled="disabled">
</savebutton>
</div>
</form>
</base-form>