From 1f5d2459d6575ed8109c500760ad0e1e98c97783 Mon Sep 17 00:00:00 2001 From: doudou Date: Mon, 29 May 2017 16:44:42 +0200 Subject: [PATCH 1/9] feat(choices): allow user select group header User can now select header of group by option to select all item in this group #1074 old pull request ref --- src/bootstrap/choices.tpl.html | 2 +- src/common.css | 9 +++++++++ src/uiSelectController.js | 7 +++++++ 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/bootstrap/choices.tpl.html b/src/bootstrap/choices.tpl.html index c3f78e2e7..b1493d9e7 100644 --- a/src/bootstrap/choices.tpl.html +++ b/src/bootstrap/choices.tpl.html @@ -2,7 +2,7 @@ ng-show="$select.open && $select.items.length > 0">
  • -
    +
    diff --git a/src/common.css b/src/common.css index c81d540c7..9582d64af 100644 --- a/src/common.css +++ b/src/common.css @@ -253,6 +253,15 @@ body > .ui-select-bootstrap.open { border-right: 1px solid #428bca; } +.ui-select-bootstrap .ui-select-choices-group:hover { + background-color: #f5f5f5; +} + +.ui-select-bootstrap .ui-select-choices-group-label.dropdown-header { + color: black; + cursor: pointer; +} + .ui-select-bootstrap .ui-select-choices-row>span { cursor: pointer; display: block; diff --git a/src/uiSelectController.js b/src/uiSelectController.js index 0d1c595eb..9bceec437 100644 --- a/src/uiSelectController.js +++ b/src/uiSelectController.js @@ -61,6 +61,13 @@ uis.controller('uiSelectCtrl', throw uiSelectMinErr('searchInput', "Expected 1 input.ui-select-search but got '{0}'.", ctrl.searchInput.length); } + ctrl.headerClick = function(g) { + var items = g.items; + for(var i = 0; i < items.length; i++) { + ctrl.select(items[i], false, ' '); + } + }; + ctrl.isEmpty = function() { return isNil(ctrl.selected) || ctrl.selected === '' || (ctrl.multiple && ctrl.selected.length === 0); }; From ad66bf78614c80c192a0b33edf7e6056fd5b2d51 Mon Sep 17 00:00:00 2001 From: doudou Date: Fri, 2 Jun 2017 11:59:17 +0200 Subject: [PATCH 2/9] feat(choices): allow user select group header User can now select header of group by option to select all item in this group #1074 old pull request ref --- src/common.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common.css b/src/common.css index 9582d64af..9b5eebab3 100644 --- a/src/common.css +++ b/src/common.css @@ -253,7 +253,7 @@ body > .ui-select-bootstrap.open { border-right: 1px solid #428bca; } -.ui-select-bootstrap .ui-select-choices-group:hover { +.ui-select-bootstrap .ui-select-choices-group.dropdown-header:hover { background-color: #f5f5f5; } From bfff80bafc1eca16b8474c794270f993e2dd4de8 Mon Sep 17 00:00:00 2001 From: doudou Date: Fri, 2 Jun 2017 11:59:17 +0200 Subject: [PATCH 3/9] feat(choices): allow user select group header User can now select header of group by option to select all item in this group #1074 old pull request ref --- src/common.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common.css b/src/common.css index 9582d64af..46776af10 100644 --- a/src/common.css +++ b/src/common.css @@ -253,7 +253,7 @@ body > .ui-select-bootstrap.open { border-right: 1px solid #428bca; } -.ui-select-bootstrap .ui-select-choices-group:hover { +.ui-select-bootstrap .ui-select-choices-group-label.dropdown-header:hover { background-color: #f5f5f5; } From fc5b26caf6026642bcf73861ced0aec9a4c91b8e Mon Sep 17 00:00:00 2001 From: doudou Date: Thu, 22 Jun 2017 17:22:30 +0200 Subject: [PATCH 4/9] Add timeout when you select more than 2/3 elements --- src/uiSelectController.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/uiSelectController.js b/src/uiSelectController.js index 9bceec437..eeed0549d 100644 --- a/src/uiSelectController.js +++ b/src/uiSelectController.js @@ -62,9 +62,15 @@ uis.controller('uiSelectCtrl', } ctrl.headerClick = function(g) { + function sendItem(item) { + $timeout(function() { + ctrl.select(item, false, ' '); + }); + } + var items = g.items; for(var i = 0; i < items.length; i++) { - ctrl.select(items[i], false, ' '); + sendItem(items[i]); } }; From 5dfabd4f35f4af68c7cb9327aba17f0dabdd059b Mon Sep 17 00:00:00 2001 From: doudou Date: Wed, 6 Sep 2017 14:55:32 +0200 Subject: [PATCH 5/9] Remove first system --- src/bootstrap/choices.tpl.html | 2 +- src/common.css | 9 --------- src/uiSelectController.js | 13 ------------- 3 files changed, 1 insertion(+), 23 deletions(-) diff --git a/src/bootstrap/choices.tpl.html b/src/bootstrap/choices.tpl.html index b1493d9e7..c3f78e2e7 100644 --- a/src/bootstrap/choices.tpl.html +++ b/src/bootstrap/choices.tpl.html @@ -2,7 +2,7 @@ ng-show="$select.open && $select.items.length > 0">
  • -
    +
    diff --git a/src/common.css b/src/common.css index 46776af10..c81d540c7 100644 --- a/src/common.css +++ b/src/common.css @@ -253,15 +253,6 @@ body > .ui-select-bootstrap.open { border-right: 1px solid #428bca; } -.ui-select-bootstrap .ui-select-choices-group-label.dropdown-header:hover { - background-color: #f5f5f5; -} - -.ui-select-bootstrap .ui-select-choices-group-label.dropdown-header { - color: black; - cursor: pointer; -} - .ui-select-bootstrap .ui-select-choices-row>span { cursor: pointer; display: block; diff --git a/src/uiSelectController.js b/src/uiSelectController.js index eeed0549d..0d1c595eb 100644 --- a/src/uiSelectController.js +++ b/src/uiSelectController.js @@ -61,19 +61,6 @@ uis.controller('uiSelectCtrl', throw uiSelectMinErr('searchInput', "Expected 1 input.ui-select-search but got '{0}'.", ctrl.searchInput.length); } - ctrl.headerClick = function(g) { - function sendItem(item) { - $timeout(function() { - ctrl.select(item, false, ' '); - }); - } - - var items = g.items; - for(var i = 0; i < items.length; i++) { - sendItem(items[i]); - } - }; - ctrl.isEmpty = function() { return isNil(ctrl.selected) || ctrl.selected === '' || (ctrl.multiple && ctrl.selected.length === 0); }; From 64b6ab153c8ead9f0398ce6fb906bc919d0e5eb4 Mon Sep 17 00:00:00 2001 From: doudou Date: Wed, 6 Sep 2017 16:39:31 +0200 Subject: [PATCH 6/9] Add new directive for select header with groupBy --- src/common.css | 19 +++++++++ src/uiSelectController.js | 7 +++- src/uiSelectHeaderGroupSelectableDirective.js | 39 +++++++++++++++++++ 3 files changed, 63 insertions(+), 2 deletions(-) create mode 100644 src/uiSelectHeaderGroupSelectableDirective.js diff --git a/src/common.css b/src/common.css index c81d540c7..6124b0f2e 100644 --- a/src/common.css +++ b/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; diff --git a/src/uiSelectController.js b/src/uiSelectController.js index 0d1c595eb..8a2177e99 100644 --- a/src/uiSelectController.js +++ b/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]; }; diff --git a/src/uiSelectHeaderGroupSelectableDirective.js b/src/uiSelectHeaderGroupSelectableDirective.js new file mode 100644 index 000000000..d4cb8de5f --- /dev/null +++ b/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'); + } + }); + } + }; +}]); From fb1bc85c43a3a19e8cb96e89640da0eb5375685f Mon Sep 17 00:00:00 2001 From: doudou Date: Wed, 6 Sep 2017 17:17:59 +0200 Subject: [PATCH 7/9] Add test for uiSelectHeaderGroupSelectable directive --- test/select.spec.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/test/select.spec.js b/test/select.spec.js index 3922834af..ec5f9fe83 100644 --- a/test/select.spec.js +++ b/test/select.spec.js @@ -1882,6 +1882,7 @@ describe('ui-select tests', function () { if (attrs.refreshDelay !== undefined) { choicesAttrsHtml += ' refresh-delay="' + attrs.refreshDelay + '"'; } if (attrs.spinnerEnabled !== undefined) { attrsHtml += ' spinner-enabled="' + attrs.spinnerEnabled + '"'; } if (attrs.spinnerClass !== undefined) { attrsHtml += ' spinner-class="' + attrs.spinnerClass + '"'; } + if (attrs.uiSelectHeaderGroupSelectable !== undefined) { choicesAttrsHtml += ' ui-select-header-group-selectable'; } } return compileTemplate( @@ -3054,6 +3055,23 @@ 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 add an id to the search input field', function () { From 19a9b9a8595a3ed00467004581048ab9d9e5ce59 Mon Sep 17 00:00:00 2001 From: doudou Date: Wed, 20 Sep 2017 15:02:53 +0200 Subject: [PATCH 8/9] Add option to enable or disable it --- src/uiSelectHeaderGroupSelectableDirective.js | 61 +++++++++++++++---- test/select.spec.js | 21 ++++++- 2 files changed, 68 insertions(+), 14 deletions(-) diff --git a/src/uiSelectHeaderGroupSelectableDirective.js b/src/uiSelectHeaderGroupSelectableDirective.js index d4cb8de5f..826b7e08d 100644 --- a/src/uiSelectHeaderGroupSelectableDirective.js +++ b/src/uiSelectHeaderGroupSelectableDirective.js @@ -2,16 +2,32 @@ uis.directive('uiSelectHeaderGroupSelectable', ['$timeout', function($timeout) { return { restrict: 'EA', require: ['^uiSelect'], - scope: true, + scope: { + isEnabled: " Date: Mon, 9 Oct 2017 10:51:00 +0200 Subject: [PATCH 9/9] Change something to test the build --- test/select.spec.js | 1 - 1 file changed, 1 deletion(-) diff --git a/test/select.spec.js b/test/select.spec.js index b15974ce3..095673382 100644 --- a/test/select.spec.js +++ b/test/select.spec.js @@ -3173,7 +3173,6 @@ describe('ui-select tests', function () { $(el).find('div.ui-select-header-group-selectable').first().click(); showChoicesForSearch(el, ''); - expect(ctrl.selected.length).toEqual(2); });