Skip to content

Commit 4bd1cbe

Browse files
jeff-phillips-18jeff-phillips-18
committed
feat(pfFilter): Add filter options - inline, results count, items label
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 a07d2c7 commit 4bd1cbe

File tree

8 files changed

+144
-6
lines changed

8 files changed

+144
-6
lines changed

Diff for: ‎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
};

Diff for: ‎src/filters/filters.less

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

Diff for: ‎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>

Diff for: ‎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) {

Diff for: ‎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">

Diff for: ‎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>

Diff for: ‎styles/angular-patternfly.less

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import "../node_modules/patternfly/node_modules/bootstrap/less/variables.less";
12
@import "../node_modules/patternfly/dist/less/color-variables.less";
23
@import "misc.less";
34
@import "../src/card/card.less";

Diff for: ‎test/filters/filter.spec.js

+47
Original file line numberDiff line numberDiff line change
@@ -207,4 +207,51 @@ 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 when specified', function() {
212+
$scope.filterConfig.inlineResults = true;
213+
214+
$scope.$digest();
215+
216+
expect(element.find('.filter-pf.inline-filter-pf').length).toBe(1);
217+
});
218+
219+
it('should show the total count in the results when specified', function() {
220+
$scope.filterConfig.showTotalCountResults = true;
221+
$scope.filterConfig.totalCount = 10;
222+
223+
$scope.filterConfig.appliedFilters = [
224+
{
225+
id: 'address',
226+
title: 'Address',
227+
value: 'New York'
228+
}
229+
];
230+
$scope.$digest();
231+
232+
expect(element.find('.toolbar-pf-results h5').text()).toContain('5 of 10 Results');
233+
});
234+
it('should use the given results label when specified', function() {
235+
$scope.filterConfig.showTotalCountResults = true;
236+
$scope.filterConfig.resultsCount = 1;
237+
$scope.filterConfig.totalCount = 1;
238+
$scope.filterConfig.itemsLabel = 'Item';
239+
$scope.filterConfig.itemsLabelPlural = 'Items';
240+
241+
$scope.filterConfig.appliedFilters = [
242+
{
243+
id: 'address',
244+
title: 'Address',
245+
value: 'New York'
246+
}
247+
];
248+
$scope.$digest();
249+
250+
expect(element.find('.toolbar-pf-results h5').text()).toContain('1 of 1 Item');
251+
252+
$scope.filterConfig.totalCount = 2;
253+
$scope.$digest();
254+
255+
expect(element.find('.toolbar-pf-results h5').text()).toContain('1 of 2 Items');
256+
});
210257
});

0 commit comments

Comments
 (0)