add readonly mode to member group picker

src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergrouppicker/membergrouppicker.controller.js

@@ -13,18 +13,19 @@ function memberGroupPicker($scope, editorService, memberGroupResource, localizat
         return str.replace(rgxtrim, '');
     }
 
+    $scope.renderModel = [];
+    $scope.allowRemove = !$scope.readonly;
+    $scope.allowAdd = !$scope.readonly;
+    $scope.groupIds = [];
+
     var removeAllEntriesAction = {
         labelKey: 'clipboard_labelForRemoveAllEntries',
         labelTokens: [],
         icon: 'trash',
         method: removeAllEntries,
-        isDisabled: true
+        isDisabled: !$scope.allowRemove
     };
 
-    $scope.renderModel = [];
-    $scope.allowRemove = true;
-    $scope.groupIds = [];
-
     if ($scope.model.config && $scope.umbProperty) {
         $scope.umbProperty.setPropertyActions([
             removeAllEntriesAction
@@ -38,7 +39,7 @@ function memberGroupPicker($scope, editorService, memberGroupResource, localizat
             $scope.renderModel = groups;
         });
 
-        removeAllEntriesAction.isDisabled = groupIds.length === 0;
+        removeAllEntriesAction.isDisabled = groupIds.length === 0 || !$scope.allowRemove;
     }
 
     function setDirty() {
@@ -47,7 +48,13 @@ function memberGroupPicker($scope, editorService, memberGroupResource, localizat
         }
     }
 
-    function openMemberGroupPicker() {
+    function openMemberGroupPicker($event) {
+        if (!$scope.allowAdd) {
+            $event.preventDefault();
+            $event.stopPropagation();
+            return;
+        }
+
         var memberGroupPicker = {
             multiPicker: true,
             submit: function (model) {
@@ -62,7 +69,7 @@ function memberGroupPicker($scope, editorService, memberGroupResource, localizat
                 // figure out which groups are new and fetch them
                 var newGroupIds = _.difference(selectedGroupIds, currIds);
 
-                removeAllEntriesAction.isDisabled = currIds.length === 0 && newGroupIds.length === 0;
+                removeAllEntriesAction.isDisabled = (currIds.length === 0 && newGroupIds.length === 0) || !$scope.allowRemove;
 
                 if (newGroupIds && newGroupIds.length) {
                     memberGroupResource.getByIds(newGroupIds).then(function (groups) {
@@ -84,15 +91,19 @@ function memberGroupPicker($scope, editorService, memberGroupResource, localizat
     }
 
     function remove(index) {
+        if (!$scope.allowRemove) return;
+
         $scope.renderModel.splice(index, 1);
 
         var currIds = renderModelIds();
-        removeAllEntriesAction.isDisabled = currIds.length === 0;
+        removeAllEntriesAction.isDisabled = currIds.length === 0 || !$scope.allowRemove;
 
         setDirty();
     }
 
     function clear() {
+        if (!$scope.allowRemove) return;
+
         $scope.renderModel = [];
         removeAllEntriesAction.isDisabled = true;
 
@@ -100,6 +111,8 @@ function memberGroupPicker($scope, editorService, memberGroupResource, localizat
     }
 
     function removeAllEntries() {
+        if (!$scope.allowRemove) return;
+
         localizationService.localizeMany(["content_nestedContentDeleteAllItems", "general_delete"]).then(data => {
             overlayService.confirmDelete({
                 title: data[1],

src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergrouppicker/membergrouppicker.html

@@ -10,9 +10,12 @@
 		</umb-node-preview>
 	</div>
 
-	<button type="button"
-            class="umb-node-preview-add"
-            ng-click="vm.openMemberGroupPicker()">
+	<button
+		type="button"
+		class="umb-node-preview-add"
+		ng-click="vm.openMemberGroupPicker($event)"
+		ng-disabled="readonly">
+
 		<localize key="general_add">Add</localize>
 	</button>