Fix for PTNFLY-539 "AngJS Simple Filter - Attr. Selector should be single select#"

Author: dtaylor113

dist/angular-patternfly.js

@@ -1999,7 +1999,7 @@ angular.module('patternfly.charts').directive('pfUtilizationChart', function ()
  * <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>.filterType  - (String) The filter input field type (any html input type, or 'select' for a single 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
@@ -2169,13 +2169,23 @@ angular.module('patternfly.filters').directive('pfSimpleFilter', function () {
         return foundFilter !== undefined;
       };
 
+      $scope.enforceSingleSelect = function (filter) {
+        _.remove($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) {

dist/angular-patternfly.min.js

@@ -13,7 +13,7 @@
  * <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>.filterType  - (String) The filter input field type (any html input type, or 'select' for a single 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
@@ -183,13 +183,23 @@ angular.module('patternfly.filters').directive('pfSimpleFilter', function () {
         return foundFilter !== undefined;
       };
 
+      $scope.enforceSingleSelect = function (filter) {
+        _.remove($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) {

src/filters/simple-filter-directive.js

@@ -2,6 +2,7 @@ describe('Directive:  pfSimpleFilter', function () {
   var $scope;
   var $compile;
   var element;
+  var isoScope;
 
   // load the controller's module
   beforeEach(function () {
@@ -15,9 +16,11 @@ describe('Directive:  pfSimpleFilter', function () {
 
   var compileHTML = function (markup, scope) {
     element = angular.element(markup);
-    $compile(element)(scope);
+    var el = $compile(element)(scope);
 
     scope.$digest();
+
+    isoScope = el.isolateScope();
   };
 
   beforeEach(function () {
@@ -104,6 +107,51 @@ describe('Directive:  pfSimpleFilter', function () {
     expect(items.length).toBe($scope.filterConfig.fields[2].filterValues.length + 1); // +1 for the null value
   });
 
+  it ('should enforce single selection for select dropdowns, accumative for others', function() {
+    $scope.filterConfig.appliedFilters = [
+      {
+        id: 'birthMonth',
+        title: 'Birth Month',
+        type: 'select',
+        value: 'February'
+      }
+    ];
+
+    var newFilter = {
+      id: 'birthMonth',
+      title: 'Birth Month',
+      filterType: 'select'
+    };
+
+    isoScope.addFilter(newFilter, "April");
+
+    expect($scope.filterConfig.appliedFilters.length).toBe(1);
+    expect($scope.filterConfig.appliedFilters[0].value).toBe("April");
+
+    //Accumative for other types
+
+    $scope.filterConfig.appliedFilters = [
+      {
+        id: 'address',
+        title: 'Address',
+        type: 'text',
+        value: 'New York'
+      }
+    ];
+
+    newFilter = {
+      id: 'address',
+      title: 'Address',
+      filterType: 'text'
+    };
+
+    isoScope.addFilter(newFilter, 'Paris');
+
+    expect($scope.filterConfig.appliedFilters.length).toBe(2);
+    expect($scope.filterConfig.appliedFilters[0].value).toBe("New York");
+    expect($scope.filterConfig.appliedFilters[1].value).toBe("Paris");
+  });
+
   it ('should clear a filter when the close button is clicked', function () {
     var closeButtons;