Merge pull request #1998 from DarkIsDude/master

feat(choices): allow user select group header

Author: Jefiozie

src/common.css

@@ -127,6 +127,15 @@ body > .select2-container.open {
     width: 0;
 }
 
+.ui-select-container[theme="selectize"] .ui-select-header-group-selectable:hover {
+    background-color: #f5f5f5;
+}
+
+.ui-select-container[theme="selectize"] .ui-select-header-group-selectable {
+    cursor: pointer;
+    padding-left: 15px;
+}
+
 /* Bootstrap theme */
 
 /* Helper class to show styles when focus */
@@ -253,6 +262,16 @@ body > .ui-select-bootstrap.open {
   border-right: 1px solid #428bca;
 }
 
+.ui-select-bootstrap .ui-select-header-group-selectable:hover {
+    background-color: #f5f5f5;
+}
+
+.ui-select-bootstrap .ui-select-header-group-selectable {
+    color: black;
+    cursor: pointer;
+    padding: 3px 10px;
+}
+
 .ui-select-bootstrap .ui-select-choices-row>span {
     cursor: pointer;
     display: block;

src/uiSelectController.js

@@ -175,9 +175,12 @@ uis.controller('uiSelectCtrl',
     ctrl.searchInput[0].focus();
   };
 
-  ctrl.findGroupByName = function(name) {
+  ctrl.findGroupByName = function(name, noStrict) {
     return ctrl.groups && ctrl.groups.filter(function(group) {
-      return group.name === name;
+      if (noStrict)
+        return group.name == name;
+      else
+        return group.name === name;
     })[0];
   };
 

src/uiSelectHeaderGroupSelectableDirective.js

@@ -0,0 +1,78 @@
+uis.directive('uiSelectHeaderGroupSelectable', ['$timeout', function($timeout) {
+  return {
+    restrict: 'EA',
+    require: ['^uiSelect'],
+    scope: {
+      isEnabled: "<?uiSelectHeaderGroupSelectable"
+    },
+    link: function ($scope, $element, attrs, select) {
+      // TODO Why that???
+      var $select = select[0];
+      if (angular.isUndefined($scope.isEnabled)) {
+        $scope.isEnabled = true;
+      }
+
+      function isEnabled() {
+        return angular.isUndefined($scope.isEnabled) || $scope.isEnabled;
+      }
+
+      function getElements() {
+        if ($select.multiple && $select.groups) {
+          return $element.querySelectorAll('.ui-select-choices-group-label');
+        } else {
+          console.error('Use uiSelectHeaderGroupSelectable with no multiple uiSelect or without groupBy');
+          return [];
+        }
+      }
+
+      function enableClick() {
+        if (isEnabled()) {
+          angular.forEach(getElements(), function(e) {
+            var element = angular.element(e);
+
+            // Check the onClick event is not already listen
+            if (!element.hasClass('ui-select-header-group-selectable')) {
+              element.addClass('ui-select-header-group-selectable');
+
+              element.on('click', function () {
+                if (isEnabled()) {
+                  var group = $select.findGroupByName(element.text(), true);
+
+                  angular.forEach(group.items, function(item) {
+                    $timeout(function() {
+                      $select.select(item, false, ' ');
+                    });
+                  });
+                }
+              });
+            }
+          });
+        }
+      }
+
+      function disableClick() {
+        if (!isEnabled()) {
+          angular.forEach(getElements(), function(e) {
+            var element = angular.element(e);
+            element.removeClass('ui-select-header-group-selectable');
+            element.off('click');
+          });
+        }
+      }
+
+      // Watch element to trigger select event
+      $scope.$watch('isEnabled', function() {
+        if (!isEnabled()) {
+          disableClick();
+        } else {
+          enableClick();
+        }
+      });
+
+      $scope.$watch('$select.groups', enableClick);
+      $scope.$watch(function() {
+        return $select.selected && $select.selected.length ? $select.selected.length : -1;
+      }, enableClick);
+    }
+  };
+}]);

test/select.spec.js

@@ -1921,13 +1921,12 @@ describe('ui-select tests', function () {
         if (attrs.removeSelected !== undefined) { attrsHtml += ' remove-selected="' + attrs.removeSelected + '"'; }
         if (attrs.spinnerEnabled !== undefined) { attrsHtml += ' spinner-enabled="' + attrs.spinnerEnabled + '"'; }
         if (attrs.spinnerClass !== undefined) { attrsHtml += ' spinner-class="' + attrs.spinnerClass + '"'; }
-
         if (attrs.groupBy !== undefined) { choicesAttrsHtml += ' group-by="' + attrs.groupBy + '"'; }
         if (attrs.uiDisableChoice !== undefined) { choicesAttrsHtml += ' ui-disable-choice="' + attrs.uiDisableChoice + '"'; }
         if (attrs.refresh !== undefined) { choicesAttrsHtml += ' refresh="' + attrs.refresh + '"'; }
         if (attrs.refreshDelay !== undefined) { choicesAttrsHtml += ' refresh-delay="' + attrs.refreshDelay + '"'; }
-
         if (attrs.lockChoice !== undefined) { matchesAttrsHtml += ' ui-lock-choice="' + attrs.lockChoice + '"'; }
+        if (attrs.uiSelectHeaderGroupSelectable !== undefined) { choicesAttrsHtml += ' ui-select-header-group-selectable="' + attrs.uiSelectHeaderGroupSelectable + '"'; }
       }
 
       matchesAttrsHtml += ' placeholder="' +  matchesPlaceholder + '"';
@@ -2084,6 +2083,7 @@ describe('ui-select tests', function () {
       expect(containerWidth - newWidth).toBeLessThan(10);
 
     });
+
     it('should move to last match when pressing BACKSPACE key from search', function () {
 
       var el = createUiSelectMultiple();
@@ -2158,7 +2158,6 @@ describe('ui-select tests', function () {
 
     });
 
-
     it('should move to last match when pressing LEFT key from search', function () {
 
       var el = createUiSelectMultiple();
@@ -3161,6 +3160,37 @@ describe('ui-select tests', function () {
         expect(el.scope().$select.spinnerClass).toBe('randomclass');
       });
     });
+
+    describe('uiSelectHeaderGroupSelectable directive', function () {
+      it('should have a default value of false', function () {
+        var el = createUiSelectMultiple({ groupBy: "'age'", uiSelectHeaderGroupSelectable: true });
+        var ctrl = el.scope().$select;
+
+        showChoicesForSearch(el, '');
+        expect(ctrl.multiple).toEqual(true);
+        expect(ctrl.groups.length).toEqual(5);
+        openDropdown(el);
+
+        $(el).find('div.ui-select-header-group-selectable').first().click();
+        showChoicesForSearch(el, '');
+        expect(ctrl.selected.length).toEqual(2);
+      });
+
+      it('should don\'t work with false attribute', function () {
+        var el = createUiSelectMultiple({ groupBy: "'age'", uiSelectHeaderGroupSelectable: false });
+        var ctrl = el.scope().$select;
+
+        showChoicesForSearch(el, '');
+        expect(ctrl.multiple).toEqual(true);
+        expect(ctrl.groups.length).toEqual(5);
+        openDropdown(el);
+
+        $(el).find('div.ui-select-header-group-selectable').first().click();
+        showChoicesForSearch(el, '');
+
+        expect(ctrl.selected.length).toEqual(0);
+      });
+    });
   });
 
   it('should add an id to the search input field', function () {