Remove copy/paste rows, remove move to start/end, improve copy/paste for cell values

packages/frontend-core/src/components/sheet/cells/DataCell.svelte

@@ -16,7 +16,7 @@
   export let column
   export let row
   export let cellId
-  export let updateRow = rows.actions.updateRow
+  export let updateValue = rows.actions.updateValue
   export let invertX = false
   export let invertY = false
 
@@ -53,7 +53,7 @@
     getValue: () => row[column.name],
     setValue: value => {
       validation.actions.setError(cellId, null)
-      updateRow(row._id, column.name, value)
+      updateValue(row._id, column.name, value)
     },
   }
 </script>

packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte

@@ -177,26 +177,12 @@
     >
       Sort Z-A
     </MenuItem>
-    <MenuItem
-      disabled={!canMoveLeft}
-      icon="ChevronDoubleLeft"
-      on:click={moveStart}
-    >
-      Move to start
-    </MenuItem>
     <MenuItem disabled={!canMoveLeft} icon="ChevronLeft" on:click={moveLeft}>
       Move left
     </MenuItem>
     <MenuItem disabled={!canMoveRight} icon="ChevronRight" on:click={moveRight}>
       Move right
     </MenuItem>
-    <MenuItem
-      disabled={!canMoveRight}
-      icon="ChevronDoubleRight"
-      on:click={moveEnd}
-    >
-      Move to end
-    </MenuItem>
   </Menu>
 </Popover>
 

packages/frontend-core/src/components/sheet/layout/NewRowTop.svelte

@@ -62,7 +62,7 @@
     }
   }
 
-  const updateRow = (rowId, columnName, val) => {
+  const updateValue = (rowId, columnName, val) => {
     touched = true
     newRow[columnName] = val
   }
@@ -112,7 +112,7 @@
               focused={$focusedCellId === cellId}
               {rowFocused}
               width={$stickyColumn.width}
-              {updateRow}
+              {updateValue}
               rowIdx={0}
             />
           {/if}
@@ -131,7 +131,7 @@
                   focused={$focusedCellId === cellId}
                   {rowFocused}
                   width={column.width}
-                  {updateRow}
+                  {updateValue}
                   rowIdx={0}
                 />
               {/key}

packages/frontend-core/src/components/sheet/overlays/KeyboardManager.svelte

@@ -9,15 +9,15 @@
     focusedRow,
     stickyColumn,
     focusedCellAPI,
+    clipboard,
   } = getContext("sheet")
 
