From a98b2ee2c6bfc5d58f886826e873e310cef1aa7d Mon Sep 17 00:00:00 2001
From: Rasmus Fjord <rasmusfjord@gmail.com>
Date: Tue, 2 Apr 2019 08:20:47 +0200
Subject: [PATCH 1/3] [nuPickers] multiple add method

---
 .../Shared/ListPicker/ListPickerEditor.css    |  20 +-
 .../ListPicker/ListPickerEditorController.js  | 263 ++++++++++--------
 .../PrefetchListPickerEditor.html             |  45 +--
 3 files changed, 191 insertions(+), 137 deletions(-)

diff --git a/source/nuPickers/Shared/ListPicker/ListPickerEditor.css b/source/nuPickers/Shared/ListPicker/ListPickerEditor.css
index 4c5ad4e..f046008 100644
--- a/source/nuPickers/Shared/ListPicker/ListPickerEditor.css
+++ b/source/nuPickers/Shared/ListPicker/ListPickerEditor.css
@@ -13,6 +13,7 @@
 .list-picker .text-input-bar {
     border: 1px solid transparent;
     padding-bottom:1px;
+  position: relative;
 }
 
 .list-picker .text-input-bar input {
@@ -90,9 +91,22 @@
     background-color:transparent;
 }
 
