From b28d23b8e736f42187178d2295f09d3ad3c90a26 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Wed, 1 Aug 2018 15:20:48 +0200
Subject: [PATCH] add item picker infinite editor + use in template editor

---
 .../src/common/services/editor.service.js     | 24 ++++++++-
 .../itempicker/itempicker.controller.js       | 47 ++++++++++++++++
 .../itempicker/itempicker.html                | 54 +++++++++++++++++++
 .../src/views/templates/edit.controller.js    | 15 ++----
 4 files changed, 128 insertions(+), 12 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/itempicker/itempicker.controller.js
 create mode 100644 src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/itempicker/itempicker.html

diff --git a/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js b/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js
index d3f3209559..1334456b99 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js
@@ -300,6 +300,27 @@
             open(editor);
         }
 
+        /**
+         * @ngdoc method
+         * @name umbraco.services.editorService#itemPicker
+         * @methodOf umbraco.services.editorService
+         *
+         * @description
+         * Opens the section picker in infinite editing, the submit callback returns an array of the selected items
+         * 
+         * @param {Array} editor.availableItems Array of available items.
+         * @param {Array} editor.selectedItems Array of selected items. When passed in the selected items will be filtered from the available items.
+         * @param {Boolean} editor.filter Set to false to hide the filter.
+         * @param {Callback} editor.submit Submits the editor.
+         * @param {Callback} editor.close Closes the editor.
+         * @returns {Object} editor object
+         */
+        function itemPicker(editor) {
+            editor.view = "views/common/infiniteeditors/itempicker/itempicker.html";
+            editor.size = "small";
+            open(editor);
+        }
+
         var service = {
             getEditors: getEditors,
             open: open,
@@ -319,7 +340,8 @@
             sectionPicker: sectionPicker,
             insertField: insertField,
             templateSections: templateSections,
-            userPicker: userPicker
+            userPicker: userPicker,
+            itemPicker: itemPicker
         };
 
         return service;
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/itempicker/itempicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/itempicker/itempicker.controller.js
new file mode 100644
index 0000000000..094e108d8f
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/itempicker/itempicker.controller.js
@@ -0,0 +1,47 @@
+/**
+ * @ngdoc controller
+ * @name Umbraco.Editors.ItemPickerController
+ * @function
+ *
+ * @description
+ * The controller for a reusable editor to pick items
+ */
+
+function ItemPickerController($scope, localizationService) {
+
+    var vm = this;
+
+    vm.selectItem = selectItem;
+    vm.submit = submit;
+    vm.close = close;
+
+    function onInit() {
+        if (!$scope.model.title) {
+            localizationService.localize("defaultdialogs_selectItem").then(function(value){
+                $scope.model.title = value;
+            });
+        }
+    }
+
+    function selectItem(item) {
+        $scope.model.selectedItem = item;
+        submit($scope.model);
+    };
+
+    function submit(model) {
+        if($scope.model.submit) {
+            $scope.model.submit(model);
+        }
+    }
+
+    function close() {
+        if($scope.model.close) {
+            $scope.model.close();
+        }
+    }
+
+    onInit();
+
+}
+
+angular.module("umbraco").controller("Umbraco.Editors.ItemPicker", ItemPickerController);
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/itempicker/itempicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/itempicker/itempicker.html
new file mode 100644
index 0000000000..9963807772
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/itempicker/itempicker.html
@@ -0,0 +1,54 @@
+<div ng-controller="Umbraco.Editors.ItemPicker as vm">
+
+    <umb-editor-view>
+
+        <umb-editor-header
+            name="model.title"
+            name-locked="true"
+            hide-alias="true"
+            hide-icon="true"
+            hide-description="true">
+        </umb-editor-header>
+
+        <umb-editor-container>
+            <umb-box>
+                <umb-box-content>
+                    <div class="form-search" ng-hide="model.filter === false" style="margin-bottom: 15px;">
+                        <i class="icon-search"></i>
+                        <input type="text"
+                                ng-model="searchTerm"
+                                class="umb-search-field search-query input-block-level -full-width-input"
+                                localize="placeholder"
+                                placeholder="@placeholders_filter"
+                                umb-auto-focus
+                                no-dirty-check />
+                    </div>
+                    
+                    <ul class="umb-card-grid">
+                        <li ng-repeat="availableItem in model.availableItems | compareArrays:model.selectedItems:'alias' | orderBy:'name' | filter:searchTerm"
+                            ng-click="vm.selectItem(availableItem)"
+                            class="-three-in-row">
+                            <a class="umb-card-grid-item" href="" title="{{ availableItem.name }}">
+                                <i class="{{ availableItem.icon }}"></i>
+                                {{ availableItem.name }}
+                            </a>
+                        </li>
+                    </ul>
+                </umb-box-content>
+            </umb-box>
+        </umb-editor-container>
+
+        <umb-editor-footer>
+            <umb-editor-footer-content-right>
+                <umb-button
+                    type="button"
+                    button-style="link"
+                    label-key="general_close"
+                    action="vm.close()">
+                </umb-button>
+            </umb-editor-footer-content-right>
+        </umb-editor-footer>
+
+    </umb-editor-view>
+
+</div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js
index 1b58f14c03..8c425a97b6 100644
--- a/src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js
@@ -558,16 +558,11 @@
 
             localizationService.localize("template_mastertemplate").then(function(value){
                 var title = value;
-
-                vm.masterTemplateOverlay = {
-                    view: "itempicker",
+                var masterTemplate = {
                     title: title,
                     availableItems: availableMasterTemplates,
-                    show: true,
                     submit: function(model) {
-    
                         var template = model.selectedItem;
-    
                         if (template && template.alias) {
                             vm.template.masterTemplateAlias = template.alias;
                             setLayout(template.alias + ".cshtml");
@@ -575,18 +570,16 @@
                             vm.template.masterTemplateAlias = null;
                             setLayout(null);
                         }
-    
-                        vm.masterTemplateOverlay.show = false;
-                        vm.masterTemplateOverlay = null;
+                        editorService.close();
                     },
                     close: function(oldModel) {
                         // close dialog
-                        vm.masterTemplateOverlay.show = false;
-                        vm.masterTemplateOverlay = null;
+                        editorService.close();
                         // focus editor
                         vm.editor.focus();
                     }
                 };
+                editorService.itemPicker(masterTemplate);
             });
 
         }