feat: implement ember table for tickets/orders table

app/controllers/events/view/tickets/orders/list.js

@@ -1,99 +1,136 @@
 import Controller from '@ember/controller';
+import { computed, action } from '@ember/object';
+import EmberTableControllerMixin from 'open-event-frontend/mixins/ember-table-controller';
 
-export default Controller.extend({
-  columns: [
-    {
-      propertyName   : 'user',
-      template       : 'components/ui-table/cell/events/view/tickets/orders/cell-order',
-      title          : 'Order',
-      disableSorting : true
-    },
-    {
-      propertyName : 'completedAt',
-      template     : 'components/ui-table/cell/events/view/tickets/orders/cell-date',
-      dateFormat   : 'MMMM DD, YYYY - HH:mm A',
-      title        : 'Date And Time'
-    },
-    {
-      propertyName : 'amount',
-      template     : 'components/ui-table/cell/events/view/tickets/orders/cell-amount',
-      title        : 'Total Amount'
-    },
-    {
-      propertyName : 'attendees.length',
-      title        : 'Quantity'
-    },
-    {
-      propertyName   : 'user.email',
-      title          : 'Buyer/Registration Contact',
-      disableSorting : true
-    }
-  ],
 
-  actions: {
-    completeOrder(order) {
-      this.set('isLoading', true);
-      order.set('status', 'completed');
-      order.save()
-        .then(() => {
-          this.send('refreshRoute');
-          this.notify.success(this.l10n.t('Order has been marked completed successfully.'));
-        })
-        .catch(() => {
-          this.notify.error(this.l10n.t('An unexpected error has occurred.'));
-        })
-        .finally(() => {
-          this.set('isLoading', false);
-        });
-    },
-    deleteOrder(order) {
-      this.set('isLoading', true);
-      order.destroyRecord()
-        .then(() => {
-          this.send('refreshRoute');
-          this.notify.success(this.l10n.t('Order has been deleted successfully.'));
-        })
-        .catch(() => {
-          this.notify.error(this.l10n.t('An unexpected error has occurred.'));
-        })
-        .finally(() => {
-          this.set('isLoading', false);
-        });
-    },
-    cancelOrder(order) {
-      this.set('isLoading', true);
-      order.set('status', 'cancelled');
-      order.save()
-        .then(() => {
-          this.send('refreshRoute');
-          this.notify.success(this.l10n.t('Order has been cancelled successfully.'));
-        })
-        .catch(() => {
-          this.notify.error(this.l10n.t('An unexpected error has occurred.'));
-        })
-        .finally(() => {
-          this.set('isLoading', false);
-        });
-    },
-    async resendConfirmation(order) {
-      try {
-        const payload = {
-          'data': {
-            'order' : order.identifier,
-            'user'  : this.authManager.currentUser.email
-          }
-        };
-        await this.loader.post('orders/resend-email', payload);
-        this.notify.success(this.l10n.t('Email confirmation has been sent to attendees successfully'));
-      } catch (error) {
-        if (error.status && error.status === 429) {
-          this.notify.error(this.l10n.t('Only 5 resend actions are allowed in a minute'));
-        } else if (error.status && error.status === 422) {
-          this.notify.error(this.l10n.tVar(error.response.errors[0].detail));
-        } else {
-          this.notify.error(this.l10n.t('An unexpected error has occurred.'));
+export default class extends Controller.extend(EmberTableControllerMixin) {
+  @computed()
+  get columns() {
+    return [
+      {
+        name            : 'Order',
+        valuePath       : 'identifier',
+        extraValuePaths : ['user', 'status', 'paidVia', 'completedAt', 'createdAt'],
+        cellComponent   : 'ui-table/cell/events/view/tickets/orders/cell-order',
+        width           : 200,
+        actions         : {
+          completeOrder      : this.completeOrder.bind(this),
+          deleteOrder        : this.deleteOrder.bind(this),
+          cancelOrder        : this.cancelOrder.bind(this),
+          resendConfirmation : this.resendConfirmation.bind(this)
+        }
+      },
+      {
+        name            : 'Date And Time',
+        valuePath       : 'completedAt',
+        extraValuePaths : ['createdAt'],
+        cellComponent   : 'ui-table/cell/events/view/tickets/orders/cell-date',
+        headerComponent : 'tables/headers/sort',
+        width           : 100,
+        dateFormat      : 'MMMM DD, YYYY - HH:mm A',
+        isSortable      : true
+      },
+      {
+        name            : 'Total Amount',
+        valuePath       : 'amount',
+        extraValuePaths : ['discountCode', 'event'],
+        cellComponent   : 'ui-table/cell/events/view/tickets/orders/cell-amount',
+        headerComponent : 'tables/headers/sort',
+        width           : 100,
+        isSortable      : true
+      },
+      {
+        name      : 'Quantity',
+        valuePath : 'attendees.length',
+        width     : 50
+      },
+      {
+        name      : 'Buyer/Registration Contact',
+        valuePath : 'user.email',
+        width     : 140
+
+      }
+    ];
+  }
+
+  @computed('model.data.@each')
+  get rows() {
+    return this.model.data;
+  }
+
+  @action
+  completeOrder(order_id) {
+    this.set('isLoading', true);
+    const order = this.store.peekRecord('order', order_id, { backgroundReload: false });
+    order.set('status', 'completed');
+    order.save()
+      .then(() => {
+        this.notify.success(this.l10n.t('Order has been marked completed successfully.'));
+        this.refreshModel.bind(this)();
+      })
+      .catch(() => {
+        this.notify.error(this.l10n.t('An unexpected error has occurred.'));
+      })
+      .finally(() => {
+        this.set('isLoading', false);
+      });
+  }
+  @action
+  deleteOrder(order_id) {
+    this.set('isLoading', true);
+    const order = this.store.peekRecord('order', order_id, { backgroundReload: false });
+    order.destroyRecord()
+      .then(() => {
+        this.notify.success(this.l10n.t('Order has been deleted successfully.'));
+        this.refreshModel.bind(this)();
+      })
+      .catch(e => {
+        console.warn(e);
+        this.notify.error(this.l10n.t('An unexpected error has occurred.'));
+      })
+      .finally(() => {
+        this.set('isLoading', false);
+      });
+  }
+
+  @action
+  cancelOrder(order_id) {
+    this.set('isLoading', true);
+    const order = this.store.peekRecord('order', order_id, { backgroundReload: false });
+    order.set('status', 'cancelled');
+    order.save()
+      .then(() => {
+        this.notify.success(this.l10n.t('Order has been cancelled successfully.'));
+        this.refreshModel.bind(this)();
+      })
+      .catch(() => {
+        this.notify.error(this.l10n.t('An unexpected error has occurred.'));
+      })
+      .finally(() => {
+        this.set('isLoading', false);
+      });
+  }
+
+  @action
+  async resendConfirmation(order_id) {
+    try {
+      const order = this.store.peekRecord('order', order_id, { backgroundReload: false });
+      const payload = {
+        'data': {
+          'order' : order.identifier,
+          'user'  : this.authManager.currentUser.email
         }
+      };
+      await this.loader.post('orders/resend-email', payload);
+      this.notify.success(this.l10n.t('Email confirmation has been sent to attendees successfully'));
+    } catch (error) {
+      if (error.status && error.status === 429) {
+        this.notify.error(this.l10n.t('Only 5 resend actions are allowed in a minute'));
+      } else if (error.status && error.status === 422) {
+        this.notify.error(this.l10n.tVar(error.response.errors[0].detail));
+      } else {
+        this.notify.error(this.l10n.t('An unexpected error has occurred.'));
       }
     }
   }
-});
+}

app/routes/events/view/tickets/orders/list.js

@@ -1,6 +1,7 @@
 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() {
     switch (this.get('params.orders_status')) {
       case 'placed':
@@ -14,10 +15,11 @@ export default Route.extend({
       case 'all':
         return this.l10n.t('All');
     }
-  },
+  }
 
   async model(params) {
     this.set('params', params);
+    const searchField = 'identifier';
     let filterOptions = [];
     if (params.orders_status !== 'all') {
       filterOptions = [
@@ -28,27 +30,17 @@ export default Route.extend({
         }
       ];
     }
+    filterOptions = this.applySearchFilters(filterOptions, params, searchField);
 
-    let queryObject = {
-      include      : 'tickets,user',
-      filter       : filterOptions,
-      'page[size]' : 10
+    let queryString = {
+      include        : 'tickets,user',
+      filter         : filterOptions,
+      'page[size]'   : params.per_page || 10,
+      'page[number]' : params.page || 1
     };
 
-    let store = this.modelFor('events.view');
-
-    let data = await store.query('orders', queryObject);
+    queryString = this.applySortFilters(queryString, params);
 
-    return {
-      data,
-      store,
-      query      : queryObject,
-      objectType : 'orders'
-    };
-  },
-  actions: {
-    refreshRoute() {
-      this.refresh();
-    }
+    return  this.asArray(this.modelFor('events.view').query('orders', queryString));
   }
-});
+}

app/templates/components/ui-table/cell/events/view/tickets/orders/cell-amount.hbs

@@ -1,8 +1,8 @@
 <div class="weight-400">
-  {{currency-symbol paymentCurrency}}  {{format-number record.amount}}
+  {{currency-symbol extraRecords.event.paymentCurrency}}  {{format-number record}}
 </div>
-{{#if record.discountCode.code}}
+{{#if extraRecords.discountCode.code}}
   <div class="ui mini yellow label">
-    {{record.discountCode.code}}
+    {{extraRecords.discountCode.code}}
   </div>
 {{/if}}

app/templates/components/ui-table/cell/events/view/tickets/orders/cell-date.hbs

@@ -1,9 +1,9 @@
-{{#if record.completedAt}}
+{{#if record}}
   <div>
-    {{moment-format record.completedAt 'MMMM DD, YYYY - hh:mm A'}}
+    {{moment-format record 'MMMM DD, YYYY - hh:mm A'}}
   </div>
 {{else}}
   <div>
-    {{moment-format record.createdAt 'MMMM DD, YYYY - hh:mm A'}}
+    {{moment-format extraRecords.createdAt 'MMMM DD, YYYY - hh:mm A'}}
   </div>
 {{/if}}

app/templates/components/ui-table/cell/events/view/tickets/orders/cell-order.hbs

@@ -1,45 +1,45 @@
 <div class="ui tiny header">
-  <a class="main content" href="{{href-to 'orders.view' record.identifier}}">
-    {{record.identifier}}
+  <a class="main content" href="{{href-to 'orders.view' record}}">
+    {{record}}
   </a>
   <span class="weight-400">
-    {{t 'by'}} {{if record.user.firstName record.user.firstName (t 'Name not provided')}}
+    {{t 'by'}} {{if extraRecords.user.firstName extraRecords.user.firstName (t 'Name not provided')}}
   </span>
-  <div class="ui basic mini {{if (eq record.status 'completed') 'green' (if (eq record.status 'placed') 'blue' (if (eq record.status 'pending') 'orange' (if (eq record.status 'expired') 'red' 'yellow')))}} label">
-    {{record.status}}
+  <div class="ui basic mini {{order-color extraRecords.status}} label">
+    {{extraRecords.status}}
   </div>
   <div class="sub header">
-    {{#if record.paidVia}}
+    {{#if extraRecords.paidVia}}
       <span class="weight-800">
-        {{t 'Payment via'}} {{record.paidVia}}
+        {{t 'Payment via'}} {{extraRecords.paidVia}}
       </span>
     {{/if}}
     <span class="muted text">
-      {{#if record.completedAt}}
-        {{moment-format record.completedAt 'MMMM Do YYYY, h:mm A -'}} {{moment-from-now record.completedAt}}
+      {{#if extraRecords.completedAt}}
+        {{moment-format extraRecords.completedAt 'MMMM Do YYYY, h:mm A -'}} {{moment-from-now extraRecords.completedAt}}
       {{else}}
-        {{moment-format record.createdAt 'MMMM Do YYYY, h:mm A -'}} {{moment-from-now record.createdAt}}
+        {{moment-format extraRecords.createdAt 'MMMM Do YYYY, h:mm A -'}} {{moment-from-now extraRecords.createdAt}}
       {{/if}}
     </span>
   </div>
 </div>
 <div class="ui horizontal compact basic buttons">
-  {{#if (and (eq record.status 'placed') (can-modify-order record))}}
-    {{#ui-popup content=(t 'Mark Completed') click=(action (confirm (t 'Are you sure you would like to mark this Order as completed?') (action completeOrder record))) class="{{if device.isMobile 'medium' 'huge'}} ui icon button" position='top center'}}
+  {{#if (and (eq extraRecords.status 'placed') (can-modify-order record))}}
+    {{#ui-popup content=(t 'Mark Completed') click=(action (confirm (t 'Are you sure you would like to mark this Order as completed?') (action props.actions.completeOrder record))) class="{{if device.isMobile 'medium' 'huge'}} ui icon button" position='top center'}}
       <i class="check icon"></i>
     {{/ui-popup}}
   {{/if}}
   {{#if (and (not-eq record.status 'cancelled') (not-eq record.status 'expired') (can-modify-order record))}}
-    {{#ui-popup content=(t 'Cancel order') click=(action (confirm (t 'Are you sure you would like to cancel this Order?') (action cancelOrder record))) class="{{if device.isMobile 'medium' 'huge'}} ui icon button" position='top center'}}
+    {{#ui-popup content=(t 'Cancel order') click=(action (confirm (t 'Are you sure you would like to cancel this Order?') (action props.actions.cancelOrder record))) class="{{if device.isMobile 'medium' 'huge'}} ui icon button" position='top center'}}
       <i class="delete icon"></i>
     {{/ui-popup}}
   {{/if}}
   {{#if (can-modify-order record)}}
-    {{#ui-popup content=(t 'Delete order') click=(action (confirm (t 'Are you sure you would like to delete this Order?') (action deleteOrder record))) class="{{if device.isMobile 'medium' 'huge'}} ui icon button" position='top center'}}
+    {{#ui-popup content=(t 'Delete order') click=(action (confirm (t 'Are you sure you would like to delete this Order?') (action props.actions.deleteOrder record))) class="{{if device.isMobile 'medium' 'huge'}} ui icon button" position='top center'}}
       <i class="trash icon"></i>
     {{/ui-popup}}
   {{/if}}
-  {{#ui-popup content=(t 'Resend order confirmation') click=(action resendConfirmation record) class="{{if device.isMobile 'medium' 'huge'}} ui icon button" position='top center'}}
+  {{#ui-popup content=(t 'Resend order confirmation') click=(action props.actions.resendConfirmation record) class="{{if device.isMobile 'medium' 'huge'}} ui icon button" position='top center'}}
     <i class="mail outline icon"></i>
   {{/ui-popup}}
 </div>