444ec62a66
Adds some general helpers and styles for minimalistic form validation.
72 lines
2.0 KiB
Handlebars
72 lines
2.0 KiB
Handlebars
<form id="add-expense-item" onsubmit={{action "submit"}} novalidate>
|
|
<fieldset class="horizontal">
|
|
<label>
|
|
<p class="label">Amount:</p>
|
|
<p>
|
|
{{input name="expense-amount"
|
|
type="text"
|
|
placeholder="10"
|
|
value=this.amount
|
|
required=true
|
|
pattern="([0-9]*[.])?[0-9]+"
|
|
class=this.amountInputClass}}
|
|
</p>
|
|
</label>
|
|
<label>
|
|
<p class="label">Currency:</p>
|
|
<p>
|
|
<select required name="expense-currency"
|
|
onchange={{action (mut this.currency)
|
|
value="target.value"}}>
|
|
<option value="" selected disabled hidden></option>
|
|
{{#each this.currencies as |currency|}}
|
|
<option value={{currency.code}} selected={{eq this.currency currency.code}}>{{currency.code}}</option>
|
|
{{/each}}
|
|
</select>
|
|
</p>
|
|
</label>
|
|
</fieldset>
|
|
<label>
|
|
<p class="label">Date:</p>
|
|
<p>
|
|
{{ember-flatpickr
|
|
date=this.date
|
|
defaultDate=this.defaultDate
|
|
maxDate=this.defaultDate
|
|
enableTime=false
|
|
onChange=(action (mut this.date))}}
|
|
</p>
|
|
</label>
|
|
<label>
|
|
<p class="label">Title:</p>
|
|
<p>
|
|
{{input name="expense-title"
|
|
type="text"
|
|
value=this.title
|
|
required=true}}
|
|
</p>
|
|
</label>
|
|
<label>
|
|
<p class="label">Description (optional):</p>
|
|
<p>
|
|
{{input name="expense-description" type="text" value=this.description}}
|
|
</p>
|
|
</label>
|
|
<label>
|
|
<p class="label">URL (optional):</p>
|
|
<p>
|
|
{{input name="expense-url" type="url" value=this.url}}
|
|
</p>
|
|
</label>
|
|
<label>
|
|
<p class="label">Tags (comma-separated, optional):</p>
|
|
<p>
|
|
{{input name="expense-tags" type="text" value=this.tags}}
|
|
</p>
|
|
</label>
|
|
|
|
<p class="actions">
|
|
{{input type="submit" value="Add" disabled=this.submitButtonDisabled
|
|
class="green" title="Add item to reimbursement"}}
|
|
</p>
|
|
</form> |