fix(pfFilter): Added alias support to select/complex-select

Author: AllenBW

src/filters/examples/filter.js

@@ -81,26 +81,26 @@
             name: "John Smith",
             address: "415 East Main Street, Norfolk, Virginia",
             birthMonth: 'October',
-            car: 'Subaru-Outback'
+            car: 'subie-out'
 
           },
           {
             name: "Frank Livingston",
             address: "234 Elm Street, Pittsburgh, Pennsylvania",
             birthMonth: 'March',
-            car: 'Toyota-Prius'
+            car: 'Toyota-pri'
           },
           {
             name: "Judy Green",
             address: "2 Apple Boulevard, Cincinatti, Ohio",
             birthMonth: 'December',
-            car: 'Subaru-Impreza'
+            car: 'subie-Impreza'
           },
           {
             name: "Pat Thomas",
             address: "50 Second Street, New York, New York",
-            birthMonth: 'February',
-            car: 'Subaru-Outback'
+            birthMonth: 'jan',
+            car: 'subie-Crosstrek'
           }
         ];
         $scope.items = $scope.allItems;
@@ -174,24 +174,24 @@
               title:  'Birth Month',
               placeholder: 'Filter by Birth Month',
               filterType: 'select',
-              filterValues: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
+              filterValues: [{title:'January', id:'jan'}, {title:'Feb', id:'February'}, 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
             },
            {
               id: 'car',
               title:  'Car',
               placeholder: 'Filter by Car Make',
               filterType: 'complex-select',
-              filterValues: ['Subaru', 'Toyota'],
+              filterValues: [{title:'Subaru', id:'subie'}, 'Toyota'],
               filterDelimiter: '-',
               filterCategoriesPlaceholder: 'Filter by Car Model',
-              filterCategories: {subaru: {
-                id: 'subaru',
+              filterCategories: {subie: {
+                id: 'subie',
                 title:  'Subaru',
-                filterValues: ['Outback', 'Crosstrek', 'Impreza']},
+                filterValues: [{title:'Outback', id:'out'}, 'Crosstrek', 'Impreza']},
                 toyota: {
                 id: 'toyota',
                 title:  'Toyota',
-                filterValues: ['Prius', 'Corolla', 'Echo']}
+                filterValues: [{title:'Prius', id:'pri'}, 'Corolla', 'Echo']}
                 }
             }
           ],

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

@@ -79,7 +79,7 @@ angular.module('patternfly.filters').component('pfFilterFields', {
           }
         } else {
           ctrl.addFilterFn(ctrl.currentField, filterValue);
-          ctrl.currentValue = null;
+          ctrl.currentValue = filterValue;
         }
       }
     }

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

@@ -31,9 +31,10 @@
               {{$ctrl.currentField.placeholder}}
             </a>
           </li>
-          <li ng-repeat="filterValue in $ctrl.currentField.filterValues" ng-class="{'selected': filterValue === $ctrl.currentValue}">
-            <a role="menuitem" tabindex="-1" ng-click="$ctrl.selectValue(filterValue)">
-              {{filterValue}}
+          <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)">
+              {{filterValue.title || filterValue}}
             </a>
           </li>
         </ul>
@@ -52,9 +53,10 @@
               {{$ctrl.currentField.placeholder}}
             </a>
           </li>
-          <li ng-repeat="filterCategory in $ctrl.currentField.filterValues" ng-class="{'selected': filterCategory === $ctrl.filterCategory}">
-            <a role="menuitem" tabindex="-1" ng-click="$ctrl.selectValue(filterCategory, 'filter-category')">
-              {{filterCategory}}
+          <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')">
+              {{filterCategory.title ||filterCategory}}
             </a>
           </li>
         </ul>
@@ -71,9 +73,10 @@
               {{$ctrl.currentField.filterCategoriesPlaceholder}}
             </a>
           </li>
-          <li ng-repeat="filterValue in $ctrl.currentField.filterCategories[$ctrl.filterCategory.toLowerCase()].filterValues" ng-class="{'selected': filterValue === $ctrl.filterValue}">
-            <a role="menuitem" tabindex="-1" ng-click="$ctrl.selectValue(filterValue, 'filter-value')">
-              {{filterValue}}
+          <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')">
+              {{filterValue.title || filterValue}}
             </a>
           </li>
         </ul>

test/filters/filter.spec.js

@@ -40,24 +40,24 @@ describe('Directive:  pfFilter', function () {
           title:  'Birth Month',
           placeholder: 'Filter by Birth Month',
           filterType: 'select',
-          filterValues: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
+          filterValues: [{title:'January', id:'jan'}, {title:'Feb', id:'February'}, 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
         },
         {
           id: 'car',
           title:  'Car',
           placeholder: 'Filter by Car Make',
           filterType: 'complex-select',
-          filterValues: ['Subaru', 'Toyota'],
+          filterValues: [{title:'Subaru', id:'subie'}, 'Toyota'],
           filterDelimiter: '-',
           filterCategoriesPlaceholder: 'Filter by Car Model',
-          filterCategories: {subaru: {
-            id: 'subaru',
+          filterCategories: {subie: {
+            id: 'subie',
             title:  'Subaru',
-            filterValues: ['Outback', 'Crosstrek', 'Impreza']},
+            filterValues: [{title:'Outback', id:'out'}, 'Crosstrek', 'Impreza']},
             toyota: {
               id: 'toyota',
               title:  'Toyota',
-              filterValues: ['Prius', 'Corolla', 'Echo']}
+              filterValues: [{title:'Prius', id:'pri'}, 'Corolla', 'Echo']}
           }
         }
       ],