feat(pfFilter): Add filter options - inline, results count, items label

src/filters/examples/filter.js

@@ -21,8 +21,13 @@
  * <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>.inlineResults - (Boolean) Flag to show results inline with the filter selection (default: false)
  * <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
+ * <li>.totalCount     - (int) The total number of items before any filters have been applied. The 'm' in the label: 'n' of 'm' selected
+ * <li>.showTotalCountResults - (Boolean) Optional, flag to show the total count in the filter results as well (ie. 'n' of 'm' Results)
+ * <li>.itemsLabel     - (String) Optional label to use for the items in the results count (default: Result)
+ * <li>.itemsLabelPlural - (String) Optional label to use for the items in the resuults count when plural (default: Results)
  * <li>.onFilterChange - ( function(array of filters) ) Function to call when the applied filters list changes
  * </ul>
  *
@@ -34,6 +39,26 @@
         <pf-filter id="exampleFilter" config="filterConfig"></pf-filter>
       </div>
       <hr class="col-md-12">
+      </br></br>
+      <div class="col-sm-4">
+        <form role="form">
+          <div class="form-group">
+            <label class="checkbox-inline">
+              <input type="checkbox" ng-model="filterConfig.inlineResults">Inline results</input>
+            </label>
+          </div>
+        </form>
+      </div>
+      <div class="col-sm-4">
+        <form role="form">
+          <div class="form-group">
+            <label class="checkbox-inline">
+              <input type="checkbox" ng-model="filterConfig.showTotalCountResults">Show total count in results</input>
+            </label>
+          </div>
+        </form>
+      </div>
+      <hr class="col-md-12">
       <div class="col-md-12">
         <label class="events-label">Valid Items: </label>
       </div>
@@ -55,7 +80,6 @@
           </div>
         </div>
       </div>
-      </br></br>
       <div class="col-md-12">
         <label class="events-label">Current Filters: </label>
       </div>
@@ -206,6 +230,7 @@
             }
           ],
           resultsCount: $scope.items.length,
+          totalCount: $scope.allItems.length,
           appliedFilters: [],
           onFilterChange: filterChange
         };

src/filters/filters.less

@@ -98,3 +98,53 @@ pf-filter-panel {
     padding-left: 4px;
   }
 }
+
+.filter-pf {
+  &.inline-filter-pf {
+    flex: 1 1 100%;
+    margin: 15px 15px 7px 0;
+
+    pf-filter-fields,
+    pf-filter-results {
+      display: inline-block;
+    }
+
+    .form-group {
+      margin-bottom: 0;
+      margin-right: 15px;
+    }
+
+    .toolbar-pf-results {
+      border-top: none;
+      margin: 0;
+
+      .col-sm-12 {
+        float: left;
+        padding: 0;
+      }
+
+      h5,
+      p,
+      ul {
+        line-height: 1.43;
+        padding-bottom: 6px;
+        padding-top: 6px;
+      }
+
+      .list-inline {
+        margin-bottom: -5px;
+        padding-right: 5px;
+
+        > li {
+          margin-bottom: 5px;
+        }
+      }
+    }
+  }
+
+  .toolbar-pf-results {
+    .list-inline {
+      margin-left: 0;
+    }
+  }
+}

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

@@ -1,7 +1,7 @@
 <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"
+      <button ng-if="$ctrl.config.fields.length > 1" 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>

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

@@ -21,6 +21,9 @@
  * <li>.resultsCount   - (int) The number of results returned after the current applied filters have been applied
  * <li>.selectedCount  - (int) The number selected items, The 'n' in the label: 'n' of 'm' selected
  * <li>.totalCount     - (int) The total number of items before any filters have been applied. The 'm' in the label: 'n' of 'm' selected
+ * <li>.showTotalCountResults - (Boolean) Optional, flag to show the total count in the filter results (ie. x of y Results)
+ * <li>.itemsLabel     - (String) Optional label to use for the items (default: Result)
+ * <li>.itemsLabelPlural - (String) Optional label to use for the items when plural (default: Results)
  * <li>.onFilterChange - ( function(array of filters) ) Function to call when the applied filters list changes
  * </ul>
  *
