feat: use ember table for tickets/attendees

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

@@ -1,54 +1,68 @@
 import Controller from '@ember/controller';
+import { computed, action } from '@ember/object';
+import EmberTableControllerMixin from 'open-event-frontend/mixins/ember-table-controller';
 import moment from 'moment';
-export default Controller.extend({
-  columns: [
-    {
-      propertyName   : 'order',
-      template       : 'components/ui-table/cell/events/view/tickets/attendees/cell-order',
-      title          : 'Order',
-      disableSorting : true
-    },
-    {
-      propertyName : 'ticket.name',
-      title        : 'Ticket Name'
-    },
-    {
-      propertyName : 'ticket.price',
-      title        : 'Ticket Price',
-      template     : 'components/ui-table/cell/events/view/tickets/attendees/cell-price'
-    },
-    {
-      propertyName : 'firstname',
-      title        : 'First Name'
-    },
-    {
-      propertyName : 'lastname',
-      title        : 'Last Name'
-    },
-    {
-      propertyName : 'email',
-      title        : 'Email'
-    },
-    {
-      title          : 'Actions',
-      template       : 'components/ui-table/cell/events/view/tickets/attendees/cell-action',
-      disableSorting : true
-    }
-  ],
-  actions: {
-    toggleCheckIn(attendee) {
-      attendee.toggleProperty('isCheckedIn');
-      if (attendee.isCheckedIn) {
-        let newCheckinTimes = attendee.get('checkinTimes') === null ? `${moment().toISOString()}` : `${attendee.get('checkinTimes')},${moment().toISOString()}`;
-        attendee.set('checkinTimes', newCheckinTimes);
+
+
+export default class extends Controller.extend(EmberTableControllerMixin) {
+  @computed()
+  get columns() {
+    return [
+      {
+        name            : 'Order',
+        valuePath       : 'order',
+        extraValuePaths : ['user', 'status', 'paidVia', 'completedAt', 'createdAt'],
+        cellComponent   : 'ui-table/cell/events/view/tickets/attendees/cell-order'
+      },
+      {
+        name      : 'Ticket Name',
+        valuePath : 'ticket.name'
+      },
+      {
+        name            : 'Ticket Price',
+        valuePath       : 'ticket.price',
+        extraValuePaths : ['event', 'discountCode'],
+        cellComponent   : 'ui-table/cell/events/view/tickets/attendees/cell-price'
+      },
+      {
+        name      : 'First Name',
+        valuePath : 'firstname'
+      },
+      {
+        name      : 'Last Name',
+        valuePath : 'lastname'
+      },
+      {
+        name      : 'Email',
+        valuePath : 'email'
+      },
+      {
+        name            : 'Actions',
+        valuePath       : 'id',
+        extraValuePaths : ['order', 'isCheckedIn'],
+        cellComponent   : 'ui-table/cell/events/view/tickets/attendees/cell-action',
+        actions         : {
+          toggleCheckIn: this.toggleCheckIn.bind(this)
+        }
       }
-      attendee.save()
-        .then(savedAttendee => {
-          this.notify.success(this.l10n.t(`Attendee ${savedAttendee.isCheckedIn ? 'Checked-In' : 'Checked-Out'} Successfully`));
-        })
-        .catch(() => {
-          this.notify.error(this.l10n.t('An unexpected error has occurred'));
-        });
+    ];
+  }
+
+  @action
+  toggleCheckIn(attendee_id) {
+    const attendee = this.store.peekRecord('attendee', attendee_id, { backgroundReload: false });
+    attendee.toggleProperty('isCheckedIn');
+    if (attendee.isCheckedIn) {
+      let newCheckinTimes = attendee.get('checkinTimes') === null ? `${moment().toISOString()}` : `${attendee.get('checkinTimes')},${moment().toISOString()}`;
+      attendee.set('checkinTimes', newCheckinTimes);
     }
+    attendee.save()
+      .then(savedAttendee => {
+        this.notify.success(this.l10n.t(`Attendee ${savedAttendee.isCheckedIn ? 'Checked-In' : 'Checked-Out'} Successfully`));
+        this.refreshModel.bind(this)();
+      })
+      .catch(() => {
+        this.notify.error(this.l10n.t('An unexpected error has occurred'));
+      });
   }
-});
+}

app/routes/events/view/tickets/attendees/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.attendees_status')) {
       case 'placed':
@@ -18,9 +19,10 @@ export default Route.extend({
       case 'all':
         return this.l10n.t('All');
     }
-  },
+  }
   async model(params) {
     this.set('params', params);
+    const searchField = 'firstname';
     let filterOptions = [];
     if (params.attendees_status === 'checkedIn') {
       filterOptions = [
@@ -53,22 +55,18 @@ export default Route.extend({
         }
       ];
     }
+    filterOptions = this.applySearchFilters(filterOptions, params, searchField);
 
-    let queryObject = {
-      include      : 'order.user,user',
-      filter       : filterOptions,
-      'page[size]' : 10
+    let queryString = {
+      include        : 'user,order',
+      filter         : filterOptions,
+      'page[size]'   : params.per_page || 10,
+      'page[number]' : params.page || 1
     };
 
-    let store = this.modelFor('events.view');
 
-    let data = await store.query('attendees', queryObject);
+    queryString = this.applySortFilters(queryString, params);
 
-    return {
-      data,
-      store,
-      query      : queryObject,
-      objectType : 'attendees'
-    };
+    return  this.asArray(this.modelFor('events.view').query('attendees', queryString));
   }
-});
+}

app/templates/components/ui-table/cell/events/view/tickets/attendees/cell-action.hbs

@@ -1,7 +1,7 @@
-{{#if (eq record.order.status 'completed')}}
-  {{#if record.isCheckedIn}}
-    <button class="tiny ui labeled icon negative button" {{action toggleCheckIn record}}><i class="remove icon"></i>{{t 'Check-Out'}}</button>
+{{#if (eq extraRecords.order.status 'completed')}}
+  {{#if extraRecords.isCheckedIn}}
+    <button class="tiny ui labeled icon negative button" {{action props.actions.toggleCheckIn record}}><i class="remove icon"></i>{{t 'Check-Out'}}</button>
   {{else}}
-    <button class="tiny ui labeled icon positive button" {{action toggleCheckIn record}}><i class="checkmark icon"></i>{{t 'Check‑In'}}</button>
+    <button class="tiny ui labeled icon positive button" {{action props.actions.toggleCheckIn record}}><i class="checkmark icon"></i>{{t 'Check‑In'}}</button>
   {{/if}}
 {{/if}}

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

@@ -1,27 +1,24 @@
 <div class="ui tiny header">
-  {{#link-to 'orders.view' record.order.identifier}}{{record.order.identifier}}{{/link-to}}
+  {{#link-to 'orders.view' record.identifier}}{{record.identifier}}{{/link-to}}
   <span class="weight-400">
     {{t 'by'}}
-    {{record.order.user.email}}
+    {{extraRecords.user.email}}
   </span>
-  <div class="ui basic mini {{if (eq record.order.status 'completed') 'green'
-                                 (if (or (eq record.order.status 'placed')
-                                 (eq record.order.status 'pending')) 'yellow' 'red')}}
-                                  label attendees-margin">
-    {{record.order.status}}
+  <div class="ui basic mini {{order-color record.status}} label attendees-margin">
+    {{record.status}}
   </div>
   <div class="sub header">
-    {{#if record.order.paidVia}}
+    {{#if extraRecords.paidVia}}
       <span class="weight-800">
-        {{t 'Payment via'}} {{record.order.paidVia}}
+        {{t 'Payment via'}} {{extraRecords.paidVia}}
       </span>
     {{/if}}
-    {{#if (eq record.order.status 'completed')}}
-      {{moment-format record.order.completedAt 'MMMM Do YYYY, h:mm A -'}}
-      {{moment-from-now record.order.completedAt}}
+    {{#if (eq extraRecords.status 'completed')}}
+      {{moment-format extraRecords.completedAt 'MMMM Do YYYY, h:mm A -'}}
+      {{moment-from-now extraRecords.completedAt}}
     {{else}}
-      {{moment-format record.order.createdAt 'MMMM Do YYYY, h:mm A -'}}
-      {{moment-from-now record.order.createdAt}}
+      {{moment-format extraRecords.createdAt 'MMMM Do YYYY, h:mm A -'}}
+      {{moment-from-now extraRecords.createdAt}}
     {{/if}}
   </div>
 </div>

app/templates/components/ui-table/cell/events/view/tickets/attendees/cell-price.hbs

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

app/templates/events/view/tickets/attendees/list.hbs

@@ -1,16 +1,15 @@
 <div class="sixteen column wide">
-  {{events/events-table columns=columns
-                        data=model.data
-                        store=model.store
-                        query=model.query
-                        paymentCurrency=model.store.paymentCurrency
-                        isNotStoreQuery = true
-                        modelName = model.objectType
-                        useNumericPagination=true
-                        showGlobalFilter=true
-                        showPageSize=true
-                        toggleCheckIn=(action 'toggleCheckIn')
-
-                        customGlobalFilter='firstname'
+  {{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>

tests/integration/components/ui-table/cell/events/view/tickets/attendees/cell-order-test.js

@@ -5,9 +5,14 @@ import { render } from '@ember/test-helpers';
 
 module('Integration | Component | ui table/cell/events/view/tickets/attendees/cell order', function(hooks) {
   setupIntegrationTest(hooks);
-
+  const props = {
+    actions: {
+      toggleCheckIn: () => {}
+    }
+  };
   test('it renders', async function(assert) {
-    await render(hbs`{{ui-table/cell/events/view/tickets/attendees/cell-order}}`);
+    this.set('props', props);
+    await render(hbs`{{ui-table/cell/events/view/tickets/attendees/cell-order props=props}}`);
     assert.ok(this.element.textContent.trim().includes(''));
   });
 });

tests/integration/components/ui-table/cell/events/view/tickets/attendees/cell-price-test.js

@@ -5,9 +5,14 @@ import { render } from '@ember/test-helpers';
 
 module('Integration | Component | ui table/cell/events/view/tickets/attendees/cell price', function(hooks) {
   setupIntegrationTest(hooks);
-
+  const extraRecords = {
+    event: {
+      paymentCurrency: 'USD'
+    }
+  };
   test('it renders', async function(assert) {
-    await render(hbs`{{ui-table/cell/events/view/tickets/attendees/cell-price paymentCurrency='USD'}}`);
+    this.set('extraRecords', extraRecords);
+    await render(hbs`{{ui-table/cell/events/view/tickets/attendees/cell-price extraRecords=extraRecords}}`);
     assert.ok(this.element.textContent.trim().includes(''));
   });
 });