src/filters/simple-filter/filter-results-component.js
/**
* @ngdoc directive
* @name patternfly.filters.directive:pfFilterResults
* @restrict E
*
* @description
* Component for the filter results
* <br><br>
*
* @param {object} config configuration settings for the filter results:<br/>
* <ul style='list-style-type: none'>
* <li>.fields - (Array) List of filterable fields containing:
* <ul style='list-style-type: none'>
* <li>.id - (String) Optional unique Id for the filter field, useful for comparisons
* <li>.title - (String) The title to display for the filter field
* <li>.placeholder - (String) Text to display when no filter value has been entered
* <li>.filterType - (String) The filter input field type (any html input type, or 'select' for a select box)
* <li>.filterValues - (Array) List of valid select values used when filterType is 'select'
* </ul>
* <li>.appliedFilters - (Array) List of the currently applied filters
* <li>.resultsCount - (int) The number of results returned after the current applied filters have been applied
* <li>.selectedCount - (int) The number selected items, The 'n' in the label: 'n' of 'm' selected
* <li>.totalCount - (int) The total number of items before any filters have been applied. The 'm' in the label: 'n' of 'm' selected
* <li>.showTotalCountResults - (Boolean) Optional, flag to show the total count in the filter results (ie. x of y Results)
* <li>.itemsLabel - (String) Optional label to use for the items (default: Result)
* <li>.itemsLabelPlural - (String) Optional label to use for the items when plural (default: Results)
* <li>.onFilterChange - ( function(array of filters) ) Function to call when the applied filters list changes
* </ul>
*
*/
angular.module('patternfly.filters').component('pfFilterResults', {
bindings: {
config: '='
},
templateUrl: 'filters/simple-filter/filter-results.html',
controller: function () {
'use strict';
var ctrl = this;
var prevConfig;
ctrl.$onInit = function () {
angular.extend(ctrl, {
clearFilter: clearFilter,
clearAllFilters: clearAllFilters
});
};
ctrl.$onChanges = function () {
setupConfig ();
};
ctrl.$doCheck = function () {
// do a deep compare on config
if (!angular.equals(ctrl.config, prevConfig)) {
setupConfig();
}
};
function setupConfig () {
prevConfig = angular.copy(ctrl.config);
if (!ctrl.config.appliedFilters) {
ctrl.config.appliedFilters = [];
}
if (ctrl.config.resultsCount === undefined) {
ctrl.config.resultsCount = 0;
}
ctrl.config.itemsLabel = ctrl.config.itemsLabel || 'Result';
ctrl.config.itemsLabelPlural = ctrl.config.itemsLabelPlural || 'Results';
}
function clearFilter (evt, item) {
var newFilters = [];
evt.preventDefault();
ctrl.config.appliedFilters.forEach(function (filter) {
if (item.title !== filter.title || item.value !== filter.value) {
newFilters.push(filter);
}
});
ctrl.config.appliedFilters = newFilters;
if (ctrl.config.onFilterChange) {
ctrl.config.onFilterChange(ctrl.config.appliedFilters);
}
}
function clearAllFilters (evt) {
evt.preventDefault();
ctrl.config.appliedFilters = [];
if (ctrl.config.onFilterChange) {
ctrl.config.onFilterChange(ctrl.config.appliedFilters);
}
}
}
});