Merge pull request #113 from MyPureCloud/external-filters

External filters

Author: michaelmcauley

README.md

@@ -480,6 +480,7 @@ When invoked, `filterFunction` will be passed a data row and the current filter
 
 Columns that have a custom cell component can be filtered, but only if the data rows defined in `content` have values corresponding to the column using the custom cell component. The filtering will be based on the data in `content`, not on what's rendered by the custom cell component.
 
+
 ### Sorting
 
 Fixtable has built-in support for column sorting.
@@ -556,14 +557,25 @@ Currently, you can only sort by a single column at a time. (In other words, ther
 
 Also, just like with filtering, sorting is based on what's defined in `content`, not on the actual markup rendered in the cell. Keep this in mind when using sorting with custom cell components.
 
+### External Filters
+
+You may want to implement UI for filtering data outside of Fixtable itself. Perhaps in a sibling component that allows for more complex controls than can comfortably fit in a column header.
+
+To support this use case, Fixtable allows for an `externalFilters` property to be set. It will then monitor this value for changes and trigger your `onReloadContent` callback to refresh the table content. The current value of `externalFilters` will be passed to your callback as the fifth parameter.
+
+Fixtable does not prescribe any particular format for your external filters, so you are free to implement whatever data structure works best for your needs. This, however, means you may need to use `notifyPropertyChange()` when your external filters are updated, to explicitly notify Fixtable of the change.
+
+Note: `serverPaging` must be enabled.
+
 ### onReloadContent
 
-Let's recap `onReloadContent`, since it can be triggered by several different kinds of content updates. This property of the `fixtable-grid` should be set to an action on the owning controller or component. The bound action will be called whenever the table is paged, sorted, or filtered. (This is true regardless of whether client paging or server paging is active, but obviously it's more important for server paging.) The action will be invoked with the following parameters:
+Let's recap `onReloadContent`, since it can be triggered by several different kinds of content updates. This property of the `fixtable-grid` should be set to an action on the owning controller or component. The bound action will be called whenever the table is paged, sorted, or filtered, or when any external filters are changed. (This is true regardless of whether client paging or server paging is active, but obviously it's more important for server paging.) The action will be invoked with the following parameters:
 
 * `page` (Number) - The current 1-indexed page number.
 * `pageSize` (Number) - The maximum number of rows shown on a single page.
 * `filters` (Object) - Object where the key/value pairs map column keys to filter text.
 * `sortInfo` (Object) - Object with a string `key` property representing the column to sort by, and a boolean `ascending` property indicating the sort direction. If the table is unsorted, `sortInfo` will be null.
+* `externalFilters` (Object) - The current value of your `externalFilters` property; this is completely outside of Fixtable's control.
 
 ### Row Selection
 

addon/components/fixtable-grid.js

@@ -2,6 +2,7 @@
 
 import DS from 'ember-data';
 import Ember from 'ember';
+import _ from 'lodash';
 import layout from '../templates/components/fixtable-grid';
 
 const checkboxColumnWidth = 40; // in pixels
@@ -41,6 +42,8 @@ export default Ember.Component.extend({
   selectedRowMap: null, // maps row indices to selected state
   suppressSelectToggle: false,
 
+  externalFilters: null,
+
   currentPage: defaultPage,
   afterCurrentPageChanged: Ember.observer('currentPage', function fixtableGrid$afterCurrentPageChanged() {
     let currentPage = this.get('currentPage'),
@@ -72,7 +75,8 @@ export default Ember.Component.extend({
         this.get('currentPage'),
         this.get('pageSize'),
         this.get('filterToApply') || {},
-        sortInfo);
+        sortInfo,
+        this.get('externalFilters'));
     }
 
     // if we need to reload content, that also means the selection will be reset
@@ -462,5 +466,18 @@ export default Ember.Component.extend({
     if (fixtable) {
       fixtable.setDimensions();
     }
+  },
+
+  didUpdateAttrs() {
+    this._super(...arguments);
+
+    // trigger content reload when externalFilters change
+    let oldExternalFilters = this.get('_previousExternalFilters');
+    let newExternalFilters = _.cloneDeep(this.get('externalFilters'));
+    if (oldExternalFilters && !_.isEqual(oldExternalFilters, newExternalFilters)) {
+      this.set('currentPage', 1);
+      Ember.run.debounce(this, this.notifyReloadContent, 300, false);
+    }
+    this.set('_previousExternalFilters', newExternalFilters);
   }
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fixtable-ember",
-  "version": "3.2.3",
+  "version": "3.3.0",
   "description": "Ember wrapper for the Fixtable table library",
   "directories": {
     "doc": "doc",
@@ -42,6 +42,7 @@
     "ember-disable-prototype-extensions": "^1.1.0",
     "ember-export-application-global": "^1.0.5",
     "ember-load-initializers": "^0.6.0",
+    "ember-lodash": "^4.17.5",
     "ember-resolver": "^2.0.3",
     "ember-source": "^2.12.0",
     "loader.js": "^4.2.3"