Skip to content

Commit 1b20879

Browse files
jeff-phillips-18cdcabrera
jeff-phillips-18
authored and
cdcabrera
committed
feat(pfFilter): Add filter options - inline, results count, items label (#601)
Provides options to: display filter and result on a single line show the total count in the results label (i.e. 5 of 10 Results) change the label from Results to a passed in string
1 parent 469fe4d commit 1b20879

File tree

7 files changed

+148
-6
lines changed

7 files changed

+148
-6
lines changed

‎src/filters/examples/filter.js

+26-1
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,13 @@
2121
* <li>.filterCategoriesPlaceholder - (String) Text to display in `complex-select` category value select when no filter value has been entered, Optional
2222
* <li>.filterDelimiter - (String) Delimiter separating 'complex-select' category and value. Optional, default is a space, ' '
2323
* </ul>
24+
* <li>.inlineResults - (Boolean) Flag to show results inline with the filter selection (default: false)
2425
* <li>.appliedFilters - (Array) List of the currently applied filters
2526
* <li>.resultsCount - (int) The number of results returned after the current applied filters have been applied
27+
* <li>.totalCount - (int) The total number of items before any filters have been applied. The 'm' in the label: 'n' of 'm' selected
28+
* <li>.showTotalCountResults - (Boolean) Optional, flag to show the total count in the filter results as well (ie. 'n' of 'm' Results)
29+
* <li>.itemsLabel - (String) Optional label to use for the items in the results count (default: Result)
30+
* <li>.itemsLabelPlural - (String) Optional label to use for the items in the resuults count when plural (default: Results)
2631
* <li>.onFilterChange - ( function(array of filters) ) Function to call when the applied filters list changes
2732
* </ul>
2833
*
@@ -34,6 +39,26 @@
3439
<pf-filter id="exampleFilter" config="filterConfig"></pf-filter>
3540
</div>
3641
<hr class="col-md-12">
42+
</br></br>
43+
<div class="col-sm-4">
44+
<form role="form">
45+
<div class="form-group">
46+
<label class="checkbox-inline">
47+
<input type="checkbox" ng-model="filterConfig.inlineResults">Inline results</input>
48+
</label>
49+
</div>
50+
</form>
51+
</div>
52+
<div class="col-sm-4">
53+
<form role="form">
54+
<div class="form-group">
55+
<label class="checkbox-inline">
56+
<input type="checkbox" ng-model="filterConfig.showTotalCountResults">Show total count in results</input>
57+
</label>
58+
</div>
59+
</form>
60+
</div>
61+
<hr class="col-md-12">
3762
<div class="col-md-12">
3863
<label class="events-label">Valid Items: </label>
3964
</div>
@@ -55,7 +80,6 @@
5580
</div>
5681
</div>
5782
</div>
58-
</br></br>
5983
<div class="col-md-12">
6084
<label class="events-label">Current Filters: </label>
6185
</div>
@@ -206,6 +230,7 @@
206230
}
207231
],
208232
resultsCount: $scope.items.length,
233+
totalCount: $scope.allItems.length,
209234
appliedFilters: [],
210235
onFilterChange: filterChange
211236
};

‎src/filters/filters.less

+50
Original file line numberDiff line numberDiff line change
@@ -98,3 +98,53 @@ pf-filter-panel {
9898
padding-left: 4px;
9999
}
100100
}
101+
102+
.filter-pf {
103+
&.inline-filter-pf {
104+
flex: 1 1 100%;
105+
margin: 15px 15px 7px 0;
106+
107+
pf-filter-fields,
108+
pf-filter-results {
109+
display: inline-block;
110+
}
111+
112+
.form-group {
113+
margin-bottom: 0;
114+
margin-right: 15px;
115+
}
116+
117+
.toolbar-pf-results {
118+
border-top: none;
119+
margin: 0;
120+
121+
.col-sm-12 {
122+
float: left;
123+
padding: 0;
124+
}
125+
126+
h5,
127+
p,
128+
ul {
129+
line-height: 1.43;
130+
padding-bottom: 6px;
131+
padding-top: 6px;
132+
}
133+
134+
.list-inline {
135+
margin-bottom: -5px;
136+
padding-right: 5px;
137+
138+
> li {
139+
margin-bottom: 5px;
140+
}
141+
}
142+
}
143+
}
144+
145+
.toolbar-pf-results {
146+
.list-inline {
147+
margin-left: 0;
148+
}
149+
}
150+
}

‎src/filters/simple-filter/filter-fields.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="filter-pf filter-fields">
22
<div class="input-group form-group">
33
<div uib-dropdown class="input-group-btn">
4-
<button uib-dropdown-toggle type="button" class="btn btn-default filter-fields"
4+
<button ng-if="$ctrl.config.fields.length > 1" uib-dropdown-toggle type="button" class="btn btn-default filter-fields"
55
uib-tooltip="Filter by" tooltip-placement="top" tooltip-append-to-body="true">
66
{{$ctrl.currentField.title}}
77
<span class="caret"></span>

