From 10b231f3f9e16ee45dab7cdd86550f94e464fe4c Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Thu, 28 Apr 2022 16:13:58 +0200
Subject: [PATCH] add readonly mode to member picker property editor

---
 .../memberpicker/memberpicker.controller.js    | 10 +++++++++-
 .../memberpicker/memberpicker.html             | 18 +++++++++++-------
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/memberpicker/memberpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/memberpicker/memberpicker.controller.js
index 0aa01a560b..5b2b16d497 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/memberpicker/memberpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/memberpicker/memberpicker.controller.js
@@ -8,7 +8,8 @@ function memberPickerController($scope, entityResource, iconHelper, editorServic
     }
 
     $scope.renderModel = [];
-    $scope.allowRemove = true;
+    $scope.allowRemove = !$scope.readonly;
+    $scope.allowAdd = !$scope.readonly;
 
     var dialogOptions = {
         multiPicker: false,
@@ -44,6 +45,7 @@ function memberPickerController($scope, entityResource, iconHelper, editorServic
     }
 
     $scope.openMemberPicker = function () {
+        if(!$scope.allowAdd) return;
 
         var memberPicker = dialogOptions;
 
@@ -64,11 +66,15 @@ function memberPickerController($scope, entityResource, iconHelper, editorServic
     };
 
     $scope.remove = function (index) {
+        if (!$scope.allowRemove) return;
+
         $scope.renderModel.splice(index, 1);
         setDirty();
     };
 
     $scope.add = function (item) {
+        if (!$scope.allowAdd) return; 
+
         var currIds = _.map($scope.renderModel, function (i) {
             if ($scope.model.config.idType === "udi") {
                 return i.udi;
@@ -88,6 +94,8 @@ function memberPickerController($scope, entityResource, iconHelper, editorServic
     };
 
     $scope.clear = function() {
+        if (!$scope.allowRemove) return;
+
         $scope.renderModel = [];
     };
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/memberpicker/memberpicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/memberpicker/memberpicker.html
index 4efa7283da..758898f942 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/memberpicker/memberpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/memberpicker/memberpicker.html
@@ -1,18 +1,22 @@
 <div ng-controller="Umbraco.PropertyEditors.MemberPickerController" class="umb-property-editor umb-memberpicker">
 
 	<div>
-		<umb-node-preview ng-repeat="node in renderModel"
-						  icon="node.icon"
-						  name="node.name"
-						  allow-remove="allowRemove"
-						  on-remove="remove($index)">
+		<umb-node-preview 
+			ng-repeat="node in renderModel"
+			icon="node.icon"
+			name="node.name"
+			allow-remove="allowRemove"
+			on-remove="remove($index)">
 		</umb-node-preview>
 	</div>
 
-	<button type="button"
+	<button 
+			type="button"
 			class="umb-node-preview-add"
 			ng-show="model.config.multiPicker === true || renderModel.length === 0"
-			ng-click="openMemberPicker()">
+			ng-click="openMemberPicker()"
+			ng-disabled="readonly">
+
 		<localize key="general_add">Add</localize>
 	</button>