From 0ab1346577c7712cf32573a2b32734abb340b679 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 13 Jun 2023 17:17:29 +0100
Subject: [PATCH] Add settings to grid block for controlling CRUD

---
 packages/client/manifest.json                 | 18 ++++++++++++
 .../src/components/app/GridBlock.svelte       | 10 +++++--
 .../src/components/grid/layout/Grid.svelte    |  2 +-
 .../src/components/grid/layout/NewRow.svelte  | 28 +++++++++++++++++++
 4 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index b3e4438646..883d6fa0a6 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -5243,6 +5243,24 @@
         "label": "Table",
         "key": "table",
         "required": true
+      },
+      {
+        "type": "boolean",
+        "label": "Add rows",
+        "key": "allowAddRows",
+        "defaultValue": true
+      },
+      {
+        "type": "boolean",
+        "label": "Edit rows",
+        "key": "allowEditRows",
+        "defaultValue": true
+      },
+      {
+        "type": "boolean",
+        "label": "Delete rows",
+        "key": "allowDeleteRows",
+        "defaultValue": true
       }
     ]
   }
diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte
index 3bf7fef231..7e69fcdcea 100644
--- a/packages/client/src/components/app/GridBlock.svelte
+++ b/packages/client/src/components/app/GridBlock.svelte
@@ -10,10 +10,13 @@
   export let allowDeleteRows
 
   const component = getContext("component")
-  const { styleable, API } = getContext("sdk")
+  const { styleable, API, builderStore } = getContext("sdk")
 </script>
 
-<div use:styleable={$component.styles}>
+<div
+  use:styleable={$component.styles}
+  class:in-builder={$builderStore.inBuilder}
+>
   <Grid
     tableId={table?.tableId}
     {API}
@@ -33,4 +36,7 @@
     align-items: stretch;
     border: 1px solid var(--spectrum-global-color-gray-300);
   }
+  div.in-builder :global(*) {
+    pointer-events: none;
+  }
 </style>
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index e33cb65940..e6550fa5a5 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@@ -232,7 +232,7 @@
     border-bottom: 2px solid var(--spectrum-global-color-gray-200);
     padding: var(--cell-padding);
     gap: var(--cell-spacing);
-    background: var(--background);
+    background: var(--spectrum-global-color-gray-100);
     z-index: 2;
   }
   .controls-left,
diff --git a/packages/frontend-core/src/components/grid/layout/NewRow.svelte b/packages/frontend-core/src/components/grid/layout/NewRow.svelte
index 85b430f79b..4581e37746 100644
--- a/packages/frontend-core/src/components/grid/layout/NewRow.svelte
+++ b/packages/frontend-core/src/components/grid/layout/NewRow.svelte
@@ -141,6 +141,17 @@
   })
 </script>
 
+<!-- New row FAB -->
+{#if !visible}
+  <div
+    class="new-row-fab"
+    on:click={() => dispatch("add-row-inline")}
+    transition:fade|local={{ duration: 130 }}
+  >
+    <Icon name="Add" size="S" />
+  </div>
+{/if}
+
 <!-- Only show new row functionality if we have any columns -->
 {#if visible}
   <div
@@ -227,6 +238,23 @@
 {/if}
 
 <style>
+  /* New row FAB */
+  .new-row-fab {
+    position: absolute;
+    top: var(--default-row-height);
+    left: calc(var(--gutter-width) / 2);
+    transform: translateX(8px) translateY(-50%);
+    background: var(--cell-background);
+    padding: 4px;
+    border-radius: 50%;
+    border: var(--cell-border);
+    z-index: 10;
+  }
+  .new-row-fab:hover {
+    background: var(--cell-background-hover);
+    cursor: pointer;
+  }
+
   .container {
     position: absolute;
     top: var(--default-row-height);