Skip to content

Commit de304a7

Browse files
jeff-phillips-18jeff-phillips-18
committed
Convert sort, filter, and toolbar modules directives to components
1 parent 576d0ef commit de304a7

18 files changed

+473
-453
lines changed

Diff for: ‎src/filters/filter-directive.js renamed to ‎src/filters/examples/filter.js

+4-45
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
/**
22
* @ngdoc directive
3-
* @name patternfly.filters.directive:pfFilter
3+
* @name patternfly.filters.component:pfFilter
44
*
55
* @description
6-
* Directive for a filter bar
6+
* Component for a filter bar
77
* <br><br>
88
*
99
* @param {object} config configuration settings for the filters:<br/>
@@ -26,7 +26,7 @@
2626
<file name="index.html">
2727
<div ng-controller="ViewCtrl" class="row example-container">
2828
<div class="col-md-12">
29-
<div pf-filter id="exampleFilter" config="filterConfig"></div>
29+
<pf-filter id="exampleFilter" config="filterConfig"></pf-filter>
3030
</div>
3131
<hr class="col-md-12">
3232
<div class="col-md-12">
@@ -168,45 +168,4 @@
168168
]);
169169
</file>
170170
</example>
171-
*/
172-
angular.module('patternfly.filters').directive('pfFilter', function () {
173-
'use strict';
174-
return {
175-
restrict: 'A',
176-
scope: {
177-
config: '='
178-
},
179-
templateUrl: 'filters/filter.html',
180-
controller: function ($scope) {
181-
$scope.filterExists = function (filter) {
182-
var foundFilter = _.find($scope.config.appliedFilters, {title: filter.title, value: filter.value});
183-
return foundFilter !== undefined;
184-
};
185-
186-
$scope.enforceSingleSelect = function (filter) {
187-
$scope.config.appliedFilters = _.filter($scope.config.appliedFilters, {title: filter.title});
188-
};
189-
190-
$scope.addFilter = function (field, value) {
191-
var newFilter = {
192-
id: field.id,
193-
title: field.title,
194-
type: field.filterType,
195-
value: value
196-
};
197-
if (!$scope.filterExists(newFilter)) {
198-
199-
if (newFilter.type === 'select') {
200-
$scope.enforceSingleSelect(newFilter);
201-
}
202-
203-
$scope.config.appliedFilters.push(newFilter);
204-
205-
if ($scope.config.onFilterChange) {
206-
$scope.config.onFilterChange($scope.config.appliedFilters);
207-
}
208-
}
209-
};
210-
}
211-
};
212-
});
171+
*/

Diff for: ‎src/filters/filter-component.js

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
angular.module('patternfly.filters').component('pfFilter', {
2+
bindings: {
3+
config: '='
4+
},
5+
templateUrl: 'filters/filter.html',
6+
controller: function () {
7+
'use strict';
8+
9+
var ctrl = this;
10+
11+
ctrl.$onInit = function () {
12+
13+
angular.extend(ctrl,
14+
{
15+
addFilter: addFilter
16+
}
17+
);
18+
};
19+
20+
function filterExists (filter) {
21+
var foundFilter = _.find(ctrl.config.appliedFilters, {title: filter.title, value: filter.value});
22+
return foundFilter !== undefined;
23+
}
24+
25+
function enforceSingleSelect (filter) {
26+
_.remove(ctrl.config.appliedFilters, {title: filter.title});
27+
}
28+
29+
function addFilter (field, value) {
30+
var newFilter = {
31+
id: field.id,
32+
title: field.title,
33+
type: field.filterType,
34+
value: value
35+
};
36+
if (!filterExists(newFilter)) {
37+
38+
if (newFilter.type === 'select') {
39+
enforceSingleSelect(newFilter);
40+
}
41+
42+
ctrl.config.appliedFilters.push(newFilter);
43+
44+
if (ctrl.config.onFilterChange) {
45+
ctrl.config.onFilterChange(ctrl.config.appliedFilters);
46+
}
47+
}
48+
}
49+
}
50+
});

