Merge pull request #3905 from AgDude/display-value

feat(filter and sort): Support filter and sort by displayed value

Author: AgDude

misc/tutorial/102_sorting.ngdoc

@@ -30,6 +30,9 @@ asynchronously after the columns it will often decide all your columns are strin
 column def using `type='number'`.  Valid types are documented in {@link api/ui.grid.class:GridOptions.columnDef columnDef}, and
 include `string`, `number`, `numberStr` and `date`.  If you use date be aware the code expects a javascript date object.
 
+By default the sorting algorithm will be applied to the row value before any `cellFilters` are applied. The {@link api/ui.grid.class:GridOptions.columnDef#sortCellFiltered sortCellFiltered}
+columnDef option will cause sorting to be applied after the `cellFilters` are applied. For an example of this see the "Month Joined" column in the {@link 401_AllFeatures AllFeatures tutorial}.
+
 <example module="app">
   <file name="app.js">
     var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);

misc/tutorial/103_filtering.ngdoc

@@ -59,6 +59,7 @@ Filtering supports dropdowns, in order to set a particular column to use a dropd
 and
   `selectOptions: [ { value: 'x', label: 'decode of x' } , .... ]`
 
+
 If you need to internationalize the labels you'll need to complete that before providing the selectOptions array.
 
 ### Cancel icon
@@ -72,8 +73,14 @@ In this example we've provided a "toggle filters" button to allow you to turn th
 still visually indicate which columns are filtered even when the filters aren't present, we've used the headerCellClass
 to make any columns with a filter condition have blue text.
 
+### cellFilters
+
+By default the filtering will not use the formatted value after applying `cellFilters`, it uses the raw value from the row. The {@link api/ui.grid.class:GridOptions.columnDef#filterCellFiltered filterCellFiltered}
+columnDef option will cause filtering to be applied after the `cellFilters` are evaluated, as seen on the "Long Date" field.
+
 ### Single filter box (similar to 2.x)
 
+
 Refer {@link 321_singleFilter singleFilter tutorial}, it is possible to implement this using a rowsProcessor.
 
 @example
@@ -152,6 +159,8 @@ Refer {@link 321_singleFilter singleFilter tutorial}, it is possible to implemen
               placeholder: 'less than',
               term: nextWeek
             }, headerCellClass: $scope.highlightFilteredHeader
+          },
+          { field: 'mixedDate', displayName: "Long Date", cellFilter: 'date:"longDate"', filterCellFiltered:true, width: '15%',
           }
         ]
       };

misc/tutorial/401_AllFeatures.ngdoc

@@ -48,7 +48,9 @@ All features are enabled to get an idea of performance
         { name:'friends[1].name', displayName:'2nd friend', width:150, enableCellEdit: true },
         { name:'friends[2].name', displayName:'3rd friend', width:150, enableCellEdit: true },
         { name:'agetemplate',field:'age', width:150, cellTemplate: '<div class="ui-grid-cell-contents"><span>Age 2:{{COL_FIELD}}</span></div>' },
-        { name:'Is Active',field:'isActive', width:150, type:'boolean' }
+        { name:'Is Active',field:'isActive', width:150, type:'boolean' },
+        { name:'Join Date',field:'registered', cellFilter:'date', width:150, type:'date', enableFiltering:false },
+        { name:'Month Joined',field:'registered', cellFilter: 'date:"MMMM"', filterCellFiltered:true, sortCellFiltered:true, width:150, type:'date' }
       ];
 
       $scope.callsPending = 0;
@@ -68,6 +70,7 @@ All features are enabled to get an idea of performance
               data.forEach(function(row){
                 row.id = i;
                 i++;
+                row.registered = new Date(row.registered)
                 $scope.myData.push(row);
               });
             })

src/js/core/factories/Grid.js

@@ -1830,6 +1830,30 @@ angular.module('ui.grid')
     }
   };
 
