From c9589c1edc958a68698dfdd3ea51c208a7ca00b2 Mon Sep 17 00:00:00 2001
From: melohagan <101575380+melohagan@users.noreply.github.com>
Date: Tue, 4 Jul 2023 08:34:59 +0100
Subject: [PATCH] Apply column order for Grid block (#11099)

* Apply column order for Grid block

* Refactor

* Do not allow column reorder for Grid block

* Refactor
---
 .../components/design/settings/componentSettings.js    |  2 ++
 .../settings/controls/ColumnEditor/ColumnDrawer.svelte |  5 +++++
 .../settings/controls/ColumnEditor/ColumnEditor.svelte |  2 ++
 .../controls/ColumnEditor/GridColumnEditor.svelte      | 10 ++++++++++
 packages/client/manifest.json                          |  2 +-
 5 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/ColumnEditor/GridColumnEditor.svelte

diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js
index 31f51bf468..b3b9fb6577 100644
--- a/packages/builder/src/components/design/settings/componentSettings.js
+++ b/packages/builder/src/components/design/settings/componentSettings.js
@@ -20,6 +20,7 @@ import ValidationEditor from "./controls/ValidationEditor/ValidationEditor.svelt
 import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 import ColumnEditor from "./controls/ColumnEditor/ColumnEditor.svelte"
 import BasicColumnEditor from "./controls/ColumnEditor/BasicColumnEditor.svelte"
+import GridColumnEditor from "./controls/ColumnEditor/GridColumnEditor.svelte"
 import BarButtonList from "./controls/BarButtonList.svelte"
 import FieldConfiguration from "./controls/FieldConfiguration/FieldConfiguration.svelte"
 
@@ -47,6 +48,7 @@ const componentMap = {
   fieldConfiguration: FieldConfiguration,
   columns: ColumnEditor,
   "columns/basic": BasicColumnEditor,
+  "columns/grid": GridColumnEditor,
   "field/sortable": SortableFieldSelect,
   "field/string": FormFieldSelect,
   "field/number": FormFieldSelect,
diff --git a/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte b/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte
index 6e57d20751..f249245b34 100644
--- a/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte
+++ b/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte
@@ -18,6 +18,7 @@
   export let options = []
   export let schema = {}
   export let allowCellEditing = true
+  export let allowReorder = true
 
   const flipDurationMs = 150
   let dragDisabled = true
@@ -110,6 +111,7 @@
             {#each columns as column (column.id)}
               <div class="column" animate:flip={{ duration: flipDurationMs }}>
                 <div
+                  class:hide={!allowReorder}
                   class="handle"
                   aria-label="drag-handle"
                   style={dragDisabled ? "cursor: grab" : "cursor: grabbing"}
@@ -193,6 +195,9 @@
     display: grid;
     place-items: center;
   }
+  .handle.hide {
+    visibility: hidden;
+  }
   .wide {
     grid-column: 2 / -1;
   }
diff --git a/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte b/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte
index b34edd880a..5f1abdbeca 100644
--- a/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte
@@ -13,6 +13,7 @@
   export let componentInstance
   export let value = []
   export let allowCellEditing = true
+  export let allowReorder = true
 
   const dispatch = createEventDispatcher()
 
@@ -85,6 +86,7 @@
     {options}
     {schema}
     {allowCellEditing}
+    {allowReorder}
   />
 </Drawer>
 
diff --git a/packages/builder/src/components/design/settings/controls/ColumnEditor/GridColumnEditor.svelte b/packages/builder/src/components/design/settings/controls/ColumnEditor/GridColumnEditor.svelte
new file mode 100644
index 0000000000..291a1b61a8
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/ColumnEditor/GridColumnEditor.svelte
@@ -0,0 +1,10 @@
+<script>
+  import ColumnEditor from "./ColumnEditor.svelte"
+</script>
+
+<ColumnEditor
+  {...$$props}
+  on:change
+  allowCellEditing={false}
+  allowReorder={false}
+/>
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 8e7d2bf21f..59928ae684 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -5248,7 +5248,7 @@
         "required": true
       },
       {
-        "type": "columns/basic",
+        "type": "columns/grid",
         "label": "Columns",
         "key": "columns",
         "dependsOn": "table"