Skip to content

Commit bf4c70b

Browse files
author
Walden Raines
committed
Merge pull request #83 from jeff-phillips-18/toolbar
Change pfSimpleFilter directive to use two sub-component directives
2 parents 23959e0 + 32c2b48 commit bf4c70b

16 files changed

+408
-191
lines changed

‎dist/angular-patternfly.js

Lines changed: 165 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1720,24 +1720,75 @@ 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
1732+
$scope.filterExists = function (filter) {
1733+
var foundFilter = _.findWhere($scope.config.appliedFilters, {title: filter.title, value: filter.value});
1734+
return foundFilter !== undefined;
17361735
};
17371736

1738-
$scope.setupConfig = function () {
1739-
$scope.config = angular.merge({}, defaultConfig, $scope.config);
1737+
$scope.addFilter = function (field, value) {
1738+
var newFilter = {
1739+
id: field.id,
1740+
title: field.title,
1741+
value: value
1742+
};
1743+
if (!$scope.filterExists(newFilter)) {
1744+
$scope.config.appliedFilters.push(newFilter);
17401745

1746+
if ($scope.config.onFilterChange) {
1747+
$scope.config.onFilterChange($scope.config.appliedFilters);
1748+
}
1749+
}
1750+
};
1751+
}]
1752+
};
1753+
}
1754+
);
1755+
;/**
1756+
* @ngdoc directive
1757+
* @name patternfly.filters.directive:pfSimpleFilterFields
1758+
*
1759+
* @description
1760+
* Directive for the simple filter bar's filter entry components
1761+
* <br><br>
1762+
*
1763+
* @param {object} config configuration settings for the filters:<br/>
1764+
* <ul style='list-style-type: none'>
1765+
* <li>.fields - (Array) List of filterable fields containing:
1766+
* <ul style='list-style-type: none'>
1767+
* <li>.id - (String) Optional unique Id for the filter field, useful for comparisons
1768+
* <li>.title - (String) The title to display for the filter field
1769+
* <li>.placeholder - (String) Text to display when no filter value has been entered
1770+
* <li>.filterType - (String) The filter input field type (any html input type, or 'select' for a select box)
1771+
* <li>.filterValues - (Array) List of valid select values used when filterType is 'select'
1772+
* </ul>
1773+
* <li>.appliedFilters - (Array) List of the currently applied filters
1774+
* </ul>
1775+
*
1776+
*/
1777+
angular.module('patternfly.filters').directive('pfSimpleFilterFields',
1778+
function () {
1779+
'use strict';
1780+
return {
1781+
restrict: 'A',
1782+
scope: {
1783+
config: '=',
1784+
addFilterFn: '='
1785+
},
1786+
templateUrl: 'filters/simple-filter-fields.html',
1787+
controller: ["$scope", function ($scope) {
1788+
$scope.setupConfig = function () {
1789+
if ($scope.fields === undefined) {
1790+
$scope.fields = [];
1791+
}
17411792
if (!$scope.currentField) {
17421793
$scope.currentField = $scope.config.fields[0];
17431794
$scope.config.currentValue = null;
@@ -1746,84 +1797,106 @@ angular.module('patternfly.filters').directive('pfSimpleFilter',
17461797
if ($scope.config.currentValue === undefined) {
17471798
$scope.config.currentValue = null;
17481799
}
1749-
1750-
if (!$scope.config.appliedFilters) {
1751-
$scope.config.appliedFilters = [];
1752-
}
17531800
};
17541801

1755-
$scope.selectField = function (item) {
1756-
$scope.currentField = item;
1757-
$scope.config.currentValue = null;
1758-
};
1802+
$scope.$watch('config', function () {
1803+
$scope.setupConfig();
1804+
}, true);
1805+
}],
17591806

1760-
$scope.selectValue = function (filterValue) {
1761-
$scope.addFilter($scope.currentField, filterValue);
1762-
$scope.config.currentValue = null;
1807+
link: function (scope, element, attrs) {
1808+
scope.selectField = function (item) {
1809+
scope.currentField = item;
1810+
scope.config.currentValue = null;
17631811
};
17641812

1765-
$scope.filterExists = function (filter) {
1766-
var found = false;
1767-
$scope.config.appliedFilters.forEach(function (nextFilter) {
1768-
if (nextFilter.title === filter.title && nextFilter.value === filter.value) {
1769-
found = true;
1770-
}
1771-
});
1772-
return found;
1813+
scope.selectValue = function (filterValue) {
1814+
scope.addFilterFn(scope.currentField, filterValue);
1815+
scope.config.currentValue = null;
17731816
};
17741817

1775-
$scope.addFilter = function (field, value) {
1776-
var newFilter = {
1777-
id: field.id,
1778-
title: field.title,
1779-
value: value
1780-
};
1781-
if (!$scope.filterExists(newFilter)) {
1782-
$scope.config.appliedFilters.push(newFilter);
1783-
1784-
if ($scope.config.onFilterChange) {
1785-
$scope.config.onFilterChange($scope.config.appliedFilters);
1786-
}
1818+
scope.onValueKeyPress = function (keyEvent) {
1819+
if (keyEvent.which === 13) {
1820+
scope.addFilterFn(scope.currentField, scope.config.currentValue);
1821+
scope.config.currentValue = undefined;
17871822
}
17881823
};
1789-
1790-
$scope.onValueKeyPress = function (keyEvent) {
1791-
if (keyEvent.which === 13) {
1792-
$scope.addFilter($scope.currentField, $scope.config.currentValue);
1793-
$scope.config.currentValue = undefined;
1824+
}
1825+
};
1826+
}
1827+
);
1828+
;/**
1829+
* @ngdoc directive
1830+
* @name patternfly.filters.directive:pfSimpleFilterResults
1831+
*
1832+
* @description
1833+
* Directive for the simple filter results components
1834+
* <br><br>
1835+
*
1836+
* @param {object} config configuration settings for the filter results:<br/>
1837+
* <ul style='list-style-type: none'>
1838+
* <li>.fields - (Array) List of filterable fields containing:
1839+
* <ul style='list-style-type: none'>
1840+
* <li>.id - (String) Optional unique Id for the filter field, useful for comparisons
1841+
* <li>.title - (String) The title to display for the filter field
1842+
* <li>.placeholder - (String) Text to display when no filter value has been entered
1843+
* <li>.filterType - (String) The filter input field type (any html input type, or 'select' for a select box)
1844+
* <li>.filterValues - (Array) List of valid select values used when filterType is 'select'
1845+
* </ul>
1846+
* <li>.appliedFilters - (Array) List of the currently applied filters
1847+
* <li>.resultsCount - (int) The number of results returned after the current applied filters have been applied
1848+
* <li>.onFilterChange - ( function(array of filters) ) Function to call when the applied filters list changes
1849+
* </ul>
1850+
*
1851+
*/
1852+
angular.module('patternfly.filters').directive('pfSimpleFilterResults',
1853+
function () {
1854+
'use strict';
1855+
return {
1856+
restrict: 'A',
1857+
scope: {
1858+
config: '='
1859+
},
1860+
templateUrl: 'filters/simple-filter-results.html',
1861+
controller: ["$scope", function ($scope) {
1862+
$scope.setupConfig = function () {
1863+
if (!$scope.config.appliedFilters) {
1864+
$scope.config.appliedFilters = [];
1865+
}
1866+
if ($scope.config.resultsCount === undefined) {
1867+
$scope.config.resultsCount = 0;
17941868
}
17951869
};
17961870

1797-
$scope.clearFilter = function (item) {
1871+
$scope.$watch('config', function () {
1872+
$scope.setupConfig();
1873+
}, true);
1874+
}],
1875+
link: function (scope, element, attrs) {
1876+
scope.clearFilter = function (item) {
17981877
var newFilters = [];
1799-
$scope.config.appliedFilters.forEach(function (filter) {
1878+
scope.config.appliedFilters.forEach(function (filter) {
18001879
if (item.title !== filter.title || item.value !== filter.value) {
18011880
newFilters.push(filter);
18021881
}
18031882
});
1804-
$scope.config.appliedFilters = newFilters;
1883+
scope.config.appliedFilters = newFilters;
18051884

1806-
if ($scope.config.onFilterChange) {
1807-
$scope.config.onFilterChange($scope.config.appliedFilters);
1885+
if (scope.config.onFilterChange) {
1886+
scope.config.onFilterChange(scope.config.appliedFilters);
18081887
}
18091888
};
18101889

1811-
$scope.clearAllFilters = function () {
1812-
$scope.config.appliedFilters = [];
1890+
scope.clearAllFilters = function () {
1891+
scope.config.appliedFilters = [];
18131892

1814-
if ($scope.config.onFilterChange) {
1815-
$scope.config.onFilterChange($scope.config.appliedFilters);
1893+
if (scope.config.onFilterChange) {
1894+
scope.config.onFilterChange(scope.config.appliedFilters);
18161895
}
18171896
};
1818-
}],
1819-
1820-
link: function (scope, element, attrs) {
1821-
scope.$watch('config', function () {
1822-
scope.setupConfig();
1823-
}, true);
18241897
}
18251898
};
1826-
}]
1899+
}
18271900
);
18281901
;/**
18291902
* @ngdoc directive
@@ -3951,7 +4024,28 @@ angular.module('patternfly.views').directive('pfDataToolbar',
39514024
$scope.checkViewDisabled = function (view) {
39524025
return $scope.config.viewsConfig.checkViewDisabled && $scope.config.viewsConfig.checkViewDisabled(view);
39534026
};
4027+
4028+
$scope.filterExists = function (filter) {
4029+
var foundFilter = _.findWhere($scope.config.filterConfig.appliedFilters, {title: filter.title, value: filter.value});
4030+
return foundFilter !== undefined;
4031+
};
4032+
4033+
$scope.addFilter = function (field, value) {
4034+
var newFilter = {
4035+
id: field.id,
4036+
title: field.title,
4037+
value: value
4038+
};
4039+
if (!$scope.filterExists(newFilter)) {
4040+
$scope.config.filterConfig.appliedFilters.push(newFilter);
4041+
4042+
if ($scope.config.filterConfig.onFilterChange) {
4043+
$scope.config.filterConfig.onFilterChange($scope.config.filterConfig.appliedFilters);
4044+
}
4045+
}
4046+
};
39544047
}],
4048+
39554049
link: function (scope, element, attrs) {
39564050
scope.$watch('config', function () {
39574051
if (scope.config && scope.config.viewsConfig && scope.config.viewsConfig.views) {
@@ -4046,8 +4140,18 @@ angular.module('patternfly.views').directive('pfDataToolbar',
40464140
;angular.module('patternfly.filters').run(['$templateCache', function($templateCache) {
40474141
'use strict';
40484142

4143+
$templateCache.put('filters/simple-filter-fields.html',
4144+
"<div class=\"simple-filter filter-fields\"><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=\"filterValue for filterValue in currentField.filterValues\" ng-if=\"currentField.filterType === 'select'\" ng-change=selectValue(config.currentValue)><option value=\"\">{{currentField.placeholder}}</option></select></div></div></form></div>"
4145+
);
4146+
4147+
4148+
$templateCache.put('filters/simple-filter-results.html',
4149+
"<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>"
4150+
);
4151+
4152+
40494153
$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>"
4154+
"<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>"
40514155
);
40524156

40534157
}]);
@@ -4104,7 +4208,7 @@ angular.module('patternfly.views').directive('pfDataToolbar',
41044208

41054209

41064210
$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>"
4211+
"<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>"
41084212
);
41094213

41104214
}]);

‎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.

‎dist/styles/angular-patternfly.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -293,6 +293,11 @@
293293
cursor: pointer;
294294
}
295295

296+
.simple-filter.filter-fields .form-group {
297+
padding-left: 0;
298+
width: 275px;
299+
}
300+
296301
.filter-select .btn-default {
297302
font-size: 12px;
298303
font-style: italic;

0 commit comments

Comments
 (0)