Files
kredits-web/app/components/add-reimbursement/template.hbs
T
basti 444ec62a66 Validate expense/reimbursement forms
Adds some general helpers and styles for minimalistic form validation.
2020-09-29 19:31:58 +02:00

63 lines
2.0 KiB
Handlebars

<form onsubmit={{action "submit"}} novalidate>
<label>
<p class="label">Contributor:</p>
<p>
<select required onchange={{action (mut this.recipientId) value="target.value"}}>
<option value="" selected disabled hidden></option>
{{#each this.contributors as |contributor|}}
<option value={{contributor.id}} selected={{eq this.contributorId contributor.id}}>{{contributor.name}}</option>
{{/each}}
</select>
</p>
</label>
<label>
<p class="label">Total amount (WBTC):</p>
<p>
{{input type="text"
placeholder="500"
value=this.total
required=true
pattern="([0-9]*[.])?[0-9]+"
class=this.totalInputClass}}
</p>
</label>
<h3>Expense items</h3>
{{#if this.expenses}}
<ul class="expense-list">
{{#each this.expenses as |expense|}}
<li>
<div class="description" rowspan="2">
<h4>
<span class="date">{{expense.date}}:</span>
<span class="title">{{expense.title}}</span>
</h4>
<p class="description">{{expense.description}}</p>
</div>
<div class="amount">
{{fmt-fiat-currency expense.amount expense.currency}}
</div>
<div class="actions">
<button class="danger small" onclick={{fn this.removeExpenseItem expense}}>delete</button>
</div>
</li>
{{/each}}
</ul>
<p class="actions">
<button onclick={{fn this.showExpenseForm}} class="green small">+ Add another item</button>
</p>
{{else}}
<p>No line items yet.</p>
{{/if}}
<p class="actions">
{{input type="submit" value="Submit" disabled=this.submitButtonDisabled
title="Submit/propose this reimbursement"}}
</p>
{{#if this.expenseFormVisible}}
<h3 id="new-expense-item">New expense item</h3>
<AddExpenseItem @addExpenseItem={{fn this.addExpenseItem}} />
{{/if}}
</form>