Addressed review issues

Author: dtaylor113

src/filters/examples/filter-panel.js

@@ -5,9 +5,9 @@
  *
  * @description
  *   The Filter Panel is opened and closed by clicking on the Filter button.  It can contain any HTML desired by
- *   the end user.  As such, the end user is repsonsible for constructing the <code>appliedFilters</code> array which is passed to
+ *   the application developer.  As such, the application developer is repsonsible for constructing the <code>appliedFilters</code> array which is passed to
  *   the filter results tags.
- *   The end user is responsible for filtering items based on the <code>appliedFilters</code> array; both when a
+ *   The application developer is responsible for filtering items based on the <code>appliedFilters</code> array; both when a
  *   filter is changed on the panel, or when a filter tag is 'cleared' (by user clicking on 'x' in the filter results tag).
  *   <br>
  *
@@ -245,12 +245,12 @@
 
         var applyFilters = function () {
           var newAppliedFilters = [];
-          $scope.filterPanelModel.forEach(function (filter) {
+          _.forEach($scope.filterPanelModel, function(filter) {
             var filterValues = [];
             if (angular.isDefined(filter.values) && filter.values.length > 0) {
               if(filter.filterType === "checkbox") {
                 // the values of the selected checkboxes are stored in a single new appliedFilter
-                filter.values.forEach(function (value) {
+                _.forEach(filter.values, function(value) {
                   if(value.selected) {
                     filterValues.push(value.value)
                   }
@@ -260,7 +260,7 @@
                 }
               } else {
                 // each keyword value gets a new appliedFilter
-                filter.values.forEach(function (value) {
+                _.forEach(filter.values, function(value) {
                   filterValues = [value];
                   newAppliedFilters.push( createAppliedFilter (filter, filterValues) );
                 });
@@ -294,7 +294,7 @@
         };
 
         var resetFilterPanelModel = function () {
-          $scope.filterPanelModel.forEach(function (filter) {
+          _.forEach($scope.filterPanelModel, function(filter) {
             if (angular.isDefined(filter.values) && filter.values.length > 0) {
               if(filter.filterType === "checkbox") {
                 // unselect all checkboxes
@@ -306,13 +306,13 @@
                 filter.values = [];
               }
             }
-            });
+          });
         };
 
         var filterItems = function (filters) {
           $scope.items = [];
           if (filters && filters.length > 0) {
-            $scope.allItems.forEach(function (item) {
+           _.forEach($scope.allItems, function(item) {
               if (matchesFilters(item, filters)) {
                 $scope.items.push(item);
               }

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

@@ -67,13 +67,13 @@ angular.module('patternfly.filters').component('pfFilterPanelResults', {
       }
     }
 
-    function clearFilter (filterIndex, valueIndex) {
-      var changedFilterId = ctrl.config.appliedFilters[filterIndex].id;
+    function clearFilter (filter, value) {
+      var changedFilterId = filter.id;
 
-      var changedFilterValue = _.pullAt(ctrl.config.appliedFilters[filterIndex].values, valueIndex);
+      var changedFilterValue = _.pull(filter.values, value)[0];
 
-      if (ctrl.config.appliedFilters[filterIndex].values.length === 0) {
-        _.pullAt(ctrl.config.appliedFilters, filterIndex);
+      if (filter.values.length === 0) {
+        _.pull(ctrl.config.appliedFilters, filter);
       }
 
       if (ctrl.config.onFilterChange) {

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

@@ -2,22 +2,22 @@
   <span class="toolbar-pf-results">
     <h5>
       {{$ctrl.config.resultsCount}}
-      <span ng-if="$ctrl.config.appliedFilters.length > 0"> of {{$ctrl.config.totalCount}}</span>
+      <span ng-if="$ctrl.config.appliedFilters.length"> of {{$ctrl.config.totalCount}}</span>
       {{$ctrl.config.resultsLabel === undefined ? "Results" : $ctrl.config.resultsLabel}}
     </h5>
-    <p ng-if="$ctrl.config.appliedFilters.length > 0">Active filters:</p>
+    <p ng-if="$ctrl.config.appliedFilters.length">Active filters:</p>
     <ul class="list-inline">
       <li ng-repeat="filter in $ctrl.config.appliedFilters">
         <span ng-if="filter.values.length === 1" class="active-filter label label-info single-label">
-          <span class="label-category">{{filter.title}}:</span> {{filter.values[0]}}
-          <a><span ng-click="$ctrl.clearFilter($index, 0)" class="pficon pficon-close"></span></a>
+          <span class="pf-filter-label-category">{{filter.title}}:</span> {{filter.values[0]}}
+          <a><span ng-click="$ctrl.clearFilter(filter, filter.values[0])" class="pficon pficon-close"></span></a>
         </span>
-        <span ng-if="filter.values.length > 1" class="active-filter label label-category">
+        <span ng-if="filter.values.length > 1" class="active-filter label pf-filter-label-category">
           {{filter.title}}:
           <ul class="list-inline category-values">
             <li ng-repeat="value in filter.values">
               <span class="active-filter label label-info">{{value}}
-                <a><span ng-click="$ctrl.clearFilter($parent.$index, $index)" class="pficon pficon-close"></span></a>
+                <a><span ng-click="$ctrl.clearFilter(filter, value)" class="pficon pficon-close"></span></a>
               </span>
             </li>
           </ul>

src/filters/filters.less

@@ -53,13 +53,13 @@ pf-filter-panel {
       font-weight: 400;
 
       .category-option-label {
-        vertical-align: text-bottom;
         font-size: 12px;
+        vertical-align: text-bottom;
       }
     }
   }
   .list-inline > li {
-    padding-right: 0px;
+    padding-right: 0;
     @media(max-width: @screen-md-min) {
       margin-bottom: 3px;
     }
@@ -70,11 +70,11 @@ pf-filter-panel {
     vertical-align: middle;
     .single-label {
       padding: 6px;
-      .label-category {
+      .pf-filter-label-category {
         background-color: @color-pf-blue-500;
         font-weight: 700;
         padding-right: 2px;
-        padding-left: 0px;
+        padding-left: 0;
       }
       .pficon-close {
         padding-right: 6px;
@@ -87,7 +87,7 @@ pf-filter-panel {
   }
 }
 
-.label-category {
+.pf-filter-label-category {
   background-color: @color-pf-blue-300;
   font-weight: 700;
   padding: 6px;

test/filters/filter-panel.spec.js

@@ -92,7 +92,7 @@ describe('Directive:  pfFilterPanel', function () {
     init();
 
     // [cateogry: [value 1 x] [value 2 x] ]
-    var categoryTags = element.find('.label-category')
+    var categoryTags = element.find('.pf-filter-label-category')
     var tagOne = angular.element(categoryTags[0]).text();
     var tagOneValue = angular.element(element.find('.single-label')).text();
     var tagTwo = angular.element(categoryTags[1]).text();
@@ -125,7 +125,7 @@ describe('Directive:  pfFilterPanel', function () {
     init();
 
     // Filter Tag = [cateogry: [value 1 x] [value 2 x] ...]
-    var categoryTags = element.find('.label-category');
+    var categoryTags = element.find('.pf-filter-label-category');
     expect(categoryTags.length).toBe(2);
 
     var clearFilterLinks =  element.find('.pficon-close');
@@ -135,7 +135,7 @@ describe('Directive:  pfFilterPanel', function () {
     eventFire(clearFilterLinks[0], 'click');
     $scope.$digest();
 
-    categoryTags = element.find('.active-filter.label.label-category');
+    categoryTags = element.find('.active-filter.label.pf-filter-label-category');
     expect(categoryTags.length).toBe(1);
 
     // Clear one of the Category One filters
@@ -157,7 +157,7 @@ describe('Directive:  pfFilterPanel', function () {
     eventFire(clearAll[0], 'click');
     $scope.$digest();
 
-    categoryTags = element.find('.active-filter.label.label-category');
+    categoryTags = element.find('.active-filter.label.pf-filter-label-category');
     expect(categoryTags.length).toBe(0);
   });
 });