WIP Reimbursements/expenses

app/components/add-expense-item/component.js

@@ -0,0 +1,59 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import moment from 'moment';
+
+export default class AddExpenseItemComponent extends Component {
+
+  // @tracked newExpense = Expense.create();
+  @tracked amount = '0';
+  @tracked currency = 'EUR';
+  @tracked date = moment().startOf('hour').toDate();
+  @tracked title = '';
+  @tracked description = '';
+  @tracked url = '';
+  @tracked tags = '';
+
+  defaultDate = moment().startOf('hour').toDate();
+
+  // TODO fetch/apply exchange rate to (W)BTC
+  currencies = [
+    { code: 'EUR' },
+    { code: 'USD' },
+    { code: 'GBP' }
+  ];
+
+  get submitButtonEnabled () {
+    return true;
+  }
+
+  get submitButtonDisabled () {
+    return !this.submitButtonEnabled;
+  }
+
+  setDefaultValues () {
+  }
+
+  @action
+  submit (e) {
+    e.preventDefault();
+
+    let dateInput = (this.date instanceof Array) ?
+      this.date[0] : this.date;
+    const [ date ] = dateInput.toISOString().split('T');
+
+    // TODO validate form
+    const expense = {
+      amount: parseFloat(this.amount),
+      currency: this.currency,
+      date: date,
+      title: this.title,
+      description: this.description,
+      url: this.url,
+      tags: this.tags.split(',').map(t => t.trim())
+    }
+
+    this.args.addExpenseItem(expense);
+    this.resetProperties();
+  }
+}

app/components/add-expense-item/template.hbs

@@ -0,0 +1,64 @@
+<form id="add-expense-item" onsubmit={{action "submit"}}>
+  <fieldset class="horizontal">
+    <label>
+      <p class="label">Amount:</p>
+      <p>
+        {{input name="expense-amount" type="text"
+                placeholder="10" value=this.amount}}
+      </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}}
+    </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="text" 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>