yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Align template picking more towards the other pickers (#11363)

Browse Source 
* Align template picking more towards the other pickers

* style/cleanup - remove unused args, updated openItemPicker function name to openTemplatePicker since that's what we're opening

Co-authored-by: Nathan Woulfe <nathan@nathanw.com.au>
This commit is contained in:
patrickdemooij9
2021-10-21 02:09:08 +02:00
committed by GitHub
parent b13f260341
commit 809671b9ca
7 changed files with 110 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/Umbraco.Web.UI.Client/src/common/directives/components/umbgridselector.directive.js
View File

@@ -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 = {};
@@ -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
};

25
src/Umbraco.Web.UI.Client/src/common/services/editor.service.js
View File

@@ -179,7 +179,7 @@ When building a custom infinite editor view you can use the same components as a
} else {
focus();
}
});
});
/**
* @ngdoc method
@@ -928,6 +928,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
@@ -1088,6 +1110,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,

3
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/treepicker/treepicker.controller.js
View File

@@ -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) {

26
src/Umbraco.Web.UI.Client/src/views/documenttypes/views/templates/templates.controller.js
View File

@@ -9,7 +9,7 @@
(function () {
'use strict';
function TemplatesController($scope, entityResource, contentTypeHelper, templateResource, contentTypeResource, $routeParams) {
function TemplatesController($scope, entityResource, contentTypeHelper, contentTypeResource, editorService, $routeParams) {
/* ----------- SCOPE VARIABLES ----------- */
@@ -22,6 +22,7 @@
vm.isElement = $scope.model.isElement;
vm.createTemplate = createTemplate;
vm.openTemplatePicker = openTemplatePicker;
/* ---------- INIT ---------- */
@@ -81,6 +82,29 @@
vm.canCreateTemplate = existingTemplate ? false : true;
}
function openTemplatePicker() {
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;

3
src/Umbraco.Web.UI.Client/src/views/documenttypes/views/templates/templates.html
View File

@@ -17,7 +17,8 @@
item-name="template"
name="model.name"
alias="model.alias"
update-placeholder="vm.updateTemplatePlaceholder">
update-placeholder="vm.updateTemplatePlaceholder"
item-picker="vm.openTemplatePicker">
</umb-grid-selector>
<umb-button

26
src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js
View File

@@ -559,13 +559,13 @@
}
});
localizationService.localize("template_mastertemplate").then(function (value) {
var title = value;
var masterTemplate = {
title: title,
availableItems: availableMasterTemplates,
submit: function (model) {
var template = model.selectedItem;
localizationService.localize("template_mastertemplate").then(title => {
const editor = {
title,
filterCssClass: 'not-allowed',
filter: item => !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 +575,10 @@
}
editorService.close();
},
close: function (oldModel) {
// close dialog
editorService.close();
// focus editor
vm.editor.focus();
}
};
editorService.itemPicker(masterTemplate);
close: () => editorService.close(),
}
editorService.templatePicker(editor);
});
}