Skip to content

Commit 97a498e

Browse files
jeff-phillips-18jeff-phillips-18
committed
Change pfSimpleFilter directive to use two sub-component directives
1 parent 23959e0 commit 97a498e

12 files changed

+402
-176
lines changed

‎dist/angular-patternfly.js‎

Lines changed: 169 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1720,48 +1720,15 @@ angular.module('patternfly.charts').directive('pfUtilizationChart',
17201720
</example>
17211721
*/
17221722
angular.module('patternfly.filters').directive('pfSimpleFilter',
1723-
["$document", function ($document) {
1723+
function () {
17241724
'use strict';
17251725
return {
17261726
restrict: 'A',
17271727
scope: {
17281728
config: '='
17291729
},
1730-
transclude: false,
17311730
templateUrl: 'filters/simple-filter.html',
17321731
controller: ["$scope", function ($scope) {
1733-
var defaultConfig = {
1734-
fields: [],
1735-
resultsCount: 0
1736-
};
1737-
1738-
$scope.setupConfig = function () {
1739-
$scope.config = angular.merge({}, defaultConfig, $scope.config);
1740-
1741-
if (!$scope.currentField) {
1742-
$scope.currentField = $scope.config.fields[0];
1743-
$scope.config.currentValue = null;
1744-
}
1745-
1746-
if ($scope.config.currentValue === undefined) {
1747-
$scope.config.currentValue = null;
1748-
}
1749-
1750-
if (!$scope.config.appliedFilters) {
1751-
$scope.config.appliedFilters = [];
1752-
}
1753-
};
1754-
1755-
$scope.selectField = function (item) {
1756-
$scope.currentField = item;
1757-
$scope.config.currentValue = null;
1758-
};
1759-
1760-
$scope.selectValue = function (filterValue) {
1761-
$scope.addFilter($scope.currentField, filterValue);
1762-
$scope.config.currentValue = null;
1763-
};
1764-
17651732
$scope.filterExists = function (filter) {
17661733
var found = false;
17671734
$scope.config.appliedFilters.forEach(function (nextFilter) {
@@ -1786,44 +1753,155 @@ angular.module('patternfly.filters').directive('pfSimpleFilter',
17861753
}
17871754
}
17881755
};
1756+
}]
1757+
};
1758+
}
1759+
);
1760+
;/**
1761+
* @ngdoc directive
1762+
* @name patternfly.filters.directive:pfSimpleFilterFields
1763+
*
1764+
* @description
1765+
* Directive for the simple filter bar's filter entry components
1766+
* <br><br>
1767+
*
1768+
* @param {object} config configuration settings for the filters:<br/>
1769+
* <ul style='list-style-type: none'>
1770+
* <li>.fields - (Array) List of filterable fields containing:
1771+
* <ul style='list-style-type: none'>
1772+
* <li>.id - (String) Optional unique Id for the filter field, useful for comparisons
1773+
* <li>.title - (String) The title to display for the filter field
1774+
* <li>.placeholder - (String) Text to display when no filter value has been entered
1775+
* <li>.filterType - (String) The filter input field type (any html input type, or 'select' for a select box)
1776+
* <li>.filterValues - (Array) List of valid select values used when filterType is 'select'
1777+
* </ul>
1778+
* <li>.appliedFilters - (Array) List of the currently applied filters
1779+
* </ul>
1780+
*
1781+
*/
1782+
angular.module('patternfly.filters').directive('pfSimpleFilterFields',
1783+
function () {
1784+
'use strict';
1785+
return {
1786+
restrict: 'A',
1787+
scope: {
1788+
config: '=',
1789+
addFilterFn: '='
1790+
},
1791+
templateUrl: 'filters/simple-filter-fields.html',
1792+
controller: ["$scope", function ($scope) {
1793+
$scope.setupConfig = function () {
1794+
if ($scope.fields === undefined) {
1795+
$scope.fields = [];
1796+
}
1797+
if (!$scope.currentField) {
1798+
$scope.currentField = $scope.config.fields[0];
1799+
$scope.config.currentValue = null;
1800+
}
1801+
1802+
if ($scope.config.currentValue === undefined) {
1803+
$scope.config.currentValue = null;
1804+
}
1805+
};
17891806

1790-
$scope.onValueKeyPress = function (keyEvent) {
1807+
$scope.$watch('config', function () {
1808+
$scope.setupConfig();
1809+
}, true);
1810+
}],
1811+
1812+
link: function (scope, element, attrs) {
1813+
scope.selectField = function (item) {
1814+
scope.currentField = item;
1815+
scope.config.currentValue = null;
1816+
};
1817+
1818+
scope.selectValue = function (filterValue) {
1819+
scope.addFilterFn(scope.currentField, filterValue);
1820+
scope.config.currentValue = null;
1821+
};
1822+
1823+
scope.onValueKeyPress = function (keyEvent) {
17911824
if (keyEvent.which === 13) {
1792-
$scope.addFilter($scope.currentField, $scope.config.currentValue);
1793-
$scope.config.currentValue = undefined;
1825+
scope.addFilterFn(scope.currentField, scope.config.currentValue);
1826+
scope.config.currentValue = undefined;
1827+
}
1828+
};
1829+
}
1830+
};
1831+
}
1832+
);
1833+
;/**
1834+
* @ngdoc directive
1835+
* @name patternfly.filters.directive:pfSimpleFilterResults
1836+
*
1837+
* @description
1838+
* Directive for the simple filter results components
1839+
* <br><br>
1840+
*
1841+
* @param {object} config configuration settings for the filter results:<br/>
1842+
* <ul style='list-style-type: none'>
1843+
* <li>.fields - (Array) List of filterable fields containing:
1844+
* <ul style='list-style-type: none'>
1845+
* <li>.id - (String) Optional unique Id for the filter field, useful for comparisons
1846+
* <li>.title - (String) The title to display for the filter field
1847+
* <li>.placeholder - (String) Text to display when no filter value has been entered
1848+
* <li>.filterType - (String) The filter input field type (any html input type, or 'select' for a select box)
1849+
* <li>.filterValues - (Array) List of valid select values used when filterType is 'select'
1850+
* </ul>
1851+
* <li>.appliedFilters - (Array) List of the currently applied filters
1852+
* <li>.resultsCount - (int) The number of results returned after the current applied filters have been applied
1853+
* <li>.onFilterChange - ( function(array of filters) ) Function to call when the applied filters list changes
1854+
* </ul>
1855+
*
1856+
*/
1857+
angular.module('patternfly.filters').directive('pfSimpleFilterResults',
1858+
function () {
1859+
'use strict';
1860+
return {
1861+
restrict: 'A',
1862+
scope: {
1863+
config: '='
1864+
},
1865+
templateUrl: 'filters/simple-filter-results.html',
1866+
controller: ["$scope", function ($scope) {
1867+
$scope.setupConfig = function () {
1868+
if (!$scope.config.appliedFilters) {
1869+
$scope.config.appliedFilters = [];
1870+
}
1871+
if ($scope.config.resultsCount === undefined) {
1872+
$scope.config.resultsCount = 0;
17941873
}
17951874
};
17961875

1797-
$scope.clearFilter = function (item) {
1876+
$scope.$watch('config', function () {
1877+
$scope.setupConfig();
1878+
}, true);
1879+
}],
1880+
link: function (scope, element, attrs) {
1881+
scope.clearFilter = function (item) {
17981882
var newFilters = [];
1799-
$scope.config.appliedFilters.forEach(function (filter) {
1883+
scope.config.appliedFilters.forEach(function (filter) {
18001884
if (item.title !== filter.title || item.value !== filter.value) {
18011885
newFilters.push(filter);
18021886
}
18031887
});
1804-
$scope.config.appliedFilters = newFilters;
1888+
scope.config.appliedFilters = newFilters;
18051889

1806-
if ($scope.config.onFilterChange) {
1807-
$scope.config.onFilterChange($scope.config.appliedFilters);
1890+
if (scope.config.onFilterChange) {
1891+
scope.config.onFilterChange(scope.config.appliedFilters);
18081892
}
18091893
};
18101894

1811-
$scope.clearAllFilters = function () {
1812-
$scope.config.appliedFilters = [];
1895+
scope.clearAllFilters = function () {
1896+
scope.config.appliedFilters = [];
18131897

1814-
if ($scope.config.onFilterChange) {
1815-
$scope.config.onFilterChange($scope.config.appliedFilters);
1898+
if (scope.config.onFilterChange) {
1899+
scope.config.onFilterChange(scope.config.appliedFilters);
18161900
}
18171901
};
1818-
}],
1819-
1820-
link: function (scope, element, attrs) {
1821-
scope.$watch('config', function () {
1822-
scope.setupConfig();
1823-
}, true);
18241902
}
18251903
};
1826-
}]
1904+
}
18271905
);
18281906
;/**
18291907
* @ngdoc directive
@@ -3951,7 +4029,33 @@ angular.module('patternfly.views').directive('pfDataToolbar',
39514029
$scope.checkViewDisabled = function (view) {
39524030
return $scope.config.viewsConfig.checkViewDisabled && $scope.config.viewsConfig.checkViewDisabled(view);
39534031
};
4032+
4033+
$scope.filterExists = function (filter) {
4034+
var found = false;
4035+
$scope.config.filterConfig.appliedFilters.forEach(function (nextFilter) {
4036+
if (nextFilter.title === filter.title && nextFilter.value === filter.value) {
4037+
found = true;
4038+
}
4039+
});
4040+
return found;
4041+
};
4042+
4043+
$scope.addFilter = function (field, value) {
4044+
var newFilter = {
4045+
id: field.id,
4046+
title: field.title,
4047+
value: value
4048+
};
4049+
if (!$scope.filterExists(newFilter)) {
4050+
$scope.config.filterConfig.appliedFilters.push(newFilter);
4051+
4052+
if ($scope.config.filterConfig.onFilterChange) {
4053+
$scope.config.filterConfig.onFilterChange($scope.config.filterConfig.appliedFilters);
4054+
}
4055+
}
4056+
};
39544057
}],
4058+
39554059
link: function (scope, element, attrs) {
39564060
scope.$watch('config', function () {
39574061
if (scope.config && scope.config.viewsConfig && scope.config.viewsConfig.views) {
@@ -4046,8 +4150,18 @@ angular.module('patternfly.views').directive('pfDataToolbar',
40464150
;angular.module('patternfly.filters').run(['$templateCache', function($templateCache) {
40474151
'use strict';
40484152

4153+
$templateCache.put('filters/simple-filter-fields.html',
4154+
"<div class=simple-filter><form><div class=form-group><div class=input-group><div dropdown class=input-group-btn><button dropdown-toggle type=button class=\"btn btn-default dropdown-toggle filter-fields\" data-toggle=dropdown aria-haspopup=true aria-expanded=false>{{currentField.title}} <span class=caret></span></button><ul class=dropdown-menu><li ng-repeat=\"item in config.fields\"><a class=filter-field role=menuitem tabindex=-1 ng-click=selectField(item)>{{item.title}}</a></li></ul></div><input class=form-control type={{currentField.filterType}} ng-model=config.currentValue placeholder={{currentField.placeholder}} ng-keypress=onValueKeyPress($event) ng-if=\"currentField.filterType !== 'select'\"><select pf-select class=\"form-control filter-select\" id=currentValue ng-model=config.currentValue ng-options=\"o as o for o in currentField.filterValues\" ng-if=\"currentField.filterType === 'select'\" ng-change=selectValue(config.currentValue)><option value=\"\">{{currentField.placeholder}}</option></select></div></div></form></div>"
4155+
);
4156+
4157+
4158+
$templateCache.put('filters/simple-filter-results.html',
4159+
"<div class=simple-filter><div class=\"row toolbar-pf-results\"><div class=col-sm-12><h5>{{config.resultsCount}} Results</h5><p ng-if=\"config.appliedFilters.length > 0\">Active filters:</p><ul class=list-inline><li ng-repeat=\"filter in config.appliedFilters\"><span class=\"active-filter label label-info\">{{filter.title}}: {{filter.value}} <a href=#><span class=\"pficon pficon-close\" ng-click=clearFilter(filter)></span></a></span></li></ul><p><a href=# class=clear-filters ng-click=clearAllFilters() ng-if=\"config.appliedFilters.length > 0\">Clear All Filters</a></p></div><!-- /col --></div><!-- /row --></div>"
4160+
);
4161+
4162+
40494163
$templateCache.put('filters/simple-filter.html',
4050-
"<div class=simple-filter><form><div class=form-group><div class=input-group><div dropdown class=input-group-btn><button dropdown-toggle type=button class=\"btn btn-default dropdown-toggle filter-fields\" data-toggle=dropdown aria-haspopup=true aria-expanded=false>{{currentField.title}} <span class=caret></span></button><ul class=dropdown-menu><li ng-repeat=\"item in config.fields\"><a class=filter-field role=menuitem tabindex=-1 ng-click=selectField(item)>{{item.title}}</a></li></ul></div><input class=form-control type={{currentField.filterType}} ng-model=config.currentValue placeholder={{currentField.placeholder}} ng-keypress=onValueKeyPress($event) ng-if=\"currentField.filterType !== 'select'\"><select pf-select class=\"form-control filter-select\" id=currentValue ng-model=config.currentValue ng-options=\"o as o for o in currentField.filterValues\" ng-if=\"currentField.filterType === 'select'\" ng-change=selectValue(config.currentValue)><option value=\"\">{{currentField.placeholder}}</option></select></div><!-- /input-group --></div></form><div class=\"row toolbar-pf-results\"><div class=col-sm-12><h5>{{config.resultsCount}} Results</h5><p ng-if=\"config.appliedFilters.length > 0\">Active filters:</p><ul class=list-inline><li ng-repeat=\"filter in config.appliedFilters\"><span class=\"active-filter label label-info\">{{filter.title}}: {{filter.value}} <a href=#><span class=\"pficon pficon-close\" ng-click=clearFilter(filter)></span></a></span></li></ul><p><a class=clear-filters ng-click=clearAllFilters() ng-if=\"config.appliedFilters.length > 0\">Clear All Filters</a></p></div><!-- /col --></div><!-- /row --></div>"
4164+
"<div class=simple-filter><div pf-simple-filter-fields config=config add-filter-fn=addFilter></div><div pf-simple-filter-results config=config></div></div>"
40514165
);
40524166

40534167
}]);
@@ -4104,7 +4218,7 @@ angular.module('patternfly.views').directive('pfDataToolbar',
41044218

41054219

41064220
$templateCache.put('views/toolbar/data-toolbar.html',
4107-
"<div class=\"row toolbar-pf\"><div class=col-sm-12><div class=\"toolbar-pf-view-selector pull-right\" ng-if=\"config.viewsConfig && config.viewsConfig.views\"><ul class=list-inline><li ng-repeat=\"view in config.viewsConfig.viewsList\" ng-class=\"{'active': isViewSelected(view.id), 'disabled': checkViewDisabled(view)}\" title={{view.title}}><a><i class=\"view-selector {{view.iconClass}}\" ng-click=viewSelected(view.id)></i></a></li></ul></div><div pf-simple-filter id={{filterDomId}} config=config.filterConfig ng-if=config.filterConfig></div></div></div>"
4221+
"<div class=\"row toolbar-pf\"><div class=col-sm-12><div class=\"toolbar-pf-view-selector pull-right\" ng-if=\"config.viewsConfig && config.viewsConfig.views\"><ul class=list-inline><li ng-repeat=\"view in config.viewsConfig.viewsList\" ng-class=\"{'active': isViewSelected(view.id), 'disabled': checkViewDisabled(view)}\" title={{view.title}}><a href=#><i class=\"view-selector {{view.iconClass}}\" ng-click=viewSelected(view.id)></i></a></li></ul></div><div pf-simple-filter-fields id={{filterDomId}}_fields config=config.filterConfig ng-if=config.filterConfig add-filter-fn=addFilter></div><div pf-simple-filter-results id={{filterDomId}_results} config=config.filterConfig ng-if=config.filterConfig></div></div></div>"
41084222
);
41094223

41104224
}]);

‎dist/angular-patternfly.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/filters/simple-filter-directive.js‎

Lines changed: 1 addition & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -170,48 +170,15 @@
170170
</example>
171171
*/
172172
angular.module('patternfly.filters').directive('pfSimpleFilter',
173-
function ($document) {
173+
function () {
174174
'use strict';
175175
return {
176176
restrict: 'A',
177177
scope: {
178178
config: '='
179179
},
180-
transclude: false,
181180
templateUrl: 'filters/simple-filter.html',
182181
controller: function ($scope) {
183-
var defaultConfig = {
184-
fields: [],
185-
resultsCount: 0
186-
};
187-
188-
$scope.setupConfig = function () {
189-
$scope.config = angular.merge({}, defaultConfig, $scope.config);
190-
191-
if (!$scope.currentField) {
192-
$scope.currentField = $scope.config.fields[0];
193-
$scope.config.currentValue = null;
194-
}
195-
196-
if ($scope.config.currentValue === undefined) {
197-
$scope.config.currentValue = null;
198-
}
199-
200-
if (!$scope.config.appliedFilters) {
201-
$scope.config.appliedFilters = [];
202-
}
203-
};
204-
205-
$scope.selectField = function (item) {
206-
$scope.currentField = item;
207-
$scope.config.currentValue = null;
208-
};
209-
210-
$scope.selectValue = function (filterValue) {
211-
$scope.addFilter($scope.currentField, filterValue);
212-
$scope.config.currentValue = null;
213-
};
214-
215182
$scope.filterExists = function (filter) {
216183
var found = false;
217184
$scope.config.appliedFilters.forEach(function (nextFilter) {
@@ -236,41 +203,6 @@ angular.module('patternfly.filters').directive('pfSimpleFilter',
236203
}
237204
}
238205
};
239-
240-
$scope.onValueKeyPress = function (keyEvent) {
241-
if (keyEvent.which === 13) {
242-
$scope.addFilter($scope.currentField, $scope.config.currentValue);
243-
$scope.config.currentValue = undefined;
244-
}
245-
};
246-
247-
$scope.clearFilter = function (item) {
248-
var newFilters = [];
249-
$scope.config.appliedFilters.forEach(function (filter) {
250-
if (item.title !== filter.title || item.value !== filter.value) {
251-
newFilters.push(filter);
252-
}
253-
});
254-
$scope.config.appliedFilters = newFilters;
255-
256-
if ($scope.config.onFilterChange) {
257-
$scope.config.onFilterChange($scope.config.appliedFilters);
258-
}
259-
};
260-
261-
$scope.clearAllFilters = function () {
262-
$scope.config.appliedFilters = [];
263-
264-
if ($scope.config.onFilterChange) {
265-
$scope.config.onFilterChange($scope.config.appliedFilters);
266-
}
267-
};
268-
},
269-
270-
link: function (scope, element, attrs) {
271-
scope.$watch('config', function () {
272-
scope.setupConfig();
273-
}, true);
274206
}
275207
};
276208
}

0 commit comments

Comments
 (0)