From b220c0e2cf5095f0dfdfdef20bb86c0b8abf23a6 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 4 May 2022 16:40:58 +0200
Subject: [PATCH] add readonly mode for grid property editor

---
 .../src/less/components/umb-grid.less         | 33 ++++++++++++++++---
 .../propertyeditors/grid/grid.controller.js   |  7 ++++
 .../src/views/propertyeditors/grid/grid.html  | 24 +++++++++-----
 3 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
index 98438a3447..c13a898eef 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
@@ -176,6 +176,14 @@
         color: @ui-action-discreet-type-hover;
         cursor: pointer;
     }
+
+    &:disabled {
+        cursor: not-allowed;
+        &:hover {
+            border-color: @ui-action-discreet-border;
+            color: @ui-action-discreet-type;
+        }
+    }
 }
 
 .umb-grid .umb-cell-content.-has-editors {
@@ -216,6 +224,13 @@
         color: @ui-action-discreet-type-hover;
         text-decoration: none;
     }
+
+    &:disabled {
+        cursor: not-allowed;
+        &:hover {
+            color: @ui-action-discreet-type;
+        }
+    }
 }
 
 .umb-grid .cell-tools-add.-center {
@@ -324,11 +339,15 @@
     top: 0;
     left: 0;
     opacity: 0;
-    cursor: pointer;
-    &:hover {
-        background-color: @ui-action-type-hover;
-        opacity: 0.1;
-        transition: opacity 0.1s;
+
+    &.-clickable {
+        cursor: pointer;
+
+        &:hover {
+            background-color: @ui-action-type-hover;
+            opacity: 0.1;
+            transition: opacity 0.1s;
+        }
     }
 }
 
@@ -525,6 +544,10 @@
         cursor: pointer;
         opacity: .77;
     }
+
+    &:disabled {
+        cursor: not-allowed;
+    }
 }
 
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
index 4e2bdf6ce4..c7227ad449 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
@@ -48,6 +48,7 @@ angular.module("umbraco")
                 tolerance: "pointer",
                 zIndex: 999999999999999999,
                 scrollSensitivity: 100,