-  let copiedValue
-
   // Global key listener which intercepts all key events
   const handleKeyDown = e => {
     // If nothing selected avoid processing further key presses
     if (!$focusedCellId) {
       if (e.key === "Tab") {
+        e.preventDefault()
         focusFirstCell()
       }
       return
@@ -46,10 +46,10 @@
     if (e.metaKey || e.ctrlKey) {
       switch (e.key) {
         case "c":
-          copy()
+          clipboard.actions.copy()
           break
         case "v":
-          paste()
+          clipboard.actions.paste()
           break
       }
     } else {
@@ -144,18 +144,6 @@
     $focusedCellAPI?.focus?.()
   }
 
-  // Copies the value from the current cell
-  const copy = () => {
-    copiedValue = $focusedCellAPI?.getValue()
-  }
-
-  // Pastes the copied value
-  const paste = () => {
-    if (copiedValue != null) {
-      $focusedCellAPI?.setValue(copiedValue)
-    }
-  }
-
   // Utils to identify a key code
   const keyCodeIsNumber = keyCode => keyCode >= 48 && keyCode <= 57
   const keyCodeIsLetter = keyCode => keyCode >= 65 && keyCode <= 90

packages/frontend-core/src/components/sheet/overlays/MenuOverlay.svelte

@@ -10,6 +10,8 @@
     focusedCellId,
     stickyColumn,
     config,
+    copiedCell,
+    clipboard,
   } = getContext("sheet")
 
   $: style = makeStyle($menu)
@@ -37,16 +39,35 @@
 {#if $menu.visible}
   <div class="menu" {style} use:clickOutside={() => menu.actions.close()}>
     <Menu>
+      <MenuItem
+        icon="Copy"
+        on:click={clipboard.actions.copyCell}
+        on:click={menu.actions.close}
+      >
+        Copy
+      </MenuItem>
+      <MenuItem
+        icon="Paste"
+        disabled={$copiedCell == null}
+        on:click={clipboard.actions.pasteCell}
+        on:click={menu.actions.close}
+      >
+        Paste
+      </MenuItem>
       <MenuItem
         icon="Delete"
         disabled={!$config.allowDeleteRows}
-        on:click={deleteRow}>Delete row</MenuItem
+        on:click={deleteRow}
       >
+        Delete row
+      </MenuItem>
       <MenuItem
         icon="Duplicate"
         disabled={!$config.allowAddRows}
-        on:click={duplicate}>Duplicate row</MenuItem
+        on:click={duplicate}
       >
+        Duplicate row
+      </MenuItem>
     </Menu>
   </div>
 {/if}

packages/frontend-core/src/components/sheet/stores/clipboard.js

@@ -0,0 +1,37 @@
+import { writable, get } from "svelte/store"
+
+export const createStores = () => {
+  const copiedCell = writable(null)
+  const copiedRow = writable(null)
+
+  return {
+    copiedCell,
+    copiedRow,
+  }
+}
+
+export const deriveStores = context => {
+  const { copiedCell, copiedRow, focusedCellAPI } = context
+
+  const copy = () => {
+    copiedCell.set(get(focusedCellAPI)?.getValue())
+    copiedRow.set(null)
+  }
+
+  const paste = () => {
+    const $copiedCell = get(copiedCell)
+    const $focusedCellAPI = get(focusedCellAPI)
+    if ($copiedCell != null && $focusedCellAPI) {
+      $focusedCellAPI.setValue($copiedCell)
+    }
+  }
+
+  return {
+    clipboard: {
+      actions: {
+        copy,
+        paste,
+      },
+    },
+  }
+}

packages/frontend-core/src/components/sheet/stores/index.js

@@ -10,6 +10,7 @@ import * as UI from "./ui"
 import * as Users from "./users"
 import * as Validation from "./validation"
 import * as Viewport from "./viewport"
+import * as Clipboard from "./clipboard"
 
 const DependencyOrderedStores = [
   Bounds,
@@ -24,6 +25,7 @@ const DependencyOrderedStores = [
   Users,
   Menu,
   Pagination,
+  Clipboard,
 ]
 
 export const attachStores = context => {

packages/frontend-core/src/components/sheet/stores/reorder.js

@@ -122,17 +122,6 @@ export const deriveStores = context => {
     })
   }
 
-  const moveColumnToStart = async column => {
-    moveColumn(column, null)
-    await columns.actions.saveChanges()
-  }
-
-  const moveColumnToEnd = async column => {
-    const $visibleColumns = get(visibleColumns)
-    moveColumn(column, $visibleColumns[$visibleColumns.length - 1]?.name)
-    await columns.actions.saveChanges()
-  }
-
   // Moves a column one place left (as appears visually)
   const moveColumnLeft = async column => {
     const $visibleColumns = get(visibleColumns)
@@ -160,8 +149,6 @@ export const deriveStores = context => {
         stopReordering,
         moveColumnLeft,
         moveColumnRight,
-        moveColumnToStart,
-        moveColumnToEnd,
       },
     },
   }

packages/frontend-core/src/components/sheet/stores/rows.js

@@ -283,13 +283,25 @@ export const deriveStores = context => {
     get(fetch)?.getInitialData()
   }
 
-  // Updates a value of a row
+  // Patches a row with some changes
-  const updateRow = async (rowId, column, value) => {
+  const updateRow = async (rowId, changes) => {
     const $rows = get(rows)
     const $rowLookupMap = get(rowLookupMap)
     const index = $rowLookupMap[rowId]
     const row = $rows[index]
-    if (index == null || row?.[column] === value) {
+    if (index == null || !Object.keys(changes || {}).length) {
+      return
+    }
+
+    // Abandon if no changes
+    let same = true
+    for (let column of Object.keys(changes)) {
+      if (row[column] !== changes[column]) {
+        same = false
+        break
+      }
+    }
+    if (same) {
       return
     }
 
@@ -298,7 +310,7 @@ export const deriveStores = context => {
       ...state,
       [rowId]: {
         ...state[rowId],
-        [column]: value,
+        ...changes,
       },
     }))
 
@@ -332,6 +344,11 @@ export const deriveStores = context => {
     }))
   }
 
+  // Updates a value of a row
+  const updateValue = async (rowId, column, value) => {
+    return await updateRow(rowId, { [column]: value })
+  }
+
   // Deletes an array of rows
   const deleteRows = async rowsToDelete => {
     if (!rowsToDelete?.length) {
@@ -418,6 +435,7 @@ export const deriveStores = context => {
         addRow,
         duplicateRow,
         getRow,
+        updateValue,
         updateRow,
         deleteRows,
         hasRow,