decide.nolog.cz/app/templates/create/settings.hbs
jelhan 7688d468e4
improve form buttons (#211)
* Adds a loading spinner to form buttons as long as submission is pending.
* Does some refactoring of form navigation buttons.
* Updates expected bundle size.
2019-06-12 09:07:48 +02:00

77 lines
2.2 KiB
Handlebars

<div class="cr-form-wrapper box">
{{#bs-form
formLayout="horizontal"
model=this
novalidate=true
onSubmit=(action "submit")
as |form|
}}
{{#form.element
classNames="answer-type"
label=(t "create.settings.answerType.label")
property="answerType"
showValidationOn=(array "change" "focusOut")
useIcons=false
as |el|
}}
{{#autofocusable-element
tagName="select"
change=(action "updateAnswerType" value="target.value")
id=el.id
class="custom-select"
}}
{{#each answerTypes as |answerType|}}
<option value={{answerType.id}} selected={{eq el.value answerType.id}}>
{{t answerType.labelTranslation}}
</option>
{{/each}}
{{/autofocusable-element}}
{{/form.element}}
{{#form.element
classNames="expiration-duration"
label=(t "create.settings.expirationDate.label")
property="expirationDuration"
showValidationOn=(array "change" "focusOut")
useIcons=false
controlType="select"
as |el|
}}
<select
id={{el.id}}
onchange={{action (mut el.value) value="target.value"}}
class="custom-select"
>
{{#each expirationDurations as |duration|}}
<option value={{duration.id}} selected={{eq el.value duration.id}}>
{{t duration.labelTranslation}}
</option>
{{/each}}
</select>
{{/form.element}}
{{form.element
classNames="anonymous-user"
controlType="checkbox"
label=(t "create.settings.anonymousUser.label")
showValidationOn="change"
property="anonymousUser"
}}
{{form.element
classNames="force-answer"
controlType="checkbox"
label=(t "create.settings.forceAnswer.label")
showValidationOn="change"
property="forceAnswer"
}}
<div class="row cr-steps-bottom-nav">
<div class="col-6 col-md-4 text-right">
<BackButton @onClick={{action "previousPage"}} />
</div>
<div class="col-6 col-md-8">
<NextButton @isPending={{form.isSubmitting}} data-test-button="submit">
{{t "action.save"}}
</NextButton>
</div>
</div>
{{/bs-form}}
</div>