From da1a274dbf3e0b494aa97ce230a499c381d6cfce Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Tue, 14 Jul 2020 16:49:24 +0200
Subject: [PATCH] Grid config row and editor checkboxes (#8363)

---
 .../grid/dialogs/layoutconfig.controller.js   | 17 +++++++-
 .../grid/dialogs/layoutconfig.html            | 41 +++++++++++--------
 .../grid/dialogs/rowconfig.controller.js      | 31 ++++++++++----
 .../grid/dialogs/rowconfig.html               | 19 +++++----
 4 files changed, 72 insertions(+), 36 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.controller.js
index 876e4cf8f3..fcfa714017 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.controller.js
@@ -71,10 +71,23 @@ angular.module("umbraco")
     			var index = template.sections.indexOf(section)
     			template.sections.splice(index, 1);
     		};
-    		
+
+            $scope.selectRow = function (section, row) {
+                section.allowed = section.allowed || [];
+
+                var index = section.allowed.indexOf(row.name);
+                if (row.allowed === true) {
+                    if (index === -1) {
+                        section.allowed.push(row.name); 
+                    }
+                }
+                else {
+                    section.allowed.splice(index, 1);
+                }
+            };
     		
             $scope.close = function() {
-                if($scope.model.close) {
+                if ($scope.model.close) {
                     $scope.model.close();
                 }
             }
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.html
index 06afaa6b45..a9156caed8 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.html
@@ -98,31 +98,36 @@
                           ui-sortable
                           ng-model="model.value.templates">
 
-                          <li ng-repeat="row in rows">
+                          <li ng-repeat="row in rows track by $id(row)">
 
-                              <label style="display: block">
-                                 <input type="checkbox"
-                                     checklist-model="currentSection.allowed"
-                                     checklist-value="row.name"
-                                     style="float: left; margin-right: 10px;">
+                              <div class="flex">
 
-                                  <div class="preview-rows columns" style="margin-top: 5px; float:left">
-                                      <div class="preview-row">
-                                          <div class="preview-col"
-                                              ng-class="{last:$last}"
-                                              ng-repeat="area in row.areas"
-                                              ng-style="{width: percentage(area.grid) + '%'}">
+                                  <umb-checkbox model="row.allowed"
+                                                input-id="rowconfig-{{$index}}"
+                                                on-change="selectRow(currentSection, row)">
+                                  </umb-checkbox>
 
-                                              <div class="preview-cell"></div>
+                                  <div ng-click="row.allowed = !row.allowed; selectRow(currentSection, row)" class="flex flex-auto cursor-pointer">
+
+                                      <div class="preview-rows columns" style="margin-top: auto;">
+                                          <div class="preview-row">
+                                              <div class="preview-col"
+                                                   ng-class="{last:$last}"
+                                                   ng-repeat="area in row.areas"
+                                                   ng-style="{width: percentage(area.grid) + '%'}">
+
+                                                  <div class="preview-cell"></div>
+                                              </div>
                                           </div>
                                       </div>
+
+                                      <div>
+                                          {{row.name}}<br />
+                                          <small>{{row.areas.length}} cells</small>
+                                      </div>
                                   </div>
 
-                                  <div>
-                                      {{row.name}}<br />
-                                      <small>{{row.areas.length}} cells</small><br />
-                                  </div>
-                              </label>
+                              </div>
 
                               <br style="clear: both" />
                           </li>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.controller.js
index 263e7c0d9a..5bc36796e4 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.controller.js
@@ -13,10 +13,9 @@ function RowConfigController($scope, localizationService) {
         }
     }
     
-    
     $scope.currentRow = $scope.model.currentRow;
-    $scope.editors = $scope.model.editors;
     $scope.columns = $scope.model.columns;
+    $scope.editors = $scope.model.editors;
 
     $scope.scaleUp = function(section, max, overflow) {
         var add = 1;
@@ -44,7 +43,7 @@ function RowConfigController($scope, localizationService) {
             delete $scope.currentCell;
         }
         else {
-            if (cell === undefined) {
+            if (cell === null) {
                 var available = $scope.availableRowSpace;
                 var space = 4;
 
@@ -58,6 +57,11 @@ function RowConfigController($scope, localizationService) {
 
                 row.areas.push(cell);
             }
+
+            cell.allowed = cell.allowed || [];
+
+            $scope.editors.forEach(function (e) { e.allowed = cell.allowed.indexOf(e.alias) !== -1 });
+
             $scope.currentCell = cell;
             $scope.currentCell.allowAll = cell.allowAll || !cell.allowed || !cell.allowed.length;
         }
@@ -74,14 +78,28 @@ function RowConfigController($scope, localizationService) {
 
     $scope.deleteArea = function (cell, row) {
     	if ($scope.currentCell === cell) {
-    		$scope.currentCell = undefined;
+    		$scope.currentCell = null;
     	}
     	var index = row.areas.indexOf(cell)
     	row.areas.splice(index, 1);
     };
 
     $scope.closeArea = function() {
-        $scope.currentCell = undefined;
+        $scope.currentCell = null;
+    };
+
+    $scope.selectEditor = function (cell, editor) {
+        cell.allowed = cell.allowed || [];
+
+        var index = cell.allowed.indexOf(editor.alias);
+        if (editor.allowed === true) {
+            if (index === -1) {
+                cell.allowed.push(editor.alias);
+            }
+        }
+        else {
+            cell.allowed.splice(index, 1);
+        }
     };
     
     $scope.close = function() {
@@ -118,11 +136,8 @@ function RowConfigController($scope, localizationService) {
             }
         }
     }, true);
-
     
     init();
-    
-
 }
 
 angular.module("umbraco").controller("Umbraco.PropertyEditors.GridPrevalueEditor.RowConfigController", RowConfigController);
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.html
index 9e7034688b..fd9284d18a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.html
@@ -55,7 +55,7 @@
                    </a>
 
                    <a class="td uSky-templates-column add"
-                       ng-click="configureCell(undefined, currentRow)"
+                       ng-click="configureCell(null, currentRow)"
                        ng-style="{width: percentage(availableRowSpace) + '%'}">
                        <i class="icon icon-add"></i>
                    </a>
@@ -103,13 +103,16 @@
              <div ng-if="currentCell.allowAll === false">
                   <hr />
                   <ul class="unstyled">
-                      <li ng-repeat="editor in editors">
-                          <label>
-                              <input type="checkbox"
-                                  checklist-model="currentCell.allowed"
-                                  checklist-value="editor.alias">
-                                   <i class="icon {{editor.icon}}"></i> {{editor.name}}
-                                   <small class="input-label--small">({{editor.alias}})</small>
+                      <li ng-repeat="editor in editors track by $id(editor)">
+
+                          <umb-checkbox model="editor.allowed"
+                                        input-id="editorconfig-{{$index}}"
+                                        on-change="selectEditor(currentCell, editor)">
+                          </umb-checkbox>
+
+                          <label for="editorconfig-{{$index}}" style="padding: 0; margin-left: -10px;">
+                              <i class="icon {{editor.icon}}" aria-hidden="true"></i> {{editor.name}}
+                              <small class="input-label--small">({{editor.alias}})</small>
                           </label>
                       </li>
                   </ul>