fix: Using ember tables for Admin/Sales/Invoices (#3429)

* Using ember tables for Admin/Sales/Invoices

* Update invoices.js

* Update invoices.js

Author: kushthedude

app/controllers/admin/sales/invoices.js

@@ -1,37 +1,47 @@
 import Controller from '@ember/controller';
+import { computed } from '@ember/object';
+import EmberTableControllerMixin from 'open-event-frontend/mixins/ember-table-controller';
 
-export default Controller.extend({
-  columns: [
-    {
-      propertyName : 'identifier',
-      title        : 'Invoice #'
-    },
-    {
-      propertyName     : 'event.name',
-      title            : 'Event',
-      disableSorting   : true,
-      disableFiltering : true
 
-    },
-    {
-      propertyName : 'created-at',
-      template     : 'components/ui-table/cell/admin/sales/status/cell-dated',
-      title        : 'Dated'
-    },
-    {
-      propertyName : 'amount',
-      template     : 'components/ui-table/cell/admin/sales/status/cell-amount',
-      title        : 'Amount'
-    },
-    {
-      propertyName     : 'user.email',
-      title            : 'Sent To',
-      disableSorting   : true,
-      disableFiltering : true
-    },
-    {
-      propertyName : 'status',
-      title        : 'Status'
-    }
-  ]
-});
+export default class extends Controller.extend(EmberTableControllerMixin) {
+
+  @computed()
+  get columns() {
+    return [
+      {
+        name            : 'Invoice #',
+        headerComponent : 'tables/headers/sort',
+        isSortable      : true,
+        valuePath       : 'identifier'
+      },
+      {
+        name      : 'Event',
+        valuePath : 'event.name'
+      },
+      {
+        name            : 'Dated',
+        valuePath       : 'createdAt',
+        headerComponent : 'tables/headers/sort',
+        isSortable      : true,
+        cellComponent   : 'ui-table/cell/cell-simple-date',
+        options         : {
+          dateFormat: 'MMMM DD, YYYY - HH:mm A'
+        }
+      },
+      {
+        name          : 'Amount',
+        valuePath     : 'amount',
+        cellComponent : 'ui-table/cell/admin/sales/status/cell-amount'
+      },
+      {
+        name      : 'Sent To',
+        valuePath : 'user.email'
+      },
+      {
+        name      : 'Status',
+        valuePath : 'status'
+      }
+    ];
+  }
+}
+

app/routes/admin/sales/invoices.js

@@ -1,10 +1,21 @@
 import Route from '@ember/routing/route';
+import EmberTableRouteMixin from 'open-event-frontend/mixins/ember-table-route';
 
-export default Route.extend({
+export default class extends Route.extend(EmberTableRouteMixin) {
   titleToken() {
     return this.l10n.t('Invoices');
-  },
-  model() {
-    return this.store.query('event-invoice', { include: 'event,user' });
   }
-});
+
+  async model(params) {
+    const searchField = 'identifier';
+    let filterOptions = this.applySearchFilters([], params, searchField);
+    let queryString = {
+      filter        : filterOptions,
+      'page[size]'  : params.per_page || 100,
+      'page[number' : params.page || 1
+    };
+    queryString = this.applySortFilters(queryString, params);
+    return this.asArray(this.store.query('event-invoice', { include: 'event,user' }, queryString));
+  }
+
+}

app/templates/admin/sales/invoices.hbs

@@ -1,4 +1,4 @@
-<div class="ui stackable grid">
+<div class="ui unstackable grid">
   <div class="row">
     <div class="column">
       <h2 class="ui header">
@@ -8,11 +8,19 @@
   </div>
   <div class="row">
     <div class="column">
-      {{events/events-table columns=columns data=model
-                            useNumericPagination=true
-                            showGlobalFilter=true
-                            showPageSize=true
-      }}
+      {{tables/default columns=columns
+                rows=model.data
+                currentPage=page
+                pageSize=per_page
+                searchQuery=search
+                sortBy=sort_by
+                sortDir=sort_dir
+                metaData=model.meta
+                filterOptions=filterOptions
+                widthConstraint="eq-container"
+                resizeMode="fluid"
+                fillMode="equal-column"
+      }}    
     </div>
   </div>
 </div>

app/templates/components/ui-table/cell/admin/sales/status/cell-amount.hbs

@@ -1,3 +1,3 @@
 <span>
-  US$ {{format-number record.amount}}
+  US$ {{format-number record}}
 </span>