Should allow grid editors to use hash based settings (#9837)

* 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ø <[email protected]>
(cherry picked from commit 008827f)

Author: 2 people

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);

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"