@@ -168,45 +169,4 @@
]);
- */
-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);
- }
- }
- };
- }
- };
-});
+*/
diff --git a/src/filters/filter-component.js b/src/filters/filter-component.js
new file mode 100644
index 000000000..fadd9b112
--- /dev/null
+++ b/src/filters/filter-component.js
@@ -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);
+ }
+ }
+ }
+ }
+});
diff --git a/src/filters/filter-fields-component.js b/src/filters/filter-fields-component.js
new file mode 100644
index 000000000..c0c777b55
--- /dev/null
+++ b/src/filters/filter-fields-component.js
@@ -0,0 +1,82 @@
+/**
+ * @ngdoc directive
+ * @name patternfly.filters.component:pfFilterFields
+ * @restrict E
+ *
+ * @description
+ * Directive for the filter bar's filter entry components
+ *
+ *
+ * @param {object} config configuration settings for the filters:
+ *
+ * - .fields - (Array) List of filterable fields containing:
+ *
+ * - .id - (String) Optional unique Id for the filter field, useful for comparisons
+ *
- .title - (String) The title to display for the filter field
+ *
- .placeholder - (String) Text to display when no filter value has been entered
+ *
- .filterType - (String) The filter input field type (any html input type, or 'select' for a select box)
+ *
- .filterValues - (Array) List of valid select values used when filterType is 'select'
+ *
+ * - .appliedFilters - (Array) List of the currently applied filters
+ *
+ *
+ */
+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;
+ }
+ }
+ }
+});
diff --git a/src/filters/filter-fields-directive.js b/src/filters/filter-fields-directive.js
deleted file mode 100644
index 66886ae59..000000000
--- a/src/filters/filter-fields-directive.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * @ngdoc directive
- * @name patternfly.filters.directive:pfFilterFields
- *
- * @description
- * Directive for the filter bar's filter entry components
- *
- *
- * @param {object} config configuration settings for the filters:
- *
- * - .fields - (Array) List of filterable fields containing:
- *
- * - .id - (String) Optional unique Id for the filter field, useful for comparisons
- *
- .title - (String) The title to display for the filter field
- *
- .placeholder - (String) Text to display when no filter value has been entered
- *
- .filterType - (String) The filter input field type (any html input type, or 'select' for a select box)
- *
- .filterValues - (Array) List of valid select values used when filterType is 'select'
- *
- * - .appliedFilters - (Array) List of the currently applied filters
- *
- *
- */
-angular.module('patternfly.filters').directive('pfFilterFields', function () {
- 'use strict';
- return {
- restrict: 'A',
- scope: {
- config: '=',
- addFilterFn: '='
- },
- templateUrl: 'filters/filter-fields.html',
- controller: function ($scope) {
- $scope.setupConfig = function () {
- if ($scope.fields === undefined) {
- $scope.fields = [];
- }
- if (!$scope.currentField) {
- $scope.currentField = $scope.config.fields[0];
- $scope.config.currentValue = null;
- }
-
- if ($scope.config.currentValue === undefined) {
- $scope.config.currentValue = null;
- }
- };
-
- $scope.$watch('config', function () {
- $scope.setupConfig();
- }, true);
- },
-
- link: function (scope, element, attrs) {
- scope.selectField = function (item) {
- scope.currentField = item;
- scope.config.currentValue = null;
- };
-
- scope.selectValue = function (filterValue) {
- if (angular.isDefined(filterValue)) {
- scope.addFilterFn(scope.currentField, filterValue);
- scope.config.currentValue = null;
- }
- };
-
- scope.onValueKeyPress = function (keyEvent) {
- if (keyEvent.which === 13) {
- scope.addFilterFn(scope.currentField, scope.config.currentValue);
- scope.config.currentValue = undefined;
- }
- };
- }
- };
-});
diff --git a/src/filters/filter-fields.html b/src/filters/filter-fields.html
index 39562dcb1..0ac764a04 100644
--- a/src/filters/filter-fields.html
+++ b/src/filters/filter-fields.html
@@ -2,36 +2,36 @@