feat: Implemented event invoice table for organizers

app/controllers/account/billing/invoices.js

@@ -0,0 +1,4 @@
+import Controller from '@ember/controller';
+
+export default class extends Controller {
+}

app/controllers/account/billing/invoices/list.js

@@ -0,0 +1,112 @@
+import Controller from '@ember/controller';
+import EmberTableControllerMixin from 'open-event-frontend/mixins/ember-table-controller';
+import { computed } from '@ember/object';
+
+export default class extends Controller.extend(EmberTableControllerMixin) {
+  @computed()
+  get columns() {
+    let columns = [];
+    if (this.model.params.invoice_status === 'upcoming') {
+      columns = [
+        {
+          name      : 'Invoice ID',
+          valuePath : 'id'
+        },
+        {
+          name          : 'Name',
+          valuePath     : 'event',
+          cellComponent : 'ui-table/cell/events/cell-event-invoice'
+        },
+        {
+          name      : 'Date Issued',
+          valuePath : 'createdAt'
+        },
+        {
+          name      : 'Outstanding Amount',
+          valuePath : 'amount'
+        },
+        {
+          name      : 'View Invoice',
+          valuePath : 'invoicePdfUrl'
+        }
+      ];
+    } else if (this.model.params.invoice_status === 'paid') {
+      columns = [
+        {
+          name      : 'Invoice ID',
+          valuePath : 'id'
+        },
+        {
+          name          : 'Name',
+          valuePath     : 'event',
+          cellComponent : 'ui-table/cell/events/cell-event-invoice'
+        },
+        {
+          name      : 'Date Issued',
+          valuePath : 'createdAt'
+        },
+        {
+          name      : 'Amount',
+          valuePath : 'amount'
+        },
+        {
+          name      : 'Date Paid',
+          valuePath : 'completedAt'
+        },
+        {
+          name      : 'View Invoice',
+          valuePath : 'invoicePdfUrl'
+        }
+
+      ];
+    } else if (this.model.params.invoice_status === 'due') {
+      columns =   [
+        {
+          name      : 'Invoice ID',
+          valuePath : 'id'
+        },
+        {
+          name          : 'Name',
+          valuePath     : 'event',
+          cellComponent : 'ui-table/cell/events/cell-event-invoice'
+
+        },
+        {
+          name      : 'Date Issued',
+          valuePath : 'createdAt'
+        },
+        {
+          name      : 'Amount Due',
+          valuePath : 'amount'
+        },
+        {
+          name      : 'View Invoice',
+          valuePath : 'invoicePdfUrl'
+        }
+
+      ];
+    } else if (this.model.params.invoice_status === 'due') {
+      columns = [
+        {
+          name      : 'Invoice ID',
+          valuePath : 'id'
+        },
+        {
+          name          : 'Name',
+          valuePath     : 'event',
+          cellComponent : 'ui-table/cell/events/cell-event-invoice'
+        },
+        {
+          name      : 'Amount',
+          valuePath : 'amount'
+        },
+        {
+          name      : 'Status',
+          valuePath : 'status'
+        }
+
+      ];
+    }
+    return columns;
+  }
+}

app/models/event-invoice.js

