From 045d0c89affc6c3c1913f49bc1b19486aede1e69 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 8 Mar 2023 07:55:31 +0000
Subject: [PATCH] Improve UX around selecting rows and cells

---
 .../src/components/sheet/MenuOverlay.svelte        |  6 ++++--
 .../src/components/sheet/StickyColumn.svelte       | 12 +++++++-----
 .../src/components/sheet/stores/interface.js       | 14 ++++++++++++++
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/packages/frontend-core/src/components/sheet/MenuOverlay.svelte b/packages/frontend-core/src/components/sheet/MenuOverlay.svelte
index 24361cfd9c..1a96a0132e 100644
--- a/packages/frontend-core/src/components/sheet/MenuOverlay.svelte
+++ b/packages/frontend-core/src/components/sheet/MenuOverlay.svelte
@@ -9,7 +9,7 @@
   } from "@budibase/bbui"
   import { getContext } from "svelte"
 
-  const { selectedCellRow, menu, rows, columns, selectedCellId } =
+  const { selectedCellRow, menu, rows, columns, selectedCellId, stickyColumn } =
     getContext("sheet")
 
   let modal
@@ -33,7 +33,8 @@
     delete clone.__idx
     const newRow = await rows.actions.addRow(clone, $selectedCellRow.__idx + 1)
     if (newRow) {
-      $selectedCellId = `${newRow._id}-${$columns[0].name}`
+      const column = $stickyColumn?.name || $columns[0].name
+      $selectedCellId = `${newRow._id}-${column}`
       menu.actions.close()
     }
   }
@@ -62,6 +63,7 @@
 
 <style>
   .menu {
+    z-index: 1;
     position: absolute;
     background: var(--cell-background);
     border: var(--cell-border);
diff --git a/packages/frontend-core/src/components/sheet/StickyColumn.svelte b/packages/frontend-core/src/components/sheet/StickyColumn.svelte
index 9dd2230483..16f58ded8e 100644
--- a/packages/frontend-core/src/components/sheet/StickyColumn.svelte
+++ b/packages/frontend-core/src/components/sheet/StickyColumn.svelte
@@ -18,6 +18,7 @@
     config,
     selectedCellMap,
     selectedCellRow,
+    menu,
   } = getContext("sheet")
 
   $: scrollLeft = $scroll.left
@@ -114,15 +115,16 @@
           </SheetCell>
 
           {#if $stickyColumn}
-            {@const cellIdx = `${row._id}-${stickyColumn.name}`}
+            {@const cellId = `${row._id}-${$stickyColumn.name}`}
             <SheetCell
               rowSelected={rowSelected || containsSelectedRow}
               {rowHovered}
               rowIdx={idx}
               sticky
-              selected={$selectedCellId === cellIdx}
-              selectedUser={$selectedCellMap[cellIdx]}
-              on:click={() => ($selectedCellId = cellIdx)}
+              selected={$selectedCellId === cellId}
+              selectedUser={$selectedCellMap[cellId]}
+              on:click={() => ($selectedCellId = cellId)}
+              on:contextmenu={e => menu.actions.open(cellId, e)}
               width={$stickyColumn.width}
               reorderTarget={$reorder.targetColumn === $stickyColumn.name}
             >
@@ -130,7 +132,7 @@
                 this={getCellRenderer($stickyColumn)}
                 value={row[$stickyColumn.name]}
                 schema={$stickyColumn.schema}
-                selected={$selectedCellId === cellIdx}
+                selected={$selectedCellId === cellId}
                 onChange={val =>
                   rows.actions.updateRow(row._id, $stickyColumn, val)}
                 readonly={$stickyColumn.schema.autocolumn}
diff --git a/packages/frontend-core/src/components/sheet/stores/interface.js b/packages/frontend-core/src/components/sheet/stores/interface.js
index 404c479d74..2df533d8f1 100644
--- a/packages/frontend-core/src/components/sheet/stores/interface.js
+++ b/packages/frontend-core/src/components/sheet/stores/interface.js
@@ -48,5 +48,19 @@ export const createInterfaceStores = context => {
     }
   })
 
+  // Reset selected rows when selected cell changes
+  selectedCellId.subscribe(id => {
+    if (id) {
+      selectedRows.set({})
+    }
+  })
+
+  // Unset selected cell when rows are selected
+  selectedRows.subscribe(rows => {
+    if (Object.keys(rows || {}).length) {
+      selectedCellId.set(null)
+    }
+  })
+
   return { selectedCellId, selectedRows, hoveredRowId, selectedCellRow }
 }