fix: pagination page size in message list (#6254)

Author: maze-runnar

app/controllers/admin/messages.js

@@ -1,24 +1,77 @@
 import Controller from '@ember/controller';
 import { action } from '@ember/object';
+import EmberTableControllerMixin from 'open-event-frontend/mixins/ember-table-controller';
 
-export default class extends Controller {
-  @action
-  save() {
-    try {
-      const systemMessages = this.model;
-      systemMessages.forEach(systemMessage => {
-        systemMessage.save();
-      });
-      this.notify.success(this.l10n.t('Changes have been saved successfully'),
-        {
-          id: 'message_success'
-        });
-    } catch (e) {
-      console.error('Error while saving system messages', e);
-      this.notify.error(e.errors[0].detail,
-        {
-          id: 'change_error_message'
-        });
+export default class extends Controller.extend(EmberTableControllerMixin) {
+per_page = 100;
+
+sort_dir = 'ASC';
+
+get columns() {
+  return [
+    {
+      name      : this.l10n.t('Recipients'),
+      valuePath : 'recipient'
+    },
+    {
+      name      : this.l10n.t('Trigger'),
+      valuePath : 'action'
+    },
+    {
+      name      : this.l10n.t('Email Message'),
+      valuePath : 'emailMessage',
+
+      cellComponent   : 'ui-table/cell/cell-title-message',
+      extraValuePaths : ['emailSubject'],
+      options         : {
+        subject : 'emailSubject',
+        message : 'emailMessage'
+      }
+    },
+    {
+      name            : this.l10n.t('Notification Message'),
+      valuePath       : 'notificationMessage',
+      cellComponent   : 'ui-table/cell/cell-title-message',
+      extraValuePaths : ['notificationTitle'],
+      options         : {
+        subject : 'notificationTitle',
+        message : 'notificationMessage'
+      }
+    },
+    {
+      name            : this.l10n.t('Options'),
+      valuePath       : 'option',
+      extraValuePaths : ['mailStatus', 'notificationStatus', 'userControlStatus'],
+      cellComponent   : 'ui-table/cell/admin/messages/cell-options'
+    },
+    {
+      name            : this.l10n.t('Time/Date Sent Out'),
+      valuePath       : 'sentAt',
+      headerComponent : 'tables/headers/sort',
+      isSortable      : true,
+      cellComponent   : 'ui-table/cell/cell-simple-date'
     }
+
+  ];
+}
+
+@action
+save() {
+  try {
+    const systemMessages = this.model;
+    Array.from(systemMessages).forEach(systemMessage => {
+      systemMessage.save();
+    });
+    this.notify.success(this.l10n.t('Changes have been saved successfully'),
+      {
+        id: 'message_success'
+      });
+  } catch (e) {
+    console.error('Error while saving system messages', e);
+    this.notify.error(e.errors[0].detail,
+      {
+        id: 'change_error_message'
+      });
   }
 }
+}

app/controllers/admin/messages/list.js

@@ -153,9 +153,6 @@ Router.map(function() {
     this.route('all', { path: '/:notification_state' });
   });
   this.route('admin', function() {
-    this.route('messages', function() {
-      this.route('list');
-    });
     this.route('events', function() {
       this.route('list', { path: '/:events_status' });
       this.route('import');

app/router.js

@@ -1,13 +1,17 @@
-import classic from 'ember-classic-decorator';
 import Route from '@ember/routing/route';
+import EmberTableRouteMixin from 'open-event-frontend/mixins/ember-table-route';
 
-@classic
-export default class MessagesRoute extends Route {
+export default class extends Route.extend(EmberTableRouteMixin) {
   titleToken() {
     return this.l10n.t('Messages');
   }
 
-  model() {
-    return this.store.query('message-setting', {});
+  async model(params) {
+    let queryString = {
+      'page[size]'   : params.per_page || 100,
+      'page[number]' : params.page || 1
+    };
+    queryString = this.applySortFilters(queryString, params);
+    return this.asArray(this.store.query('message-setting', queryString));
   }
 }

app/routes/admin/messages.js

@@ -1,8 +1,25 @@
 <div class="ui grid stackable">
   <div class="row">
-    {{outlet}}
-    <div class="sixteen wide {{if this.device.isMobile 'center aligned'}} column">
-      <button class="ui blue button left floated {{if this.isLoading 'loading'}}" {{action 'save'}}>{{t 'Save'}}</button>
+    <div class="sixteen wide column">
+      <Tables::Default
+        @columns={{this.columns}}
+        @rows={{this.model.data}}
+        @currentPage={{this.page}}
+        @pageSize={{this.per_page}}
+        @searchQuery={{this.search}}
+        @sortBy={{this.sort_by}}
+        @sortDir={{this.sort_dir}}
+        @metaData={{this.model.meta}}
+        @filterOptions={{this.filterOptions}}
+        @hideSearchBox={{true}}
+        @widthConstraint="eq-container"
+        @resizeMode="fluid"
+        @fillMode="equal-column" />
     </div>
   </div>
+  <div class="row">
+		<div class="sixteen wide {{if this.device.isMobile 'center aligned'}} column">
+		  <button class="ui blue button left floated {{if this.isLoading 'loading'}}" {{action 'save'}}>{{t 'Save'}}</button>
+		</div>
+	</div>
 </div>