-.list-picker .placeholders li {
-    border:1px dashed #ccc;
-}
+  .list-picker .button-add-multiple {
+    border-left: 1px solid #ccc;
+    left: 43%;
+    width: 48px;
+    height: 30px;
+    top: 1px;
+    line-height: 30px;
+  }
+  .list-picker button-add-multiple-positioner {
+    width: 48%;
+    min-height: 30px;
+    line-height: 30px;
+  }
+  .list-picker .placeholders li {
+    border: 1px dashed #ccc;
+  }
 
 /*
     <ul class="bars selectable">
diff --git a/source/nuPickers/Shared/ListPicker/ListPickerEditorController.js b/source/nuPickers/Shared/ListPicker/ListPickerEditorController.js
index 1d9f624..4645926 100644
--- a/source/nuPickers/Shared/ListPicker/ListPickerEditorController.js
+++ b/source/nuPickers/Shared/ListPicker/ListPickerEditorController.js
@@ -1,123 +1,154 @@
 // this is used as an abstract base controller for the PagedList, PrefetchList and TypeaheadList controllers
 
 angular
-    .module("umbraco")
-    .controller("nuPickers.Shared.ListPicker.ListPickerEditorController",
-        ['$scope', 'nuPickers.Shared.Editor.EditorResource',
-        function ($scope, editorResource) {
-
-            // array of option objects, for the selectable list 
-            $scope.selectableOptions = []; // [{"key":"","label":""}...]
-
-            // array of option objects, for the selected list
-            $scope.selectedOptions = []; // [{"key":"","label":""}...]
-
-            // http://api.jqueryui.com/sortable/
-            $scope.sortableConfiguration = { axis: 'y' };
-
-            // returns true if option hasn't yet been picked, or duplicates are allowed
-            $scope.isSelectable = function (option) {
-                return ($scope.model.config.listPicker.allowDuplicates || !$scope.isUsed(option));
-            };
-
-            // returns true is this option has been picked
-            $scope.isUsed = function (option) {
-                return $scope.selectedOptions.map(function (option) { return option.key; }).indexOf(option.key) >= 0;
-            };
-
-            // return true if option can be picked
-            $scope.isValidSelection = function (option) {
-                return $scope.isSelectable(option) && ($scope.selectedOptions.length < $scope.model.config.listPicker.maxItems || $scope.model.config.listPicker.maxItems <= 0);
-            };
-
-            $scope.cursorUp = function () {
-                // TODO: move highlight / active of next selectable
-            };
-
-            $scope.cursorDown = function () {
-                // TODO: move highlight / active of previous selectable
-            };
-
-            $scope.enterKey = function () {
-                // TODO: select highlighted
-            }
-
-            // picking an item from 'selectable' for 'selected'
-            $scope.selectOption = function (option) {
-                if ($scope.isValidSelection(option)) {
-                    // if sorting not allowed, then insert item in same order as in the selectable list (rebuild all picked items)
-                    if (!allowSorting()) {
-                                                
-                        var keys = $scope.selectedOptions.map(function (option) { return option.key; }); // get existing picked keys
-                        keys.push(option.key); // add new picked key
-
-                        // rebuild all selected options to match selectable ordering
-                        $scope.selectedOptions = [];                        
-                        for (var i = 0; i < $scope.selectableOptions.length; i++) {
-                            for (var j = 0; j < keys.length; j++) {
-                                if ($scope.selectableOptions[i].key == keys[j]) {
-                                    $scope.selectedOptions.push($scope.selectableOptions[i]);
-                                }
-                            }
-                        }
-                    }
-                    else {
-                        $scope.selectedOptions.push(option);
-                    }
+  .module("umbraco")
+  .controller("nuPickers.Shared.ListPicker.ListPickerEditorController",
+    ['$scope', 'nuPickers.Shared.Editor.EditorResource',
+      function ($scope, editorResource) {
+
+        // array of option objects, for the selectable list 
+        $scope.selectableOptions = []; // [{"key":"","label":""}...]
+
+        // array of option objects, for the selected list
+        $scope.selectedOptions = []; // [{"key":"","label":""}...]
+
+        // http://api.jqueryui.com/sortable/
+        $scope.sortableConfiguration = { axis: 'y' };
+
+        // returns true if option hasn't yet been picked, or duplicates are allowed
+        $scope.isSelectable = function (option) {
+          return ($scope.model.config.listPicker.allowDuplicates || !$scope.isUsed(option));
+        };
+
+        // returns true is this option has been picked
+        $scope.isUsed = function (option) {
+          return $scope.selectedOptions.map(function (option) { return option.key; }).indexOf(option.key) >= 0;
+        };
+
+        // return true if option can be picked
+        $scope.isValidSelection = function (option) {
+          return $scope.isSelectable(option) && ($scope.selectedOptions.length < $scope.model.config.listPicker.maxItems || $scope.model.config.listPicker.maxItems <= 0);
+        };
+
+        $scope.cursorUp = function () {
+          // TODO: move highlight / active of next selectable
+        };
+
+        $scope.cursorDown = function () {
+          // TODO: move highlight / active of previous selectable
+        };
+
+        $scope.enterKey = function () {
+          // TODO: select highlighted
+        }
+
+        // picking an item from 'selectable' for 'selected'
+        $scope.selectOption = function (option) {
+          if ($scope.isValidSelection(option)) {
+            // if sorting not allowed, then insert item in same order as in the selectable list (rebuild all picked items)
+            if (!allowSorting()) {
+
+              var keys = $scope.selectedOptions.map(function (option) { return option.key; }); // get existing picked keys
+              keys.push(option.key); // add new picked key
+
+              // rebuild all selected options to match selectable ordering
+              $scope.selectedOptions = [];
+              for (var i = 0; i < $scope.selectableOptions.length; i++) {
+                for (var j = 0; j < keys.length; j++) {
+                  if ($scope.selectableOptions[i].key == keys[j]) {
+                    $scope.selectedOptions.push($scope.selectableOptions[i]);
+                  }
                 }
-            };
-
-            // count for number of dashed placeholders to render
-            $scope.getRequiredPlaceholderCount = function () {
-                var count = $scope.model.config.listPicker.minItems - $scope.selectedOptions.length;
-                if (count > 0) { return new Array(count); }
-                return null;
+              }
             }
-
-            // returns true is the 'select' placeholder should be rendered
-            $scope.showSelectPlaceholder = function () {
-                return ($scope.model.config.typeaheadListPicker || $scope.model.config.listPicker.allowDuplicates || $scope.selectedOptions.length < $scope.selectableOptions.length)
-                        && ($scope.selectedOptions.length >= $scope.model.config.listPicker.minItems)
-                        && (($scope.selectedOptions.length < $scope.model.config.listPicker.maxItems) || $scope.model.config.listPicker.maxItems == 0);
+            else {
+              $scope.selectedOptions.push(option);
             }
-
-            // returns true if selected options can be sorted
-            $scope.isSortable = function () {
-
-                // if prefetch list doesn't allow sorting
-                if (!allowSorting()) { return false; }
-
-                // if not allowing duplicates, then check selected items > 1
-                if (!$scope.model.config.listPicker.allowDuplicates && $scope.selectedOptions.length > 1) { return true; }
-
-                // duplicates allowed, so chheck there are at least 2 distinct items
-                var keys = $scope.selectedOptions.map(function (option) { return option.key; }); // key all selected keys
-                return keys.filter(function (value, index) { return keys.indexOf(value) == index; }).length >= 2;
-            };
-
-            // sorting is allowed unless it's a prefetch list and doesn't have the allow sorting option checked (typeahead allows)
-            function allowSorting() {
-                return !($scope.model.config.prefetchListPicker && !$scope.model.config.prefetchListPicker.allowSorting);
+          }
+        };
+
+        // picking an item from 'selectable' for 'selected'
+        $scope.selectAllOptions = function (options) {
+          console.log("TEST");
+          console.log(options);
+          for (i = 0; i < options.length; i++) {
+           var option = options[i];
+
+            if ($scope.isValidSelection(option)) {
+              // if sorting not allowed, then insert item in same order as in the selectable list (rebuild all picked items)
+              if (!allowSorting()) {
+
+                var keys = $scope.selectedOptions.map(function (option) { return option.key; }); // get existing picked keys
+                keys.push(option.key); // add new picked key
+
+                // rebuild all selected options to match selectable ordering
+                $scope.selectedOptions = [];
+                for (var i = 0; i < $scope.selectableOptions.length; i++) {
+                  for (var j = 0; j < keys.length; j++) {
+                    if ($scope.selectableOptions[i].key == keys[j]) {
+                      $scope.selectedOptions.push($scope.selectableOptions[i]);
+                    }
+                  }
+                }
+              }
+              else {
+                $scope.selectedOptions.push(option);
+              }
             }
-
-            // remove option from 'selected'
-            $scope.deselectOption = function ($index) {
-                $scope.selectedOptions.splice($index, 1);
-            };
-             
-            $scope.$watchCollection('selectedOptions', function () {
-
-                // set validation state
-                $scope.listPickerForm.validation.$setValidity('validationMessage',
-                                    ($scope.selectedOptions.length >= $scope.model.config.listPicker.minItems &&
-                                    ($scope.selectedOptions.length <= $scope.model.config.listPicker.maxItems || $scope.model.config.listPicker.maxItems < 1)));
-
-                // toggle sorting ui (updated on change, for example if all picked items are identical)
-                $scope.sortableConfiguration.disabled = !$scope.isSortable();
-            });
-
-            $scope.$on("formSubmitting", function () {
-                $scope.model.value = editorResource.createSaveValue($scope.model.config, $scope.selectedOptions);
-            });
-
-        }]);
\ No newline at end of file
+          }
+        };
+
+        // count for number of dashed placeholders to render
+        $scope.getRequiredPlaceholderCount = function () {
+          var count = $scope.model.config.listPicker.minItems - $scope.selectedOptions.length;
+          if (count > 0) { return new Array(count); }
+          return null;
+        }
+
+        // returns true is the 'select' placeholder should be rendered
+        $scope.showSelectPlaceholder = function () {
+          return ($scope.model.config.typeaheadListPicker || $scope.model.config.listPicker.allowDuplicates || $scope.selectedOptions.length < $scope.selectableOptions.length)
+            && ($scope.selectedOptions.length >= $scope.model.config.listPicker.minItems)
+            && (($scope.selectedOptions.length < $scope.model.config.listPicker.maxItems) || $scope.model.config.listPicker.maxItems == 0);
+        }
+
+        // returns true if selected options can be sorted
+        $scope.isSortable = function () {
+
+          // if prefetch list doesn't allow sorting
+          if (!allowSorting()) { return false; }
+
+          // if not allowing duplicates, then check selected items > 1
+          if (!$scope.model.config.listPicker.allowDuplicates && $scope.selectedOptions.length > 1) { return true; }
+
+          // duplicates allowed, so chheck there are at least 2 distinct items
+          var keys = $scope.selectedOptions.map(function (option) { return option.key; }); // key all selected keys
+          return keys.filter(function (value, index) { return keys.indexOf(value) == index; }).length >= 2;
+        };
+
+        // sorting is allowed unless it's a prefetch list and doesn't have the allow sorting option checked (typeahead allows)
+        function allowSorting() {
+          return !($scope.model.config.prefetchListPicker && !$scope.model.config.prefetchListPicker.allowSorting);
+        }
+
+        // remove option from 'selected'
+        $scope.deselectOption = function ($index) {
+          $scope.selectedOptions.splice($index, 1);
+        };
+
+        $scope.$watchCollection('selectedOptions', function () {
+
+          // set validation state
+          $scope.listPickerForm.validation.$setValidity('validationMessage',
+            ($scope.selectedOptions.length >= $scope.model.config.listPicker.minItems &&
+              ($scope.selectedOptions.length <= $scope.model.config.listPicker.maxItems || $scope.model.config.listPicker.maxItems < 1)));
+
+          // toggle sorting ui (updated on change, for example if all picked items are identical)
+          $scope.sortableConfiguration.disabled = !$scope.isSortable();
+        });
+
+        $scope.$on("formSubmitting", function () {
+          $scope.model.value = editorResource.createSaveValue($scope.model.config, $scope.selectedOptions);
+        });
+
+      }]);
\ No newline at end of file
diff --git a/source/nuPickers/Shared/PrefetchListPicker/PrefetchListPickerEditor.html b/source/nuPickers/Shared/PrefetchListPicker/PrefetchListPickerEditor.html
index dc514f4..7845c0e 100644
--- a/source/nuPickers/Shared/PrefetchListPicker/PrefetchListPickerEditor.html
+++ b/source/nuPickers/Shared/PrefetchListPicker/PrefetchListPickerEditor.html
@@ -1,26 +1,35 @@
 <div ng-controller="nuPickers.Shared.ListPicker.ListPickerEditorController" class="list-picker">
 
-    <ng-form name="listPickerForm">
-        <input type="hidden" name="validation" ng-model="model.value" />
-        <span val-msg-for="validation" val-toggle-msg="validationMessage"></span>
-    </ng-form>
+  <ng-form name="listPickerForm">
+    <input type="hidden" name="validation" ng-model="model.value" />
+    <span val-msg-for="validation" val-toggle-msg="validationMessage"></span>
+  </ng-form>
 
-    <div ng-controller="nuPickers.Shared.PrefetchListPicker.PrefetchListPickerEditorController" ng-class="{'has-text-input-bar': model.config.prefetchListPicker.enableFiltering}">
+  <div ng-controller="nuPickers.Shared.PrefetchListPicker.PrefetchListPickerEditorController" ng-class="{'has-text-input-bar': model.config.prefetchListPicker.enableFiltering}">
 
-        <!-- filter -->
-        <div class="text-input-bar" 
-             ng-show="model.config.prefetchListPicker.enableFiltering">
-            <input type="text"
-                   placeholder="filter"
-                   ng-model="filter"
-                   ng-trim="false"
-                   nu-cursor-up="cursorUp()"
-                   nu-cursor-down="cursorDown()"
-                   nu-enter-key="enterKey()" />
+    <!-- filter -->
+    <div class="text-input-bar"
+         ng-show="model.config.prefetchListPicker.enableFiltering">
+      <input type="text"
+             placeholder="filter"
+             ng-model="filter"
+             ng-trim="false"
+             nu-cursor-up="cursorUp()"
+             nu-cursor-down="cursorDown()"
+             nu-enter-key="enterKey()" />
+      <div class="button-add-multiple-positioner">
+        
+        <a href=""
+           class="button icon color-orange active icon-add button-add-multiple"
+           ng-mouseleave="lit = false" ng-click="lit = false; selectAllOptions(selectableOptions)"
+        >
+        </a>
         </div>
+      
+    </div>
 
-        <ng-include src="'/App_Plugins/nuPickers/Shared/ListPicker/ListPickerSelectablePartial.html'"></ng-include>
-        <ng-include src="'/App_Plugins/nuPickers/Shared/ListPicker/ListPickerSelectedPartial.html'"></ng-include>
+    <ng-include src="'/App_Plugins/nuPickers/Shared/ListPicker/ListPickerSelectablePartial.html'"></ng-include>
+    <ng-include src="'/App_Plugins/nuPickers/Shared/ListPicker/ListPickerSelectedPartial.html'"></ng-include>
 
-    </div>
+  </div>
 </div>
\ No newline at end of file

From da6b3adac5e21a8ad76d90d441fe522092dad76c Mon Sep 17 00:00:00 2001
From: Rasmus Fjord <rasmusfjord@gmail.com>
Date: Tue, 2 Apr 2019 09:17:21 +0200
Subject: [PATCH 2/3] [nuPickers] css changes for the add button

---
 source/nuPickers/Shared/ListPicker/ListPickerEditor.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/source/nuPickers/Shared/ListPicker/ListPickerEditor.css b/source/nuPickers/Shared/ListPicker/ListPickerEditor.css
index f046008..c9c93af 100644
--- a/source/nuPickers/Shared/ListPicker/ListPickerEditor.css
+++ b/source/nuPickers/Shared/ListPicker/ListPickerEditor.css
@@ -93,13 +93,13 @@
 
   .list-picker .button-add-multiple {
     border-left: 1px solid #ccc;
-    left: 43%;
+    left: 43.2%;
     width: 48px;
     height: 30px;
     top: 1px;
     line-height: 30px;
   }
-  .list-picker button-add-multiple-positioner {
+  .list-picker .button-add-multiple-positioner {
     width: 48%;
     min-height: 30px;
     line-height: 30px;

From c5192b2bfeb5524f74787b0619065a5575e3ddf0 Mon Sep 17 00:00:00 2001
From: Rasmus Fjord <rasmusfjord@gmail.com>
Date: Wed, 3 Apr 2019 07:45:46 +0200
Subject: [PATCH 3/3] [nuPickers] minor css change

---
 source/nuPickers/Shared/ListPicker/ListPickerEditor.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/source/nuPickers/Shared/ListPicker/ListPickerEditor.css b/source/nuPickers/Shared/ListPicker/ListPickerEditor.css
index c9c93af..abfd7df 100644
--- a/source/nuPickers/Shared/ListPicker/ListPickerEditor.css
+++ b/source/nuPickers/Shared/ListPicker/ListPickerEditor.css
@@ -94,7 +94,7 @@
   .list-picker .button-add-multiple {
     border-left: 1px solid #ccc;
     left: 43.2%;
-    width: 48px;
+    width: 41px;
     height: 30px;
     top: 1px;
     line-height: 30px;
@@ -103,6 +103,7 @@
     width: 48%;
     min-height: 30px;
     line-height: 30px;
+    display: inline;
   }
   .list-picker .placeholders li {
     border: 1px dashed #ccc;