decide.nolog.cz/app/templates/components/create-options-datetime.hbs
jelhan 5b8d59c00b rewrite create/options-datetime with ember-bootstrap
ToDo left:
refactor `datetimes` property of `create-options-datetime` component to
not cause whole list to be updated. This is not only a performance issue
but also UX: e.g. validation state is lost when another item is added.
2016-06-06 01:19:24 +02:00

56 lines
2.2 KiB
Handlebars

<div class="box">
{{#bs-form
action='submit'
formLayout='horizontal'
model=this
}}
{{#each groupedDatetimes as |groupedDatetime|}}
<div class="days">
{{#each groupedDatetime.items as |time index|}}
{{! show label only on first item }}
{{#bs-form-element
classNames='option'
label=(unless index groupedDatetime.value)
model=time
property='time'
as |value id validationState|
}}
<div class="input-group">
{{bs-input
id=id
type='time'
value=value
}}
<div class="input-group-btn">
{{! disable delete button if there is only one option }}
<button {{action 'deleteOption' time}}
class="delete btn {{if (eq validationState 'success') 'btn-success'}} {{if (eq validationState 'error') 'btn-danger'}} {{unless validationState 'btn-default'}}"
disabled={{if (gt groupedDatetime.items.length 1) false true}}>
<span class='glyphicon glyphicon-trash' aria-hidden='true'></span>
<span class='sr-only'>{{t 'create.options.button.delete.label'}}</span>
</button>
<button {{action 'addOption' time}}
class="add btn {{if (eq validationState 'success') 'btn-success'}} {{if (eq validationState 'error') 'btn-danger'}} {{unless validationState 'btn-default'}}">
<span class='glyphicon glyphicon-plus' aria-hidden='true'></span>
<span class='sr-only'>{{t 'create.options.button.add.label'}}</span>
</button>
</div>
</div>
{{/bs-form-element}}
{{/each}}
</div>
{{/each}}
{{#bs-form-element}}
<button {{action "adoptTimesOfFirstDay"}} class="btn btn-default adopt-times-of-first-day">{{t "create.options-datetime.copy-first-line"}}</button>
{{/bs-form-element}}
{{#bs-form-element}}
{{bs-button
buttonType='submit'
defaultText=(t 'create.next')
type='primary'
}}
{{/bs-form-element}}
{{/bs-form}}
</div>