fix: adding table for admin-sales-by-event

app/controllers/admin/sales/index.js

@@ -1,6 +1,83 @@
-import classic from 'ember-classic-decorator';
 import Controller from '@ember/controller';
 import AdminSalesMixin from 'open-event-frontend/mixins/admin-sales';
+import { or } from '@ember/object/computed';
+import EmberTableControllerMixin from 'open-event-frontend/mixins/ember-table-controller';
 
-@classic
-export default class IndexController extends Controller.extend(AdminSalesMixin) {}
+export default class IndexController extends Controller.extend(AdminSalesMixin, EmberTableControllerMixin) {
+
+@or('authManager.currentUser.isSuperAdmin', 'authManager.currentUser.isAdmin') hasRestorePrivileges;
+
+get columns() {
+  return [
+    {
+      name            : 'Events',
+      valuePath       : 'name',
+      isSortable      : true,
+      headerComponent : 'tables/headers/sort'
+    },
+    {
+      name            : 'Event Date',
+      valuePath       : 'startsAt',
+      isSortable      : true,
+      headerComponent : 'tables/headers/sort',
+      extraValuePaths : ['timezone'],
+      cellComponent   : 'ui-table/cell/cell-simple-date'
+    },
+    {
+      name            : 'Completed Orders',
+      headerComponent : 'tables/headers/sort',
+      color           : 'green',
+      subcolumns      : [
+        {
+          name      : 'Tickets',
+          valuePath : 'sales.completed.ticket_count',
+          width     : 30
+        },
+        {
+          name            : 'Sales',
+          valuePath       : 'sales.completed.sales_total',
+          extraValuePaths : ['paymentCurrency'],
+          cellComponent   : 'ui-table/cell/admin/sales/cell-amount'
+        }
+      ]
+    },
+    {
+      name            : 'Placed Orders',
+      color           : 'blue',
+      headerComponent : 'tables/headers/sort',
+      subcolumns      : [
+        {
+          name      : 'Tickets',
+          valuePath : 'sales.placed.ticket_count',
+          width     : 30
+        },
+        {
+          name            : 'Sales',
+          valuePath       : 'sales.placed.sales_total',
+          extraValuePaths : ['paymentCurrency'],
+          cellComponent   : 'ui-table/cell/admin/sales/cell-amount'
+        }
+      ]
+    },
+    {
+      name            : 'Pending Orders',
+      color           : 'yellow',
+      headerComponent : 'tables/headers/sort',
+      subcolumns      : [
+        {
+          name      : 'Tickets',
+          valuePath : 'sales.pending.ticket_count',
+          width     : 30
+        },
+        {
+          name            : 'Sales',
+          valuePath       : 'sales.pending.sales_total',
+          extraValuePaths : ['paymentCurrency'],
+          cellComponent   : 'ui-table/cell/admin/sales/cell-amount'
+        }
+      ]
+    }
+  ];
+}
+
+}

app/routes/admin/sales/index.js

@@ -1,13 +1,32 @@
 import classic from 'ember-classic-decorator';
 import Route from '@ember/routing/route';
+import { action } from '@ember/object';
+import EmberTableRouteMixin from 'open-event-frontend/mixins/ember-table-route';
 
 @classic
