fix(pfFilter): Ensures complete alias support for select/complex-select

Author: AllenBW

src/filters/examples/filter.js

@@ -14,7 +14,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>.filterMultiselect - (Boolean) In `complex-select`, allow selection of multiple values per category. Optional, default is `false`
+ * <li>.filterMultiselect - (Boolean) In `complex-select`, allow selection of multiple categories and values. Optional, default is `false`
  * <li>.filterType  - (String) The filter input field type (any html input type, or 'select' for a single select box or 'complex-select' for a category select box)
  * <li>.filterValues - (Array) List of valid select values used when filterType is 'select' or 'complex-select' (in where these values serve as case insensitve keys for .filterCategories objects)
  * <li>.filterCategories - (Array of (Objects)) For 'complex-select' only, array of objects whoes keys (case insensitive) match the .filterValues, these objects include each of the filter fields above (sans .placeholder)
@@ -114,9 +114,10 @@
           } else if (filter.id === 'address') {
             match = item.address.match(re) !== null;
           } else if (filter.id === 'birthMonth') {
-            match = item.birthMonth === filter.value;
+            match = item.birthMonth === filter.value.id || item.birthMonth === filter.value;
           } else if (filter.id === 'car') {
-            match = item.car === filter.value;
+            match = item.car === ((filter.value.filterCategory.id || filter.value.filterCategory)
+            + filter.value.filterDelimiter + (filter.value.filterValue.id || filter.value.filterValue));
           }
           return match;
         };
@@ -150,7 +151,16 @@
         var filterChange = function (filters) {
         $scope.filtersText = "";
           filters.forEach(function (filter) {
-            $scope.filtersText += filter.title + " : " + filter.value + "\n";
+            $scope.filtersText += filter.title + " : ";
+            if (filter.value.filterCategory) {
+              $scope.filtersText += ((filter.value.filterCategory.title || filter.value.filterCategory)
+              + filter.value.filterDelimiter + (filter.value.filterValue.title || filter.value.filterValue));
+            } else if (filter.value.title){
+              $scope.filtersText += filter.value.title;
+            } else {
+              $scope.filtersText += filter.value;
+            }
+            $scope.filtersText += "\n";
           });
           applyFilters(filters);
         };

src/filters/simple-filter/filter-component.js

