Add expense-list component, DRY up code, add tags

app/components/add-reimbursement/template.hbs

@@ -44,26 +44,10 @@
 
   <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 {{on "click" (fn this.removeExpenseItem expense)}}
-              class="danger small" type="button">delete</button>
-          </div>
-        </li>
-      {{/each}}
-    </ul>
+     <ExpenseList @expenses={{this.expenses}}
+                  @removeExpenseItem={{this.removeExpenseItem}}
+                  @deletable=yes />
+
     <p class="actions">
       <button {{on "click" this.showExpenseForm}}
         class="green small" type="button">+ Add another item</button>

app/components/expense-list/component.js

@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+
+export default class ExpenseListComponent extends Component {
+
+  get showDeleteButton () {
+    return !!this.args.deletable;
+  }
+
+}

app/components/expense-list/template.hbs

@@ -0,0 +1,27 @@
+<ul class="expense-list">
+  {{#each @expenses as |expense|}}
+    <li class="expense-item">
+      <h4>
+        <span class="date">{{expense.date}}:</span>
+        <span class="title">{{expense.title}}</span>
+      </h4>
+      <div class="amount">
+        {{fmt-fiat-currency expense.amount expense.currency}}
+      </div>
+      <p class="description">
+        {{expense.description}}
+      </p>
+      <p class="tags">
+        {{#each expense.tags as |tag|}}
+          <button class="small" role="none">{{tag}}</button>
+        {{/each}}
+      </p>
+      {{#if this.showDeleteButton}}
+        <div class="actions">
+          <button {{on "click" (fn @removeExpenseItem expense)}}
+            class="danger small" type="button">delete</button>
+        </div>
+      {{/if}}
+    </li>
+  {{/each}}
+</ul>

app/components/reimbursement-list/template.hbs

@@ -14,22 +14,9 @@
         <span class="amount">
           {{sats-to-btc reimbursement.amount}}</span>&#8239;<span class="symbol">BTC</span>
       </p>
-      <ul class="expense-list">
-        {{#each reimbursement.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>
-          </li>
-        {{/each}}
-      </ul>
+
+      <ExpenseList @expenses={{reimbursement.expenses}} />
+
       <div class="meta">
         <p class="confirmation-eta">
           <ConfirmedIn @confirmedAtBlock={{reimbursement.confirmedAt}} />

app/styles/components/_expense-list.scss

@@ -17,32 +17,30 @@ ul.expense-list {
     }
   }
 
-  .description {
-    grid-row-start: 1;
-    grid-row-end: 3;
-  }
-
-  .amount {
-    justify-self: end;
-    // font-weight: normal;
-  }
-
-  .actions {
-    justify-self: end;
-  }
-
   h4 {
     font-size: 1.2rem;
     font-weight: normal;
     line-height: 2rem;
   }
 
-  p {
-    line-height: 2rem;
+  .amount {
+    justify-self: end;
+  }
 
-    &.description {
-      font-size: 1rem;
-      opacity: 0.7;
+  .description {
+    font-size: 1rem;
+    opacity: 0.7;
+    grid-column-start: span 2;
+  }
+
+  .tags {
+    button {
+      margin-left: 0;
     }
   }
+
+  .actions {
+    justify-self: end;
+  }
+
 }