feat(pfFilter): add 'complex-select' feature to pfFilterFields component

AllenBW · AllenBW · commit 6d3a128e9dcb · 2017-08-16T01:19:08.000-04:00
diff --git a/src/filters/examples/filter.js b/src/filters/examples/filter.js
@@ -14,8 +14,12 @@
  * <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 single select box)
- * <li>.filterValues - (Array) List of valid select values used when filterType is 'select'
+ * <li>.filterMultiselect - (Boolean) In `complex-select`, allow selection of multiple values per category. 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)
+ * <li>.filterCategoriesPlaceholder - (String) Text to display in `complex-select` category value select when no filter value has been entered, Optional
+ * <li>.filterDelimiter - (String) Delimiter separating 'complex-select' category and value. Optional, default is a space, ' '
  * </ul>
  * <li>.appliedFilters - (Array) List of the currently applied filters
  * <li>.resultsCount   - (int) The number of results returned after the current applied filters have been applied
@@ -45,6 +49,9 @@
             <div class="col-md-2">
               <span>{{item.birthMonth}}</span>
             </div>
+            <div class="col-md-4">
+              <span>{{item.car}}</span>
+            </div>
           </div>
         </div>
       </div>
@@ -67,27 +74,33 @@
           {
             name: "Fred Flintstone",
             address: "20 Dinosaur Way, Bedrock, Washingstone",
-            birthMonth: 'February'
+            birthMonth: 'February',
+            car: 'Toyota-Echo'
           },
           {
             name: "John Smith",
             address: "415 East Main Street, Norfolk, Virginia",
-            birthMonth: 'October'
+            birthMonth: 'October',
+            car: 'Subaru-Outback'
+
           },
           {
             name: "Frank Livingston",
             address: "234 Elm Street, Pittsburgh, Pennsylvania",
-            birthMonth: 'March'
+            birthMonth: 'March',
+            car: 'Toyota-Prius'
           },
           {
             name: "Judy Green",
             address: "2 Apple Boulevard, Cincinatti, Ohio",
-            birthMonth: 'December'
+            birthMonth: 'December',
+            car: 'Subaru-Impreza'
           },
           {
             name: "Pat Thomas",
             address: "50 Second Street, New York, New York",
-            birthMonth: 'February'
+            birthMonth: 'February',
+            car: 'Subaru-Outback'
           }
         ];
         $scope.items = $scope.allItems;
@@ -102,6 +115,8 @@
             match = item.address.match(re) !== null;
           } else if (filter.id === 'birthMonth') {
             match = item.birthMonth === filter.value;
+          } else if (filter.id === 'car') {
+            match = item.car === filter.value;
           }
           return match;
         };
@@ -160,6 +175,24 @@
               placeholder: 'Filter by Birth Month',
               filterType: 'select',
               filterValues: ['January', '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'],
+              filterDelimiter: '-',
+              filterCategoriesPlaceholder: 'Filter by Car Model',
+              filterCategories: {subaru: {
+                id: 'subaru',
+                title:  'Subaru',
+                filterValues: ['Outback', 'Crosstrek', 'Impreza']},
+                toyota: {
+                id: 'toyota',
+                title:  'Toyota',
+                filterValues: ['Prius', 'Corolla', 'Echo']}
+                }
             }
           ],
           resultsCount: $scope.items.length,
diff --git a/src/filters/filters.less b/src/filters/filters.less
@@ -2,6 +2,21 @@
   a {
     cursor: pointer;
   }
+  .input-group {
+    .input-group-btn {
+      .dropdown-menu>.selected>a {
+        background-color: @color-pf-blue !important;
+        border-color: #0076b7 !important;
+        color: @color-pf-white !important;
+      }
+    }
+  }
+  .category-select{
+    display: flex;
+  }
+  .category-select-value{
+    border-left-width: 0 !important;
+  }
 }
 .filter-pf.filter-fields {
   .form-group {
@@ -19,15 +34,6 @@
     font-weight: 400;
   }
 }
