Skip to content

Commit

Permalink
Merge pull request #357 from GriddleGriddle/addColumnFilters
Browse files Browse the repository at this point in the history 
Add column filters
  • Loading branch information
@ryanlanciaux
ryanlanciaux committed Mar 15, 2016
2 parents c500220 + af8f1a1 commit 7e68c06
Show file tree
Hide file tree
Showing 7 changed files with 134 additions and 5 deletions.
52 changes: 51 additions & 1 deletion build/Griddle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ return /******/ (function(modules) { // webpackBootstrap
var omit = __webpack_require__(57);
var map = __webpack_require__(7);
var sortBy = __webpack_require__(16);
var extend = __webpack_require__(29);
var _filter = __webpack_require__(11);

var Griddle = React.createClass({
Expand Down Expand Up @@ -226,6 +227,49 @@ return /******/ (function(modules) { // webpackBootstrap
return false;
});
},

filterByColumnFilters: function filterByColumnFilters(columnFilters) {
var filteredResults = Object.keys(columnFilters).reduce(function (previous, current) {
return _filter(previous, function (item) {
if (deep.getAt(item, current || "").toString().toLowerCase().indexOf(columnFilters[current].toLowerCase()) >= 0) {
return true;
}

return false;
});
}, this.props.results);

var newState = {
columnFilters: columnFilters
};

if (columnFilters) {
newState.filteredResults = filteredResults;
newState.maxPage = this.getMaxPage(newState.filteredResults);
} else if (this.state.filter) {
newState.filteredResults = this.props.useCustomFilterer ? this.props.customFilterer(this.props.results, filter) : this.defaultFilter(this.props.results, filter);
} else {
newState.filteredResults = null;
}

this.setState(newState);
},

filterByColumn: function filterByColumn(filter, column) {
var columnFilters = this.state.columnFilters;

//if filter is "" remove it from the columnFilters object
if (columnFilters.hasOwnProperty(column) && !filter) {
columnFilters = omit(columnFilters, column);
} else {
var newObject = {};
newObject[column] = filter;
columnFilters = extend({}, columnFilters, newObject);
}

this.filterByColumnFilters(columnFilters);
},

/* if we have a filter display the max page and results accordingly */
setFilter: function setFilter(filter) {
if (this.props.useExternal) {
Expand Down Expand Up @@ -410,6 +454,8 @@ return /******/ (function(modules) { // webpackBootstrap
filteredResults: null,
filteredColumns: [],
filter: "",
//this sets the individual column filters
columnFilters: {},
resultsPerPage: this.props.resultsPerPage || 5,
sortColumn: this.props.initialSort,
sortAscending: this.props.initialSortAscending,
Expand Down Expand Up @@ -761,6 +807,7 @@ return /******/ (function(modules) { // webpackBootstrap
rowSettings: this.rowSettings,
sortSettings: sortProperties,
multipleSelectionSettings: multipleSelectionProperties,
filterByColumn: this.filterByColumn,
isSubGriddle: this.props.isSubGriddle,
useGriddleIcons: this.props.useGriddleIcons,
useFixedLayout: this.props.useFixedLayout,
Expand Down Expand Up @@ -894,6 +941,7 @@ return /******/ (function(modules) { // webpackBootstrap
"useFixedLayout": true,
"paddingHeight": null,
"rowHeight": null,
"filterByColumn": null,
"infiniteScrollLoadTreshold": null,
"bodyHeight": null,
"useGriddleStyles": true,
Expand Down Expand Up @@ -1109,6 +1157,7 @@ return /******/ (function(modules) { // webpackBootstrap
sortSettings: this.props.sortSettings,
multipleSelectionSettings: this.props.multipleSelectionSettings,
columnSettings: this.props.columnSettings,
filterByColumn: this.props.filterByColumn,
rowSettings: this.props.rowSettings }) : undefined;

//check to see if any of the rows have children... if they don't wrap everything in a tbody so the browser doesn't auto do this
Expand Down Expand Up @@ -1180,6 +1229,7 @@ return /******/ (function(modules) { // webpackBootstrap
getDefaultProps: function getDefaultProps() {
return {
"columnSettings": null,
"filterByColumn": function filterByColumn() {},
"rowSettings": null,
"sortSettings": null,
"multipleSelectionSettings": null,
Expand Down Expand Up @@ -1250,7 +1300,7 @@ return /******/ (function(modules) { // webpackBootstrap
};
}

return React.createElement('th', { onClick: columnIsSortable ? that.sort(col) : null, 'data-title': col, className: columnSort, key: displayName, style: titleStyles }, React.createElement(HeaderComponent, _extends({ columnName: col, displayName: displayName }, headerProps)), sortComponent);
return React.createElement('th', { onClick: columnIsSortable ? that.sort(col) : null, 'data-title': col, className: columnSort, key: displayName, style: titleStyles }, React.createElement(HeaderComponent, _extends({ columnName: col, displayName: displayName, filterByColumn: that.props.filterByColumn }, headerProps)), sortComponent);
});

if (nodes && this.props.multipleSelectionSettings.isMultipleSelection) {
Expand Down
15 changes: 14 additions & 1 deletion examples/customization/customColumn.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,21 @@
});

var HeaderComponent = React.createClass({
textOnClick: function(e) {
e.stopPropagation();
},

filterText: function(e) {
this.props.filterByColumn(e.target.value, this.props.columnName)
},

render: function(){
return <strong style={{color: this.props.color}}>{this.props.displayName}</strong>
return (
<span>
<div><strong style={{color: this.props.color}}>{this.props.displayName}</strong></div>
<input type='text' onChange={this.filterText} onClick={this.textOnClick} />
</span>
);
}
});

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"react": "^0.14.3"
},
"dependencies": {
"lodash.assign": "^4.0.0",
"lodash.assign": "^4.0.6",
"lodash.defaults": "^4.0.0",
"lodash.difference": "^4.0.1",
"lodash.drop": "^4.0.0",
Expand Down
11 changes: 11 additions & 0 deletions scripts/__tests__/griddle-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,17 @@ describe('Griddle', function() {
expect(grid.state.filteredResults).toBe(null);
});

it('adds column filter on filterByColumn', function() {
grid.filterByColumn('test', 'name');
expect(grid.state.columnFilters).toEqual({ name: 'test' })
});

it('removes column filter when empty', function() {
grid.filterByColumn('test', 'name');
grid.filterByColumn('', 'name');
expect(grid.state.columnFilters).toEqual({});
})

//TODO: getExternalResults

it('sets the page size when a number is passed in to setPageSize', function(){
Expand Down
2 changes: 2 additions & 0 deletions scripts/gridTable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ var GridTable = React.createClass({
"useFixedLayout": true,
"paddingHeight": null,
"rowHeight": null,
"filterByColumn": null,
"infiniteScrollLoadTreshold": null,
"bodyHeight": null,
"useGriddleStyles": true,
Expand Down Expand Up @@ -244,6 +245,7 @@ var GridTable = React.createClass({
sortSettings={this.props.sortSettings}
multipleSelectionSettings={this.props.multipleSelectionSettings}
columnSettings={this.props.columnSettings}
filterByColumn={this.props.filterByColumn}
rowSettings={this.props.rowSettings}/>
: undefined);

Expand Down
3 changes: 2 additions & 1 deletion scripts/gridTitle.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ var GridTitle = React.createClass({
getDefaultProps: function(){
return {
"columnSettings" : null,
"filterByColumn": function() {},
"rowSettings" : null,
"sortSettings": null,
"multipleSelectionSettings": null,
Expand Down Expand Up @@ -86,7 +87,7 @@ var GridTitle = React.createClass({
}

return (<th onClick={columnIsSortable ? that.sort(col) : null} data-title={col} className={columnSort} key={displayName} style={titleStyles}>
<HeaderComponent columnName={col} displayName={displayName} {...headerProps}/>
<HeaderComponent columnName={col} displayName={displayName} filterByColumn={that.props.filterByColumn} {...headerProps}/>
{sortComponent}
</th>);
});
Expand Down
54 changes: 53 additions & 1 deletion scripts/griddle.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ var isUndefined = require('lodash.isundefined');
var omit = require('lodash.omit');
var map = require('lodash.map');
var sortBy = require('lodash.sortby');
var extend = require('lodash.assign');
var _filter = require('lodash.filter');

var Griddle = React.createClass({
Expand Down Expand Up @@ -153,6 +154,54 @@ var Griddle = React.createClass({
return false;
});
},

filterByColumnFilters(columnFilters) {
var filteredResults = Object.keys(columnFilters).reduce(function(previous, current) {
return _filter(
previous,
function(item) {
if(deep.getAt(item, current || "").toString().toLowerCase().indexOf(columnFilters[current].toLowerCase()) >= 0) {
return true;
}

return false;
}
)
}, this.props.results)

var newState = {
columnFilters: columnFilters
};

if(columnFilters) {
newState.filteredResults = filteredResults;
newState.maxPage = this.getMaxPage(newState.filteredResults);
} else if(this.state.filter) {
newState.filteredResults = this.props.useCustomFilterer ?
this.props.customFilterer(this.props.results, filter) :
this.defaultFilter(this.props.results, filter);
} else {
newState.filteredResults = null;
}

this.setState(newState);
},

filterByColumn: function(filter, column) {
var columnFilters = this.state.columnFilters;

//if filter is "" remove it from the columnFilters object
if(columnFilters.hasOwnProperty(column) && !filter) {
columnFilters = omit(columnFilters, column);
} else {
var newObject = {};
newObject[column] = filter;
columnFilters = extend({}, columnFilters, newObject);
}

this.filterByColumnFilters(columnFilters);
},

/* if we have a filter display the max page and results accordingly */
setFilter: function(filter) {
if(this.props.useExternal) {
Expand Down Expand Up @@ -336,6 +385,8 @@ var Griddle = React.createClass({
filteredResults: null,
filteredColumns: [],
filter: "",
//this sets the individual column filters
columnFilters: {},
resultsPerPage: this.props.resultsPerPage || 5,
sortColumn: this.props.initialSort,
sortAscending: this.props.initialSortAscending,
Expand Down Expand Up @@ -721,7 +772,8 @@ var Griddle = React.createClass({
columnSettings={this.columnSettings}
rowSettings = {this.rowSettings}
sortSettings={sortProperties}
multipleSelectionSettings={multipleSelectionProperties}
multipleSelectionSettings={multipleSelectionProperties}
filterByColumn={this.filterByColumn}
isSubGriddle={this.props.isSubGriddle}
useGriddleIcons={this.props.useGriddleIcons}
useFixedLayout={this.props.useFixedLayout}
Expand Down

0 comments on commit 7e68c06

Please sign in to comment.