Skip to content

Commit

Permalink
Convert sort, filter, and toolbar modules directives to components (#376
Browse files Browse the repository at this point in the history
)

* Change version of angular-bootstrap to 2.2.x

Downgrading a bit to avoid issue with 2.3.0:

angular-ui/bootstrap#6364

* Convert sort, filter, and toolbar modules directives to components

* Add restrict E to ng-docs, enforce single select on toolbar filtering.
  • Loading branch information
jeff-phillips-18 authored and dgutride committed Dec 21, 2016
1 parent 629ecea commit 72945a7
Show file tree
Hide file tree
Showing 19 changed files with 486 additions and 454 deletions.
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
"angular": "1.5.*",
"angular-animate": "1.5.*",
"angular-sanitize": "1.5.*",
"angular-bootstrap": "2.3.x",
"angular-bootstrap": "2.2.x",
"lodash": "4.x",
"patternfly": "~3.15.0"
},
Expand Down
50 changes: 5 additions & 45 deletions src/filters/filter-directive.js → src/filters/examples/filter.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
/**
* @ngdoc directive
* @name patternfly.filters.directive:pfFilter
* @name patternfly.filters.component:pfFilter
* @restrict E
*
* @description
* Directive for a filter bar
* Component for a filter bar
* <br><br>
*
* @param {object} config configuration settings for the filters:<br/>
Expand All @@ -26,7 +27,7 @@
<file name="index.html">
<div ng-controller="ViewCtrl" class="row example-container">
<div class="col-md-12">
<div pf-filter id="exampleFilter" config="filterConfig"></div>
<pf-filter id="exampleFilter" config="filterConfig"></pf-filter>
</div>
<hr class="col-md-12">
<div class="col-md-12">
Expand Down Expand Up @@ -168,45 +169,4 @@
]);
</file>
</example>
*/
angular.module('patternfly.filters').directive('pfFilter', function () {
'use strict';
return {
restrict: 'A',
scope: {
config: '='
},
templateUrl: 'filters/filter.html',
controller: function ($scope) {
$scope.filterExists = function (filter) {
var foundFilter = _.find($scope.config.appliedFilters, {title: filter.title, value: filter.value});
return foundFilter !== undefined;
};

$scope.enforceSingleSelect = function (filter) {
$scope.config.appliedFilters = _.filter($scope.config.appliedFilters, {title: filter.title});
};

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

if (newFilter.type === 'select') {
$scope.enforceSingleSelect(newFilter);
}

$scope.config.appliedFilters.push(newFilter);

if ($scope.config.onFilterChange) {
$scope.config.onFilterChange($scope.config.appliedFilters);
}
}
};
}
};
});
*/
50 changes: 50 additions & 0 deletions src/filters/filter-component.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
angular.module('patternfly.filters').component('pfFilter', {
bindings: {
config: '='
},
templateUrl: 'filters/filter.html',
controller: function () {
'use strict';

var ctrl = this;

ctrl.$onInit = function () {

angular.extend(ctrl,
{
addFilter: addFilter
}
);
};

function filterExists (filter) {
var foundFilter = _.find(ctrl.config.appliedFilters, {title: filter.title, value: filter.value});
return foundFilter !== undefined;
}

function enforceSingleSelect (filter) {
_.remove(ctrl.config.appliedFilters, {title: filter.title});
}

function addFilter (field, value) {
var newFilter = {
id: field.id,
title: field.title,
type: field.filterType,
value: value
};
if (!filterExists(newFilter)) {

if (newFilter.type === 'select') {
enforceSingleSelect(newFilter);
}

ctrl.config.appliedFilters.push(newFilter);

if (ctrl.config.onFilterChange) {
ctrl.config.onFilterChange(ctrl.config.appliedFilters);
}
}
}
}
});
82 changes: 82 additions & 0 deletions src/filters/filter-fields-component.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
/**
* @ngdoc directive
* @name patternfly.filters.component:pfFilterFields
* @restrict E
*
* @description
* Directive for the filter bar's filter entry components
* <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
* </ul>
*
*/
angular.module('patternfly.filters').component('pfFilterFields', {
bindings: {
config: '=',
addFilterFn: '<'
},
templateUrl: 'filters/filter-fields.html',
controller: function ($scope) {
'use strict';

var ctrl = this;

ctrl.$onInit = function () {
angular.extend(ctrl, {
selectField: selectField,
selectValue: selectValue,
onValueKeyPress: onValueKeyPress
});
};

ctrl.$postLink = function () {
$scope.$watch('config', function () {
setupConfig();
}, true);
};

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

function selectValue (filterValue) {
if (angular.isDefined(filterValue)) {
ctrl.addFilterFn(scope.currentField, filterValue);
ctrl.config.currentValue = null;
}
}

function onValueKeyPress (keyEvent) {
if (keyEvent.which === 13) {
ctrl.addFilterFn(ctrl.currentField, ctrl.config.currentValue);
ctrl.config.currentValue = undefined;
}
}

function setupConfig () {
if (ctrl.fields === undefined) {
ctrl.fields = [];
}
if (!ctrl.currentField) {
ctrl.currentField = ctrl.config.fields[0];
ctrl.config.currentValue = null;
}

if (ctrl.config.currentValue === undefined) {
ctrl.config.currentValue = null;
}
}
}
});
73 changes: 0 additions & 73 deletions src/filters/filter-fields-directive.js

