feat: Introducing Ember Tables in Event Dashboard (#3363)

Author: kushthedude

app/controllers/events/view/index.js

@@ -1,51 +1,66 @@
 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({
-  sponsorsColumns: [
-    {
-      propertyName   : 'logo-url',
-      template       : 'components/ui-table/cell/cell-image',
-      title          : 'Logo',
-      disableSorting : true
-    },
-    {
-      propertyName : 'name',
-      title        : 'Name'
-    },
-    {
-      propertyName   : 'type',
-      template       : 'components/ui-table/cell/cell-sponsor-sanitize',
-      title          : 'Type',
-      disableSorting : true
-    },
-    {
-      propertyName : 'level',
-      template     : 'components/ui-table/cell/cell-sponsor-sanitize',
-      title        : 'Level'
-    },
-    {
-      title          : 'Options',
-      template       : 'components/ui-table/cell/cell-sponsor-options',
-      disableSorting : true
-    }
-  ],
-  actions: {
-    deleteSponsor(sponsor) {
-      this.set('isLoading', true);
-      sponsor.destroyRecord()
-        .then(() => {
-          this.notify.success(this.l10n.t('Sponsor has been deleted successfully.'));
-          this.get('model.sponsors').removeObject(sponsor);
-        })
-        .catch(() => {
-          this.notify.error(this.l10n.t('An unexpected error has occurred.'));
-        })
-        .finally(() => {
-          this.set('isLoading', false);
-        });
-    },
-    editSponsor() {
-      this.transitionToRoute('events.view.edit.sponsors');
-    }
+export default class extends Controller.extend(EmberTableControllerMixin) {
+
+  @computed()
+  get columns() {
+    return [
+      {
+        name          : 'Logo',
+        valuePath     : 'logoUrl',
+        cellComponent : 'ui-table/cell/cell-sponsor-image'
+      },
+      {
+        name            : 'Name',
+        valuePath       : 'name',
+        headerComponent : 'tables/headers/sort',
+        isSortable      : true
+
+      },
+      {
+        name          : 'Type',
+        valuePath     : 'type',
+        cellComponent : 'ui-table/cell/cell-sponsor-sanitize'
+      },
+      {
+        name          : 'Level',
+        valuePath     : 'level',
+        cellComponent : 'ui-table/cell/cell-sponsor-sanitize'
+      },
+      {
+        name          : 'Options',
+        valuePath     : 'id',
+        cellComponent : 'ui-table/cell/cell-sponsor-options',
+        actions       : {
+          editSponsor   : this.editSponsor.bind(this),
+          deleteSponsor : this.deleteSponsor.bind(this)
+        }
+      }
+    ];
+  }
+
+  @action
+  deleteSponsor(sponsor_id) {
+    this.set('isLoading', true);
+    let sponsor = this.store.peekRecord('sponsor', sponsor_id, { backgroundReload: false });
+    sponsor.destroyRecord()
+      .then(() => {
+        this.notify.success(this.l10n.t('Sponsor has been deleted successfully.'));
+        this.refreshModel.bind(this)();
+      })
+      .catch(() => {
+        this.notify.error(this.l10n.t('An unexpected error has occurred.'));
+      })
+      .finally(() => {
+        this.set('isLoading', false);
+      });
   }
-});
+
+  @action
+  editSponsor() {
+    this.transitionToRoute('events.view.edit.sponsors');
+  }
+}
+

app/routes/events/view/index.js

@@ -1,24 +1,31 @@
 import Route from '@ember/routing/route';
+import EmberTableRouteMixin from 'open-event-frontend/mixins/ember-table-route';
 
-export default Route.extend({
-  async model() {
+export default class extends Route.extend(EmberTableRouteMixin) {
+
+  async model(params) {
     let eventDetails = this.modelFor('events.view');
-    let sponsorQueryObject = {
-      'page[size]': 10
+    const searchField = 'name';
+    let filterOptions = [];
+    filterOptions = this.applySearchFilters(filterOptions, params, searchField);
+    let queryString = {
+      filter         : filterOptions,
+      'page[size]'   : params.per_page || 10,
+      'page[number]' : params.per_page || 1
     };
+    queryString = this.applySortFilters(queryString, params);
+
 
     return {
-      event             : await eventDetails,
-      sponsors          : await eventDetails.query('sponsors', sponsorQueryObject),
-      query             : sponsorQueryObject,
-      sponsorObjectType : 'sponsors',
-      roleInvites       : await eventDetails.query('roleInvites', {}),
-      sessionTypes      : await eventDetails.query('sessionTypes', {}),
-      socialLinks       : await eventDetails.query('socialLinks', {}),
-      statistics        : await eventDetails.query('eventStatisticsGeneral', {}),
-      orderStat         : await eventDetails.query('orderStatistics', {}),
-      tickets           : await eventDetails.query('tickets', {}),
-      roles             : await this.store.findAll('role')
+      event        : await eventDetails,
+      sponsors     : await this.asArray(eventDetails.query('sponsors', {}, queryString)),
+      roleInvites  : await eventDetails.query('roleInvites', {}),
+      sessionTypes : await eventDetails.query('sessionTypes', {}),
+      socialLinks  : await eventDetails.query('socialLinks', {}),
+      statistics   : await eventDetails.query('eventStatisticsGeneral', {}),
+      orderStat    : await eventDetails.query('orderStatistics', {}),
+      tickets      : await eventDetails.query('tickets', {}),
+      roles        : await this.store.findAll('role')
     };
   }
-});
+}

app/templates/components/events/view/overview/event-sponsors.hbs

@@ -6,20 +6,17 @@
   <div class="header">{{t 'Event sponsors'}}</div>
 </div>
 <div class="content">
-  {{events/events-table
-    columns=columns
-    data=data
-    store=store
-    query=query
-    isNotStoreQuery = true
-    modelName = modelName
-    useNumericPagination=true
-    showGlobalFilter=true
-    showPageSize=true
-    moveToDetails='moveToDetails'
-    editEvent='editEvent'
-    deleteSponsor=deleteSponsor
-    editSponsor=editSponsor
-    customGlobalFilter='name'
-  }}
+  {{tables/default  columns=columns
+                    rows=data.data
+                    currentPage=page
+                    pageSize=per_page
+                    searchQuery=search
+                    sortBy=sort_by
+                    sortDir=sort_dir
+                    metaData=data.meta
+                    filterOptions=filterOptions
+                    widthConstraint="eq-container"
+                    resizeMode="fluid"
+                    fillMode="equal-column"
+  }}    
 </div>

app/templates/components/ui-table/cell/cell-sponsor-image.hbs

@@ -0,0 +1 @@
+<img class="ui tiny image" src="{{if record record '/images/placeholders/Other.jpg'}}" alt="Event logo">

app/templates/components/ui-table/cell/cell-sponsor-options.hbs

@@ -1,8 +1,8 @@
 <div class="ui {{if device.isMobile 'horizontal' 'vertical'}} compact basic buttons">
-  {{#ui-popup content=(t 'Edit') click=(action editSponsor) class='ui icon button' position='left center'}}
+  {{#ui-popup content=(t 'Edit') click=(action props.actions.editSponsor) class='ui icon button' position='left center'}}
     <i class="edit icon"></i>
   {{/ui-popup}}
-  {{#ui-popup content=(t 'Delete') click=(action (confirm (t 'Are you sure you would like to delete this Sponsor?') (action deleteSponsor record))) class='ui icon button' position='left center'}}
+  {{#ui-popup content=(t 'Delete') click=(action (confirm (t 'Are you sure you would like to delete this Sponsor?') (action props.actions.deleteSponsor record))) class='ui icon button' position='left center'}}
     <i class="trash outline icon"></i>
   {{/ui-popup}}
 </div>

app/templates/components/ui-table/cell/cell-sponsor-sanitize.hbs

@@ -1,3 +1,3 @@
-{{#if (get record column.propertyName)}}
-  <span>{{get record column.propertyName}}</span>
+{{#if record}}
+  {{sanitize record}}
 {{/if}}

app/templates/events/view/index.hbs

@@ -9,7 +9,7 @@
     {{events/view/overview/manage-roles data=model}}
   </div>
   <div class="eight wide column">
-    {{events/view/overview/event-sponsors data=model.sponsors query=model.query modelName=model.sponsorObjectType store=model.event columns=sponsorsColumns deleteSponsor=(action 'deleteSponsor') editSponsor=(action 'editSponsor')}}
+    {{events/view/overview/event-sponsors data=model.sponsors columns=columns page=page per_page=per_page search=search sort_by=sort_by sort_dir=sort_dir filterOptions=filterOptions}}
   </div>
   <div class="eight wide column">
     {{events/view/overview/event-apps}}

tests/integration/components/ui-table/cell/cell-sponsor-options-test.js

@@ -6,10 +6,20 @@ import { render } from '@ember/test-helpers';
 module('Integration | Component | ui table/cell/cell sponsor options', function(hooks) {
   setupIntegrationTest(hooks);
 
+  const props = {
+    actions: {
+      editSponsor   : () => {},
+      deleteSponsor : () => {}
+    }
+  };
+
   test('it renders', async function(assert) {
-    this.set('deleteSponsor', () => {});
-    this.set('editSponsor', () => {});
-    await render(hbs`{{ui-table/cell/cell-sponsor-options deleteSponsor=(action deleteSponsor) editSponsor=(action editSponsor)}}`);
+
+    this.setProperties({
+      props
+    });
+
+    await render(hbs`{{ui-table/cell/cell-sponsor-options props=props }}`);
     assert.ok(this.element.textContent.trim().includes(''));
   });
 });