@@ -21,14 +21,8 @@ angular.module('patternfly.filters').component('pfFilter', {
       return angular.isDefined(_.find(ctrl.config.appliedFilters, {title: filter.title, value: filter.value}));
     }
 
-    function findDuplicateCategory (field, value) {
-      var duplicateValue;
-
-      function searchAppliedFilters (item) {
-        return _.includes(item.value, _.split(value, field.filterDelimiter, 1)) ? duplicateValue = item : null;
-      }
-
-      return _.some(ctrl.config.appliedFilters, searchAppliedFilters) ? duplicateValue : null;
+    function findDuplicateComplexSelect (item) {
+      return item.value.filterCategory;
     }
 
     function enforceSingleSelect (filter) {
@@ -49,8 +43,8 @@ angular.module('patternfly.filters').component('pfFilter', {
           enforceSingleSelect(newFilter);
         }
 
-        if (field.filterType === 'complex-select' && !field.filterMultiselect && findDuplicateCategory(field, value)) {
-          _.remove(ctrl.config.appliedFilters, findDuplicateCategory(field, value));
+        if (field.filterType === 'complex-select' && !field.filterMultiselect) {
+          _.remove(ctrl.config.appliedFilters, findDuplicateComplexSelect);
         }
 
         ctrl.config.appliedFilters.push(newFilter);

src/filters/simple-filter/filter-fields-component.js

@@ -14,7 +14,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>.filterMultiselect - (Boolean) In `complex-select`, allow selection of multiple values per category. Optional, default is `false`
+ * <li>.filterMultiselect - (Boolean) In `complex-select`, allow selection of multiple categories and values. Optional, default is `false`
  * <li>.filterType  - (String) The filter input field type (any html input type, or 'select' for a single select box or 'complex-select' for a category select box)
  * <li>.filterValues - (Array) List of valid select values used when filterType is 'select' or 'complex-select' (in where these values serve as case insensitve keys for .filterCategories objects)
  * <li>.filterCategories - (Array of (Objects)) For 'complex-select' only, array of objects whoes keys (case insensitive) match the .filterValues, these objects include each of the filter fields above (sans .placeholder)
@@ -75,7 +75,11 @@ angular.module('patternfly.filters').component('pfFilterFields', {
             break;
           }
           if (ctrl.filterCategory && ctrl.filterValue) {
-            ctrl.addFilterFn(ctrl.currentField, ctrl.filterCategory + ctrl.currentField.filterDelimiter + ctrl.filterValue);
+            ctrl.addFilterFn(ctrl.currentField, {
+              filterCategory: ctrl.filterCategory,
+              filterDelimiter: ctrl.currentField.filterDelimiter,
+              filterValue: ctrl.filterValue
+            });
           }
         } else {
           ctrl.addFilterFn(ctrl.currentField, filterValue);

src/filters/simple-filter/filter-fields.html

@@ -7,7 +7,8 @@
         <span class="caret"></span>
       </button>
       <ul uib-dropdown-menu>
-        <li ng-repeat="item in $ctrl.config.fields">
+        <li ng-repeat="item in $ctrl.config.fields"
+            ng-class="{'selected': item === $ctrl.currentField}">
           <a class="filter-field" role="menuitem" tabindex="-1" ng-click="$ctrl.selectField(item)">
             {{item.title}}
           </a>
@@ -22,7 +23,7 @@
     <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">{{$ctrl.currentValue || $ctrl.currentField.placeholder}}</span>
+          <span class="filter-option pull-left">{{$ctrl.currentValue.title || $ctrl.currentValue || $ctrl.currentField.placeholder}}</span>
           <span class="caret"></span>
         </button>
         <ul uib-dropdown-menu class="dropdown-menu-right" role="menu">
@@ -32,8 +33,8 @@
             </a>
           </li>
           <li ng-repeat="filterValue in $ctrl.currentField.filterValues"
-              ng-class="{'selected': (filterValue === $ctrl.currentValue || filterValue.id === $ctrl.currentValue)}">
-            <a role="menuitem" tabindex="-1" ng-click="$ctrl.selectValue(filterValue.id || filterValue)">
+              ng-class="{'selected': (filterValue === $ctrl.currentValue)}">
+            <a role="menuitem" tabindex="-1" ng-click="$ctrl.selectValue(filterValue)">
               {{filterValue.title || filterValue}}
             </a>
           </li>
@@ -44,7 +45,7 @@
 
       <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">{{$ctrl.filterCategory || $ctrl.currentField.placeholder}}</span>
+          <span class="filter-option pull-left">{{$ctrl.filterCategory.title || $ctrl.filterCategory || $ctrl.currentField.placeholder}}</span>
           <span class="caret"></span>
         </button>
         <ul uib-dropdown-menu class="dropdown-menu-right" role="menu">
@@ -54,8 +55,8 @@
             </a>
           </li>
           <li ng-repeat="filterCategory in $ctrl.currentField.filterValues"
-              ng-class="{'selected': (filterCategory === $ctrl.filterCategory || filterCategory.id === $ctrl.filterCategory)}">
-            <a role="menuitem" tabindex="-1" ng-click="$ctrl.selectValue(filterCategory.id ||filterCategory, 'filter-category')">
+              ng-class="{'selected': (filterCategory == $ctrl.filterCategory)}">
+            <a role="menuitem" tabindex="-1" ng-click="$ctrl.selectValue(filterCategory, 'filter-category')">
               {{filterCategory.title ||filterCategory}}
             </a>
           </li>
@@ -64,7 +65,7 @@
 
       <div class="btn-group bootstrap-select form-control filter-select " uib-dropdown >
         <button type="button" uib-dropdown-toggle class="btn btn-default dropdown-toggle category-select-value">
-          <span class="filter-option pull-left">{{$ctrl.filterValue || $ctrl.currentField.filterCategoriesPlaceholder}}</span>
+          <span class="filter-option pull-left">{{$ctrl.filterValue.title || $ctrl.filterValue || $ctrl.currentField.filterCategoriesPlaceholder}}</span>
           <span class="caret"></span>
         </button>
         <ul uib-dropdown-menu class="dropdown-menu-right" role="menu">
@@ -73,9 +74,9 @@
               {{$ctrl.currentField.filterCategoriesPlaceholder}}
             </a>
           </li>
-          <li ng-repeat="filterValue in $ctrl.currentField.filterCategories[$ctrl.filterCategory.toLowerCase()].filterValues"
-              ng-class="{'selected': (filterValue === $ctrl.filterValue || filterValue.id === $ctrl.filterValue)}">
-            <a role="menuitem" tabindex="-1" ng-click="$ctrl.selectValue(filterValue.id || filterValue, 'filter-value')">
+          <li ng-repeat="filterValue in $ctrl.currentField.filterCategories[$ctrl.filterCategory.id.toLowerCase() || $ctrl.filterCategory.toLowerCase() ].filterValues"
+              ng-class="{'selected': filterValue === $ctrl.filterValue}">
+            <a role="menuitem" tabindex="-1" ng-click="$ctrl.selectValue(filterValue, 'filter-value')">
               {{filterValue.title || filterValue}}
             </a>
           </li>

src/filters/simple-filter/filter-results.html

@@ -6,7 +6,7 @@ <h5>{{$ctrl.config.resultsCount}} Results</h5>
       <ul class="list-inline">
         <li ng-repeat="filter in $ctrl.config.appliedFilters">
           <span class="active-filter label label-info">
-            {{filter.title}}: {{filter.value}}
+            {{filter.title}}: {{((filter.value.filterCategory.title || filter.value.filterCategory) + filter.value.filterDelimiter + (filter.value.filterValue.title || filter.value.filterValue)) || filter.value.title || filter.value}}
             <a><span class="pficon pficon-close" ng-click="$ctrl.clearFilter(filter)"></span></a>
           </span>
         </li>