WIP Reimbursement UI

app/components/add-reimbursement/component.js

@@ -1,8 +1,31 @@
-
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { alias } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { A } from '@ember/array';
 
 export default class AddReimbursementComponent extends Component {
   @service kredits;
 
+  @tracked recipientId = null;
+  @tracked title = "";
+  @tracked total = "0";
+  @tracked expenses = A([]);;
+
+  get typeofTotal() {
+    return typeof this.total;
+  }
+
+  @alias('kredits.contributorsSorted') contributors;
+
+  @action
+  submit(e) {
+    e.preventDefault();
+    console.log('submit', e);
+    // TODO
+    // amount = parseFloat(this.total)
+    // token = "WBTC" (or token address)
+    // title = "Expenses covered by contributor.name"
+  }
 }

app/components/add-reimbursement/template.hbs

@@ -0,0 +1,71 @@
+<p>
+  Total: {{this.total}}<br>
+  Total type: {{this.typeofTotal}}
+</p>
+
+<form onsubmit={{action "submit"}}>
+  <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}}
+    </p>
+  </label>
+
+  <h3>Expense items</h3>
+  {{#each this.expenses as |expense|}}
+    <table class="expense-list">
+      <tr>
+        <td class="description">{{expense.title}} &ndash; {{expense.description}}</td>
+        <td class="amount">{{fmt-fiat-currency expense.amount expense.currency}}</td>
+      </tr>
+    </table>
+    <p>TODO: date, url, tags</p>
+  {{/each}}
+
+  <label>
+    <p class="label">Date:</p>
+    <p>
+      {{ember-flatpickr
+        date=this.date
+        defaultDate=this.defaultDate
+        maxDate=this.defaultDate
+        enableTime=true
+        time_24hr=true
+        onChange=(action (mut this.date))
+      }}
+    </p>
+  </label>
+  <label>
+    <p class="label">Description:</p>
+    <p>
+      {{input type="text"
+              value=this.description
+              class=(if this.isValidDescription "valid" "")}}
+    </p>
+  </label>
+  <label>
+    <p class="label">URL (optional):</p>
+    <p>
+      {{input type="text"
+              value=this.url
+              class=(if this.isValidUrl "valid" "")}}
+    </p>
+  </label>
+
+  <p class="actions">
+    {{input type="submit" value="Submit"}}
+  </p>
+</form>

app/styles/_forms.scss

@@ -1,5 +1,7 @@
 section#add-contributor,
 section#add-contribution,
+section#add-contribution,
+section#add-item, // TODO use for all forms for adding data
 section#signup {
 
   form {