feat: Introducing Ember Tables in Admin/Messages

app/controllers/admin/messages/list.js

@@ -1,36 +1,66 @@
 import Controller from '@ember/controller';
+import { computed } from '@ember/object';
+import EmberTableControllerMixin from 'open-event-frontend/mixins/ember-table-controller';
 
-export default Controller.extend({
-  columns: [
+export default class extends Controller.extend(EmberTableControllerMixin) {
+per_page = 100;
+
+sort_by = 'time';
+
+sort_dir = 'ASC';
+
+@computed()
+get columns() {
+  return [
     {
-      propertyName : 'recipient',
-      title        : 'Recipients'
+      name            : 'Recipients',
+      valuePath       : 'recipient',
+      headerComponent : 'tables/headers/sort',
+      isSortable      : true
     },
     {
-      propertyName : 'action',
-      title        : 'Trigger'
+      name      : 'Trigger',
+      valuePath : 'action'
     },
     {
-      subject  : 'emailSubject',
-      message  : 'emailMessage',
-      title    : 'Email Message',
-      template : 'components/ui-table/cell/cell-title-message'
+      name      : 'Email Message',
+      valuePath : 'emailMessage',
+
+      cellComponent   : 'ui-table/cell/cell-title-message',
+      extraValuePaths : ['emailSubject'],
+      options         : {
+        subject : 'emailSubject',
+        message : 'emailMessage'
+      }
     },
     {
-      subject  : 'notificationTitle',
-      message  : 'notificationMessage',
-      title    : 'Notification Message',
-      template : 'components/ui-table/cell/cell-title-message'
+      name            : 'Notification Message',
+      valuePath       : 'notificationMessage',
+      cellComponent   : 'ui-table/cell/cell-title-message',
+      extraValuePaths : ['notificationTitle'],
+      options         : {
+        subject : 'notificationTitle',
+        message : 'notificationMessage'
+      }
     },
     {
-      title    : 'Options',
-      template : 'components/ui-table/cell/admin/messages/cell-options'
+      name            : 'Options',
+      valuePath       : 'option',
+      extraValuePaths : ['mailStatus', 'notificationStatus', 'userControlStatus'],
+      cellComponent   : 'ui-table/cell/admin/messages/cell-options'
     },
     {
-      propertyName : 'sentAt',
-      title        : 'Time/Date sent out',
-      template     : 'components/ui-table/cell/cell-simple-date',
-      dateFormat   : 'MMMM DD, YYYY - HH:mm A'
+      name            : 'Time/Date Sent Out',
+      valuePath       : 'sentAt',
+      headerComponent : 'tables/headers/sort',
+      isSortable      : true,
+      cellComponent   : 'ui-table/cell/cell-simple-date',
+      options         : {
+        dateFormat: 'MMMM DD, YYYY - HH:mm A'
+      }
     }
-  ]
-});
+
+  ];
+}
+}
+

app/routes/admin/messages/list.js

@@ -1,7 +1,18 @@
 import Route from '@ember/routing/route';
+import EmberTableRouteMixin from 'open-event-frontend/mixins/ember-table-route';
 
-export default Route.extend({
-  model() {
-    return this.modelFor('admin.messages');
+export default class extends Route.extend(EmberTableRouteMixin) {
+
+  async model(params) {
+    const searchField = 'recipient';
+    let filterOptions = this.applySearchFilters([], params, searchField);
+    let queryString = {
+      filter        : filterOptions,
+      'page[size]'  : params.per_page || 100,
+      'page[number' : params.page || 1
+    };
+    queryString = this.applySortFilters(queryString, params);
+    return this.asArray(this.modelFor('admin.messages', queryString));
   }
-});
+
+}

app/templates/admin/messages/list.hbs

@@ -1,7 +1,16 @@
 <div class="sixteen wide column">
-  {{events/events-table columns=columns data=model
-                        useNumericPagination=true
-                        showGlobalFilter=true
-                        showPageSize=true
+  {{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>

app/templates/components/ui-table/cell/admin/messages/cell-options.hbs

@@ -1,12 +1,12 @@
 <div class='ui checkbox'>
-  {{input type='checkbox' name='mail_status' checked=record.mailStatus}}
+  {{input type='checkbox' name='mail_status' checked=extraRecords.mailStatus}}
   <label>Mail</label>
 </div>
 <div class='ui checkbox'>
-  {{input type='checkbox' name='notification_status' checked=record.notificationStatus}}
+  {{input type='checkbox' name='notification_status' checked=extraRecords.notificationStatus}}
   <label>Notification</label>
 </div>
 <div class='ui checkbox'>
-  {{input type='checkbox' name='user_control_status' checked=record.userControlStatus}}
+  {{input type='checkbox' name='user_control_status' checked=extraRecords.userControlStatus}}
   <label>User Control</label>
 </div>

app/templates/components/ui-table/cell/cell-title-message.hbs

@@ -1,17 +1,17 @@
 <div class="content">
-  {{#if (eq column.subject 'emailSubject')}}
-    <a class="header">{{sanitize record.emailSubject}}</a>
-  {{else}}
-    {{#if record.notificationTitle}}
-      <a class="header">{{sanitize record.notificationTitle}}</a>
-    {{/if}}  
+  {{#if (eq props.options.subject 'emailSubject')}}
+    <a class="header">{{sanitize extraRecords.emailSubject}}</a>
+  {{else if (eq props.options.subject 'notificationTitle')}}
+    {{#if extraRecords.notificationTitle}}
+      <a class="header">{{sanitize extraRecords.notificationTitle}}</a>
+    {{/if}} 
   {{/if}}  
   <div class="description">
-    {{#if (eq column.message 'emailMessage')}}
-      <p>{{sanitize record.emailMessage}}</p>
-    {{else if (eq column.message 'notificationMessage')}}
-      {{#if record.notificationMessage}}
-        <p>{{sanitize record.notificationMessage}}</p>
+    {{#if (eq props.options.message 'emailMessage')}}
+      <p>{{sanitize record}}</p>
+    {{else if (eq props.options.message 'notificationMessage')}}
+      {{#if record}}     
+        <p>{{sanitize record}}</p>
       {{/if}}
     {{/if}}  
   </div>