feat(filtering): Add row filtering

angular-ui · Apr 21, 2014 · 1616164 · 1616164
1 parent 1fad1ff
commit 1616164
Show file tree

Hide file tree

Showing 27 changed files with 1,051 additions and 141 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -16,7 +16,7 @@ module.exports = function(grunt) {
       '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
       '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +
       '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
-      ' Licensed <%= pkg.license %> */\n',
+      ' License: <%= pkg.license %> */\n',
 
     shell: {
       options: {
@@ -418,12 +418,12 @@ module.exports = function(grunt) {
         },
         scripts: [
           '//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js', // TODO(c0bra): REMOVE!
-          '//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js',
-          '//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-touch.js',
-          '//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-animate.js',
+          '//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js',
+          '//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js',
+          '//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js',
         ],
         hiddenScripts: [
-          '//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-animate.js',
+          '//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js',
           'bower_components/google-code-prettify/src/prettify.js',
           'node_modules/marked/lib/marked.js'
         ],

diff --git a/TODO.md b/TODO.md
@@ -1,13 +1,24 @@
 # TODO
 
-# CURRENT
+# CURRENT (row filtering)
+
+1. [TODO] - Make 'No Rows' message i18n
+1. [BUG] - i18n causes an exception if a given value is not present.
+  1. I think we need a function that will look for a translation in the current or given language and then return the value for the default language if not present
+  1. It could also take a flag and return null if not present
+  1. Need to add a test for this...
+
+1. [TODO] - Does rowSearcher need to allow for custom equality comparators in colDef?
+1. [IDEA] - Should RegExps be allowed as search terms? We could test for whether the filter value starts and ends with '/'
+
+1. [TODO] - Document the autoHide feature for uiGridMenu. Probably need to rename it to hideOnResize
 
 1. [TODO] - Does rowsProcessors make sense for external sorting??? It would be downstream from the rows being added/modified, and would ITSELF be modifying the rows...
   1. Would probably be an infinite loop. External sorting needs to be able to hook in further upstream.
+  1. Sorting a column prompts a call to refreshRows(). Could we have a hook in there to run BEFORE rowsProcessors?
 
 1. [TODO] - Do rows processors need to be able to modify the count of of rows? As it is the documentation says the count needs to stay the same... but searching would affect that
 
-1. [BUG] -  Do we need to validate passed in grid 'id' property to make sure it can be in a CSS rule?
 1. [IDEA] - Hook the column menu button into the menu it activates so it can show/hide depending on the number of items it will show. Can we do that?
   1. If sorting is enabled or the user / extension has supplied extra menu items, show the menu button. Otherwise don't show it.
   1. We'll need a way to separate extension menu items from user menu items so the user doesn't override them.
@@ -31,20 +42,20 @@
 1. [NOTE] - Use "-webkit-text-stroke: 0.3px" on icon font to fix jaggies in Chrome on Windows
 1. [TODO] - Add a failing test for the IE9-11 column sorting hack (columnSorter.js, line 229)
 
-1. [TODO] - Add row filtering
 1. [TODO] - Add notes about browser version support and Angular version support to README.md
 1. [TODO] - Add handling for sorting null values with columnDef sortingAlgorithm (PR #940)
 1. [TODO] - Currently uiGridColumnMenu uses i18n to create the menu item text on link. If the language is changed, they won't update because they're not bound...
 
 # Cleanup
 
+1. [TODO] - Remove commented-out dumps from gridUtil
 1. [TODO] - Rename gridUtil to uiGridUtil
 1. [TODO] - Rename GridUtil in uiGridBody to gridUtil or the above
 1. [TODO] - Move uiGridCell to its own file
 
 # Extras
 
-1. Add iit and ddescribe checks as commit hooks
+<!-- 1. Add iit and ddescribe checks as commit hooks -->
 
 # Native scrolling
 

diff --git a/misc/tutorial/5.1.1_Filtering.ngdoc b/misc/tutorial/5.1.1_Filtering.ngdoc
@@ -0,0 +1,44 @@
+@ngdoc overview
+@name Tutorial: Filtering
+@description
+
+UI-Grid allows you to filter rows. Just set the `enableFiltering` flag in your grid options (it is off by default).
+
+Sorting can be disabled at the column level by setting `enableFiltering: false` in the column def. See the last column below for an example.
+
+@example
+<example module="app">
+  <file name="app.js">
+    var app = angular.module('app', ['ngAnimate', 'ui.grid']);
+
+    app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
+      $scope.gridOptions = {
+        enableFiltering: true,
+        columnDefs: [
+          { field: 'name' },
+          { field: 'gender' },
+          { field: 'company', enableFiltering: false  }
+        ]
+      };
+
+      $http.get('/data/100.json')
+        .success(function(data) {
+          $scope.gridOptions.data = data;
+        });
+    }]);
+  </file>
+  <file name="index.html">
+    <div ng-controller="MainCtrl">
+      Click on a column header to open the menu and then filter by that column. (The third column has filtering disabled.)
+      <br>
+      <br>
+      <div ui-grid="gridOptions" class="grid"></div>
+    </div>
+  </file>
+  <file name="main.css">
+    .grid {
+      width: 500px;
+      height: 400px;
+    }
+  </file>
+</example>
diff --git a/misc/tutorial/5.1_sorting.ngdoc b/misc/tutorial/5.1_sorting.ngdoc
@@ -2,7 +2,7 @@
 @name Tutorial: Sorting
 @description
 
-UI-Grid allows you to sort rows. Just set the `enableSorting` flag in your grid options.
+UI-Grid allows you to sort rows. The feature is on by default. You can set the `enableSorting` flag in your grid options to enable/disable it.
 
 <span class="span8 alert alert-warning">
   <strong>Note:</strong> You must include ngAnimate in your application if you want the menu to slide up/down, but it's not required.

diff --git a/src/font/config.json b/src/font/config.json
@@ -6,6 +6,12 @@
   "units_per_em": 1000,
   "ascent": 850,
   "glyphs": [
+    {
+      "uid": "9dd9e835aebe1060ba7190ad2b2ed951",
+      "css": "search",
+      "code": 59407,
+      "src": "fontawesome"
+    },
     {
       "uid": "5211af474d3a9848f67f945e2ccaf143",
       "css": "cancel",

diff --git a/src/js/core/constants.js b/src/js/core/constants.js
@@ -51,6 +51,17 @@
     },
     ASC: 'asc',
     DESC: 'desc',
+    filter: {
+      STARTS_WITH: 2,
+      ENDS_WITH: 4,
+      EXACT: 8,
+      CONTAINS: 16,
+      GREATER_THAN: 32,
+      GREATER_THAN_OR_EQUAL: 64,
+      LESS_THAN: 128,
+      LESS_THAN_OR_EQUAL: 256,
+      NOT_EQUAL: 512
+    },
 
     // TODO(c0bra): Create full list of these somehow. NOTE: do any allow a space before or after them?
     CURRENCY_SYMBOLS: ['ƒ', '$', '£', '$', '¤', '¥', '៛', '₩', '₱', '฿', '₫']

diff --git a/src/js/core/directives/ui-grid-column-menu.js b/src/js/core/directives/ui-grid-column-menu.js
@@ -41,8 +41,34 @@ angular.module('ui.grid').directive('uiGridColumnMenu', ['$log', '$timeout', '$w
           return false;
         }
       }
+
+      function filterable() {
+        if (uiGridCtrl.grid.options.enableFiltering && typeof($scope.col) !== 'undefined' && $scope.col && $scope.col.enableFiltering) {
+          return true;
+        }
+        else {
+          return false;
+        }
+      }
 
       var defaultMenuItems = [
+        // NOTE: disabling this in favor of a little filter text box
+        // Column filter input
+        // {
+        //   templateUrl: 'ui-grid/uiGridColumnFilter',
+        //   action: function($event) {
+        //     $event.stopPropagation();
+        //     $scope.filterColumn($event);
+        //   },
+        //   cancel: function ($event) {
+        //     $event.stopPropagation();
+
+        //     $scope.col.filter = {};
+        //   },
+        //   shown: function () {
+        //     return filterable();
+        //   }
+        // },
         {
           title: i18nService.get().sort.ascending,
           icon: 'ui-grid-icon-sort-alt-up',
@@ -199,12 +225,12 @@ angular.module('ui.grid').directive('uiGridColumnMenu', ['$log', '$timeout', '$w
 
       $scope.$on('$destroy', $scope.$on(uiGridConstants.events.GRID_SCROLL, function(evt, args) {
         self.hideMenu();
-        if (! $scope.$$phase) { $scope.$apply(); }
+        // if (! $scope.$$phase) { $scope.$apply(); }
       }));
 
       $scope.$on('$destroy', $scope.$on(uiGridConstants.events.ITEM_DRAGGING, function(evt, args) {
         self.hideMenu();
-        if (! $scope.$$phase) { $scope.$apply(); }
+        // if (! $scope.$$phase) { $scope.$apply(); }
       }));
 
       $scope.$on('$destroy', function() {

diff --git a/src/js/core/directives/ui-grid-header-cell.js b/src/js/core/directives/ui-grid-header-cell.js
@@ -27,6 +27,8 @@ angular.module('ui.grid').directive('uiGridHeaderCell', ['$log', '$timeout', '$w
       // Store a reference to menu element
       var $colMenu = angular.element( $elm[0].querySelectorAll('.ui-grid-header-cell-menu') );
 
+      var $contentsElm = angular.element( $elm[0].querySelectorAll('.ui-grid-cell-contents') );
+
       // Figure out whether this column is sortable or not
       if (uiGridCtrl.grid.options.enableSorting && $scope.col.enableSorting) {
         $scope.sortable = true;
@@ -35,6 +37,13 @@ angular.module('ui.grid').directive('uiGridHeaderCell', ['$log', '$timeout', '$w
         $scope.sortable = false;
       }
 
+      if (uiGridCtrl.grid.options.enableFiltering && $scope.col.enableFiltering) {
+        $scope.filterable = true;
+      }
+      else {
+        $scope.filterable = false;
+      }
+
       function handleClick(evt) {
         // If the shift key is being held down, add this column to the sort
         var add = false;
@@ -53,7 +62,7 @@ angular.module('ui.grid').directive('uiGridHeaderCell', ['$log', '$timeout', '$w
       // Long-click (for mobile)
       var cancelMousedownTimeout;
       var mousedownStartTime = 0;
-      $elm.on('mousedown', function(event) {
+      $contentsElm.on('mousedown', function(event) {
         if (typeof(event.originalEvent) !== 'undefined' && event.originalEvent !== undefined) {
           event = event.originalEvent;
         }
@@ -72,7 +81,7 @@ angular.module('ui.grid').directive('uiGridHeaderCell', ['$log', '$timeout', '$w
         });
       });
 
-      $elm.on('mouseup', function () {
+      $contentsElm.on('mouseup', function () {
         $timeout.cancel(cancelMousedownTimeout);
       });
 
@@ -101,7 +110,7 @@ angular.module('ui.grid').directive('uiGridHeaderCell', ['$log', '$timeout', '$w
 
       // If this column is sortable, add a click event handler
       if ($scope.sortable) {
-        $elm.on('click', function(evt) {
+        $contentsElm.on('click', function(evt) {
           evt.stopPropagation();
 
           $timeout.cancel(cancelMousedownTimeout);
@@ -123,6 +132,18 @@ angular.module('ui.grid').directive('uiGridHeaderCell', ['$log', '$timeout', '$w
           $timeout.cancel(cancelMousedownTimeout);
         });
       }
+
+      if ($scope.filterable) {
+        $scope.$on('$destroy', $scope.$watch('col.filter.term', function(n, o) {
+          uiGridCtrl.refreshRows()
+            .then(function () {
+              if (uiGridCtrl.prevScrollArgs && uiGridCtrl.prevScrollArgs.y && uiGridCtrl.prevScrollArgs.y.percentage) {
+                 uiGridCtrl.fireScrollingEvent({ y: { percentage: uiGridCtrl.prevScrollArgs.y.percentage } });
+              }
+              // uiGridCtrl.fireEvent('force-vertical-scroll');
+            });
+        }));
+      }
     }
   };