feat: Introducing Ember Tables in Admin/Messages

app/controllers/admin/messages/list.js

@@ -1,36 +1,54 @@
 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: [
-    {
-      propertyName : 'recipient',
-      title        : 'Recipients'
-    },
-    {
-      propertyName : 'action',
-      title        : 'Trigger'
-    },
-    {
-      subject  : 'emailSubject',
-      message  : 'emailMessage',
-      title    : 'Email Message',
-      template : 'components/ui-table/cell/cell-title-message'
-    },
-    {
-      subject  : 'notificationTitle',
-      message  : 'notificationMessage',
-      title    : 'Notification Message',
-      template : 'components/ui-table/cell/cell-title-message'
-    },
-    {
-      title    : 'Options',
-      template : 'components/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'
-    }
-  ]
-});
+export default class extends Controller.extend(EmberTableControllerMixin) {
+	@computed()
+	get columns() {
+		return [
+		{
+			name : 'Recipients',
+			valuePath : 'recipient'
+		},
+		{
+			name : 'Trigger',
+			valuePath : 'action'
+		},
+		{
+			name : 'Email Message',
+			valuePath : 'emailMessage',
+
+			cellComponent : 'ui-table/cell/cell-title-message',
+			options : {
+				subject : 'emailSubject',
+				message : 'emailMessage'
+			}
+		},
+		{
+			name : 'Notification Message',
+			valuePath : 'notificationMessage',
+      cellComponent : 'ui-table/cell/cell-title-message',
+      options : {
+      	subject  : 'notificationSubject',
+      	message  : 'notificationMessage'
+      }
+		},
+		{
+			name : 'Options',
+			valuePath : 'option',
+			cellComponent : 'ui-table/cell/admin/messages/cell-options'
+		},
+		{
+			name : 'Time/Date Sent Out',
+			valuePath : 'sentAt',
+			cellComponent : 'ui-table/cell/cell-simple-date',
+			options  :  {
+				dateFormat: 'MMMM DD, YYYY - HH:mm A'
+			}
+		}
+
+		];
+	}
+}
+
+

app/routes/admin/messages/list.js

@@ -1,7 +1,32 @@
 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) {
+    return this.asArray(this.modelFor('admin.messages'));
   }
-});
+
+}
+// }
+// import Route from '@ember/routing/route';
+// import EmberTableRouteMixin from 'open-event-frontend/mixins/ember-table-route';
+
+// export default class extends Route.extend(EmberTableRouteMixin) {
+//   titleToken() {
+//     return this.l10n.t('Mail Logs');
+//   }
+
+//   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.store.query('mail', 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/cell-title-message.hbs

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