From fc447bb1013b71a2edd7dd031652afea0033db9a Mon Sep 17 00:00:00 2001
From: Lars-Erik Aabech <lea@markedspartner.no>
Date: Mon, 8 Mar 2021 12:23:03 +0100
Subject: [PATCH] Should allow grid editors to use hash based settings (#9837)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Should allow grid editors to use hash based settings

* Swap to using vm in grid config controller, as well as showing button when there's map settings

* Included keys for styles in empty state check for grid settings

* converted the code into more AngularJS performant code

* Remove rogue change to grid.editors.config

* use watchCollection instead

Co-authored-by: Niels Lyngsø <nsl@umbraco.com>
(cherry picked from commit 008827f785df3a6ce1c150ceebb9fc826fc0d739)
---
 .../grid/dialogs/config.controller.js         | 20 ++++++++++++++++++-
 .../propertyeditors/grid/dialogs/config.html  |  8 ++++----
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/config.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/config.controller.js
index 30c89d5f2e..7330d69b2f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/config.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/config.controller.js
@@ -16,7 +16,25 @@ function ConfigController($scope) {
             $scope.model.close();
         }
     }
-    
+
+    vm.showEmptyState = false;
+    vm.showConfig = false;
+    vm.showStyles = false;
+
+    $scope.$watchCollection('model.config', onWatch);
+    $scope.$watchCollection('model.styles', onWatch);
+
+    function onWatch() {
+
+        vm.showConfig = $scope.model.config &&
+            ($scope.model.config.length > 0 || Object.keys($scope.model.config).length > 0);
+        vm.showStyles = $scope.model.styles &&
+            ($scope.model.styles.length > 0 || Object.keys($scope.model.styles).length > 0);
+
+        vm.showEmptyState = vm.showConfig === false && vm.showStyles === false;
+
+    }
+
 }
 
 angular.module("umbraco").controller("Umbraco.PropertyEditors.GridPrevalueEditor.ConfigController", ConfigController);
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/config.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/config.html
index a7cabd1636..88585b76fa 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/config.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/config.html
@@ -13,11 +13,11 @@
         <umb-editor-container>
             <ng-form name="gridItemConfigEditor" val-form-manager>
 
-                <umb-empty-state position="center" ng-if="model.config.length === 0 && model.styles.length === 0">
+                <umb-empty-state position="center" ng-if="vm.showEmptyState">
                     <localize key="grid_noConfiguration">No further configuration available</localize>
                 </umb-empty-state>
 
-                <umb-box ng-if="model.config && model.config.length > 0">
+                <umb-box ng-if="vm.showConfig">
                     <umb-box-header title-key="grid_settings"></umb-box-header>
                     <umb-box-content>
                         <div>
@@ -29,7 +29,7 @@
                     </umb-box-content>
                 </umb-box>
 
-                <umb-box ng-if="model.styles && model.styles.length > 0">
+                <umb-box ng-if="vm.showStyles">
                     <umb-box-header title-key="grid_styles"></umb-box-header>
                     <umb-box-content>
                         <div>
@@ -52,7 +52,7 @@
                             shortcut="esc"
                             action="vm.close()">
                 </umb-button>
-                <umb-button ng-if="(model.config && model.config.length > 0) || (model.styles && model.styles.length > 0)"
+                <umb-button ng-if="vm.showConfig || vm.showStyles"
                             type="button"
                             button-style="success"
                             label-key="general_submit"