-export default class IndexRoute extends Route {
+export default class IndexRoute  extends Route.extend(EmberTableRouteMixin) {
+
   titleToken() {
     return this.l10n.t('Overview');
   }
 
-  model() {
-    return this.store.findAll('admin-sales-by-event');
+
+  async model(params) {
+    this.set('params', params);
+    let filterOptions = [];
+    const searchField = 'name';
+    filterOptions = this.applySearchFilters(filterOptions, params, searchField);
+    let queryString = {
+      filter         : filterOptions,
+      'page[size]'   : params.per_page || 10,
+      'page[number]' : params.page || 1
+    };
+    queryString = this.applySortFilters(queryString, params);
+    return  this.asArray(this.store.query('admin-sales-by-event', queryString));
+  }
+
+  @action
+  refreshRoute() {
+    this.refresh();
   }
 }

app/templates/admin/sales/index.hbs

@@ -1,67 +1,17 @@
-<div class="ui stackable grid">
-  <div class="row">
-    <h2 class="ui header column">{{t 'Tickets Summary'}}</h2>
-  </div>
-  <div class="row">
-    <div class="sixteen wide column">
-      <table class="ui stackable structured celled compact table">
-        <thead>
-          <tr>
-            <th rowspan="2">{{t 'Events'}}</th>
-            <th rowspan="2">{{t 'Event Date'}}</th>
-            <th colspan="2" class="ui green inverted segment center aligned">{{t 'Completed Orders '}}</th>
-            <th colspan="2" class="ui blue inverted segment center aligned">{{t 'Placed Orders'}}</th>
-            <th colspan="2" class="ui yellow inverted segment center aligned">{{t 'Pending Orders '}}</th>
-          </tr>
-          <tr>
-            <th class="right aligned">{{t 'Tickets'}}</th>
-            <th class="right aligned">{{t 'Sales'}}</th>
-            <th class="right aligned">{{t 'Tickets'}}</th>
-            <th class="right aligned">{{t 'Sales'}}</th>
-            <th class="right aligned">{{t 'Tickets'}}</th>
-            <th class="right aligned">{{t 'Sales'}}</th>
-          </tr>
-        </thead>
-        <tbody>
-          {{#each this.model as |entry|}}
-            <tr>
-              <td>{{entry.name}}</td>
-              <td>{{moment-format entry.startsAt 'ddd, MMM DD \at h:mm A'}}</td>
-              <td class="right aligned">{{entry.sales.completed.ticket_count}}</td>
-              <td class="right aligned">{{currency-symbol entry.paymentCurrency}} {{format-money entry.sales.completed.sales_total}}</td>
-              <td class="right aligned">{{entry.sales.placed.ticket_count}}</td>
-              <td class="right aligned">{{currency-symbol entry.paymentCurrency}} {{format-money entry.sales.placed.sales_total}}</td>
-              <td class="right aligned">{{entry.sales.pending.ticket_count}}</td>
-              <td class="right aligned">{{currency-symbol entry.paymentCurrency}} {{format-money entry.sales.pending.sales_total}}</td>
-            </tr>
-          {{/each}}
-        </tbody>
-        {{!-- <tfoot>
-          <tr>
-            <th colspan="2">
-              <span class="weight-600">{{t 'Total'}}</span>
-            </th>
-            <th class="right aligned">
-              {{totalCompletedTickets}}
-            </th>
-            <th class="right aligned">
-              US$ {{format-money totalCompletedSales}}
-            </th>
-            <th class="right aligned">
-              {{totalPlacedTickets}}
-            </th>
-            <th class="right aligned">
-              US$ {{format-money totalPlacedSales}}
-            </th>
-            <th class="right aligned">
-              {{totalPendingTickets}}
-            </th>
-            <th class="right aligned">
-              US$ {{format-money totalPendingSales}}
-            </th>
-          </tr>
-        </tfoot> --}}
-      </table>
-    </div>
-  </div>
+<div class="row">
+  <h2 class="ui header column">{{t 'Tickets Summary'}}</h2>
 </div>
+<br>
+<Tables::Default
+    @columns={{this.columns}}
+    @rows={{this.model.data}}
+    @currentPage={{this.page}}
+    @pageSize={{this.per_page}}
+    @searchQuery={{this.search}}
+    @sortBy={{this.sort_by}}
+    @sortDir={{this.sort_dir}}
+    @metaData={{this.model.meta}}
+    @filterOptions={{this.filterOptions}}
+    @widthConstraint="eq-container"
+    @resizeMode="fluid"
+    @fillMode="equal-column" />

app/templates/components/tables/headers/sort.hbs

@@ -1,4 +1,6 @@
-{{yield}}
-{{#if this.column.isSortable}}
-  <i class="{{this.sortIcon}} icon"></i>
-{{/if}}
+<div class="{{if this.column.color (concat 'ui inverted segment ' this.column.color)}}">
+  {{yield}}
+  {{#if this.column.isSortable}}
+     <i class="{{this.sortIcon}} icon"></i>
+  {{/if}}
+</div>

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

@@ -0,0 +1 @@
+{{currency-symbol @extraRecords.paymentCurrency}} {{format-money @record}}