+                disabled: $scope.readonly,
                 cursorAt: {
                     top: 40,
                     left: 60
@@ -120,6 +121,7 @@ angular.module("umbraco")
                 tolerance: "pointer",
                 zIndex: 999999999999999999,
                 scrollSensitivity: 100,
+                disabled: $scope.readonly,
                 cursorAt: {
                     top: 45,
                     left: 90
@@ -304,6 +306,8 @@ angular.module("umbraco")
             };
 
             $scope.showReorderButton = function () {
+                if ($scope.readonly) return false;
+
                 if ($scope.model.value && $scope.model.value.sections) {
                     for (var i = 0; $scope.model.value.sections.length > i; i++) {
                         var section = $scope.model.value.sections[i];
@@ -359,6 +363,7 @@ angular.module("umbraco")
             // *********************************************
 
             $scope.clickRow = function (index, rows, $event) {
+                if ($scope.readonly) return;
 
                 $scope.currentRowWithActiveChild = null;
                 $scope.active = rows[index];
@@ -579,6 +584,7 @@ angular.module("umbraco")
             // *********************************************
 
             $scope.clickCell = function (index, cells, row, $event) {
+                if ($scope.readonly) return;
 
                 $scope.currentCellWithActiveChild = null;
 
@@ -601,6 +607,7 @@ angular.module("umbraco")
             // Control management functions
             // *********************************************
             $scope.clickControl = function (index, controls, cell, $event) {
+                if ($scope.readonly) return;
 
                 $scope.active = controls[index];
                 $scope.currentCellWithActiveChild = cell;
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
index a7e6e9314a..432c2a7d29 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
@@ -90,7 +90,7 @@
                                <!-- Row tool -->
                                <div class="umb-tools row-tools" ng-show="(row === active || row === currentRowWithActiveChild) && !sortMode">
 
-                                   <div class="cell-tools-edit row-tool" ng-if="hasSettings">
+                                   <div class="cell-tools-edit row-tool" ng-if="hasSettings && !readonly">
                                        <button type="button" class="btn-icon" ng-click="editGridItemSettings(row, 'row')" localize="title" title="@grid_settings">
                                            <umb-icon icon="icon-settings"></umb-icon>
                                            <span class="sr-only">
@@ -99,7 +99,7 @@
                                        </button>
                                    </div>
 
-                                    <div class="cell-tools-remove row-tool">
+                                    <div ng-if="!readonly" class="cell-tools-remove row-tool">
                                         <button class="icon-trash btn-reset" ng-click="togglePrompt(row)" type="button"></button>
                                         <umb-confirm-action
                                             ng-if="row.deletePrompt"
@@ -156,7 +156,7 @@
                                                          </p>
                                                       </div>
 
-                                                      <div class="cell-tools" ng-if="(area === active || area === currentCellWithActiveChild) && !sortMode">
+                                                      <div class="cell-tools" ng-if="(area === active || area === currentCellWithActiveChild) && !sortMode && !readonly">
                                                           <button type="button" aria-haspopup="true" class="btn-icon cell-tool" ng-click="editGridItemSettings(area, 'cell')">
                                                               <umb-icon icon="icon-settings"></umb-icon>
                                                               <span class="sr-only">Open column settings</span>
@@ -166,7 +166,7 @@
                                                       <div class="umb-cell-inner" ui-sortable="sortableOptionsCell" umb-grid-hack-scope ng-model="area.controls">
 
                                                           <!-- Control placeholder -->
-                                                          <button class="umb-cell-placeholder btn-reset" type="button" ng-if="area.controls.length === 0" ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);">
+                                                          <button class="umb-cell-placeholder btn-reset" type="button" ng-if="area.controls.length === 0" ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);" ng-disabled="readonly">
                                                                <div class="cell-tools-add -center">
                                                                    <p>
                                                                         <localize ng-if="!sortMode" key="grid_addElement">Add content</localize>
@@ -202,7 +202,7 @@
 
                                                                       <div class="umb-tools" ng-if="control === active">
 
-                                                                          <div class="umb-control-tool" ng-if="control.editor.config.settings">
+                                                                          <div class="umb-control-tool" ng-if="control.editor.config.settings && !readonly">
                                                                               <button type="button" class="umb-control-tool-icon btn-icon" ng-click="editGridItemSettings(control, 'control')">
                                                                                   <umb-icon icon="icon-settings"></umb-icon>
                                                                                   <span class="sr-only">
@@ -211,7 +211,7 @@
                                                                               </button>
                                                                           </div>
 
-                                                                          <div class="umb-control-tool">
+                                                                          <div ng-if="!readonly" class="umb-control-tool">
                                                                               <button class="umb-control-tool-icon icon-trash btn-reset" ng-click="togglePrompt(control)" type="button"></button>
                                                                               <umb-confirm-action ng-if="control.deletePrompt"
                                                                                                   direction="left"
@@ -237,8 +237,14 @@
                                                       <!-- Controls repeat end -->
 
                                                       <!-- if area is empty tools -->
-                                                      <div class="umb-grid-add-more-content" ng-if="area.controls.length > 0 && !sortMode && (area.maxItems == undefined || area.maxItems == '' || area.maxItems == 0 || area.maxItems > area.controls.length)">
-                                                          <button class="cell-tools-add -bar newbtn btn-reset" type="button" ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);"><localize key="grid_addElement">Add element</localize></button>
+                                                      <div ng-if="!readonly" class="umb-grid-add-more-content" ng-if="area.controls.length > 0 && !sortMode && (area.maxItems == undefined || area.maxItems == '' || area.maxItems == 0 || area.maxItems > area.controls.length)">
+                                                            <button 
+                                                                class="cell-tools-add -bar newbtn btn-reset" 
+                                                                type="button" 
+                                                                ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);"
+                                                                ng-disabled="readonly">
+                                                                    <localize key="grid_addElement">Add element</localize>
+                                                            </button>
                                                       </div>
 
                                                  </div>
@@ -259,7 +265,7 @@
                     <!-- row sortable end -->
                     <!-- column tools -->
 
-                    <div class="umb-add-row" ng-if="!sortMode">
+                    <div class="umb-add-row" ng-if="!sortMode && !readonly">
 
                         <button type="button"
                                 class="iconBox btn-reset"