feat: switch to ember-table for admin-events

app/controllers/admin/events/list.js

@@ -1,129 +1,175 @@
 import Controller from '@ember/controller';
-import { computed } from '@ember/object';
-export default Controller.extend({
-  hasRestorePrivileges: computed('authManager.currentUser.isAdmin', function() {
-    return this.get('authManager.currentUser.isSuperAdmin') || this.get('authManager.currentUser.isAdmin');
-  }),
-  columns: [
+import { computed, action } from '@ember/object';
+import { or } from '@ember/object/computed';
+import EmberTableControllerMixin from 'open-event-frontend/mixins/ember-table-controller';
+
+
+export default class extends Controller.extend(EmberTableControllerMixin) {
+
+  hasRestorePrivileges = or('authManager.currentUser.isSuperAdmin', 'authManager.currentUser.isAdmin');
+
+  columns= [
     {
-      propertyName : 'name',
-      template     : 'components/ui-table/cell/cell-event',
-      title        : 'Name'
+      name            : 'Name',
+      valuePath       : 'name',
+      isSortable      : true,
+      headerComponent : 'tables/headers/sort',
+      cellComponent   : 'ui-table/cell/cell-event',
+      options         : {
+        hasRestorePrivileges: this.hasRestorePrivileges
+      },
+      actions: {
+        moveToDetails        : this.moveToDetails.bind(this),
+        editEvent            : this.editEvent.bind(this),
+        openDeleteEventModal : this.openDeleteEventModal.bind(this),
+        deleteEvent          : this.deleteEvent.bind(this),
+        restoreEvent         : this.restoreEvent.bind(this)
+      }
     },
     {
-      propertyName : 'startsAt',
-      template     : 'components/ui-table/cell/cell-simple-date',
-      dateFormat   : 'MMMM DD, YYYY - hh:mm A',
-      title        : 'Starts At'
+      name          : 'Starts At',
+      valuePath     : 'startsAt',
+      cellComponent : 'ui-table/cell/cell-simple-date',
+      width         : 40,
+      options       : {
+        dateFormat: 'MMMM DD, YYYY - hh:mm A'
+      }
     },
     {
-      propertyName : 'endsAt',
-      template     : 'components/ui-table/cell/cell-simple-date',
-      dateFormat   : 'MMMM DD, YYYY - hh:mm A',
-      title        : 'Ends At'
+      name          : 'Ends At',
+      valuePath     : 'endsAt',
+      cellComponent : 'ui-table/cell/cell-simple-date',
+      width         : 40,
+      options       : {
+        dateFormat: 'MMMM DD, YYYY - hh:mm A'
+      }
     },
     {
-      propertyName : 'state',
-      template     : 'components/ui-table/cell/cell-event-state',
-      title        : 'State'
+      name      : 'State',
+      valuePath : 'state',
+      width     : 50
     },
     {
-      propertyName   : 'roles',
-      template       : 'components/ui-table/cell/cell-roles',
-      title          : 'Roles',
-      disableSorting : true
+      name          : 'Roles',
+      valuePath     : 'roles',
+      cellComponent : 'ui-table/cell/cell-roles'
     },
     {
-      propertyName   : 'eventStatisticsGeneral.sessions',
-      template       : 'components/ui-table/cell/cell-sessions',
-      title          : 'Sessions',
-      disableSorting : true
+      name          : 'Sessions',
+      valuePath     : 'sessions',
+      cellComponent : 'ui-table/cell/cell-sessions',
+      width         : 60
+
     },
     {
-      propertyName   : 'eventStatisticsGeneral.speakers',
-      template       : 'components/ui-table/cell/cell-speakers-dashboard',
-      title          : 'Speakers',
-      disableSorting : true
+      name          : 'Speakers',
+      valuePath     : 'speakers',
+      cellComponent : 'ui-table/cell/cell-speakers-dashboard',
+      width         : 60
     },
     {
-      propertyName   : 'tickets',
-      template       : 'components/ui-table/cell/cell-tickets',
-      title          : 'Tickets',
-      disableSorting : true
+      name          : 'Tickets',
+      valuePath     : 'tickets',
+      cellComponent : 'ui-table/cell/cell-tickets'
     },
     {
-      propertyName   : 'url',
-      template       : 'components/ui-table/cell/cell-link',
-      title          : 'Public URL',
-      disableSorting : true
+      name          : 'Public URL',
+      valuePath     : 'url',
+      cellComponent : 'ui-table/cell/cell-link'
     },
     {
-      propertyName   : 'is-featured',
-      template       : 'components/ui-table/cell/admin/event-is-featured',
-      title          : 'Featured Event',
-      disableSorting : false
-    },
-    {
-      propertyName   : 'deletedAt',
-      template       : 'components/ui-table/cell/cell-buttons',
-      title          : 'Actions',
-      disableSorting : true
+      name          : 'Featured Event',
+      valuePath     : 'isFeatured',
+      cellComponent : 'ui-table/cell/admin/event-is-featured',
+      width         : 40,
+      actions       : {
+        toggleFeatured: this.toggleFeatured.bind(this)
+      }
     }
-  ],
-  actions: {
-    moveToDetails(id) {
-      this.transitionToRoute('events.view', id);
-    },
-    editEvent(id) {
-      this.transitionToRoute('events.view.edit.basic-details', id);
-    },
-    openDeleteEventModal(id, name) {
-      this.set('isEventDeleteModalOpen', true);
-      this.set('confirmName', '');
-      this.set('eventName', name);
-      this.set('eventId', id);
-    },
-    deleteEvent() {
-      this.set('isLoading', true);
-      this.store.findRecord('event', this.eventId, { backgroundReload: false }).then(function(event) {
-        event.destroyRecord();
+  ];
+
+  @computed('model.data')
+  get rows() {
+    const rows = [];
+    this.model.data.forEach(row => {
+      rows.pushObject({
+        name       : row,
+        startsAt   : row.startsAt,
+        endsAt     : row.endsAt,
+        state      : row.state,
+        roles      : row,
+        sessions   : row,
+        speakers   : row,
+        tickets    : row,
+        url        : row,
+        isFeatured : row
+      });
+    });
+    return rows;
+  }
+
+  @action
+  moveToDetails(id) {
+    this.transitionToRoute('events.view', id);
+  }
+
+  @action
+  editEvent(id) {
+    this.transitionToRoute('events.view.edit.basic-details', id);
+  }
+
+  @action
+  openDeleteEventModal(id, name) {
+    this.set('isEventDeleteModalOpen', true);
+    this.set('confirmName', '');
+    this.set('eventName', name);
+    this.set('eventId', id);
+  }
+
+  @action
+  deleteEvent() {
+    this.set('isLoading', true);
+    this.store.findRecord('event', this.eventId, { backgroundReload: false }).then(function(event) {
+      event.destroyRecord();
+    })
+      .then(() => {
+        this.set('isLoading', false);
+        this.notify.success(this.l10n.t('Event has been deleted successfully.'));
+        this.send('refreshRoute');
       })
-        .then(() => {
-          this.set('isLoading', false);
-          this.notify.success(this.l10n.t('Event has been deleted successfully.'));
-          this.send('refreshRoute');
-        })
-        .catch(() => {
-          this.set('isLoading', false);
-          this.notify.error(this.l10n.t('An unexpected error has occurred.'));
-        });
-      this.set('isEventDeleteModalOpen', false);
-    },
-    restoreEvent(event) {
-      this.set('isLoading', true);
-      event.set('deletedAt', null);
-      event.save({ adapterOptions: { getTrashed: true } })
-        .then(() => {
-          this.notify.success(this.l10n.t('Event has been restored successfully.'));
-          this.send('refreshRoute');
-        })
-        .catch(e => {
-          this.notify.error(this.l10n.t('An unexpected error has occurred.'));
-          console.warn(e);
-        })
-        .finally(() => {
-          this.set('isLoading', false);
-        });
-    },
-    toggleFeatured(event) {
-      event.toggleProperty('isFeatured');
-      event.save()
-        .then(() => {
-          this.notify.success(this.l10n.t('Event details modified successfully'));
-        })
-        .catch(() => {
-          this.notify.error(this.l10n.t('An unexpected error has occurred.'));
-        });
-    }
+      .catch(() => {
+        this.set('isLoading', false);
+        this.notify.error(this.l10n.t('An unexpected error has occurred.'));
+      });
+    this.set('isEventDeleteModalOpen', false);
+  }
+  @action
+  restoreEvent(event) {
+    this.set('isLoading', true);
+    event.set('deletedAt', null);
+    event.save({ adapterOptions: { getTrashed: true } })
+      .then(() => {
+        this.notify.success(this.l10n.t('Event has been restored successfully.'));
+        this.send('refreshRoute');
+      })
+      .catch(e => {
+        this.notify.error(this.l10n.t('An unexpected error has occurred.'));
+        console.warn(e);
+      })
+      .finally(() => {
+        this.set('isLoading', false);
+      });
+  }
+
+  @action
+  toggleFeatured(event) {
+    event.toggleProperty('isFeatured');
+    event.save()
+      .then(() => {
+        this.notify.success(this.l10n.t('Event details modified successfully'));
+      })
+      .catch(() => {
+        this.notify.error(this.l10n.t('An unexpected error has occurred.'));
+      });
   }
-});
+}

app/routes/admin/events/list.js

@@ -1,7 +1,10 @@
 import Route from '@ember/routing/route';
+import { action } from '@ember/object';
+import EmberTableRouteMixin from 'open-event-frontend/mixins/ember-table-route';
 import moment from 'moment';
 
-export default Route.extend({
+export default class extends Route.extend(EmberTableRouteMixin) {
+
   titleToken() {
     switch (this.get('params.events_status')) {
       case 'live':
@@ -13,10 +16,13 @@ export default Route.extend({
       case 'deleted':
         return this.l10n.t('Deleted');
     }
-  },
-  model(params) {
+  }
+
+
+  async model(params) {
     this.set('params', params);
     let filterOptions = [];
+    const searchField = 'name';
     if (params.events_status === 'live') {
       filterOptions = [
         {
@@ -110,17 +116,23 @@ export default Route.extend({
       filterOptions = [];
     }
 
-    return this.store.query('event', {
-      get_trashed  : true,
-      include      : 'tickets,sessions,speakers,owner,organizers,coorganizers,track-organizers,registrars,moderators',
-      filter       : filterOptions,
-      'page[size]' : 10
-    });
-  },
+    filterOptions = this.applySearchFilters(filterOptions, params, searchField);
 
-  actions: {
-    refreshRoute() {
-      this.refresh();
-    }
+    let queryString = {
+      get_trashed    : true,
+      include        : 'tickets,sessions,speakers,owner,organizers,coorganizers,track-organizers,registrars,moderators',
+      filter         : filterOptions,
+      'page[size]'   : params.per_page || 10,
+      'page[number]' : params.page || 1
+    };
+    queryString = this.applySortFilters(queryString, params);
+    return {
+      data: await this.store.query('event', queryString)
+    };
+  }
+
+  @action
+  refreshRoute() {
+    this.refresh();
   }
-});
+}

app/templates/admin/events/list.hbs

@@ -1,15 +1,16 @@
 <div class="sixteen column wide">
-  {{events/events-table columns=columns data=model
-    useNumericPagination=true
-    showGlobalFilter=true
-    showPageSize=true
-    moveToDetails=(action 'moveToDetails')
-    editEvent=(action 'editEvent')
-    openDeleteEventModal=(action 'openDeleteEventModal')
-    restoreEvent = (action 'restoreEvent')
-    toggleFeatured=(action 'toggleFeatured')
-    customGlobalFilter='name'
-    hasRestorePrivileges=hasRestorePrivileges
+  {{tables/default  columns=columns
+                    rows=rows
+                    currentPage=page
+                    pageSize=per_page
+                    searchQuery=search
+                    sortBy=sort_by
+                    sortDir=sort_dir
+                    metaData=model.data.meta
+                    filterOptions=filterOptions
+                    widthConstraint="eq-container"
+                    resizeMode="fluid"
+                    fillMode="equal-column"
   }}
   {{modals/event-delete-modal isLoading=isLoading isOpen=isEventDeleteModalOpen confirmName=confirmName eventName=eventName deleteEvent=(action 'deleteEvent')}}
 </div>

app/templates/components/ui-table/cell/admin/event-is-featured.hbs

@@ -1 +1 @@
-{{ui-checkbox class='toggle' checked=record.isFeatured onChange=(action toggleFeatured record)}}
+{{ui-checkbox class='toggle' checked=record.isFeatured onChange=(action props.actions.toggleFeatured record)}}