Sorting module

Author: abhinavk96

app/components/tables/default.js

@@ -1,4 +1,5 @@
 import Component from '@ember/component';
+import { action } from '@ember/object';
 
 export default class extends Component {
 

app/components/tables/headers/sort.js

@@ -0,0 +1,29 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+
+export default class extends Component {
+  @computed('[email protected]', 'sortDir')
+  get sortIcon() {
+    if (this.sorts && this.sorts[0] && this.sorts[0].valuePath === this.column.valuePath) {
+      this.set('sortDirection', this.sorts[0].isAscending ? 'ASC' : 'DES');
+      if (this.sorts[0].isAscending) {
+        // support got sort up, sort down to come with next release of semantic-ui-ember
+        return 'caret up';
+      } else {
+        return 'caret down';
+      }
+    }
+    return 'sort';
+  }
+
+
+  didInsertElement() {
+    if (this.sorts && this.sorts[0] && this.sorts[0].valuePath === this.column.valuePath) {
+      this.set('sortBy', this.sorts[0].valuePath);
+      this.set('sortDir', this.sorts[0].isAscending ? 'ASC' : 'DSC');
+    } else {
+      this.set('sortBy', null);
+      this.set('sortDir', null);
+    }
+  }
+}

app/controllers/events/list.js

@@ -5,14 +5,19 @@ export default class extends Controller {
   queryParams = ['page', 'per_page'];
   page = 1;
   per_page = 2;
+  search = null;
+  sort_dir = null;
+  sort_by = null;
 
   @computed()
   get columns() {
     return [
       {
         name            : 'Name',
         valuePath       : 'name',
+        isSortable      : true,
         extraValuePaths : ['startsAt', 'endAt'],
+        headerComponent : 'tables/headers/sort',
         cellComponent   : 'ui-table/cell/cell-event-general',
         options         : {
           dateFormat: 'MMMM DD, YYYY - HH:mm A'
@@ -26,6 +31,7 @@ export default class extends Controller {
       {
         name          : 'Date',
         valuePath     : 'startsAt',
+        isSortable: false,
         cellComponent : 'ui-table/cell/cell-event-date'
 
       },
@@ -37,6 +43,7 @@ export default class extends Controller {
       {
         name          : 'Sessions',
         valuePath     : 'sessions',
+        isSortable: false,
         cellComponent : 'ui-table/cell/cell-sessions-dashboard'
       },
       {
@@ -76,12 +83,6 @@ export default class extends Controller {
     return rows;
   }
 
-  @action
-  doAction(eventName) {
-    // Also testing the availability of correct `this` context
-    alert(`Works on page ${this.page}. Got event name: ${eventName}`);
-  }
-
   @action
   moveToPublic(id) {
     this.transitionToRoute('public', id);

app/routes/events/list.js

@@ -10,9 +10,20 @@ export default class extends Route {
     },
     per_page: {
       refreshModel: true
+    },
+    search: {
+      refreshModel: true
+    },
+    sort_dir: {
+      refreshModel: true
+    },
+    sort_by: {
+      refreshModel: true
     }
   };
 
+  filterOptions = [];
+
   titleToken() {
     switch (this.get('params.event_state')) {
       case 'live':
@@ -30,13 +41,14 @@ export default class extends Route {
     if (!['live', 'draft', 'past'].includes(eventState)) {
       this.replaceWith('events.view', eventState);
     }
+
   }
 
   async model(params) {
     this.set('params', params);
-    let filterOptions = [];
+    const searchField = 'name';
     if (params.event_state === 'live') {
-      filterOptions = [
+      this.filterOptions = [
         {
           name : 'state',
           op   : 'eq',
@@ -67,7 +79,7 @@ export default class extends Route {
         }
       ];
     } else if (params.event_state === 'past') {
-      filterOptions = [
+      this.filterOptions = [
         {
           name : 'ends-at',
           op   : 'lt',
@@ -80,22 +92,44 @@ export default class extends Route {
         }
       ];
     } else {
-      filterOptions = [
+      this.filterOptions = [
         {
           name : 'state',
           op   : 'eq',
           val  : 'draft'
         }
       ];
     }
+    if (params.search) {
+      this.filterOptions.pushObject({
+        name : searchField,
+        op   : 'ilike',
+        val  : `%${params.search}%`
+      });
+    } else {
+      this.filterOptions.removeObject({
+        name : searchField,
+        op   : 'ilike',
+        val  : `%${params.search}%`
+      });
+    }
 
+
+    let queryString = {
+      include        : 'tickets,sessions,speakers,organizers,coorganizers,track-organizers,registrars,moderators',
+      filter         : this.filterOptions,
+      'page[size]'   : params.per_page || 10,
+      'page[number]' : params.page || 4
+    };
+
+    if (params.sort_by && params.sort_dir) {
+      queryString.sort = `${params.sort_dir === 'ASC' ? '-' : ''}${params.sort_by}`;
+    }
+    else {
+      delete queryString.sort;
+    }
     return {
-      data: await this.authManager.currentUser.query('events', {
-        include        : 'tickets,sessions,speakers,organizers,coorganizers,track-organizers,registrars,moderators',
-        filter         : filterOptions,
-        'page[size]'   : params.per_page || 10,
-        'page[number]' : params.page || 4
-      })
+      data: await this.authManager.currentUser.query('events', queryString)
     };
 
   }

app/templates/components/tables/default.hbs

@@ -4,13 +4,25 @@
       {{tables/utilities/page-size-input pageSize=pageSize}}
     </div>
     <div class="eight wide right aligned column">
-      {{tables/utilities/search-box searchQuery=searchQuery}}
+      {{tables/utilities/search-box searchQuery=searchQuery filterOptions=filterOptions}}
     </div>
   </div>
-
+{{sorts.[0].valuePath}}{{sorts.[0].isAscending}}
   <div class="row">
     {{#ember-table as |t|}}
-      {{t.head columns=columns}}
+      {{#t.head sortFunction=null columns=columns enableReorder=true sorts=sorts onUpdateSorts=(action (mut sorts)) as |h|}}
+        {{#h.row as |r|}}
+          {{#r.cell as |column|}}
+            {{#if column.headerComponent}}
+              {{#component column.headerComponent sorts=sorts column=column sortBy=sortBy sortDir=sortDir}}
+                {{column.name}}
+              {{/component}}
+            {{else}}
+              {{column.name}}
+            {{/if}}
+          {{/r.cell}}
+        {{/h.row}}
+      {{/t.head}}
       {{#t.body rows=rows as |b|}}
         {{#b.row as |r|}}
           {{#r.cell as |cell column row|}}

app/templates/components/tables/headers/sort.hbs

@@ -0,0 +1,4 @@
+{{yield}}
+{{#if column.isSortable}}
+  <i class="{{sortIcon}} icon"></i>
+{{/if}}

app/templates/events/list.hbs

@@ -1 +1,10 @@
-{{tables/default columns=columns rows=rows currentPage=page pageSize=per_page metaData=model.data.meta}}
+{{tables/default  columns=columns
+                  rows=rows
+                  currentPage=page
+                  pageSize=per_page
+                  searchQuery=search
+                  sortBy=sort_by
+                  sortDir=sort_dir
+                  metaData=model.data.meta
+                  filterOptions=filterOptions
+}}