Diff for: ‎src/filters/filter-fields-component.js

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
/**
2+
* @ngdoc directive
3+
* @name patternfly.filters.component:pfFilterFields
4+
*
5+
* @description
6+
* Directive for the filter bar's filter entry components
7+
* <br><br>
8+
*
9+
* @param {object} config configuration settings for the filters:<br/>
10+
* <ul style='list-style-type: none'>
11+
* <li>.fields - (Array) List of filterable fields containing:
12+
* <ul style='list-style-type: none'>
13+
* <li>.id - (String) Optional unique Id for the filter field, useful for comparisons
14+
* <li>.title - (String) The title to display for the filter field
15+
* <li>.placeholder - (String) Text to display when no filter value has been entered
16+
* <li>.filterType - (String) The filter input field type (any html input type, or 'select' for a select box)
17+
* <li>.filterValues - (Array) List of valid select values used when filterType is 'select'
18+
* </ul>
19+
* <li>.appliedFilters - (Array) List of the currently applied filters
20+
* </ul>
21+
*
22+
*/
23+
angular.module('patternfly.filters').component('pfFilterFields', {
24+
bindings: {
25+
config: '=',
26+
addFilterFn: '<'
27+
},
28+
templateUrl: 'filters/filter-fields.html',
29+
controller: function ($scope) {
30+
'use strict';
31+
32+
var ctrl = this;
33+
34+
ctrl.$onInit = function () {
35+
angular.extend(ctrl, {
36+
selectField: selectField,
37+
selectValue: selectValue,
38+
onValueKeyPress: onValueKeyPress
39+
});
40+
};
41+
42+
ctrl.$postLink = function () {
43+
$scope.$watch('config', function () {
44+
setupConfig();
45+
}, true);
46+
};
47+
48+
function selectField (item) {
49+
ctrl.currentField = item;
50+
ctrl.config.currentValue = null;
51+
}
52+
53+
function selectValue (filterValue) {
54+
if (angular.isDefined(filterValue)) {
55+
ctrl.addFilterFn(scope.currentField, filterValue);
56+
ctrl.config.currentValue = null;
57+
}
58+
}
59+
60+
function onValueKeyPress (keyEvent) {
61+
if (keyEvent.which === 13) {
62+
ctrl.addFilterFn(ctrl.currentField, ctrl.config.currentValue);
63+
ctrl.config.currentValue = undefined;
64+
}
65+
}
66+
67+
function setupConfig () {
68+
if (ctrl.fields === undefined) {
69+
ctrl.fields = [];
70+
}
71+
if (!ctrl.currentField) {
72+
ctrl.currentField = ctrl.config.fields[0];
73+
ctrl.config.currentValue = null;
74+
}
75+
76+
if (ctrl.config.currentValue === undefined) {
77+
ctrl.config.currentValue = null;
78+
}
79+
}
80+
}
81+
});

Diff for: ‎src/filters/filter-fields-directive.js

-73
This file was deleted.

Diff for: ‎src/filters/filter-fields.html

+14-14
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,36 @@
22
<div class="input-group form-group">
33
<div uib-dropdown class="input-group-btn">
44
<button uib-dropdown-toggle type="button" class="btn btn-default filter-fields" uib-tooltip="Filter by" tooltip-placement="top">
5-
{{currentField.title}}
5+
{{$ctrl.currentField.title}}
66
<span class="caret"></span>
77
</button>
88
<ul uib-dropdown-menu>
9-
<li ng-repeat="item in config.fields">
10-
<a class="filter-field" role="menuitem" tabindex="-1" ng-click="selectField(item)">
9+
<li ng-repeat="item in $ctrl.config.fields">
10+
<a class="filter-field" role="menuitem" tabindex="-1" ng-click="$ctrl.selectField(item)">
1111
{{item.title}}
1212
</a>
1313
</li>
1414
</ul>
1515
</div>
16-
<div ng-if="currentField.filterType !== 'select'">
17-
<input class="form-control" type="{{currentField.filterType}}" ng-model="config.currentValue"
18-
placeholder="{{currentField.placeholder}}"
19-
ng-keypress="onValueKeyPress($event)"/>
16+
<div ng-if="$ctrl.currentField.filterType !== 'select'">
17+
<input class="form-control" type="{{$ctrl.currentField.filterType}}" ng-model="$ctrl.config.currentValue"
18+
placeholder="{{$ctrl.currentField.placeholder}}"
19+
ng-keypress="$ctrl.onValueKeyPress($event)"/>
2020
</div>
21-
<div ng-if="currentField.filterType === 'select'">
21+
<div ng-if="$ctrl.currentField.filterType === 'select'">
2222
<div class="btn-group bootstrap-select form-control filter-select" uib-dropdown >
2323
<button type="button" uib-dropdown-toggle class="btn btn-default dropdown-toggle">
24-
<span class="filter-option pull-left">{{config.currentValue || currentField.placeholder}}</span>
24+
<span class="filter-option pull-left">{{$ctrl.config.currentValue || $ctrl.currentField.placeholder}}</span>
2525
<span class="caret"></span>
2626
</button>
2727
<ul uib-dropdown-menu class="dropdown-menu-right" role="menu">
28-
<li ng-if="currentField.placeholder" ng-class="{'selected': filterValue === '' || filterValue === null || filterValue === undefined}">
29-
<a role="menuitem" tabindex="-1" ng-click="selectValue()">
30-
{{currentField.placeholder}}
28+
<li ng-if="$ctrl.currentField.placeholder">
29+
<a role="menuitem" tabindex="-1" ng-click="$ctrl.selectValue()">
30+
{{$ctrl.currentField.placeholder}}
3131
</a>
3232
</li>
33-
<li ng-repeat="filterValue in currentField.filterValues" ng-class="{'selected': filterValue === config.currentValue}">
34-
<a role="menuitem" tabindex="-1" ng-click="selectValue(filterValue)">
33+
<li ng-repeat="filterValue in $ctrl.currentField.filterValues" ng-class="{'selected': filterValue === $ctrl.config.currentValue}">
34+
<a role="menuitem" tabindex="-1" ng-click="$ctrl.selectValue(filterValue)">
3535
{{filterValue}}
3636
</a>
3737
</li>

0 commit comments

Comments
 (0)