Add new directive for select header with groupBy

Author: DarkIsDude

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

@@ -166,9 +166,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,39 @@
+uis.directive('uiSelectHeaderGroupSelectable', ['$timeout', function($timeout) {
+  return {
+    restrict: 'EA',
+    require: ['^uiSelect'],
+    scope: true,
+    link: function ($scope, $element, attrs, select) {
+      // TODO Why that???
+      var $select = select[0];
+
+      $scope.$watch('$select.groups', function() {
+        if ($select.multiple && $select.groups) {
+          var elements = $element.querySelectorAll('.ui-select-choices-group-label');
+
+          angular.forEach(elements, 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 () {
+                // TODO It's the good way?
+                var group = $select.findGroupByName(element.text(), true);
+
+                angular.forEach(group.items, function(item) {
+                  $timeout(function() {
+                    $select.select(item, false, ' ');
+                  });
+                });
+              });
+            }
+          });
+        } else {
+          console.error('Use uiSelectHeaderGroupSelectable with no multiple uiSelect or without groupBy');
+        }
+      });
+    }
+  };
+}]);