From 5b002f088879f26bb4ff08778c25a68233ca2ffc Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Mon, 2 May 2022 19:57:49 +0200
Subject: [PATCH] add readonly mode til content picker / multinode tree picker
 property editor

---
 .../contentpicker/contentpicker.controller.js | 23 +++++++++++--------
 .../contentpicker/contentpicker.html          |  7 +++---
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.controller.js
index d2a1710e49..54f3380ee5 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.controller.js
@@ -165,8 +165,9 @@ function contentPickerController($scope, $q, $routeParams, $location, entityReso
             : "Document";
     
     $scope.allowOpenButton = false;
-    $scope.allowEditButton = entityType === "Document";
-    $scope.allowRemoveButton = true;
+    $scope.allowEditButton = entityType === "Document" && !$scope.readonly;
+    $scope.allowRemove = !$scope.readonly;
+    $scope.allowAdd = !$scope.readonly;
 
     //the dialog options for the picker
     var dialogOptions = {
@@ -290,6 +291,8 @@ function contentPickerController($scope, $q, $routeParams, $location, entityReso
     };
 
     $scope.remove = function (index) {
+        if (!$scope.allowRemove) return;
+
         var currIds = $scope.model.value ? $scope.model.value.split(',') : [];
         if (currIds.length > 0) {
             currIds.splice(index, 1);
@@ -316,6 +319,8 @@ function contentPickerController($scope, $q, $routeParams, $location, entityReso
     }
 
     $scope.add = function (item) {
+        if (!$scope.allowAdd) return;
+
         var currIds = $scope.model.value ? $scope.model.value.split(',') : [];
 
         var itemId = ($scope.model.config.idType === "udi" ? item.udi : item.id).toString();
@@ -394,7 +399,7 @@ function contentPickerController($scope, $q, $routeParams, $location, entityReso
         //sync the sortable model
         $scope.sortableModel = valueIds;
 
-        removeAllEntriesAction.isDisabled = valueIds.length === 0;
+        removeAllEntriesAction.isDisabled = valueIds.length === 0 || $scope.readonly;
 
         //load current data if anything selected
         if (valueIds.length > 0) {
@@ -522,10 +527,10 @@ function contentPickerController($scope, $q, $routeParams, $location, entityReso
 
     function setSortingState(items) {
         // disable sorting if the list only consist of one item
-        if (items.length > 1) {
-            $scope.sortableOptions.disabled = false;
-        } else {
+        if (items.length <= 1 || $scope.readonly) {
             $scope.sortableOptions.disabled = true;
+        } else {
+            $scope.sortableOptions.disabled = false;
         }
     }
 
@@ -551,15 +556,15 @@ function contentPickerController($scope, $q, $routeParams, $location, entityReso
             switch (entityType) {
                 case "Document":
                     var hasAccessToContent = user.allowedSections.indexOf("content") !== -1;
-                    $scope.allowOpenButton = hasAccessToContent;
+                    $scope.allowOpen = hasAccessToContent;
                     break;
                 case "Media":
                     var hasAccessToMedia = user.allowedSections.indexOf("media") !== -1;
-                    $scope.allowOpenButton = hasAccessToMedia;
+                    $scope.allowOpen = hasAccessToMedia;
                     break;
                 case "Member":
                     var hasAccessToMember = user.allowedSections.indexOf("member") !== -1;
-                    $scope.allowOpenButton = hasAccessToMember;
+                    $scope.allowOpen = hasAccessToMember;
                     break;
 
                 default:
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.html
index 373814310b..086fa3aa7d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.html
@@ -12,8 +12,8 @@
                               published="node.published"
                               description="node.url"
                               sortable="!sortableOptions.disabled"
-                              allow-remove="allowRemoveButton"
-                              allow-open="model.config.showOpenButton && allowOpenButton && !dialogEditor"
+                              allow-remove="allowRemove"
+                              allow-open="model.config.showOpenButton && allowOpen && !dialogEditor && !readonly"
                               on-remove="remove($index)"
                               on-open="openEditor(node)">
             </umb-node-preview>
@@ -24,7 +24,8 @@
                 class="umb-node-preview-add"
                 ng-click="openCurrentPicker()"
                 id="{{model.alias}}"
-                aria-label="{{model.label}}: {{labels.general_add}}">
+                aria-label="{{model.label}}: {{labels.general_add}}"
+                ng-disabled="readonly">
             <localize key="general_add">Add</localize>
             <span class="sr-only">...</span>
         </button>