Skip to content

Commit

Permalink
feat(ngTableController): display the filter row by default when appli…
Browse files Browse the repository at this point in the history 
…cable

When table configured with at least one filter, display the filter row unless table is explicitly configured
with a show-filter attribute.
  • Loading branch information
@ccrowhurstram
ccrowhurstram committed Sep 14, 2015
1 parent 19af541 commit 103b2be
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 15 deletions.
24 changes: 24 additions & 0 deletions src/scripts/ngTableController.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,10 @@
$scope.$parent.$watch($attrs.showFilter, function(value) {
$scope.show_filter = value;
});
} else {
$scope.$watch(hasFilterColumn, function(value){
$scope.show_filter = value;
})
}

$scope.$groupRow = {};
Expand Down Expand Up @@ -210,6 +214,26 @@
});
}

function hasFilterColumn(){
if (!$scope.$columns) return false;

return some($scope.$columns, function($column){
return $column.filter($scope, { $column: $column});
});
}

function some(array, predicate){
var found = false;
for (var i = 0; i < array.length; i++) {
var obj = array[i];
if (predicate(obj)){
found = true;
break;
}
}
return found;
}

function commonInit(){
ngTableEventsChannel.onAfterReloadData(bindDataToScope, $scope, isMyPublisher);
ngTableEventsChannel.onPagesChanged(bindPagesToScope, $scope, isMyPublisher);
Expand Down
15 changes: 8 additions & 7 deletions test/tableDynamicSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ describe('ng-table-dynamic', function() {
beforeEach(inject(function($compile, $q, NgTableParams) {
elm = angular.element(
'<div>' +
'<table ng-table-dynamic="tableParams with cols" show-filter="true">' +
'<table ng-table-dynamic="tableParams with cols">' +
'<tr ng-repeat="user in $data">' +
'<td ng-repeat="col in $columns">{{user[col.field]}}</td>' +
'</tr>' +
Expand Down Expand Up @@ -201,7 +201,7 @@ describe('ng-table-dynamic', function() {
beforeEach(inject(function($compile, $q, NgTableParams) {
elm = angular.element(
'<div>' +
'<table ng-table-dynamic="tableParams with cols" show-filter="true">' +
'<table ng-table-dynamic="tableParams with cols">' +
'<tr ng-repeat="user in $data">' +
'<td ng-repeat="col in $columns">{{user[col.field]}}</td>' +
'</tr>' +
Expand Down Expand Up @@ -332,7 +332,7 @@ describe('ng-table-dynamic', function() {
var elm;
beforeEach(inject(function($compile, NgTableParams) {
elm = angular.element(
'<table ng-table-dynamic="tableParams with cols" show-filter="true">' +
'<table ng-table-dynamic="tableParams with cols">' +
'<tr ng-repeat="user in $data">' +
'<td ng-repeat="col in $columns">{{user[col.field]}}</td>' +
'</tr>' +
Expand Down Expand Up @@ -534,10 +534,11 @@ describe('ng-table-dynamic', function() {
beforeEach(inject(function($compile, NgTableParams) {

ageFilter = { age: 'text'};
function getFilter(paramsScope){
if (paramsScope.$column.title() === 'Name of user') {
function getFilter(paramsScope, locals){
var $column = (paramsScope.$column || locals.$column);
if ($column.title() === 'Name of user') {
return {username: 'text'};
} else if (paramsScope.$column.title() === 'Age') {
} else if ($column.title() === 'Age') {
return ageFilter;
}
}
Expand Down Expand Up @@ -603,7 +604,7 @@ describe('ng-table-dynamic', function() {
beforeEach(inject(function ($compile, $q, NgTableParams) {
elm = angular.element(
'<div>' +
'<table ng-table-dynamic="tableParams with cols" show-filter="true">' +
'<table ng-table-dynamic="tableParams with cols">' +
'<tr ng-repeat="user in $data">' +
"<td ng-repeat=\"col in $columns\">{{user[col.field]}}</td>" +
'</tr>' +
Expand Down
55 changes: 47 additions & 8 deletions test/tableSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ describe('ng-table', function() {
beforeEach(inject(function($compile, $q) {
elm = angular.element(
'<div>' +
'<table ng-table="tableParams" show-filter="true">' +
'<table ng-table="tableParams">' +
'<tr ng-repeat="user in $data">' +
'<td data-header-title="\'Sort by Name\'" data-title="nameTitle()" filter="{ \'name\': \'text\' }" sortable="\'name\'" data-header-class="getCustomClass($column)"' +
' ng-if="showName">' +
Expand Down Expand Up @@ -423,7 +423,7 @@ describe('ng-table', function() {
beforeEach(inject(function($compile) {
elm = angular.element(
'<div>' +
'<table ng-table="tableParams" show-filter="true">' +
'<table ng-table="tableParams">' +
'<tr ng-repeat="user in $data">' +
'<td header-class="captureColumn($column)" title="\'Name\'" ' +
'filter="usernameFilter">{{user.name}}</td>' +
Expand Down Expand Up @@ -510,7 +510,7 @@ describe('ng-table', function() {
elm = angular.element(
'<div>' +
'<script type="text/ng-template" id="ng-table/filters/customNum.html"><input type="number" id="{{name}}"/></script>' +
'<table ng-table="tableParams" show-filter="true">' +
'<table ng-table="tableParams">' +
'<tr ng-repeat="user in $data">' +
'<td header-class="captureColumn($column)" title="\'Age\'" ' +
'filter="{ \'age\': \'ng-table/filters/customNum.html\' }">{{user.age}}</td>' +
Expand Down Expand Up @@ -538,7 +538,7 @@ describe('ng-table', function() {
beforeEach(inject(function($compile) {
elm = angular.element(
'<div>' +
'<table ng-table="tableParams" show-filter="true">' +
'<table ng-table="tableParams">' +
'<tr ng-repeat="user in $data">' +
'<td header-class="captureColumn($column)" title="\'Name\'" ' +
'filter="{ \'name\': \'text\', \'age\': \'text\' }">{{user.name}}</td>' +
Expand Down Expand Up @@ -589,7 +589,7 @@ describe('ng-table', function() {
elm = angular.element(
'<div>' +
'<script type="text/ng-template" id="ng-table/filters/number.html"><input type="number" name="{{name}}"/></script>' +
'<table ng-table="tableParams" show-filter="true">' +
'<table ng-table="tableParams">' +
'<tr ng-repeat="user in $data">' +
'<td title="\'Name\'" filter="getFilter($column)">{{user.name}}</td>' +
'<td title="\'Age\'" filter="getFilter($column)">{{user.age}}</td>' +
Expand Down Expand Up @@ -649,7 +649,7 @@ describe('ng-table', function() {
beforeEach(inject(function($compile) {
elm = angular.element(
'<div>' +
'<table ng-table="tableParams" show-filter="true">' +
'<table ng-table="tableParams">' +
'<tr ng-repeat="user in $data">' +
'<td header-class="captureColumn($column)" title="\'Name\'" '
+ 'filter="usernameFilter">{{user.name}}</td>' +
Expand Down Expand Up @@ -699,7 +699,7 @@ describe('ng-table', function() {
beforeEach(inject(function($compile) {
elm = angular.element(
'<div>' +
'<table ng-table="tableParams" show-filter="true">' +
'<table ng-table="tableParams">' +
'<tr ng-repeat="user in $data">' +
'<td header-class="captureColumn($column)" title="\'Age\'" '
+ 'filter="ageFilter">{{user.age}}</td>' +
Expand Down Expand Up @@ -742,6 +742,45 @@ describe('ng-table', function() {
});
});

describe('show-filter', function(){
var elm;
beforeEach(inject(function($compile) {
elm = angular.element(
'<div>' +
'<table ng-table="tableParams" show-filter="showFilterRow">' +
'<tr ng-repeat="user in $data">' +
'<td title="\'Age\'" filter="{ age: \'number\'}">{{user.age}}</td>' +
'</tr>' +
'</table>' +
'</div>');

scope.showFilterRow = true;
scope.tableParams = createNgTableParams();

$compile(elm)(scope);
scope.$digest();
}));

it('when true, should display filter row', function() {
var filterRow = elm.find('thead').find('tr').eq(1);
expect(filterRow.hasClass('ng-table-filters')).toBe(true);
expect(filterRow.hasClass('ng-hide')).toBe(false);
});

it('when false, should hide filter row', function() {
// given
scope.showFilterRow = false;

// when
scope.$digest();

// then
var filterRow = elm.find('thead').find('tr').eq(1);
expect(filterRow.hasClass('ng-table-filters')).toBe(true);
expect(filterRow.hasClass('ng-hide')).toBe(true);
});
});

describe('$columns', function(){
var elm,
tp;
Expand Down Expand Up @@ -872,7 +911,7 @@ describe('ng-table', function() {
beforeEach(inject(function($compile) {
elm = angular.element(
'<div>' +
'<table ng-table="tableParams" show-filter="true">' +
'<table ng-table="tableParams">' +
'<tr class="ng-table-group" ng-repeat-start="group in $groups"></tr>' +
'<tr ng-repeat-end="user in group.data">' +
'<td title="\'Name\'" groupable="\'name\'">{{user.name}}</td>' +
Expand Down

0 comments on commit 103b2be

Please sign in to comment.