This file was deleted.

28 changes: 14 additions & 14 deletions src/filters/filter-fields.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,36 +2,36 @@
<div class="input-group form-group">
<div uib-dropdown class="input-group-btn">
<button uib-dropdown-toggle type="button" class="btn btn-default filter-fields" uib-tooltip="Filter by" tooltip-placement="top">
{{currentField.title}}
{{$ctrl.currentField.title}}
<span class="caret"></span>
</button>
<ul uib-dropdown-menu>
<li ng-repeat="item in config.fields">
<a class="filter-field" role="menuitem" tabindex="-1" ng-click="selectField(item)">
<li ng-repeat="item in $ctrl.config.fields">
<a class="filter-field" role="menuitem" tabindex="-1" ng-click="$ctrl.selectField(item)">
{{item.title}}
</a>
</li>
</ul>
</div>
<div ng-if="currentField.filterType !== 'select'">
<input class="form-control" type="{{currentField.filterType}}" ng-model="config.currentValue"
placeholder="{{currentField.placeholder}}"
ng-keypress="onValueKeyPress($event)"/>
<div ng-if="$ctrl.currentField.filterType !== 'select'">
<input class="form-control" type="{{$ctrl.currentField.filterType}}" ng-model="$ctrl.config.currentValue"
placeholder="{{$ctrl.currentField.placeholder}}"
ng-keypress="$ctrl.onValueKeyPress($event)"/>
</div>
<div ng-if="currentField.filterType === 'select'">
<div ng-if="$ctrl.currentField.filterType === 'select'">
<div class="btn-group bootstrap-select form-control filter-select" uib-dropdown >
<button type="button" uib-dropdown-toggle class="btn btn-default dropdown-toggle">
<span class="filter-option pull-left">{{config.currentValue || currentField.placeholder}}</span>
<span class="filter-option pull-left">{{$ctrl.config.currentValue || $ctrl.currentField.placeholder}}</span>
<span class="caret"></span>
</button>
<ul uib-dropdown-menu class="dropdown-menu-right" role="menu">
<li ng-if="currentField.placeholder" ng-class="{'selected': filterValue === '' || filterValue === null || filterValue === undefined}">
<a role="menuitem" tabindex="-1" ng-click="selectValue()">
{{currentField.placeholder}}
<li ng-if="$ctrl.currentField.placeholder">
<a role="menuitem" tabindex="-1" ng-click="$ctrl.selectValue()">
{{$ctrl.currentField.placeholder}}
</a>
</li>
<li ng-repeat="filterValue in currentField.filterValues" ng-class="{'selected': filterValue === config.currentValue}">
<a role="menuitem" tabindex="-1" ng-click="selectValue(filterValue)">
<li ng-repeat="filterValue in $ctrl.currentField.filterValues" ng-class="{'selected': filterValue === $ctrl.config.currentValue}">
<a role="menuitem" tabindex="-1" ng-click="$ctrl.selectValue(filterValue)">
{{filterValue}}
</a>
</li>
Expand Down

0 comments on commit 72945a7

Please sign in to comment.