@@ -50,7 +53,7 @@ angular.module('patternfly.filters').component('pfFilterResults', {
     ctrl.$doCheck = function () {
       // do a deep compare on config
       if (!angular.equals(ctrl.config, prevConfig)) {
-//        setupConfig();
+        setupConfig();
       }
     };
 
@@ -63,6 +66,9 @@ angular.module('patternfly.filters').component('pfFilterResults', {
       if (ctrl.config.resultsCount === undefined) {
         ctrl.config.resultsCount = 0;
       }
+
+      ctrl.config.itemsLabel = ctrl.config.itemsLabel || 'Result';
+      ctrl.config.itemsLabelPlural = ctrl.config.itemsLabelPlural || 'Results';
     }
 
     function clearFilter (item) {

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

@@ -1,8 +1,15 @@
 <div class="filter-pf">
   <div class="row toolbar-pf-results">
     <div class="col-sm-12">
-      <h5>{{$ctrl.config.resultsCount}} Results</h5>
-      <p ng-if="$ctrl.config.appliedFilters.length > 0">Active filters:</p>
+      <span ng-if="$ctrl.config.showTotalCountResults !== true || $ctrl.config.totalCount === undefined || $ctrl.config.appliedFilters.length === 0">
+        <h5 ng-if="$ctrl.config.resultsCount === 1">{{$ctrl.config.resultsCount}} {{$ctrl.config.itemsLabel}}</h5>
+        <h5 ng-if="$ctrl.config.resultsCount !== 1">{{$ctrl.config.resultsCount}} {{$ctrl.config.itemsLabelPlural}}</h5>
+      </span>
+      <span ng-if="$ctrl.config.showTotalCountResults === true && $ctrl.config.totalCount !== undefined && $ctrl.config.appliedFilters.length > 0">
+        <h5 ng-if="$ctrl.config.totalCount === 1">{{$ctrl.config.resultsCount}} of {{$ctrl.config.totalCount}} {{$ctrl.config.itemsLabel}}</h5>
+        <h5 ng-if="$ctrl.config.totalCount !== 1">{{$ctrl.config.resultsCount}} of {{$ctrl.config.totalCount}} {{$ctrl.config.itemsLabelPlural}}</h5>
+      </span>
+      <p ng-if="$ctrl.config.appliedFilters.length > 0">Active Filters:</p>
       <ul class="list-inline">
         <li ng-repeat="filter in $ctrl.config.appliedFilters">
           <span class="active-filter label label-info">

src/filters/simple-filter/filter.html

@@ -1,4 +1,4 @@
-<div class="filter-pf">
+<div class="filter-pf" ng-class="{'inline-filter-pf': $ctrl.config.inlineResults === true}">
   <pf-filter-fields config="$ctrl.config" add-filter-fn="$ctrl.addFilter"></pf-filter-fields>
   <pf-filter-results config="$ctrl.config"></pf-filter-results>
 </div>

test/filters/filter.spec.js

@@ -207,4 +207,58 @@ describe('Directive:  pfFilter', function () {
 
     expect(element.find('.pf-table-view-selected-label').text()).toContain('0 of 10 selected');
   });
+
+  it('should show results inline only when specified', function() {
+    expect(element.find('.filter-pf.inline-filter-pf').length).toBe(0);
+
+    $scope.filterConfig.inlineResults = true;
+
+    $scope.$digest();
+
+    expect(element.find('.filter-pf.inline-filter-pf').length).toBe(1);
+  });
+
+  it('should show the total count in the results only when specified', function() {
+    $scope.filterConfig.appliedFilters = [
+      {
+        id: 'address',
+        title: 'Address',
+        value: 'New York'
+      }
+    ];
+    $scope.$digest();
+
+    expect(element.find('.toolbar-pf-results h5').text()).toContain('5 Results');
+
+    $scope.filterConfig.showTotalCountResults = true;
+    $scope.filterConfig.totalCount = 10;
+
+    $scope.$digest();
+
+    expect(element.find('.toolbar-pf-results h5').text()).toContain('5 of 10 Results');
+  });
+
+  it('should use the given results label when specified', function() {
+    $scope.filterConfig.showTotalCountResults = true;
+    $scope.filterConfig.resultsCount = 1;
+    $scope.filterConfig.totalCount = 1;
+    $scope.filterConfig.itemsLabel = 'Item';
+    $scope.filterConfig.itemsLabelPlural = 'Items';
+
+    $scope.filterConfig.appliedFilters = [
+      {
+        id: 'address',
+        title: 'Address',
+        value: 'New York'
+      }
+    ];
+    $scope.$digest();
+
+    expect(element.find('.toolbar-pf-results h5').text()).toContain('1 of 1 Item');
+
+    $scope.filterConfig.totalCount = 2;
+    $scope.$digest();
+
+    expect(element.find('.toolbar-pf-results h5').text()).toContain('1 of 2 Items');
+  });
 });