Semantic tables for invoices

Added logic to fetch event-invoice data & filters

Fix eslint issues

Added date paid

Fixed ESlint issues

Return promises at route level

used async

Author: mrsaicharan1

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

@@ -0,0 +1,8 @@
+import Controller from '@ember/controller';
+import { filterBy } from '@ember/object/computed';
+
+export default Controller.extend({
+  dueInvoices  : filterBy('model.eventInvoices', 'status', 'due'),
+  paidInvoices : filterBy('model.eventInvoices', 'status', 'paid')
+
+});

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

@@ -1,4 +1,34 @@
 import Route from '@ember/routing/route';
+import RSVP from 'rsvp';
+import moment from 'moment';
 
 export default Route.extend({
+  async model() {
+    let filterOptions = [];
+    filterOptions = [
+      {
+        and: [
+          {
+            name : 'deleted-at',
+            op   : 'eq',
+            val  : null
+          },
+          {
+            name : 'created-at',
+            op   : 'ge',
+            val  : moment().subtract(30, 'days').toISOString()
+          }
+        ]
+      }
+    ];
+    return RSVP.hash({
+      eventInvoices: this.store.query('event-invoice', {
+        include: 'event'
+      }),
+      upcomingInvoices: this.store.query('event-invoice', {
+        filter  : filterOptions,
+        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 model.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>