WIP Reimbursements/expenses

app/components/add-reimbursement/component.js

@@ -5,40 +5,39 @@ import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { A } from '@ember/array';
 import Reimbursement from 'kredits-web/models/reimbursement';
-import Expense from 'kredits-web/models/expense';
 
 export default class AddReimbursementComponent extends Component {
   @service kredits;
 
+  @alias('kredits.contributorsSorted') contributors;
+
   @tracked recipientId = null;
   @tracked title = '';
   @tracked total = '0';
-  @tracked expenses = A([]);;
-  @tracked newExpense = Expense.create();
+  @tracked expenses = A([]);
+  @tracked expenseFormVisible = true;
 
-  // TODO fetch/apply exchange rate to (W)BTC
-  currencies = [
-    { code: 'EUR' },
-    { code: 'USD' },
-    { code: 'GBP' }
-  ];
-
-  get typeofTotal() {
-    return typeof this.total;
-  }
-
-  get submitButtonEnabled() {
+  get submitButtonEnabled () {
     return this.expenses.length > 0;
   }
 
-  get submitButtonDisabled() {
+  get submitButtonDisabled () {
     return !this.submitButtonEnabled;
   }
 
-  @alias('kredits.contributorsSorted') contributors;
+  @action
+  showExpenseForm () {
+    this.expenseFormVisible = true;
+  }
 
   @action
-  submit(e) {
+  addExpenseItem (expenseItem) {
+    this.expenses.pushObject(expenseItem);
+    this.expenseFormVisible = false;
+  }
+
+  @action
+  submit (e) {
     e.preventDefault();
     console.log('submit', e);
     // TODO

app/components/add-reimbursement/template.hbs

@@ -17,82 +17,41 @@
     </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>
+  <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">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>
-  {{/each}}
+  {{/if}}
 
   <p class="actions">
     {{input type="submit" value="Submit" disabled=this.submitButtonDisabled
             title="Submit/propose this reimbursement"}}
   </p>
 
-  <h3>
-    New expense item
-  </h3>
-  <form id="add-expense-item">
-    <fieldset class="horizontal">
-      <label>
-        <p class="label">Amount:</p>
-        <p>
-          {{input type="text" placeholder="10" value=this.newExpense.amount}}
-        </p>
-      </label>
-      <label>
-        <p class="label">Currency:</p>
-        <p>
-          <select required onchange={{action (mut this.newExpense.currency) value="target.value"}}>
-            <option value="" selected disabled hidden></option>
-            {{#each this.currencies as |currency|}}
-              <option value={{currency.code}} selected={{eq this.newExpense.currency currency.code}}>{{currency.code}}</option>
-            {{/each}}
-          </select>
-        </p>
-      </label>
-    </fieldset>
-    <label>
-      <p class="label">Date:</p>
-      <p>
-        {{ember-flatpickr
-          date=this.newExpense.date
-          defaultDate=this.newExpense.defaultDate
-          maxDate=this.newExpense.defaultDate
-          enableTime=false
-          onChange=(action (mut this.newExpense.date))}}
-      </p>
-    </label>
-    <label>
-      <p class="label">Title:</p>
-      <p>
-        {{input type="text" value=this.newExpense.title}}
-      </p>
-    </label>
-    <label>
-      <p class="label">Description (optional):</p>
-      <p>
-        {{input type="text" value=this.newExpense.description}}
-      </p>
-    </label>
-    <label>
-      <p class="label">URL (optional):</p>
-      <p>
-        {{input type="text" value=this.newExpense.url}}
-      </p>
-    </label>
-
-    <p class="actions">
-      {{input type="submit" value="Add" disabled=this.addButtonDisabled
-              class="green" title="Add item to reimbursement"}}
-    </p>
-  </form>
+  {{#if this.expenseFormVisible}}
+    <h3>New expense item</h3>
+    <AddExpenseItem @addExpenseItem={{fn this.addExpenseItem}} />
+  {{/if}}
 </form>