Skip to content

Add pfSimpleFilter directive with ngDocs/Example and Unit Tests (PF 2.2 Dependent) #67

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 4, 2015
Merged

Add pfSimpleFilter directive with ngDocs/Example and Unit Tests (PF 2.2 Dependent) #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,11 @@ module.exports = function (grunt) {
src: ['charts/**/*.html'],
dest: 'templates/charts.js'
},
'patternfly.filters': {
cwd: 'src/',
src: ['filters/**/*.html'],
dest: 'templates/filters.js'
},
'patternfly.views': {
cwd: 'src/',
src: ['views/**/*.html'],
Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,6 @@
"angular-touch": "1.3.0 - 1.4.*",
"angular-route": "1.3.0 - 1.4.*",
"lodash": "3.x",
"patternfly": "2.1.0"
"patternfly": "2.2.0"
}
}
294 changes: 294 additions & 0 deletions dist/angular-patternfly.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,14 @@ angular.module('patternfly.card', []);
*/
angular.module('patternfly.charts', []);

;/**
* @name patternfly card
*
* @description
* Filters module for patternfly.
*
*/
angular.module('patternfly.filters', ['patternfly.select']);
;/**
* @name patternfly.form
*
Expand All @@ -31,6 +39,7 @@ angular.module('patternfly.form', []);
angular.module('patternfly', [
'patternfly.autofocus',
'patternfly.card',
'patternfly.filter',
'patternfly.form',
'patternfly.notification',
'patternfly.select',
Expand Down Expand Up @@ -1477,6 +1486,283 @@ angular.module('patternfly.charts').directive('pfUtilizationChart',
};
}
);
;/**
* @ngdoc directive
* @name patternfly.fitlers.directive:pfSimpleFilter
*
* @description
* Directive for a simple filter bar
* <br><br>
*
* @param {object} config configuration settings for the filters:<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>.onFilterChange - ( function(array of filters) ) Function to call when the applied filters list changes
* </ul>
*
* @example
<example module="patternfly.filters" deps="patternfly.select">
<file name="index.html">
<div ng-controller="ViewCtrl" class="row example-container">
<div class="col-md-12">
<div pf-simple-filter id="exampleSimpleFilter" config="filterConfig"></div>
</div>
<hr class="col-md-12">
<div class="col-md-12">
<label class="events-label">Valid Items: </label>
</div>
<div class="col-md-12">
<div ng-repeat="item in items" class="col-md-12 cfme-row-column">
<div class="row">
<div class="col-md-3">
<span>{{item.name}}</span>
</div>
<div class="col-md-7">
<span>{{item.address}}</span>
</div>
<div class="col-md-2">
<span>{{item.birthMonth}}</span>
</div>
</div>
</div>
</div>
</br></br>
<div class="col-md-12">
<label class="events-label">Current Filters: </label>
</div>
<div class="col-md-12">
<textarea rows="5" class="col-md-12">{{filtersText}}</textarea>
</div>
</div>
</file>

<file name="script.js">
angular.module('patternfly.filters').controller('ViewCtrl', ['$scope',
function ($scope) {
$scope.filtersText = '';

$scope.allItems = [
{
name: "Fred Flintstone",
address: "20 Dinosaur Way, Bedrock, Washingstone",
birthMonth: 'February'
},
{
name: "John Smith",
address: "415 East Main Street, Norfolk, Virginia",
birthMonth: 'October'
},
{
name: "Frank Livingston",
address: "234 Elm Street, Pittsburgh, Pennsylvania",
birthMonth: 'March'
},
{
name: "Judy Green",
address: "2 Apple Boulevard, Cincinatti, Ohio",
birthMonth: 'December'
},
{
name: "Pat Thomas",
address: "50 Second Street, New York, New York",
birthMonth: 'February'
}
];
$scope.items = $scope.allItems;

var matchesFilter = function (item, filter) {
var match = true;

if (filter.id === 'name') {
match = item.name.match(filter.value) !== null;
} else if (filter.id === 'address') {
match = item.address.match(filter.value) !== null;
} else if (filter.id === 'birthMonth') {
match = item.birthMonth === filter.value;
}
return match;
};

var matchesFilters = function (item, filters) {
var matches = true;

filters.forEach(function(filter) {
if (!matchesFilter(item, filter)) {
matches = false;
return false;
}
});
return matches;
};

var applyFilters = function (filters) {
$scope.items = [];
if (filters && filters.length > 0) {
$scope.allItems.forEach(function (item) {
if (matchesFilters(item, filters)) {
$scope.items.push(item);
}
});
} else {
$scope.items = $scope.allItems;
}
$scope.filterConfig.resultsCount = $scope.items.length;
};

var filterChange = function (filters) {
$scope.filtersText = "";
filters.forEach(function (filter) {
$scope.filtersText += filter.title + " : " + filter.value + "\n";
});
applyFilters(filters);
};

$scope.filterConfig = {
fields: [
{
id: 'name',
title: 'Name',
placeholder: 'Filter by Name',
filterType: 'text'
},
{
id: 'address',
title: 'Address',
placeholder: 'Filter by Address',
filterType: 'text'
},
{
id: 'birthMonth',
title: 'Birth Month',
placeholder: 'Filter by Birth Month',
filterType: 'select',
filterValues: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
}
],
resultsCount: $scope.items.length,
appliedFilters: [],
onFilterChange: filterChange
};
}
]);
</file>
</example>
*/
angular.module('patternfly.filters').directive('pfSimpleFilter',
["$document", function ($document) {
'use strict';
return {
restrict: 'A',
scope: {
config: '='
},
transclude: false,
templateUrl: 'filters/simple-filter.html',
controller: ["$scope", function ($scope) {
var defaultConfig = {
fields: [],
resultsCount: 0
};

$scope.setupConfig = function () {
$scope.config = $.extend(true, angular.copy(defaultConfig), $scope.config);

if (!$scope.currentField) {
$scope.currentField = $scope.config.fields[0];
$scope.config.currentValue = null;
}

if ($scope.config.currentValue === undefined) {
$scope.config.currentValue = null;
}

if (!$scope.config.appliedFilters) {
$scope.config.appliedFilters = [];
}
};

$scope.selectField = function (item) {
$scope.currentField = item;
$scope.config.currentValue = null;
};

$scope.selectValue = function (filterValue) {
$scope.addFilter($scope.currentField, filterValue);
$scope.config.currentValue = null;
};

$scope.filterExists = function (filter) {
var found = false;
$scope.config.appliedFilters.forEach(function (nextFilter) {
if (nextFilter.title === filter.title && nextFilter.value === filter.value) {
found = true;
}
});
return found;
};

$scope.addFilter = function (field, value) {
var newFilter = {
id: field.id,
title: field.title,
value: value
};
if (!$scope.filterExists(newFilter)) {
$scope.config.appliedFilters.push(newFilter);

if ($scope.config.onFilterChange) {
$scope.config.onFilterChange($scope.config.appliedFilters);
}
}
};

$scope.onValueKeyPress = function (keyEvent) {
if (keyEvent.which === 13) {
$scope.addFilter($scope.currentField, $scope.config.currentValue);
$scope.config.currentValue = undefined;
}
};

$scope.clearFilter = function (item) {
var newFilters = [];
$scope.config.appliedFilters.forEach(function (filter) {
if (item.title !== filter.title || item.value !== filter.value) {
newFilters.push(filter);
}
});
$scope.config.appliedFilters = newFilters;

if ($scope.config.onFilterChange) {
$scope.config.onFilterChange($scope.config.appliedFilters);
}
};

$scope.clearAllFilters = function () {
$scope.config.appliedFilters = [];

if ($scope.config.onFilterChange) {
$scope.config.onFilterChange($scope.config.appliedFilters);
}
};
}],

link: function (scope, element, attrs) {
scope.$watch('config', function () {
scope.setupConfig();
}, true);
}
};
}]
);
;/**
* @ngdoc directive
* @name patternfly.form.directive:pfDatepicker
Expand Down Expand Up @@ -3178,6 +3464,14 @@ angular.module('patternfly.views').directive('pfDataTiles', [
"<div class=utilization-chart-pf><h3>{{config.title}}</h3><div class=current-values><h1 class=\"available-count pull-left\"><span>{{currentValue}}</span></h1><div class=\"available-text pull-left\"><div><span>{{currentText}}</span></div><div><span>of {{chartData.total}} {{config.units}}</span></div></div></div><div pf-donut-pct-chart config=donutConfig data=chartData center-label=centerLabel></div><div pf-sparkline-chart config=sparklineConfig chart-data=chartData chart-height=sparklineChartHeight show-x-axis=showSparklineXAxis show-y-axis=showSparklineYAxis></div><span class=\"pull-left legend-text\">{{legendLeftText}}</span> <span class=\"pull-right legend-text\">{{legendRightText}}</span></div>"
);

}]);
;angular.module('patternfly.filters').run(['$templateCache', function($templateCache) {
'use strict';

$templateCache.put('filters/simple-filter.html',
"<div class=simple-filter><form><div class=form-group><div class=input-group><div class=input-group-btn><button 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>"
);

}]);
;angular.module('patternfly.form').run(['$templateCache', function($templateCache) {
'use strict';
Expand Down
3 changes: 2 additions & 1 deletion dist/angular-patternfly.min.js
View file
Open in desktop

Large diffs are not rendered by default.

13 changes: 13 additions & 0 deletions dist/styles/angular-patternfly.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -273,3 +273,16 @@
color: #333;
margin-left: 10px;
}

.simple-filter a {
cursor: pointer;
}

.filter-select .btn-default {
font-size: 12px;
font-style: italic;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This might cause alliasing since we don't have a font library defined for italic

font-weight: 400;
background-color: #ffffff;
background-image: none;
color: #999999;
}
Loading