feat(bulkselection): ListView - Created bulk selection component

Gruntfile.js

@@ -384,6 +384,11 @@ module.exports = function (grunt) {
           src: ['form/**/*.html'],
           dest: 'templates/form.js'
         },
+        'patternfly.bulkselection': {
+          cwd: 'src/',
+          src: ['bulkselection/**/*.html'],
+          dest: 'templates/bulkselection.js'
+        },
         'patternfly.navigation': {
           cwd: 'src/',
           src: ['navigation/**/*.html'],

src/bulkselection/bulkselection.component.js

@@ -0,0 +1,59 @@
+angular.module('patternfly.bulkselection').component('pfBulkSelection', {
+
+  bindings: {
+    totalRecords: '=',
+    selectedRecordCount: '=',
+    updateSelectionFn: '<'
+  },
+  templateUrl: 'bulkselection/bulkselection.html',
+  controller: function () {
+    'use strict';
+
+    var ctrl = this;
+    var BULKSELECTION_NONE = 'none';
+    var BULKSELECTION_ALL = 'all';
+    var BULKSELECTION_PARTIAL = 'partial';
+    ctrl.menuIsOpen = false;
+
+    ctrl.$onInit = function () {
+      ctrl.setBulkSelectionState(BULKSELECTION_NONE);
+    };
+    ctrl.updateBulkSelection = function (bulkSelectAction) {
+      ctrl.menuIsOpen = false;
+      ctrl.setBulkSelectionState (bulkSelectAction);
+      ctrl.updateSelectionFn(ctrl.bulkSelection);
+    };
+    ctrl.toggleBulkSelection = function () {
+      if (ctrl.selectedRecordCount > 0 || ctrl.bulkSelection === BULKSELECTION_ALL) {
+        ctrl.updateBulkSelection(BULKSELECTION_NONE);
+      } else {
+        ctrl.updateBulkSelection(BULKSELECTION_ALL);
+      }
+    };
+    ctrl.setBulkSelectionState = function(state) {
+      ctrl.bulkSelection = state;
+      switch (state) {
+      case BULKSELECTION_NONE:
+        ctrl.menuClass = 'fa-square-o';
+        break;
+      case BULKSELECTION_ALL:
+        ctrl.menuClass = 'fa-check-square all-selected';
+        break;
+      case BULKSELECTION_PARTIAL:
+        ctrl.menuClass = 'fa-minus-square-o partially-selected';
+        break;
+      }
+    };
+    ctrl.$doCheck = function () {
+      var recordsSelectedCount = ctrl.totalRecords - ctrl.selectedRecordCount;
+      if (ctrl.selectedRecordCount === 0) {
+        ctrl.setBulkSelectionState(BULKSELECTION_NONE);
+      }
+      if (recordsSelectedCount > 0 && ctrl.selectedRecordCount > 0 ) {
+        ctrl.setBulkSelectionState(BULKSELECTION_PARTIAL);
+      } else if (recordsSelectedCount === 0) {
+        ctrl.setBulkSelectionState(BULKSELECTION_ALL);
+      }
+    };
+  }
+});

src/bulkselection/bulkselection.html

@@ -0,0 +1,15 @@
+<div class="btn-group bulk-selection" uib-dropdown is-open="$ctrl.menuIsOpen">
+  <button class="btn btn-default" type="button" id="selectMenu" tooltip-placement="top"
+  uib-tooltip="{{'Select'}}">
+    <span class="fa bulk-selection-menuicon" ng-class="$ctrl.menuClass" ng-click="$ctrl.toggleBulkSelection()"></span>
+    <span class="caret" uib-dropdown-toggle></span>
+  </button>
+  <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="selectMenu">
+    <li>
+      <a role="menuitem" tabindex="-1" ng-click="$ctrl.updateBulkSelection('all')">All</a>
+    </li>
+    <li>
+      <a role="menuitem" tabindex="-1" ng-click="$ctrl.updateBulkSelection('none')">None</a>
+    </li>
+  </ul>
+</div>

src/bulkselection/bulkselection.less

@@ -0,0 +1,12 @@
+.bulk-selection {
+  .dropdown-menu {
+    a{
+      &:hover {
+          cursor: pointer;
+      }
+    }
+  }
+  .all-selected,.partially-selected {
+    color: @color-pf-blue-400;
+  }
+}

src/bulkselection/bulkselection.module.js

@@ -0,0 +1,8 @@
+/**
+ * @name  patternfly bulk selection
+ *
+ * @description
+ *   Allows for handling bulk selection of lists
+ *
+ */
+angular.module('patternfly.bulkselection', []);

src/patternfly.module.js

@@ -6,6 +6,7 @@
  */
 angular.module('patternfly', [
   'patternfly.autofocus',
+  'patternfly.bulkselection',
   'patternfly.card',
   'patternfly.datepicker',
   'patternfly.filters',

src/toolbars/examples/toolbar.js

@@ -13,6 +13,10 @@
  *                          See pfSimpleFilter for filter config options.
  *     <li>.sortConfig  - (Object) Optional sort config. If undefined, no sort capabilities are shown.
  *                          See pfSort for sort config options.
+ *      <li>.bulkSelectionConfig  - (Object) Optional bulk selection config. If undefined, no bulk selection capabilities are shown.
+ *          <ul style='list-style-type: none'>
+ *          <li>.bulkSelectionFn - (function(status)) This function should accept a parameter that is the state of bulk selection.  This function should handle the (states, all, none, partially)</li>
+ *          </ul>
  *     <li>.viewsConfig  - (Object) Optional configuration settings for view type selection
  *       <ul style='list-style-type: none'>
  *         <li>.views       - (Array) List of available views for selection. See pfViewUtils for standard available views
@@ -73,10 +77,6 @@
                </li>
              </ul>
            </span>
-           <button class="btn btn-default primary-action" type="button" ng-click="doAdd()">
-             <span class="fa fa-plus"></span>
-             Add Action
-           </button>
          </actions>
         </pf-toolbar>
       </div>
@@ -422,11 +422,6 @@
             name: 'Action 1',
             title: 'Do the first thing',
             actionFn: performAction
-          },
-          {
-            name: 'Action 2',
-            title: 'Do something else',
-            actionFn: performAction
           }
         ],
         moreActions: [
@@ -467,12 +462,30 @@
         ],
         actionsInclude: true
       };
