Semantic tables for invoices

Added logic to fetch event-invoice data & filters

Fix eslint issues

Added date paid

Fixed ESlint issues

app/controllers/account/billing-info/invoices.js

@@ -0,0 +1,34 @@
+import Controller from '@ember/controller';
+import { filterBy } from '@ember/object/computed';
+import moment from 'moment';
+import { computed } from '@ember/object';
+
+export default Controller.extend({
+  dueInvoices      : filterBy('model', 'status', 'due'),
+  paidInvoices     : filterBy('model', 'status', 'paid'),
+  upcomingInvoices : computed(function() {
+    let filterOptions = [];
+    filterOptions = [
+      {
+        and: [
+          {
+            name : 'deleted-at',
+            op   : 'eq',
+            val  : null
+          },
+          {
+            name : 'created-at',
+            op   : 'ge',
+            val  : moment().subtract(30, 'days').toISOString()
+          }
+        ]
+      }
+    ];
+    return this.store.query('event-invoice', {
+      filter  : filterOptions,
+      include : 'event'
+    });
+
+  })
+
+});

app/routes/account/billing-info/invoices.js

@@ -1,4 +1,9 @@
 import Route from '@ember/routing/route';
 
 export default Route.extend({
+  model() {
+    return this.store.query('event-invoice', {
+      include: 'event'
+    });
+  }
 });

app/templates/account/billing-info/invoices.hbs

@@ -1,14 +1,82 @@
 <div class="ui grid stackable">
-  <div class="thirteen wide column">
+  <div class="sixteen wide column">
     <h2 class="ui header column">{{t 'Due Invoices'}}</h2>
+    <table class="ui stackable structured celled compact table">
+      <thead>
+        <tr>
+          <th>Invoice ID</th>
+          <th>Event Name</th>
+          <th>Date Issued</th>
+          <th>Amount</th>
+          <th>View Invoice</th>
+        </tr>
+      </thead>
+      <tbody>
+        {{#each dueInvoices as |dueInvoice|}}
+          <tr>
+            <td>{{dueInvoice.identifier}}</td>
+            <td>{{dueInvoice.event.name}}</td>
+            <td>{{dueInvoice.createdAt}}</td>
+            <td>{{dueInvoice.amount}}</td>
+            <td><button class="ui button primary">{{t 'View Invoice'}}</button></td>
+          </tr>
+        {{/each}}
+      </tbody>
+    </table>
   </div>
   <div class="ui hidden divider"></div>
-  <div class="thirteen wide column">
-    <h2 class="ui header column">{{t 'Upcoming Invoices'}}</h2>
+  <div class="sixteen wide column">
+    <h2 class="ui header column">{{t 'Paid Invoices'}}</h2>
+    <table class="ui stackable structured celled compact table">
+      <thead>
+        <tr>
+          <th>Invoice ID</th>
+          <th>Event Name</th>
+          <th>Date Issued</th>
+          <th>Amount</th>
+          <th>Date Paid</th>
+          <th>View Invoice</th>
+        </tr>
+      </thead>
+      <tbody>
+        {{#each paidInvoices as |paidInvoice|}}
+          <tr>
+            <td>{{paidInvoice.identifier}}</td>
+            <td>{{paidInvoice.event.name}}</td>
+            <td>{{paidInvoice.createdAt}}</td>
+            <td>{{dueInvoice.amount}}</td>
+            <td><button class="ui button primary">{{t 'View Invoice'}}</button></td>
+            <td>{{paidInvoice.completedAt}}</td>
+          </tr>
+        {{/each}}
+      </tbody>
+    </table>
   </div>
   <div class="ui hidden divider"></div>
-  <div class="thirteen wide column">
-    <h2 class="ui header column">{{t 'Paid Invoices'}}</h2>
+  <div class="sixteen wide column">
+    <h2 class="ui header column">{{t 'Upcoming Invoices'}}</h2>
+    <table class="ui stackable structured celled compact table">
+      <thead>
+        <tr>
+          <th>Invoice ID</th>
+          <th>Event Name</th>
+          <th>Date Issued</th>
+          <th>Amount Due</th>
+          <th>View Invoice</th>
+        </tr>
+      </thead>
+      <tbody>
+        {{#each upcomingInvoices as |upcomingInvoice|}}
+          <tr>
+            <td>{{upcomingInvoice.identifier}}</td>
+            <td>{{upcomingInvoice.event.name}}</td>
+            <td>{{upcomingInvoice.createdAt}}</td>
+            <td>{{upcomingInvoice.amount}}</td>
+            <td><button class="ui button primary">{{t 'View Invoice'}}</button></td>
+          </tr>
+        {{/each}}
+      </tbody>
+    </table>
   </div>
   <div class="ui hidden divider"></div>
 </div>