‎src/filters/simple-filter/filter-results-component.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@
2121
* <li>.resultsCount - (int) The number of results returned after the current applied filters have been applied
2222
* <li>.selectedCount - (int) The number selected items, The 'n' in the label: 'n' of 'm' selected
2323
* <li>.totalCount - (int) The total number of items before any filters have been applied. The 'm' in the label: 'n' of 'm' selected
24+
* <li>.showTotalCountResults - (Boolean) Optional, flag to show the total count in the filter results (ie. x of y Results)
25+
* <li>.itemsLabel - (String) Optional label to use for the items (default: Result)
26+
* <li>.itemsLabelPlural - (String) Optional label to use for the items when plural (default: Results)
2427
* <li>.onFilterChange - ( function(array of filters) ) Function to call when the applied filters list changes
2528
* </ul>
2629
*
@@ -50,7 +53,7 @@ angular.module('patternfly.filters').component('pfFilterResults', {
5053
ctrl.$doCheck = function () {
5154
// do a deep compare on config
5255
if (!angular.equals(ctrl.config, prevConfig)) {
53-
// setupConfig();
56+
setupConfig();
5457
}
5558
};
5659

@@ -63,6 +66,9 @@ angular.module('patternfly.filters').component('pfFilterResults', {
6366
if (ctrl.config.resultsCount === undefined) {
6467
ctrl.config.resultsCount = 0;
6568
}
69+
70+
ctrl.config.itemsLabel = ctrl.config.itemsLabel || 'Result';
71+
ctrl.config.itemsLabelPlural = ctrl.config.itemsLabelPlural || 'Results';
6672
}
6773

6874
function clearFilter (item) {

‎src/filters/simple-filter/filter-results.html

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
<div class="filter-pf">
22
<div class="row toolbar-pf-results">
33
<div class="col-sm-12">
4-
<h5>{{$ctrl.config.resultsCount}} Results</h5>
5-
<p ng-if="$ctrl.config.appliedFilters.length > 0">Active filters:</p>
4+
<span ng-if="$ctrl.config.showTotalCountResults !== true || $ctrl.config.totalCount === undefined || $ctrl.config.appliedFilters.length === 0">
5+
<h5 ng-if="$ctrl.config.resultsCount === 1">{{$ctrl.config.resultsCount}} {{$ctrl.config.itemsLabel}}</h5>
6+
<h5 ng-if="$ctrl.config.resultsCount !== 1">{{$ctrl.config.resultsCount}} {{$ctrl.config.itemsLabelPlural}}</h5>
7+
</span>
8+
<span ng-if="$ctrl.config.showTotalCountResults === true && $ctrl.config.totalCount !== undefined && $ctrl.config.appliedFilters.length > 0">
9+
<h5 ng-if="$ctrl.config.totalCount === 1">{{$ctrl.config.resultsCount}} of {{$ctrl.config.totalCount}} {{$ctrl.config.itemsLabel}}</h5>
10+
<h5 ng-if="$ctrl.config.totalCount !== 1">{{$ctrl.config.resultsCount}} of {{$ctrl.config.totalCount}} {{$ctrl.config.itemsLabelPlural}}</h5>
11+
</span>
12+
<p ng-if="$ctrl.config.appliedFilters.length > 0">Active Filters:</p>
613
<ul class="list-inline">
714
<li ng-repeat="filter in $ctrl.config.appliedFilters">
815
<span class="active-filter label label-info">

‎src/filters/simple-filter/filter.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="filter-pf">
1+
<div class="filter-pf" ng-class="{'inline-filter-pf': $ctrl.config.inlineResults === true}">
22
<pf-filter-fields config="$ctrl.config" add-filter-fn="$ctrl.addFilter"></pf-filter-fields>
33
<pf-filter-results config="$ctrl.config"></pf-filter-results>
44
</div>

‎test/filters/filter.spec.js

+54
Original file line numberDiff line numberDiff line change
@@ -207,4 +207,58 @@ describe('Directive: pfFilter', function () {
207207

208208
expect(element.find('.pf-table-view-selected-label').text()).toContain('0 of 10 selected');
209209
});
210+
211+
it('should show results inline only when specified', function() {
212+
expect(element.find('.filter-pf.inline-filter-pf').length).toBe(0);
213+
214+
$scope.filterConfig.inlineResults = true;
215+
216+
$scope.$digest();
217+
218+
expect(element.find('.filter-pf.inline-filter-pf').length).toBe(1);
219+
});
220+
221+
it('should show the total count in the results only when specified', function() {
222+
$scope.filterConfig.appliedFilters = [
223+
{
224+
id: 'address',
225+
title: 'Address',
226+
value: 'New York'
227+
}
228+
];
229+
$scope.$digest();
230+
231+
expect(element.find('.toolbar-pf-results h5').text()).toContain('5 Results');
232+
233+
$scope.filterConfig.showTotalCountResults = true;
234+
$scope.filterConfig.totalCount = 10;
235+
236+
$scope.$digest();
237+
238+
expect(element.find('.toolbar-pf-results h5').text()).toContain('5 of 10 Results');
239+
});
240+
241+
it('should use the given results label when specified', function() {
242+
$scope.filterConfig.showTotalCountResults = true;
243+
$scope.filterConfig.resultsCount = 1;
244+
$scope.filterConfig.totalCount = 1;
245+
$scope.filterConfig.itemsLabel = 'Item';
246+
$scope.filterConfig.itemsLabelPlural = 'Items';
247+
248+
$scope.filterConfig.appliedFilters = [
249+
{
250+
id: 'address',
251+
title: 'Address',
252+
value: 'New York'
253+
}
254+
];
255+
$scope.$digest();
256+
257+
expect(element.find('.toolbar-pf-results h5').text()).toContain('1 of 1 Item');
258+
259+
$scope.filterConfig.totalCount = 2;
260+
$scope.$digest();
261+
262+
expect(element.find('.toolbar-pf-results h5').text()).toContain('1 of 2 Items');
263+
});
210264
});

0 commit comments

Comments
 (0)