From 1e1276f27070d0986e772203c47fda8ca5ca5d97 Mon Sep 17 00:00:00 2001 From: patrickdemooij9 Date: Tue, 21 Sep 2021 08:18:15 +0200 Subject: [PATCH] 10341: Use different picker for content types (#10896) * 10341: Use different picker for content types * use es6 where possible (inc removing underscore for teeny tiny performance improvement) Co-authored-by: Nathan Woulfe --- .../permissions/permissions.controller.js | 70 +++++++++---------- .../permissions/permissions.controller.js | 46 ++++++------ 2 files changed, 52 insertions(+), 64 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/permissions/permissions.controller.js b/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/permissions/permissions.controller.js index b0531d0c0ac8..da293a6820d9 100644 --- a/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/permissions/permissions.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/documenttypes/views/permissions/permissions.controller.js @@ -6,10 +6,10 @@ * @description * The controller for the content type editor property dialog */ -(function() { +(function () { 'use strict'; - function PermissionsController($scope, $timeout, contentTypeResource, iconHelper, contentTypeHelper, localizationService, overlayService) { + function PermissionsController($scope, $timeout, contentTypeResource, iconHelper, contentTypeHelper, editorService) { /* ----------- SCOPE VARIABLES ----------- */ @@ -34,22 +34,22 @@ function init() { - contentTypeResource.getAll().then(function(contentTypes){ - vm.contentTypes = _.where(contentTypes, {isElement: false}); + contentTypeResource.getAll().then(contentTypes => { + vm.contentTypes = contentTypes.filter(x => !x.isElement); // convert legacy icons iconHelper.formatContentTypeIcons(vm.contentTypes); vm.selectedChildren = contentTypeHelper.makeObjectArrayFromId($scope.model.allowedContentTypes, contentTypes); - if($scope.model.id === 0) { - contentTypeHelper.insertChildNodePlaceholder(vm.contentTypes, $scope.model.name, $scope.model.icon, $scope.model.id); + if ($scope.model.id === 0) { + contentTypeHelper.insertChildNodePlaceholder(vm.contentTypes, $scope.model.name, $scope.model.icon, $scope.model.id); } }); // Can only switch to an element type if there are no content nodes already created from the type. - if ($scope.model.id > 0 && !$scope.model.isElement ) { - contentTypeResource.hasContentNodes($scope.model.id).then(function (result) { + if ($scope.model.id > 0 && !$scope.model.isElement) { + contentTypeResource.hasContentNodes($scope.model.id).then(result => { vm.canToggleIsElement = !result; }); } else { @@ -58,48 +58,42 @@ } function addChild($event) { - - const dialog = { - view: "itempicker", - availableItems: vm.contentTypes, - selectedItems: vm.selectedChildren, - position: "target", - event: $event, - submit: function (model) { - if (model.selectedItem) { - vm.selectedChildren.push(model.selectedItem); - $scope.model.allowedContentTypes.push(model.selectedItem.id); - } - overlayService.close(); + + var editor = { + multiPicker: true, + filterCssClass: 'not-allowed not-published', + filter: item => + !vm.contentTypes.some(x => x.udi == item.udi) || vm.selectedChildren.some(x => x.udi === item.udi), + submit: model => { + model.selection.forEach(item => + contentTypeResource.getById(item.id).then(contentType => { + vm.selectedChildren.push(contentType); + $scope.model.allowedContentTypes.push(item.id); + })); + + editorService.close(); }, - close: function() { - overlayService.close(); - } + close: () => editorService.close() }; - localizationService.localize("contentTypeEditor_chooseChildNode").then(value => { - dialog.title = value; - overlayService.open(dialog); - }); + editorService.contentTypePicker(editor); } function removeChild(selectedChild, index) { - // remove from vm - vm.selectedChildren.splice(index, 1); + // remove from vm + vm.selectedChildren.splice(index, 1); - // remove from content type model - var selectedChildIndex = $scope.model.allowedContentTypes.indexOf(selectedChild.id); - $scope.model.allowedContentTypes.splice(selectedChildIndex, 1); + // remove from content type model + var selectedChildIndex = $scope.model.allowedContentTypes.indexOf(selectedChild.id); + $scope.model.allowedContentTypes.splice(selectedChildIndex, 1); } function sortChildren() { // we need to wait until the next digest cycle for vm.selectedChildren to be updated - $timeout(function () { - $scope.model.allowedContentTypes = _.pluck(vm.selectedChildren, "id"); - }); + $timeout(() => $scope.model.allowedContentTypes = vm.selectedChildren.map(x => x.id)); } - // note: "safe toggling" here ie handling cases where the value is undefined, etc + // note: 'safe toggling' here ie handling cases where the value is undefined, etc function toggleAllowAsRoot() { $scope.model.allowAsRoot = $scope.model.allowAsRoot ? false : true; @@ -119,5 +113,5 @@ } - angular.module("umbraco").controller("Umbraco.Editors.DocumentType.PermissionsController", PermissionsController); + angular.module('umbraco').controller('Umbraco.Editors.DocumentType.PermissionsController', PermissionsController); })(); diff --git a/src/Umbraco.Web.UI.Client/src/views/mediatypes/views/permissions/permissions.controller.js b/src/Umbraco.Web.UI.Client/src/views/mediatypes/views/permissions/permissions.controller.js index 7ff479327240..126d31f7c86f 100644 --- a/src/Umbraco.Web.UI.Client/src/views/mediatypes/views/permissions/permissions.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/mediatypes/views/permissions/permissions.controller.js @@ -1,7 +1,7 @@ (function() { 'use strict'; - function PermissionsController($scope, $timeout, mediaTypeResource, iconHelper, contentTypeHelper, localizationService, overlayService) { + function PermissionsController($scope, $timeout, mediaTypeResource, iconHelper, contentTypeHelper, editorService) { /* ----------- SCOPE VARIABLES ----------- */ @@ -21,7 +21,7 @@ function init() { - mediaTypeResource.getAll().then(function(mediaTypes){ + mediaTypeResource.getAll().then(mediaTypes => { vm.mediaTypes = mediaTypes; @@ -39,29 +39,25 @@ } function addChild($event) { - - var dialog = { - view: "itempicker", - availableItems: vm.mediaTypes, - selectedItems: vm.selectedChildren, - position: "target", - event: $event, - submit: function (model) { - if (model.selectedItem) { - vm.selectedChildren.push(model.selectedItem); - $scope.model.allowedContentTypes.push(model.selectedItem.id); - } - overlayService.close(); + + var editor = { + multiPicker: true, + filterCssClass: 'not-allowed not-published', + filter: item => + !vm.mediaTypes.some(x => x.udi == item.udi) || vm.selectedChildren.some(x => x.udi === item.udi), + submit: model => { + model.selection.forEach(item => + mediaTypeResource.getById(item.id).then(contentType => { + vm.selectedChildren.push(contentType); + $scope.model.allowedContentTypes.push(item.id); + })); + + editorService.close(); }, - close: function() { - overlayService.close(); - } + close: () => editorService.close() }; - localizationService.localize("contentTypeEditor_chooseChildNode").then(value => { - dialog.title = value; - overlayService.open(dialog); - }); + editorService.mediaTypePicker(editor); } function removeChild(selectedChild, index) { @@ -75,9 +71,7 @@ function sortChildren() { // we need to wait until the next digest cycle for vm.selectedChildren to be updated - $timeout(function () { - $scope.model.allowedContentTypes = _.pluck(vm.selectedChildren, "id"); - }); + $timeout(() => $scope.model.allowedContentTypes = vm.selectedChildren.map(x => x.id)); } /** @@ -94,5 +88,5 @@ } - angular.module("umbraco").controller("Umbraco.Editors.MediaType.PermissionsController", PermissionsController); + angular.module('umbraco').controller('Umbraco.Editors.MediaType.PermissionsController', PermissionsController); })();