-
+      $scope.bulkSelectionChanges = function(action) {
+        var selectAll = false;
+        switch(action) {
+          case 'all':
+            selectAll = true;
+          break;
+          case 'none':
+            selectAll = false;
+          break;
+        }
+        $scope.items.map((item) => {
+          item.selected = selectAll;
+        });
+        $scope.updateItemsAvailable();
+      }
+      $scope.selectionConfig = {
+        bulkSelectionFn: $scope.bulkSelectionChanges
+      }
       $scope.toolbarConfig = {
         viewsConfig: $scope.viewsConfig,
         filterConfig: $scope.filterConfig,
         sortConfig: $scope.sortConfig,
-        actionsConfig: $scope.actionsConfig
+        actionsConfig: $scope.actionsConfig,
+        bulkSelectionConfig: $scope.selectionConfig
       };
 
       $scope.listConfig = {

src/toolbars/toolbar.html

@@ -2,6 +2,13 @@
   <div class="row toolbar-pf" ng-class="{'table-view-pf-toolbar': $ctrl.isTableViewSelected()}">
     <div class="col-sm-12">
       <form class="toolbar-pf-actions" ng-class="{'no-filter': !$ctrl.config.filterConfig}">
+        <div class="form-group">
+          <pf-bulk-selection ng-if="$ctrl.config.bulkSelectionConfig" 
+            total-records="$ctrl.config.filterConfig.resultsCount" 
+            selected-record-count="$ctrl.config.filterConfig.selectedCount"
+            update-selection-fn="$ctrl.config.bulkSelectionConfig.bulkSelectionFn"
+            ></pf-bulk-selection>
+        </div>
         <div class="form-group toolbar-apf-filter">
           <pf-filter-fields config="$ctrl.config.filterConfig" ng-if="$ctrl.config.filterConfig" add-filter-fn="$ctrl.addFilter"></pf-filter-fields>
         </div>

src/toolbars/toolbars.module.js

@@ -9,4 +9,5 @@ angular.module('patternfly.toolbars', [
   'patternfly.utils',
   'patternfly.filters',
   'patternfly.sort',
+  'patternfly.bulkselection',
   'patternfly.views']);

styles/angular-patternfly.less

@@ -1,6 +1,7 @@
 @import "../node_modules/patternfly/dist/less/color-variables.less";
 @import "../node_modules/bootstrap/less/variables.less";
 @import "misc.less";
+@import "../src/bulkselection/bulkselection.less";
 @import "../src/card/card.less";
 @import "../src/charts/charts.less";
 @import "../src/views/views.less";

test/toolbars/toolbar.spec.js

@@ -4,12 +4,13 @@ describe('Directive:  pfToolbar', function () {
   var element;
   var $pfViewUtils;
   var performedAction;
+  var bulkSelectionState;
 
   // load the controller's module
   beforeEach(function () {
-    module('patternfly.toolbars', 'patternfly.views', 'patternfly.filters', 'toolbars/toolbar.html',
+    module('patternfly.toolbars', 'patternfly.views', 'patternfly.bulkselection', 'patternfly.filters', 'toolbars/toolbar.html',
       'filters/simple-filter/filter.html', 'filters/simple-filter/filter-fields.html', 'filters/simple-filter/filter-results.html',
-      'sort/sort.html');
+      'sort/sort.html', 'bulkselection/bulkselection.html');
   });
 
   beforeEach(inject(function (_$compile_, _$rootScope_, pfViewUtils) {
@@ -31,7 +32,10 @@ describe('Directive:  pfToolbar', function () {
     var performAction = function (action) {
       performedAction = action;
     };
-
+    bulkSelectionState = undefined;
+    var bulkSelectionCb = function(action) {
+      bulkSelectionState = action;
+    };
     $scope.config = {
       viewsConfig: {
         views: [$pfViewUtils.getDashboardView(), $pfViewUtils.getListView(), $pfViewUtils.getCardView(), $pfViewUtils.getTableView(), $pfViewUtils.getTopologyView()]
@@ -129,6 +133,9 @@ describe('Directive:  pfToolbar', function () {
             actionFn: performAction
           }
         ]
+      },
+      bulkSelectionConfig:{
+        bulkSelectionFn: bulkSelectionCb
       }
     };
 
@@ -300,7 +307,43 @@ describe('Directive:  pfToolbar', function () {
     active = element.find('.active');
     expect(active.length).toBe(1);
   });
+  it ('should have bulk selection menu shown', function() {
+    var bulkSelectionSelector = element.find('.bulk-selection');
+    expect(bulkSelectionSelector.length).toBe(1);
+  });
+  it('should allow bulk selection to select all', function() {
+    var bulkSelectionSelector = element.find('.bulk-selection-menuicon');
+    bulkSelectionState = 'none';
+    eventFire(bulkSelectionSelector[0], 'click');
+    $scope.$apply();
+    expect(bulkSelectionState).toBe('all');
+  });
+  it('should allow bulk selection to be toggled', function() {
+    var bulkSelectionSelector = element.find('.bulk-selection-menuicon');
+    eventFire(bulkSelectionSelector[0], 'click');
+    $scope.$apply();
+    eventFire(bulkSelectionSelector[0], 'click');
+    $scope.$apply();
+    expect(bulkSelectionState).toBe('none');
+  });
+  it ('should not show bulk selection when config is not supplied', function () {
 
+    $scope.config = {
+    };
+
+    var htmlTmp = '<pf-toolbar config="config"></pf-toolbar>';
+
+    compileHTML(htmlTmp, $scope);
+
+    bulkSelectionComponent = element.find('.bulk-selection');
+    expect(bulkSelectionComponent.length).toBe(0);
+  });
+  it('should allow bulkselection dropdown to unselect all results', function() {
+    var bulkSelectionButtons = element.find('.bulk-selection .dropdown-menu a');
+    eventFire(bulkSelectionButtons[1], 'click');
+    $scope.$apply();
+    expect(bulkSelectionState).toBe('none');
+  });
   it ('should call the callback function when a view selector clicked', function () {
     var listSelector = element.find('.toolbar-pf-view-selector .btn-link');
     var functionCalled = false;