Customizable sort parameters per field

Co-author: @erikap

Author: madnificent

addon/components/data-table.hbs

@@ -12,6 +12,7 @@
        enableSelection=this.enableSelection
        enableLineNumbers=@enableLineNumbers
        onClickRow=@onClickRow
+       sort=@sort
        updateSort=this.updateSort
        customHeaders=this.customHeaders
        fields=this.fields

addon/components/data-table.js

@@ -115,20 +115,33 @@ export default class DataTable extends Component {
     }
   }
 
+  attributeToSortParams(attribute) {
+    if( this.args.attributeToSortParams ) {
+      return this.args.attributeToSortParams(attribute);
+    } else {
+      const attr = attribute.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+      return { asc: attr, desc: `-${attr}` };
+    }
+  }
+
   get fields() {
     return this
       .fieldsWithMeta
-      .map( ({ attribute, label, isSortable, hasCustomHeader, isCustom }) => ({
+      .map( ({ attribute, label, isSortable, hasCustomHeader, isCustom, sortParameters }) => ({
         attribute,
         label,
-        isSortable: isSortable
-          || !this.sortableFields
-          || this.sortableFields.includes(attribute),
+        // custom format says it's sortable: sort params known
+        // say it should be sortable: use attribute to sort param
+        // field included in sortable fields: use attribute to sort param
+        sortParameters: sortParameters
+          || ( ( isSortable || this.sortableFields.includes(attribute) )
+               && this.attributeToSortParams(attribute) ),
+        get isSortable() { return Object.keys( this.sortParameters || {} ).length > 1; },
         hasCustomHeader: hasCustomHeader
           || this.customHeaders.includes(attribute),
         isCustom: isCustom
           || this.customFields.includes(attribute)
-      }) );
+      }));
   }
 
   get customHeaders() {

addon/components/data-table/data-table-content-header.hbs

@@ -2,19 +2,18 @@
 {{yield (hash
     enableSelection=@enableSelection
     enableLineNumbers=@enableLineNumbers
-    fields=@fields
-    currentSorting=@dataTable.sort
+    sort=@sort
     updateSort=@updateSort
-    customHeaders=@customHeaders
     hasLinks=@hasLinks
+    customHeaders=@customHeaders
+    fields=@fields
     dataHeadersInfo=(hash
       fields=@fields
-      currentSorting=@dataTable.sort
       customHeaders=@customHeaders
+      sort=@sort
       updateSort=@updateSort)
     ThSortable=(component
       "data-table/th-sortable"
       fields=@fields
-      currentSorting=@dataTable.sort
-      customHeaders=@customHeaders
+      sort=@sort
       updateSort=@updateSort))}}

addon/components/data-table/data-table-content.hbs

@@ -4,6 +4,7 @@
        Header=(component "data-table/data-table-content-header"
          enableSelection=@enableSelection
          enableLineNumbers=@enableLineNumbers
+         sort=@sort
          updateSort=@updateSort
          hasLinks=this.hasLinks
          customHeaders=@customHeaders

addon/components/data-table/th-sortable.hbs

@@ -1,11 +1,17 @@
 {{!-- Used in: data-table/data-table-content-header --}}
 {{yield (hash
-    isSorted=this.isSorted
-    inverseSorting=this.inverseSorting
-    isSortable=@field.isSortable
     label=@field.label
     attribute=@field.attribute
-    order=this.order
+
+    isSortable=@field.isSortable
+    isSorted=this.isSorted
+    toggleSort=this.toggleSort
+    nextSort=this.nextSort
+
+    isAscending=this.isAscending
+    isDescending=this.isDescending
+    sortDirection=this.sortDirection
+
     renderCustomBlock=this.renderCustomBlock
     isCustom=this.isCustom
     hasCustom=this.hasCustom)}}

addon/components/data-table/th-sortable.js

@@ -2,39 +2,28 @@ import { action } from '@ember/object';
 import Component from '@glimmer/component';
 
 export default class ThSortableComponent extends Component {
-  // TODO: this is a json-api translation and it should be configurable on the data-table
-  get dasherizedField() {
-    return this.args.field.attribute.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+  get sortParameters() {
+    return this.args.field.sortParameters;
   }
 
-  /**
-      Inverses the sorting parameter
-      E.g. inverseSorting('title') returns '-title'
-           inverseSorting('-title') returns 'title'
-  */
-  _inverseSorting(sorting) {
-    if (sorting.substring(0, 1) === '-') {
-      return sorting.substring(1);
-    } else {
-      return '-' + sorting;
-    }
+  get sortDirection() {
+    for ( const key in this.sortParameters )
+      if( this.args.sort == this.sortParameters[key] )
+        return key;
+
+    return '';
   }
 
-  get isSorted() {
-    return (
-      this.args.currentSorting === this.dasherizedField ||
-      this.args.currentSorting === this._inverseSorting(this.dasherizedField)
-    );
+  get isAscending() {
+    return this.sortDirection === "asc";
+  }
+
+  get isDescending() {
+    return this.sortDirection === "desc";
   }
 
-  get order() {
-    if (this.args.currentSorting === this.dasherizedField) {
-      return 'asc';
-    } else if (this.args.currentSorting === `-${this.dasherizedField}`) {
-      return 'desc';
-    } else {
-      return '';
-    }
+  get isSorted() {
+    return this.sortDirection !== '';
   }
 
   get renderCustomBlock() {
@@ -55,22 +44,27 @@ export default class ThSortableComponent extends Component {
     return this.args.fields.find(({hasCustomHeader}) => hasCustomHeader) || false;
   }
 
+  get availableSortOptions() {
+    const options = [];
+    Object
+      .keys( this.sortParameters )
+      .sort() // for asc and desc, asc first then desc, the rest also sorted for now
+      .map( (key) => options.push(key) );
+    options.push(''); // no sorting
+    return options;
+  }
+
+  get nextSort() {
+    // wrapping loop over availableSortOptions
+    const opts = this.availableSortOptions;
+    return opts[(opts.indexOf(this.sortDirection) + 1) % opts.length];
+  }
+
   /**
-       Sets the current sorting parameter.
-       Note: the current sorting parameter may contain another field than the given field.
-       In case the given field is currently sorted ascending, change to descending.
-       In case the given field is currently sorted descending, clean the sorting.
-       Else, set the sorting to ascending on the given field.
-    */
+   * Wraps around possible sorting directions.
+   */
   @action
-  inverseSorting() {
-    if (this.order === 'asc') {
-      this.args.updateSort(this._inverseSorting(this.args.currentSorting));
-    } else if (this.order === 'desc') {
-      this.args.updateSort('');
-    } else {
-      // if currentSorting is not set to this field
-      this.args.updateSort(this.dasherizedField);
-    }
+  toggleSort() {
+    this.args.updateSort(this.sortParameters[this.nextSort]);
   }
 }

addon/components/raw-data-table.hbs

@@ -21,6 +21,8 @@
   @rowLink={{@rowLink}}
   @customHeaders={{@customHeaders}}
   @customFields={{@customFields}}
+  @sortableFields={{@sortableFields}}
+  @attributeToSortParams={{@attributeToSortParams}}
   as |dt|>
   {{!-- START: search --}}
   <div class="raw-data-table">
@@ -119,8 +121,8 @@
                           {{else}}
                             {{#if dataHeader.isSortable}}
                               <th class={{concat "sortable" (if dataHeader.isSorted " sorted" "")}}>
-                                <span role="button" {{on "click" dataHeader.inverseSorting}}>
-                                  {{#if dataHeader.order}}[{{dataHeader.order}}]{{/if}}
+                                <span role="button" {{on "click" dataHeader.toggleSort}}>
+                                  {{#if dataHeader.isSorted}}[{{dataHeader.sortDirection}}]{{/if}}
                                   {{dataHeader.label}}
                                 </span>
                               </th>