feat: optimize code for manage events table (#3304)

Author: abhinavk96

app/controllers/events/list.js

@@ -9,10 +9,10 @@ export default class extends Controller.extend(EmberTableControllerMixin) {
     return [
       {
         name            : 'Name',
-        valuePath       : 'name',
+        valuePath       : 'identifier',
         width           : 150,
         isSortable      : true,
-        extraValuePaths : ['startsAt', 'endAt'],
+        extraValuePaths : ['name', 'logoUrl'],
         headerComponent : 'tables/headers/sort',
         cellComponent   : 'ui-table/cell/cell-event-general',
         options         : {
@@ -27,65 +27,43 @@ export default class extends Controller.extend(EmberTableControllerMixin) {
       {
         name            : 'Date',
         valuePath       : 'startsAt',
+        extraValuePaths : ['endsAt'],
         isSortable      : true,
         headerComponent : 'tables/headers/sort',
         cellComponent   : 'ui-table/cell/cell-event-date'
 
       },
       {
-        name          : 'Roles',
-        valuePath     : 'roles',
-        width         : 180,
-        cellComponent : 'ui-table/cell/cell-roles',
-        isSortable    : false
+        name            : 'Roles',
+        valuePath       : 'owner',
+        extraValuePaths : ['organizers', 'coorganizers', 'trackOrganizers', 'registrars', 'moderators'],
+        width           : 180,
+        cellComponent   : 'ui-table/cell/cell-roles'
       },
       {
         name          : 'Sessions',
-        valuePath     : 'sessions',
-        isSortable    : false,
+        valuePath     : 'eventStatisticsGeneral',
         cellComponent : 'ui-table/cell/cell-sessions-dashboard'
       },
       {
         name          : 'Speakers',
-        valuePath     : 'speakers',
-        cellComponent : 'ui-table/cell/cell-speakers-dashboard',
-        isSortable    : false
-
+        valuePath     : 'eventStatisticsGeneral',
+        cellComponent : 'ui-table/cell/cell-speakers-dashboard'
       },
       {
         name          : 'Tickets',
         valuePath     : 'tickets',
-        cellComponent : 'ui-table/cell/cell-tickets',
-        isSortable    : false
-
+        cellComponent : 'ui-table/cell/cell-tickets'
       },
       {
         name          : 'Public URL',
         valuePath     : 'url',
         width         : 250,
-        cellComponent : 'ui-table/cell/cell-link',
-        isSortable    : false
+        cellComponent : 'ui-table/cell/cell-link'
       }
     ];
   }
 
-  @computed('model.data')
-  get rows() {
-    const rows = [];
-    this.model.data.forEach(row => {
-      rows.pushObject({
-        name     : row,
-        startsAt : row,
-        roles    : row,
-        sessions : row,
-        speakers : row,
-        tickets  : row,
-        url      : row
-      });
-    });
-    return rows;
-  }
-
   @action
   moveToPublic(id) {
     this.transitionToRoute('public', id);

app/routes/events/list.js

@@ -89,11 +89,7 @@ export default class extends Route.extend(EmberTableRouteMixin) {
       'page[number]' : params.page || 4
     };
     queryString = this.applySortFilters(queryString, params);
-
-    return {
-      data: await this.authManager.currentUser.query('events', queryString)
-    };
-
+    return this.asArray(this.authManager.currentUser.query('events', queryString));
   }
 
   @action

app/templates/components/ui-table/cell/cell-event-general.hbs

@@ -1,14 +1,14 @@
 <div class="ui header weight-400">
-  <img src="{{if record.logoUrl record.logoUrl '/images/placeholders/Other.jpg'}}" alt="Event Logo" class="ui image"> <br> {{record.name}}
+  <img src="{{if extraRecords.logoUrl extraRecords.logoUrl '/images/placeholders/Other.jpg'}}" alt="Event Logo" class="ui image"> <br> {{extraRecords.name}}
 </div>
 <div class="ui horizontal large basic buttons">
-  {{#ui-popup tagName='a' click=(action props.actions.moveToDetails record.identifier) content=(t 'Event Dashboard') class='ui icon button' position='top center'}}
+  {{#ui-popup tagName='a' click=(action props.actions.moveToDetails record) content=(t 'Event Dashboard') class='ui icon button' position='top center'}}
     <i class="tasks icon"></i>
   {{/ui-popup}}
-  {{#ui-popup tagName='a' click=(action props.actions.moveToPublic record.identifier) content=(t 'View') class='ui icon button' position='top center'}}
+  {{#ui-popup tagName='a' click=(action props.actions.moveToPublic record) content=(t 'View') class='ui icon button' position='top center'}}
     <i class="unhide icon"></i>
   {{/ui-popup}}
-  {{#ui-popup content=(t 'Edit') click=(action props.actions.editEvent record.identifier) class='ui icon button' position='top center'}}
+  {{#ui-popup content=(t 'Edit') click=(action props.actions.editEvent record) class='ui icon button' position='top center'}}
     <i class="edit icon"></i>
   {{/ui-popup}}
 </div>

app/templates/events/list.hbs

@@ -1,11 +1,11 @@
 {{tables/default  columns=columns
-                  rows=rows
+                  rows=model.data
                   currentPage=page
                   pageSize=per_page
                   searchQuery=search
                   sortBy=sort_by
                   sortDir=sort_dir
-                  metaData=model.data.meta
+                  metaData=model.meta
                   filterOptions=filterOptions
                   widthConstraint="eq-container"
                   resizeMode="fluid"

tests/integration/components/ui-table/cell/cell-event-general-test.js

@@ -6,7 +6,8 @@ import { render } from '@ember/test-helpers';
 module('Integration | Component | ui table/cell/cell event general', function(hooks) {
   setupIntegrationTest(hooks);
 
-  const record = { name: 'Event', image: 'url' };
+  const extraRecords = { name: 'Event', logoUrl: 'url' };
+  const record = 'abc215f';
 
   const props = {
     actions: {
@@ -20,10 +21,11 @@ module('Integration | Component | ui table/cell/cell event general', function(ho
 
     this.setProperties({
       record,
-      props
+      props,
+      extraRecords
     });
 
-    await render(hbs`{{ui-table/cell/cell-event-general record=record props=props}}`);
+    await render(hbs`{{ui-table/cell/cell-event-general extraRecords=extraRecords record=record props=props}}`);
     assert.ok(this.element.textContent.trim().includes('Event'));
   });
 });