@@ -26,6 +26,7 @@ export default ModelBase.extend({
   expYear      	: attr('number'),
   amount        : attr('number'),
   completedAt   : attr('moment'),
+  invoicePdfUrl : attr('string'),
 
   /** relationships
    *

app/router.js

@@ -115,7 +115,9 @@ router.map(function() {
     this.route('danger-zone');
     this.route('billing', function() {
       this.route('payment-info');
-      this.route('invoices');
+      this.route('invoices', function() {
+        this.route('list', { path: '/:invoice_status' });
+      });
     });
   });
   this.route('explore');

app/routes/account/billing/invoices/list.js

@@ -0,0 +1,72 @@
+import Route from '@ember/routing/route';
+import moment from 'moment';
+import EmberTableRouteMixin from 'open-event-frontend/mixins/ember-table-route';
+import { action } from '@ember/object';
+
+export default class extends Route.extend(EmberTableRouteMixin) {
+  titleToken() {
+    switch (this.params.invoice_status) {
+      case 'paid':
+        return this.l10n.t('Paid');
+      case 'due':
+        return this.l10n.t('Due');
+      case 'upcoming':
+        return this.l10n.t('Upcoming');
+      case 'all':
+        return this.l10n.t('All');
+    }
+  }
+  async model(params) {
+    this.set('params', params);
+    const searchField = 'name';
+    let filterOptions = [];
+    if (params.invoice_status === 'paid' || params.invoice_status === 'due') {
+      filterOptions = [
+        {
+          name : 'status',
+          op   : 'eq',
+          val  : params.invoice_status
+        }
+      ];
+    } else if (params.invoice_status === 'upcoming') {
+      filterOptions = [
+        {
+          and: [
+            {
+              name : 'deleted-at',
+              op   : 'eq',
+              val  : null
+            },
+            {
+              name : 'created-at',
+              op   : 'ge',
+              val  : moment().subtract(30, 'days').toISOString()
+            }
+          ]
+        }
+      ];
+    }
+
+
+    filterOptions = this.applySearchFilters(filterOptions, params, searchField);
+
+    let queryString = {
+      include        : 'event',
+      filter         : filterOptions,
+      'page[size]'   : params.per_page || 10,
+      'page[number]' : params.page || 1
+    };
+
+    queryString = this.applySortFilters(queryString, params);
+    return {
+      eventInvoices: (await this.store.query('event-invoice', queryString)).toArray(),
+      params
+
+    };
+
+  }
+  @action
+  refreshRoute() {
+    this.refresh();
+  }
+}

app/templates/account/billing/invoices.hbs

@@ -1,14 +1,23 @@
 <div class="ui grid stackable">
-  <div class="thirteen wide column">
-    <h2 class="ui header column">{{t 'Due Invoices'}}</h2>
+  <div class="row">
+    <div class="eight wide column">
+      {{#tabbed-navigation isNonPointing=true}}
+        {{#link-to 'account.billing.invoices.list' 'all' class='item'}}
+          {{t 'All'}}
+        {{/link-to}}
+        {{#link-to 'account.billing.invoices.list' 'due' class='item'}}
+          {{t 'Due'}}
+        {{/link-to}}
+        {{#link-to 'account.billing.invoices.list' 'paid' class='item'}}
+          {{t 'Paid'}}
+        {{/link-to}}
+        {{#link-to 'account.billing.invoices.list' 'upcoming' class='item'}}
+          {{t 'Upcoming'}}
+        {{/link-to}}
+      {{/tabbed-navigation}}
+    </div>
   </div>
-  <div class="ui hidden divider"></div>
-  <div class="thirteen wide column">
-    <h2 class="ui header column">{{t 'Upcoming Invoices'}}</h2>
+  <div class="row">
+    {{outlet}}
   </div>
-  <div class="ui hidden divider"></div>
-  <div class="thirteen wide column">
-    <h2 class="ui header column">{{t 'Paid Invoices'}}</h2>
-  </div>
-  <div class="ui hidden divider"></div>
-</div>
+</div>

app/templates/account/billing/invoices/list.hbs

@@ -0,0 +1,15 @@
+<div class="sixteen wide column">
+  {{tables/default columns=columns
+                  rows=model.eventInvoices
+                  currentPage=page
+                  pageSize=per_page
+                  searchQuery=search
+                  sortBy=sort_by
+                  sortDir=sort_dir
+                  metaData=model.eventInvoices.meta
+                  filterOptions=filterOptions
+                  widthConstraint="eq-container"
+                  resizeMode="fluid"
+                  fillMode="equal-column"
+  }}
+</div>

app/templates/components/ui-table/cell/events/cell-event-invoice.hbs

@@ -0,0 +1,3 @@
+<div class="ui header weight-400">
+  <img src="{{if record.logoUrl record.logoUrl '/images/placeholders/Other.jpg'}}" alt="Event Logo" class="ui image"> <br> {{record.name}}
+</div>