-.input-group {
-  .input-group-btn {
-    .dropdown-menu>.selected>a {
-      background-color: @color-pf-blue !important;
-      border-color: #0076b7 !important;
-      color: @color-pf-white !important;
-    }
-  }
-}
 
 pf-filter-panel {
   .dropdown > .dropdown-menu, .input-group-btn > .dropdown-menu {
diff --git a/src/filters/simple-filter/filter-component.js b/src/filters/simple-filter/filter-component.js
@@ -18,8 +18,17 @@ angular.module('patternfly.filters').component('pfFilter', {
     };
 
     function filterExists (filter) {
-      var foundFilter = _.find(ctrl.config.appliedFilters, {title: filter.title, value: filter.value});
-      return foundFilter !== undefined;
+      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 enforceSingleSelect (filter) {
@@ -33,12 +42,17 @@ angular.module('patternfly.filters').component('pfFilter', {
         type: field.filterType,
         value: value
       };
+
       if (!filterExists(newFilter)) {
 
         if (newFilter.type === 'select') {
           enforceSingleSelect(newFilter);
         }
 
+        if (field.filterType === 'complex-select' && !field.filterMultiselect && findDuplicateCategory(field, value)) {
+          _.remove(ctrl.config.appliedFilters, findDuplicateCategory(field, value));
+        }
+
         ctrl.config.appliedFilters.push(newFilter);
 
         if (ctrl.config.onFilterChange) {
diff --git a/src/filters/simple-filter/filter-fields-component.js b/src/filters/simple-filter/filter-fields-component.js
@@ -14,8 +14,12 @@
  * <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'
+ * <li>.filterMultiselect - (Boolean) In `complex-select`, allow selection of multiple values per category. 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)
+ * <li>.filterCategoriesPlaceholder - (String) Text to display in `complex-select` category value select when no filter value has been entered, Optional
+ * <li>.filterDelimiter - (String) Delimiter separating 'complex-select' category and value. Optional, default is a space, ' '
  * </ul>
  * <li>.appliedFilters - (Array) List of the currently applied filters
  * </ul>
@@ -54,13 +58,29 @@ angular.module('patternfly.filters').component('pfFilterFields', {
 
     function selectField (item) {
       ctrl.currentField = item;
+      ctrl.currentField.filterDelimiter = ctrl.currentField.filterDelimiter || ' ';
       ctrl.currentValue = null;
     }
 
-    function selectValue (filterValue) {
-      if (angular.isDefined(filterValue)) {
-        ctrl.addFilterFn(ctrl.currentField, filterValue);
-        ctrl.currentValue = null;
+    function selectValue (filterValue, valueType) {
+      if (angular.isDefined (filterValue)) {
+        if (ctrl.currentField.filterType === 'complex-select') {
+          switch (valueType) {
+          case 'filter-category':
+            ctrl.filterCategory = filterValue;
+            ctrl.filterValue = null;
+            break;
+          case 'filter-value':
+            ctrl.filterValue = filterValue;
+            break;
+          }
+          if (ctrl.filterCategory && ctrl.filterValue) {
+            ctrl.addFilterFn(ctrl.currentField, ctrl.filterCategory + ctrl.currentField.filterDelimiter + ctrl.filterValue);
+          }
+        } else {
+          ctrl.addFilterFn(ctrl.currentField, filterValue);
+          ctrl.currentValue = null;
+        }
       }
     }
 
diff --git a/src/filters/simple-filter/filter-fields.html b/src/filters/simple-filter/filter-fields.html
@@ -14,7 +14,7 @@
         </li>
       </ul>
     </div>
-    <div ng-if="$ctrl.currentField.filterType !== 'select'">
+    <div ng-if="$ctrl.currentField.filterType !== 'select' && $ctrl.currentField.filterType !== 'complex-select'">
       <input class="form-control" type="{{$ctrl.currentField.filterType}}" ng-model="$ctrl.currentValue"
              placeholder="{{$ctrl.currentField.placeholder}}"
              ng-keypress="$ctrl.onValueKeyPress($event)"/>
@@ -39,5 +39,45 @@
         </ul>
       </div>
     </div>
+    <div ng-if="$ctrl.currentField.filterType === 'complex-select'" class="category-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.filterCategory || $ctrl.currentField.placeholder}}</span>
+          <span class="caret"></span>
+        </button>
+        <ul uib-dropdown-menu class="dropdown-menu-right" role="menu">
+          <li ng-if="$ctrl.currentField.placeholder">
+            <a role="menuitem" tabindex="-1" ng-click="$ctrl.selectValue()">
+              {{$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}}
+            </a>
+          </li>
+        </ul>
+      </div>
+
+      <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="caret"></span>
+        </button>
+        <ul uib-dropdown-menu class="dropdown-menu-right" role="menu">
+          <li ng-if="$ctrl.currentField.placeholder">
+            <a role="menuitem" tabindex="-1" ng-click="$ctrl.selectValue()">
+              {{$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}}
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
   </div>
 </div>
diff --git a/test/filters/filter.spec.js b/test/filters/filter.spec.js
@@ -41,6 +41,24 @@ describe('Directive:  pfFilter', function () {
           placeholder: 'Filter by Birth Month',
           filterType: 'select',
           filterValues: ['January', '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'],
+          filterDelimiter: '-',
+          filterCategoriesPlaceholder: 'Filter by Car Model',
+          filterCategories: {subaru: {
+            id: 'subaru',
+            title:  'Subaru',
+            filterValues: ['Outback', 'Crosstrek', 'Impreza']},
+            toyota: {
+              id: 'toyota',
+              title:  'Toyota',
+              filterValues: ['Prius', 'Corolla', 'Echo']}
+          }
         }
       ],
       resultsCount: 5,
@@ -54,7 +72,7 @@ describe('Directive:  pfFilter', function () {
 
   it('should have correct number of filter fields', function () {
     var fields = element.find('.filter-field');
-    expect(fields.length).toBe(3);
+    expect(fields.length).toBe(4);
   });
 
   it('should have correct number of results', function () {
@@ -104,6 +122,20 @@ describe('Directive:  pfFilter', function () {
     expect(items.length).toBe($scope.filterConfig.fields[2].filterValues.length + 1); // +1 for the null value
   });
 
+  it ('should add a dropdown complex-select when a select type is chosen', function() {
+    var filterSelect = element.find('.filter-select');
+    var fields = element.find('.filter-field');
+
+    expect(filterSelect.length).toBe(0);
+    eventFire(fields[3], 'click');
+    $scope.$digest();
+    filterSelect = element.find('.filter-select');
+    expect(filterSelect.length).toBe(2);
+
+    var items = filterSelect.find('li');
+    expect(items.length).toBe($scope.filterConfig.fields[3].filterValues.length + 2); // +2 for the null category and value
+  });
+
   it ('should clear a filter when the close button is clicked', function () {
     var closeButtons;
 