+  /**
+   * @ngdoc function
+   * @name getCellDisplayValue
+   * @methodOf ui.grid.class:Grid
+   * @description Gets the displayed value of a cell after applying any the `cellFilter`
+   * @param {GridRow} row Row to access
+   * @param {GridColumn} col Column to access
+   */
+  Grid.prototype.getCellDisplayValue = function getCellDisplayValue(row, col) {
+    if ( !col.cellDisplayGetterCache ) {
+      var custom_filter = col.cellFilter ? " | " + col.cellFilter : "";
+
+      if (typeof(row.entity['$$' + col.uid]) !== 'undefined') {
+        col.cellDisplayGetterCache = $parse(row.entity['$$' + col.uid].rendered + custom_filter);
+      } else if (this.options.flatEntityAccess && typeof(col.field) !== 'undefined') {
+        col.cellDisplayGetterCache = $parse(row.entity[col.field] + custom_filter);
+      } else {
+        col.cellDisplayGetterCache = $parse(row.getEntityQualifiedColField(col) + custom_filter);
+      }
+    }
+
+    return col.cellDisplayGetterCache(row);
+  };
+
 
   Grid.prototype.getNextColumnSortPriority = function getNextColumnSortPriority() {
     var self = this,

src/js/core/factories/GridColumn.js

@@ -576,6 +576,28 @@ angular.module('ui.grid')
      */
     self.cellFilter = colDef.cellFilter ? colDef.cellFilter : "";
 
+    /**
+     * @ngdoc boolean
+     * @name sortCellFiltered
+     * @propertyOf ui.grid.class:GridOptions.columnDef
+     * @description (optional) False by default. When `true` uiGrid will apply the cellFilter before
+     * sorting the data. Note that when using this option uiGrid will assume that the displayed value is
+     * a string, and use the {@link ui.grid.class:RowSorter#sortAlpha sortAlpha} `sortFn`. It is possible
+     * to return a non-string value from an angularjs filter, in which case you should define a {@link ui.grid.class:GridOptions.columnDef#sortingAlgorithm sortingAlgorithm}
+     * for the column which hanldes the returned type. You may specify one of the `sortingAlgorithms`
+     * found in the {@link ui.grid.RowSorter rowSorter} service.
+     */
+    self.sortCellFiltered = colDef.sortCellFiltered ? true : false;
+
+    /**
+     * @ngdoc boolean
+     * @name filterCellFiltered
+     * @propertyOf ui.grid.class:GridOptions.columnDef
+     * @description (optional) False by default. When `true` uiGrid will apply the cellFilter before
+     * applying "search" `filters`.
+     */
+    self.filterCellFiltered = colDef.filterCellFiltered ? true : false;
+
     /**
      * @ngdoc property
      * @name headerCellFilter

src/js/core/services/rowSearcher.js

@@ -181,7 +181,13 @@ module.service('rowSearcher', ['gridUtil', 'uiGridConstants', function (gridUtil
     var term = filter.term;
 
     // Get the column value for this row
-    var value = grid.getCellValue(row, column);
+    var value;
+    if ( column.filterCellFiltered ){
+      value = grid.getCellDisplayValue(row, column);
+    } else {
+      value = grid.getCellValue(row, column);
+    }
+
 
     // If the filter's condition is a RegExp, then use it
     if (filter.condition instanceof RegExp) {

src/js/core/services/rowSorter.js

@@ -302,6 +302,11 @@ module.service('rowSorter', ['$parse', 'uiGridConstants', function ($parse, uiGr
       sortFn = col.sortingAlgorithm;
       rowSorter.colSortFnCache[col.colDef.name] = col.sortingAlgorithm;
     }
+    // Always default to sortAlpha when sorting after a cellFilter
+    else if ( col.sortCellFiltered && col.cellFilter ){
+      sortFn = rowSorter.sortAlpha;
+      rowSorter.colSortFnCache[col.colDef.name] = sortFn;
+    }
     // Try and guess what sort function to use
     else {
       // Guess the sort function
@@ -440,8 +445,15 @@ module.service('rowSorter', ['$parse', 'uiGridConstants', function ($parse, uiGr
 
         sortFn = rowSorter.getSortFn(grid, col, r);
 
-        var propA = grid.getCellValue(rowA, col);
-        var propB = grid.getCellValue(rowB, col);
+        var propA, propB;
+
+        if ( col.sortCellFiltered ){
+          propA = grid.getCellDisplayValue(rowA, col);
+          propB = grid.getCellDisplayValue(rowB, col);
+        } else {
+          propA = grid.getCellValue(rowA, col);
+          propB = grid.getCellValue(rowB, col);
+        }
 
         tem = sortFn(propA, propB);
 

test/unit/core/factories/Grid.spec.js

@@ -523,7 +523,8 @@ describe('Grid factory', function () {
         functionProp: function () {
           return 'functionPropValue';
         },
-        arrayProp: ['arrayPropValue']
+        arrayProp: ['arrayPropValue'],
+        dateProp:  new Date('2015-07-01T13:25:00+00:00') // Wednesday in July
       };
       entity['\"!weird-pro\'p'] = 'weirdPropValue';
 
@@ -576,6 +577,29 @@ describe('Grid factory', function () {
       expect(grid.getCellValue(row,grid.getColumn('arrayProp'))).toBe('arrayPropValue');
       expect(grid.getCellValue(row,grid.getColumn('weirdProp'))).toBe('weirdPropValue');
 
+      expect(grid.getCellDisplayValue(row,grid.getColumn('simpleProp'))).toBe('simplePropValue');
+      expect(grid.getCellDisplayValue(row,grid.getColumn('complexProp'))).toBe('complexPropValue');
+      expect(grid.getCellDisplayValue(row,grid.getColumn('functionProp'))).toBe('functionPropValue');
+      expect(grid.getCellDisplayValue(row,grid.getColumn('arrayProp'))).toBe('arrayPropValue');
+      expect(grid.getCellDisplayValue(row,grid.getColumn('weirdProp'))).toBe('weirdPropValue');
+
+    });
+
+    it('should apply angularjs filters', function(){
+      var colDefs = [
+        {displayName:'date', field:'dateProp', cellFilter: 'date:"yyyy-MM-dd"'},
+        {displayName:'weekday', field:'dateProp', cellFilter: 'date:"EEEE" | uppercase'}
+      ];
+      var grid = new Grid({ id: 1, columnDefs:colDefs });
+      var rows = [
+        new GridRow(entity,1,grid)
+      ];
+      grid.buildColumns();
+      grid.modifyRows([entity]);
+
+      var row = grid.rows[0];
+      expect(grid.getCellDisplayValue(row,grid.columns[0])).toEqual("2015-07-01");
+      expect(grid.getCellDisplayValue(row,grid.columns[1])).toEqual("WEDNESDAY");
     });
 
     it('not overwrite column types specified in options', function() {

test/unit/core/row-filtering.spec.js

@@ -2,13 +2,6 @@ describe('rowSearcher', function() {
   var grid, $scope, $compile, recompile,
       rows, columns, rowSearcher, uiGridConstants, filter;
 
-  var data = [
-    { "name": "Ethel Price", "gender": "female", "company": "Enersol", "isActive" : true },
-    { "name": "Claudine Neal", "gender": "female", "company": "Sealoud", "isActive" : false },
-    { "name": "Beryl Rice", "gender": "female", "company": "Velity", "isActive" : true },
-    { "name": "Wilder Gonzales", "gender": "male", "company": "Geekko", "isActive" : false }
-  ];
-
   beforeEach(module('ui.grid'));
 
   beforeEach(inject(function (_$compile_, $rootScope, _rowSearcher_, Grid, GridRow, GridColumn, _uiGridConstants_) {
@@ -22,16 +15,17 @@ describe('rowSearcher', function() {
     });
 
     rows = grid.rows = [
-      new GridRow({ name: 'Bill', company: 'Gruber, Inc.', age: 25, isActive: true }, 0, grid),
-      new GridRow({ name: 'Frank', company: 'Foo Co', age: 45, isActive: false }, 1, grid),
-      new GridRow({ name: 'Joe', company: 'Movers, Inc.', age: 0, isActive: false }, 2, grid)
+      new GridRow({ name: 'Bill', company: 'Gruber, Inc.', age: 25, isActive: true, date: new Date('2015-07-01T13:25:00+00:00') }, 0, grid), // Wednesday
+      new GridRow({ name: 'Frank', company: 'Foo Co', age: 45, isActive: false, date: new Date('2015-06-24T13:25:00+00:00') }, 1, grid), // Wednesday
+      new GridRow({ name: 'Joe', company: 'Movers, Inc.', age: 0, isActive: false, date: new Date('2015-06-29T13:25:00+00:00') }, 2, grid) // Monday
     ];
 
     columns = grid.columns = [
       new GridColumn({ name: 'name' }, 0, grid),
       new GridColumn({ name: 'company' }, 1, grid),
       new GridColumn({ name: 'age' }, 2, grid),
-      new GridColumn({ name: 'isActive' }, 3, grid)
+      new GridColumn({ name: 'isActive' }, 3, grid),
+      new GridColumn({ name: 'date' }, 4, grid)
     ];
 
     filter = null;
@@ -278,4 +272,16 @@ describe('rowSearcher', function() {
     });
   });
 
+  describe('with a cellFilter', function(){
+    it('should filter by the displayed text', function(){
+      var col = grid.columns[4];
+      col.cellFilter = 'date:"EEEE"';
+      col.filterCellFiltered = true;
+
+      setFilter(columns[4], 'Wed', uiGridConstants.filter.CONTAINS);
+      var ret = rowSearcher.search(grid, rows, columns).filter(function(row){ return row.visible; });
+
+      expect(ret.length).toEqual(2);
+    });
+  });
 });

test/unit/core/row-sorting.spec.js

@@ -2,13 +2,6 @@
 describe('rowSorter', function() {
   var grid, $scope, $compile, recompile, uiGridConstants, rowSorter, gridClassFactory, Grid, GridColumn, GridRow;
 
-  var data = [
-    { "name": "Ethel Price", "gender": "female", "company": "Enersol" },
-    { "name": "Claudine Neal", "gender": "female", "company": "Sealoud" },
-    { "name": "Beryl Rice", "gender": "female", "company": "Velity" },
-    { "name": "Wilder Gonzales", "gender": "male", "company": "Geekko" }
-  ];
-
   beforeEach(module('ui.grid'));
 
   beforeEach(inject(function (_$compile_, $rootScope, _uiGridConstants_, _rowSorter_, _Grid_, _GridColumn_, _GridRow_, _gridClassFactory_) {
@@ -21,10 +14,6 @@ describe('rowSorter', function() {
     GridRow = _GridRow_;
     gridClassFactory = _gridClassFactory_;
 
-    // $scope.gridOpts = {
-    //   data: data
-    // };
-
     // recompile = function () {
     //   grid = angular.element('<div style="width: 500px; height: 300px" ui-grid="gridOpts"></div>');
     //   // document.body.appendChild(grid[0]);
@@ -174,6 +163,55 @@ describe('rowSorter', function() {
     });
   });
 
+  describe('sort by date column', function(){
+    var grid, rows, cols;
+
+    beforeEach(function() {
+      grid = new Grid({ id: 123 });
+
+      var e1 = { name: 'Bob', date: new Date('2015-07-01T13:25:00+00:00') }; // Wednesday
+      var e2 = { name: 'Jim', date: new Date('2015-06-29T13:25:00+00:00') }; // Monday
+      var e3 = { name: 'Bill', date: new Date('2015-07-03T13:25:00+00:00') }; // Friday
+
+      rows = [
+        new GridRow(e1, 0, grid),
+        new GridRow(e2, 1, grid),
+        new GridRow(e3, 1, grid)
+      ];
+
+      cols = [
+        new GridColumn({
+          name: 'name',
+          type: 'string'
+        }, 0, grid),
+        new GridColumn({
+          name: 'date',
+          type: 'date',
+          cellFilter: 'date:"EEEE"',
+          sort: {
+            direction: uiGridConstants.ASC,
+            priority: 0
+          }
+        }, 1, grid)
+      ];
+    });
+
+    it('should sort by the actual date', function(){
+      var ret = rowSorter.sort(grid, rows, cols);
+
+      expect(ret[0].entity.name).toEqual('Jim');
+    });
+
+    it('should sort by the day of week string', function(){
+      cols[1].sortCellFiltered = true;
+
+      var ret = rowSorter.sort(grid, rows, cols);
+
+      expect(ret[0].entity.name).toEqual('Bill');
+    });
+
+  });
+
   describe('stable sort', function() {
     var grid, rows, cols;