Merge pull request #207 from iamisti/feature-innovative-sorting

Feature innovative sorting

Author: iamisti

README.md

@@ -42,7 +42,6 @@ http://www.google.com/design/spec/components/data-tables.html
  - virtual-repeat
  - delete-row-callback
  - selected-row-callback
- - sortable-columns
  - animate-sort-icon
  - ripple-effect
  - ! title-overflow-handler
@@ -60,9 +59,8 @@ http://www.google.com/design/spec/components/data-tables.html
 [Column attributes (`mdt-column`)](#column-attributes)
  - align-rule
  - column-definition
- - ! sortable-rows-default
- - sort-by
  - column-filter
+ - excludeFromColumnSelector
 
 [Row attributes (`mdt-row`)](#data-row-attributes)
  - table-row-id
@@ -94,7 +92,6 @@ http://www.google.com/design/spec/components/data-tables.html
 
 | Available        | Params                                         | Type          | Details       |
 | ---------------- | ---------------------------------------------- | ------------- | ------------- |
-|:white_check_mark:| sortable-columns                               | Boolean       | optional, if enabled, sort data and display a sorted state in the column header. If the user clicks on a column that is already sorted, reverse the sort order and rotate the sort icon. Use `sortable-rows-default` attribute directive on a column which intended to be the default sortable column |
 |:white_check_mark:| animate-sort-icon                              | Boolean       | optional, if enabled, sort icon will be animated on change |
 |:white_check_mark:| ripple-effect                                  | Boolean       | optional, if enabled, ripple effect will be applied on the column names when clicked |
 ![Table with an ascending sorted column](http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B3mOPoJlxiFhMW1haUJDRWJKLUk/components_datatables_interaction_sortedcolumn.png)
@@ -113,6 +110,7 @@ http://www.google.com/design/spec/components/data-tables.html
 |:white_check_mark:|                                            | title                           | String        | The title of the table card |
 |:x:               |                                            | actionIcons                     | Boolean       | Card action icons (header and footer) |
 |:white_check_mark:|                                            | visible                         | Boolean       | The visibility of the table card |
+|:white_check_mark:|                                            | columnSelector                  | Boolean       | enables the column selection for the table (you can disable certain columns from the list selection, using `exclude-from-column-selector`, see the related docs) |
 ![Table card with header and footer](http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B3mOPoJlxiFhUTEwa21JUEtza0k/components_datatables_cards_tablecard.png)
 
 | Available        | Params                                     | ChildParams                     | Type          | Details|
@@ -225,10 +223,12 @@ Html support is available for `mdt-row`, see more: [Custom cell content (`mdt-cu
 |:white_check_mark:| column-definition                              | String        | if provided, display a tooltip on hover. If sorting is enabled, display a light sort icon upon hover, which indicates that the column is sortable. |
 ![Column definition on hover](http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B3mOPoJlxiFhenh5SWhFdFlyajg/components_datatables_interaction_tooltip.png)
 
-| Available        | Params                                         | Type          | Details         |
-| -----------------| ---------------------------------------------- | ------------- | --------------- |
-|:x:               | sortable-rows-default                          | -             | When sortable-columns is applied to the table, it marks the column as the default sorting column |
-|:white_check_mark:| sort-by                                        | Function      | if provided, used as the iteratee during sort operations to transform the cell value to a value that can be ranked in order. |
+| Available        | Params                                         | ChildPArams    | Type           | Details         |
+| -----------------| ---------------------------------------------- | -------------- | -------------- | --------------- |
+|:x:               | sortable-rows-default                          | -              |                | When column-sort is applied to the table, it marks the column as the default sorting column |
+|:white_check_mark:| column-sort                                    |                | Boolean|Object | if provided, sort data and display a sorted state in the header. Clicking on a column which is already sorted will reverse the sort order and rotate the sort icon. |
+|:white_check_mark:| column-sort                                    | true|false     |                | in case of boolean, true value enables the feature, false disables it (default is disabled) |
+|:white_check_mark:| column-sort                                    | comparator     |                | in case of object, specifying a 'comparator' property which is a function for sorting the column data's. As every compare function, it gets two parameters and return with the compared result (-1,1,0) |
 
 | Available        | Params                                         | ChildPArams              | Type         | Details         |
 | ---------------- | ---------------------------------------------- | -------------------------|------------- | --------------- |
@@ -237,6 +237,7 @@ Html support is available for `mdt-row`, see more: [Custom cell content (`mdt-cu
 |:white_check_mark:|                                                | valuesTransformerCallback| Function     | optional, function which transforms the provided objects into strings to be able to show it visually in the column filter.|
 |:white_check_mark:|                                                | placeholderText          | Text         | optional, placeholder which will show up as a default text (available only for `chips` and `dropdown` filter types |
 |:white_check_mark:|                                                | filterType               | Text         | optional, defines the type of the filter you want to use. Available options are: `chips`, `checkbox`, `dropdown`. If you don't specify it, the default will be `chips` |
+|:white_check_mark:| exclude-from-column-selector                   |                          | Boolean      | optional, excludes the column from the column selection feature |
 > When filters are applied to the columns, a third parameter will be applied to the `mdt-row-paginator` callback function.
 
 # Data-Row attributes 

app/modules/main/directives/header/mdtColumnDirective.js

@@ -17,11 +17,28 @@
      *    - 'left'
      *    - 'right'
      *
-     * @param {function()=} sortBy compareFunction callback for sorting the column data's. As every compare function,
-     *  should get two parameters and return with the comapred result (-1,1,0)
+     * @param {boolean=|object=} columnSort sort data and display a sorted state in the header. Clicking on a column
+     *      which is already sorted will reverse the sort order and rotate the sort icon.
+     *
+     *      When object is passed, then compare function can be passed for sorting the column data's. As every compare
+     *      function, it gets two parameters and return with the compared result (-1,1,0)
+     *
+     *  Assignable values:
+     *     - true or false
+     *     - { comparator: function(a,b)}
+     *
+     * @param {object=} columnFilter if provided, user can activate column filter feature on the selected column
+     *
+     *  Assignable properties:
+     *     - {Function=} valuesProviderCallback required, function which provides the values into the column filter. It must return with a promise which resolves an array of strings/objects
+     *     - {Function=} valuesTransformerCallback optional, function which transforms the provided objects into strings to be able to show it visually in the column filter
+     *     - {string=} placeholderText optional, placeholder which will show up as a default text (available only for `chips` and `dropdown` filter types
+     *     - {string=} filterType defines the type of the filter you want to use. Available options are: `chips`, `checkbox`, `dropdown`. If you don't specify it, the default will be `chips`
      *
      * @param {string=} columnDefinition displays a tooltip on hover.
      *
+     * @param {boolean=} excludeFromColumnSelector disables the column selection for the applied column for the column select feature.
+     *
      * @example
      * <pre>
      *  <mdt-table>
@@ -39,16 +56,17 @@
      *  </mdt-table>
      * </pre>
      */
-    function mdtColumnDirective($interpolate, ColumnFilterFeature){
+    function mdtColumnDirective($interpolate, ColumnFilterFeature, ColumnSortFeature, ColumnSelectorFeature){
         return {
             restrict: 'E',
             transclude: true,
             replace: true,
             scope: {
                 alignRule: '@',
-                sortBy: '=',
                 columnDefinition: '@',
-                columnFilter: '=?'
+                columnSort: '=?',
+                columnFilter: '=?',
+                excludeFromColumnSelector: '=?'
             },
             require: ['^mdtTable'],
             link: function ($scope, element, attrs, ctrl, transclude) {
@@ -59,12 +77,13 @@
                     var cellValue = $interpolate(clone.html())($scope.$parent);
                     var cellDataToStore = {
                         alignRule: $scope.alignRule,
-                        sortBy: $scope.sortBy,
                         columnDefinition: $scope.columnDefinition,
                         columnName: cellValue
                     };
 
-                    ColumnFilterFeature.appendHeaderCellData($scope, cellDataToStore, mdtTableCtrl.dataStorage, element);
+                    ColumnFilterFeature.appendHeaderCellData($scope, cellDataToStore, mdtTableCtrl.dataStorage);
+                    ColumnSortFeature.appendHeaderCellData(cellDataToStore, $scope.columnSort);
+                    ColumnSelectorFeature.appendHeaderCellData(cellDataToStore, mdtTableCtrl.columnSelectorFeature, $scope.excludeFromColumnSelector);
 
                     mdtTableCtrl.dataStorage.addHeaderCellData(cellDataToStore);
                 });

app/modules/main/directives/header/mdtGeneratedHeaderCellContentDirective.js

@@ -1,18 +1,19 @@
 (function(){
     'use strict';
 
-    function mdtGeneratedHeaderCellContentDirective(ColumnFilterFeature){
+    function mdtGeneratedHeaderCellContentDirective(ColumnFilterFeature, ColumnSortFeature){
         return {
             restrict: 'E',
             templateUrl: '/main/templates/mdtGeneratedHeaderCellContent.html',
             replace: true,
             scope: false,
             require: '^mdtTable',
             link: function($scope, element, attrs, ctrl){
-                ColumnFilterFeature.initGeneratedHeaderCellContent($scope, $scope.headerRowData, ctrl);
+                ColumnFilterFeature.initGeneratedHeaderCellContent($scope, $scope.headerRowData, ctrl.mdtPaginationHelper, ctrl.dataStorage);
 
                 $scope.columnClickHandler = function(){
                     ColumnFilterFeature.generatedHeaderCellClickHandler($scope, $scope.headerRowData, element);
+                    ColumnSortFeature.columnClickHandler($scope.headerRowData, ctrl.dataStorage, ctrl.mdtPaginationHelper, attrs.index);
                 };
             }
         };

app/modules/main/directives/header/mdtGeneratedHeaderRowDirective.js

@@ -0,0 +1,14 @@
+(function(){
+    'use strict';
+
+    function mdtGeneratedHeaderRowDirective(){
+        return {
+            restrict: 'A',
+            templateUrl: '/main/templates/mdtGeneratedHeaderRow.html'
+        };
+    }
+
+    angular
+        .module('mdDataTable')
+        .directive('mdtGeneratedHeaderRow', mdtGeneratedHeaderRowDirective);
+}());

app/modules/main/directives/helpers/mdtSortHandlerDirective.js

@@ -16,6 +16,7 @@
      *
      *      - `{boolean=}` `visible` - enable/disable table card explicitly
      *      - `{string}` `title` - the title of the card
+     *      - `{boolean=}` `columnSelector` - enables the column selection for the table (you can disable certain columns from the list selection, using `exclude-from-column-selector`, see the related docs)
      *      - `{array=}` `actionIcons` - (not implemented yet)
      *
      * @param {boolean=} selectableRows when set each row will have a checkbox
@@ -32,11 +33,6 @@
      *        change and it'll show the number of selected rows and a delete icon on the right.
      *      - 'persistentActions' - (not implemented yet)
      *
-     * @param {boolean=} sortableColumns sort data and display a sorted state in the header. Clicking on a column which
-     *      is already sorted will reverse the sort order and rotate the sort icon.
-     *      (not implemented yet: Use `sortable-rows-default` attribute directive on a column which intended to be the
-     *      default sortable column)
-     *
      * @param {function(rows)=} deleteRowCallback callback function when deleting rows.
      *      At default an array of the deleted row's data will be passed as the argument.
      *      When `table-row-id` set for the deleted row then that value will be passed.
@@ -112,9 +108,10 @@
      * </pre>
      */
     function mdtTableDirective(TableDataStorageFactory,
-                               EditRowFeature,
+                               EditCellFeature,
                                SelectableRowsFeature,
                                PaginationFeature,
+                               ColumnSelectorFeature,
                                _){
         return {
             restrict: 'E',
@@ -124,7 +121,6 @@
                 tableCard: '=',
                 selectableRows: '=',
                 alternateHeaders: '=',
-                sortableColumns: '=',
                 deleteRowCallback: '&',
                 selectedRowCallback: '&',
                 saveRowCallback: '&',
@@ -148,16 +144,16 @@
                 };
 
                 _setDefaultTranslations();
-
                 _initTableStorage();
 
                 PaginationFeature.initFeature($scope, vm);
+                ColumnSelectorFeature.initFeature($scope, vm);
 
                 _processData();
 
                 // initialization of the storage service
                 function _initTableStorage(){
-                    vm.dataStorage = TableDataStorageFactory.getInstance(vm.virtualRepeat);
+                    vm.dataStorage = TableDataStorageFactory.getInstance();
                 }
 
                 // set translations or fallback to a default value
@@ -216,10 +212,11 @@
 
                 _injectContentIntoTemplate();
 
-                _initEditRowFeature();
+                _initEditCellFeature();
                 _initSelectableRowsFeature();
 
                 PaginationFeature.startFeature(ctrl);
+                ColumnSelectorFeature.initFeatureHeaderValues($scope.dataStorage.header, ctrl.columnSelectorFeature);
 
                 function _injectContentIntoTemplate(){
                     transclude(function (clone) {
@@ -257,12 +254,12 @@
                     });
                 }
 
-                function _initEditRowFeature(){
+                function _initEditCellFeature(){
                     //TODO: make it possible to only register feature if there is at least
                     // one column which requires it.
                     // for that we need to change the place where we register edit-row.
                     // Remove mdt-row attributes --> do it in mdt-row attribute directive on mdtTable
-                    EditRowFeature.addRequiredFunctions($scope, ctrl);
+                    EditCellFeature.addRequiredFunctions($scope, ctrl);
                 }
 
                 function _initSelectableRowsFeature(){

app/modules/main/directives/mdtTableDirective.js

@@ -12,6 +12,13 @@
             link: function($scope){
                 $scope.isTableCardEnabled = false;
 
+                //TODO: move it to the feature file
+                $scope.handleColumnChooserButtonClick = function(){
+                    if($scope.columnSelectorFeature.isEnabled){
+                        $scope.columnSelectorFeature.isActive = !$scope.columnSelectorFeature.isActive
+                    }
+                };
+
                 if($scope.tableCard && $scope.tableCard.visible !== false){
                     $scope.isTableCardEnabled = true;
                 }

app/modules/main/directives/tablecard/mdtCardHeaderDirective.js

@@ -3,14 +3,10 @@
 
     function TableDataStorageFactory($log, _){
 
-        function TableDataStorageService(isVirtualRepeatEnabled){
+        function TableDataStorageService(){
             this.storage = [];
             this.header = [];
             this.customCells = {};
-
-            this.sortByColumnLastIndex = null;
-            this.orderByAscending = true;
-            this.isVirtualRepeatEnabled = isVirtualRepeatEnabled;
         }
 
         TableDataStorageService.prototype.addHeaderCellData = function(ops){
@@ -70,43 +66,6 @@
             });
         };
 
-        TableDataStorageService.prototype.reverseRows = function(){
-            this.storage.reverse();
-        };
-
-        TableDataStorageService.prototype.sortByColumn = function(columnIndex, iteratee){
-            if(this.sortByColumnLastIndex === columnIndex){
-                this.reverseRows();
-
-                this.orderByAscending = !this.orderByAscending;
-            }else{
-                this.sortByColumnIndex(columnIndex, iteratee);
-
-                this.sortByColumnLastIndex = columnIndex;
-                this.orderByAscending = true;
-            }
-
-            return this.orderByAscending ? -1 : 1;
-        };
-
-        TableDataStorageService.prototype.sortByColumnIndex = function(index, iteratee){
-
-            var sortFunction;
-            if (typeof iteratee === 'function') {
-                sortFunction = function(rowData) {
-                    return iteratee(rowData.data[index].value, rowData, index);
-                };
-            } else {
-                sortFunction = function (rowData) {
-                    return rowData.data[index].value;
-                };
-            }
-
-            var res = _.sortBy(this.storage, sortFunction);
-
-            this.storage = res;
-        };
-
         TableDataStorageService.prototype.isAnyRowSelected = function(){
             return _.some(this.storage, function(rowData){
                 return rowData.optionList.selected === true && rowData.optionList.deleted === false;
@@ -172,8 +131,8 @@
         };
 
         return {
-            getInstance: function(isVirtualRepeatEnabled){
-                return new TableDataStorageService(isVirtualRepeatEnabled);
+            getInstance: function(){
+                return new TableDataStorageService();
             }
         };
     }