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 <[email protected]>
umbraco · Sep 21, 2021 · 1e1276f · 1e1276f
1 parent 46e6f05
commit 1e1276f
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 64 deletions.
diff --git a/...Umbraco.Web.UI.Client/src/views/documenttypes/views/permissions/permissions.controller.js b/...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
@@ -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);
 })();