Merge branch 'master-local' into master-dist

Author: patternfly-build

dist/angular-patternfly.js

@@ -7352,8 +7352,12 @@ angular.module('patternfly.charts').component('pfUtilizationTrendChart', {
  * <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
@@ -7383,6 +7387,9 @@ angular.module('patternfly.charts').component('pfUtilizationTrendChart', {
             <div class="col-md-2">
               <span>{{item.birthMonth}}</span>
             </div>
+            <div class="col-md-4">
+              <span>{{item.car}}</span>
+            </div>
           </div>
         </div>
       </div>
@@ -7405,27 +7412,33 @@ angular.module('patternfly.charts').component('pfUtilizationTrendChart', {
           {
             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;
@@ -7440,6 +7453,8 @@ angular.module('patternfly.charts').component('pfUtilizationTrendChart', {
             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;
         };
@@ -7498,6 +7513,24 @@ angular.module('patternfly.charts').component('pfUtilizationTrendChart', {
               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,
@@ -7623,8 +7656,17 @@ angular.module('patternfly.filters').component('pfFilterPanelResults', {
     };
 
     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) {
@@ -7638,12 +7680,17 @@ angular.module('patternfly.filters').component('pfFilterPanelResults', {
         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) {
@@ -7669,8 +7716,12 @@ angular.module('patternfly.filters').component('pfFilterPanelResults', {
  * <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>
@@ -7709,13 +7760,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;
+        }
       }
     }
 
@@ -17372,7 +17439,7 @@ angular.module('patternfly.wizard').component('pfWizard', {
 
 
   $templateCache.put('filters/simple-filter/filter-fields.html',
-    "<div class=\"filter-pf filter-fields\"><div class=\"input-group form-group\"><div uib-dropdown class=input-group-btn><button uib-dropdown-toggle type=button class=\"btn btn-default filter-fields\" uib-tooltip=\"Filter by\" tooltip-placement=top tooltip-append-to-body=true>{{$ctrl.currentField.title}} <span class=caret></span></button><ul uib-dropdown-menu><li ng-repeat=\"item in $ctrl.config.fields\"><a class=filter-field role=menuitem tabindex=-1 ng-click=$ctrl.selectField(item)>{{item.title}}</a></li></ul></div><div ng-if=\"$ctrl.currentField.filterType !== 'select'\"><input class=form-control type={{$ctrl.currentField.filterType}} ng-model=$ctrl.currentValue placeholder={{$ctrl.currentField.placeholder}} ng-keypress=\"$ctrl.onValueKeyPress($event)\"></div><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=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=\"filterValue in $ctrl.currentField.filterValues\" ng-class=\"{'selected': filterValue === $ctrl.currentValue}\"><a role=menuitem tabindex=-1 ng-click=$ctrl.selectValue(filterValue)>{{filterValue}}</a></li></ul></div></div></div></div>"
+    "<div class=\"filter-pf filter-fields\"><div class=\"input-group form-group\"><div uib-dropdown class=input-group-btn><button uib-dropdown-toggle type=button class=\"btn btn-default filter-fields\" uib-tooltip=\"Filter by\" tooltip-placement=top tooltip-append-to-body=true>{{$ctrl.currentField.title}} <span class=caret></span></button><ul uib-dropdown-menu><li ng-repeat=\"item in $ctrl.config.fields\"><a class=filter-field role=menuitem tabindex=-1 ng-click=$ctrl.selectField(item)>{{item.title}}</a></li></ul></div><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)\"></div><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=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=\"filterValue in $ctrl.currentField.filterValues\" ng-class=\"{'selected': filterValue === $ctrl.currentValue}\"><a role=menuitem tabindex=-1 ng-click=$ctrl.selectValue(filterValue)>{{filterValue}}</a></li></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>"
   );
 
 

dist/angular-patternfly.min.js

@@ -480,6 +480,17 @@ pf-topology {
 .filter-pf a {
   cursor: pointer;
 }
+.filter-pf .input-group .input-group-btn .dropdown-menu > .selected > a {
+  background-color: #0088ce !important;
+  border-color: #0076b7 !important;
+  color: #fff !important;
+}
+.filter-pf .category-select {
+  display: flex;
+}
+.filter-pf .category-select-value {
+  border-left-width: 0 !important;
+}
 .filter-pf.filter-fields .form-group {
   padding-left: 0;
   width: 275px;
@@ -492,11 +503,6 @@ pf-topology {
   font-style: italic;
   font-weight: 400;
 }
-.input-group .input-group-btn .dropdown-menu > .selected > a {
-  background-color: #0088ce !important;
-  border-color: #0076b7 !important;
-  color: #fff !important;
-}
 pf-filter-panel .dropdown > .dropdown-menu,
 pf-filter-panel .input-group-btn > .dropdown-menu {
   margin-top: 5px;