From b55ca51b1a2090a37f485bf90ad6daeccc8ee032 Mon Sep 17 00:00:00 2001 From: Patrick de Mooij Date: Tue, 12 Oct 2021 20:03:53 +0200 Subject: [PATCH 1/2] Align template picking more towards the other pickers --- .../components/umbgridselector.directive.js | 45 ++++++++++--------- .../src/common/services/editor.service.js | 25 ++++++++++- .../treepicker/treepicker.controller.js | 3 ++ .../views/templates/templates.controller.js | 26 ++++++++++- .../views/templates/templates.html | 3 +- .../src/views/templates/edit.controller.js | 23 +++++----- src/Umbraco.Web/Editors/EntityController.cs | 18 ++++++++ 7 files changed, 109 insertions(+), 34 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgridselector.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgridselector.directive.js index bf03749faa7c..7b6a8b48e4c7 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgridselector.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgridselector.directive.js @@ -33,26 +33,30 @@ }; scope.openItemPicker = function ($event) { - var dialogModel = { - view: "itempicker", - title: "Choose " + scope.itemLabel, - availableItems: scope.availableItems, - selectedItems: scope.selectedItems, - position: "target", - event: $event, - submit: function (model) { - scope.selectedItems.push(model.selectedItem); - // if no default item - set item as default - if (scope.defaultItem === null) { - scope.setAsDefaultItem(model.selectedItem); + if (scope.itemPicker) { + scope.itemPicker(); + } else { + var dialogModel = { + view: "itempicker", + title: "Choose " + scope.itemLabel, + availableItems: scope.availableItems, + selectedItems: scope.selectedItems, + position: "target", + event: $event, + submit: function (model) { + scope.selectedItems.push(model.selectedItem); + // if no default item - set item as default + if (scope.defaultItem === null) { + scope.setAsDefaultItem(model.selectedItem); + } + overlayService.close(); + }, + close: function () { + overlayService.close(); } - overlayService.close(); - }, - close: function() { - overlayService.close(); - } - }; - overlayService.open(dialogModel); + }; + overlayService.open(dialogModel); + } }; scope.openTemplate = function (selectedItem) { @@ -156,7 +160,8 @@ availableItems: "=", defaultItem: "=", itemName: "@", - updatePlaceholder: "=" + updatePlaceholder: "=", + itemPicker: "=" }, link: link }; 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 b0a2465f42e7..4c9c0ea1128a 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 @@ -179,7 +179,7 @@ When building a custom infinite editor view you can use the same components as a } else { focus(); } - }); + }); /** * @ngdoc method @@ -927,6 +927,28 @@ When building a custom infinite editor view you can use the same components as a open(editor); } + /** + * @ngdoc method + * @name umbraco.services.editorService#templatePicker + * @methodOf umbraco.services.editorService + * + * @description + * Opens a template picker in infinite editing, the submit callback returns an array of selected items. + * + * @param {object} editor rendering options. + * @param {boolean} editor.multiPicker Pick one or multiple items. + * @param {function} editor.submit Callback function when the submit button is clicked. Returns the editor model object. + * @param {function} editor.close Callback function when the close button is clicked. + * @returns {object} editor object. + */ + function templatePicker(editor) { + editor.view = "views/common/infiniteeditors/treepicker/treepicker.html"; + if (!editor.size) editor.size = "small"; + editor.section = "settings"; + editor.treeAlias = "templates"; + open(editor); + } + /** * @ngdoc method * @name umbraco.services.editorService#macroPicker @@ -1087,6 +1109,7 @@ When building a custom infinite editor view you can use the same components as a templateSections: templateSections, userPicker: userPicker, itemPicker: itemPicker, + templatePicker: templatePicker, macroPicker: macroPicker, memberGroupPicker: memberGroupPicker, memberPicker: memberPicker, diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/treepicker/treepicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/treepicker/treepicker.controller.js index ed5c4096bcca..72eb504c600d 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/treepicker/treepicker.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/treepicker/treepicker.controller.js @@ -141,6 +141,9 @@ angular.module("umbraco").controller("Umbraco.Editors.TreePickerController", }); } } + else if (vm.treeAlias === "templates") { + vm.entityType = "Template"; + } // TODO: Seems odd this logic is here, i don't think it needs to be and should just exist on the property editor using this if ($scope.model.minNumber) { diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/templates/templates.controller.js b/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/templates/templates.controller.js index e2a964c29365..52b2da5c0fd7 100644 --- a/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/templates/templates.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/templates/templates.controller.js @@ -9,7 +9,7 @@ (function () { 'use strict'; - function TemplatesController($scope, entityResource, contentTypeHelper, templateResource, contentTypeResource, $routeParams) { + function TemplatesController($scope, entityResource, contentTypeHelper, templateResource, contentTypeResource, editorService, $routeParams) { /* ----------- SCOPE VARIABLES ----------- */ @@ -22,6 +22,7 @@ vm.isElement = $scope.model.isElement; vm.createTemplate = createTemplate; + vm.openItemPicker = openItemPicker; /* ---------- INIT ---------- */ @@ -81,6 +82,29 @@ vm.canCreateTemplate = existingTemplate ? false : true; } + function openItemPicker() { + const editor = { + title: "Choose template", + filterCssClass: 'not-allowed', + multiPicker: true, + filter: item => { + return !vm.availableTemplates.some(template => template.id == item.id) || + $scope.model.allowedTemplates.some(template => template.id == item.id); + }, + submit: model => { + model.selection.forEach(item => { + $scope.model.allowedTemplates.push(item); + }); + editorService.close(); + }, + close: function() { + editorService.close(); + } + } + + editorService.templatePicker(editor); + } + var unbindWatcher = $scope.$watch("model.isElement", function(newValue, oldValue) { vm.isElement = newValue; diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/templates/templates.html b/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/templates/templates.html index 279ffb73c0e4..a1676660e60e 100644 --- a/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/templates/templates.html +++ b/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/templates/templates.html @@ -17,7 +17,8 @@
item-name="template" name="model.name" alias="model.alias" - update-placeholder="vm.updateTemplatePlaceholder"> + update-placeholder="vm.updateTemplatePlaceholder" + item-picker="vm.openItemPicker"> { + return !availableMasterTemplates.some(template => template.id == item.id); + }, + submit: model => { + var template = model.selection[0]; if (template && template.alias) { vm.template.masterTemplateAlias = template.alias; setLayout(template.alias + ".cshtml"); @@ -575,14 +578,12 @@ } editorService.close(); }, - close: function (oldModel) { - // close dialog + close: function () { editorService.close(); - // focus editor - vm.editor.focus(); } - }; - editorService.itemPicker(masterTemplate); + } + + editorService.templatePicker(editor); }); } diff --git a/src/Umbraco.Web/Editors/EntityController.cs b/src/Umbraco.Web/Editors/EntityController.cs index b6bef3fd9651..7979bb2bfb3f 100644 --- a/src/Umbraco.Web/Editors/EntityController.cs +++ b/src/Umbraco.Web/Editors/EntityController.cs @@ -953,6 +953,15 @@ private EntityBasic GetResultForKey(Guid key, UmbracoEntityTypes entityType) case UmbracoEntityTypes.Macro: + case UmbracoEntityTypes.Template: + var template = Services.FileService.GetTemplate(key); + if (template is null) + { + throw new HttpResponseException(HttpStatusCode.NotFound); + } + + return Mapper.Map(template); + default: throw new NotSupportedException("The " + typeof(EntityController) + " does not currently support data for the type " + entityType); } @@ -985,6 +994,15 @@ private EntityBasic GetResultForId(int id, UmbracoEntityTypes entityType) case UmbracoEntityTypes.Macro: + case UmbracoEntityTypes.Template: + var template = Services.FileService.GetTemplate(id); + if (template is null) + { + throw new HttpResponseException(HttpStatusCode.NotFound); + } + + return Mapper.Map(template); + default: throw new NotSupportedException("The " + typeof(EntityController) + " does not currently support data for the type " + entityType); } From c3d3b246d4a7022ad6035d5a775d07680bea48b9 Mon Sep 17 00:00:00 2001 From: Nathan Woulfe Date: Thu, 21 Oct 2021 09:25:32 +1000 Subject: [PATCH 2/2] style/cleanup - remove unused args, updated openItemPicker function name to openTemplatePicker since that's what we're opening --- .../components/umbgridselector.directive.js | 4 ++-- .../views/templates/templates.controller.js | 6 +++--- .../documenttypes/views/templates/templates.html | 2 +- .../src/views/templates/edit.controller.js | 13 ++++--------- 4 files changed, 10 insertions(+), 15 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgridselector.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgridselector.directive.js index 7b6a8b48e4c7..4c628391cb97 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgridselector.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgridselector.directive.js @@ -1,9 +1,9 @@ (function () { 'use strict'; - function GridSelector($location, overlayService, editorService) { + function GridSelector(overlayService, editorService) { - function link(scope, el, attr, ctrl) { + function link(scope) { var eventBindings = []; scope.dialogModel = {}; diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/templates/templates.controller.js b/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/templates/templates.controller.js index 52b2da5c0fd7..46e856410d94 100644 --- a/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/templates/templates.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/templates/templates.controller.js @@ -9,7 +9,7 @@ (function () { 'use strict'; - function TemplatesController($scope, entityResource, contentTypeHelper, templateResource, contentTypeResource, editorService, $routeParams) { + function TemplatesController($scope, entityResource, contentTypeHelper, contentTypeResource, editorService, $routeParams) { /* ----------- SCOPE VARIABLES ----------- */ @@ -22,7 +22,7 @@ vm.isElement = $scope.model.isElement; vm.createTemplate = createTemplate; - vm.openItemPicker = openItemPicker; + vm.openTemplatePicker = openTemplatePicker; /* ---------- INIT ---------- */ @@ -82,7 +82,7 @@ vm.canCreateTemplate = existingTemplate ? false : true; } - function openItemPicker() { + function openTemplatePicker() { const editor = { title: "Choose template", filterCssClass: 'not-allowed', diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/templates/templates.html b/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/templates/templates.html index a1676660e60e..04fd61be3cd7 100644 --- a/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/templates/templates.html +++ b/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/templates/templates.html @@ -18,7 +18,7 @@
name="model.name" alias="model.alias" update-placeholder="vm.updateTemplatePlaceholder" - item-picker="vm.openItemPicker"> + item-picker="vm.openTemplatePicker"> { const editor = { - title: title, + title, filterCssClass: 'not-allowed', - filter: item => { - return !availableMasterTemplates.some(template => template.id == item.id); - }, + filter: item => !availableMasterTemplates.some(template => template.id == item.id), submit: model => { var template = model.selection[0]; if (template && template.alias) { @@ -578,9 +575,7 @@ } editorService.close(); }, - close: function () { - editorService.close(); - } + close: () => editorService.close(), } editorService.templatePicker(editor);