diff --git a/packages/frontend-core/src/components/sheet/DeleteButton.svelte b/packages/frontend-core/src/components/sheet/DeleteButton.svelte index 3d698a9f9d..2be379e21b 100644 --- a/packages/frontend-core/src/components/sheet/DeleteButton.svelte +++ b/packages/frontend-core/src/components/sheet/DeleteButton.svelte @@ -1,5 +1,10 @@ @@ -33,7 +40,7 @@ + import { + clickOutside, + Menu, + MenuItem, + Modal, + ModalContent, + notifications, + } from "@budibase/bbui" + import { getContext } from "svelte" + + const { selectedCellRow, menu, rows, columns, selectedCellId } = + getContext("sheet") + + let modal + + $: style = makeStyle($menu) + + const makeStyle = menu => { + return `left:${menu.left}px; top:${menu.top}px;` + } + + const deleteRow = () => { + rows.actions.deleteRows([$selectedCellRow]) + menu.actions.close() + notifications.success("Deleted 1 row") + } + + const duplicate = async () => { + let clone = { ...$selectedCellRow } + delete clone._id + delete clone._rev + delete clone.__idx + const newRow = await rows.actions.addRow(clone, $selectedCellRow.__idx + 1) + if (newRow) { + $selectedCellId = `${newRow._id}-${$columns[0].name}` + menu.actions.close() + } + } + + +{#if $menu.visible} + +{/if} + + + + Are you sure you want to delete this row? + + + + diff --git a/packages/frontend-core/src/components/sheet/Sheet.svelte b/packages/frontend-core/src/components/sheet/Sheet.svelte index 8b3e60edd2..333a0a0d66 100644 --- a/packages/frontend-core/src/components/sheet/Sheet.svelte +++ b/packages/frontend-core/src/components/sheet/Sheet.svelte @@ -14,11 +14,13 @@ import { createWebsocket } from "./websocket" import { createUserStores } from "./stores/users" import { createResizeStores } from "./stores/resize" + import { createMenuStores } from "./stores/menu" import DeleteButton from "./DeleteButton.svelte" import SheetBody from "./SheetBody.svelte" import ResizeOverlay from "./ResizeOverlay.svelte" import HeaderRow from "./HeaderRow.svelte" import ScrollOverlay from "./ScrollOverlay.svelte" + import MenuOverlay from "./MenuOverlay.svelte" import StickyColumn from "./StickyColumn.svelte" import UserAvatars from "./UserAvatars.svelte" @@ -60,6 +62,7 @@ context = { ...context, ...createReorderStores(context) } context = { ...context, ...createInterfaceStores(context) } context = { ...context, ...createUserStores(context) } + context = { ...context, ...createMenuStores(context) } // Reference some stores for local use const { isResizing, isReordering } = context @@ -107,6 +110,7 @@ + @@ -122,7 +126,7 @@ /* Variables */ --cell-background: var(--spectrum-global-color-gray-50); - --cell-background-hover: var(--spectrum-global-color-gray-75); + --cell-background-hover: var(--spectrum-global-color-gray-100); --cell-padding: 10px; --cell-spacing: 4px; --cell-font-size: 14px; diff --git a/packages/frontend-core/src/components/sheet/SheetBody.svelte b/packages/frontend-core/src/components/sheet/SheetBody.svelte index 586aaafb2f..7b37337ab9 100644 --- a/packages/frontend-core/src/components/sheet/SheetBody.svelte +++ b/packages/frontend-core/src/components/sheet/SheetBody.svelte @@ -4,27 +4,23 @@ import NewRow from "./NewRow.svelte" import SheetRow from "./SheetRow.svelte" - const { selectedCellId, bounds, visibleRows, config } = getContext("sheet") + const { bounds, visibleRows, config } = getContext("sheet") - let ref + let body onMount(() => { // Observe and record the height of the body const observer = new ResizeObserver(() => { - bounds.set(ref.getBoundingClientRect()) + bounds.set(body.getBoundingClientRect()) }) - observer.observe(ref) + observer.observe(body) return () => { observer.disconnect() } }) -
($selectedCellId = null)} -> +
{#each $visibleRows as row, idx} diff --git a/packages/frontend-core/src/components/sheet/SheetRow.svelte b/packages/frontend-core/src/components/sheet/SheetRow.svelte index 2238469a30..4f28982d21 100644 --- a/packages/frontend-core/src/components/sheet/SheetRow.svelte +++ b/packages/frontend-core/src/components/sheet/SheetRow.svelte @@ -14,10 +14,13 @@ visibleColumns, hoveredRowId, selectedCellMap, + selectedCellRow, + menu, } = getContext("sheet") $: rowSelected = !!$selectedRows[row._id] $: rowHovered = $hoveredRowId === row._id + $: containsSelectedCell = $selectedCellRow?._id === row._id
($hoveredRowId = null)} > {#each $visibleColumns as column (column.name)} - {@const cellIdx = `${row._id}-${column.name}`} + {@const cellId = `${row._id}-${column.name}`} ($selectedCellId = cellIdx)} + on:click={() => ($selectedCellId = cellId)} + on:contextmenu={e => menu.actions.open(cellId, e)} width={column.width} > rows.actions.updateRow(row._id, column, val)} readonly={column.schema.autocolumn} /> diff --git a/packages/frontend-core/src/components/sheet/SheetScrollWrapper.svelte b/packages/frontend-core/src/components/sheet/SheetScrollWrapper.svelte index d5c1fad67d..893be80542 100644 --- a/packages/frontend-core/src/components/sheet/SheetScrollWrapper.svelte +++ b/packages/frontend-core/src/components/sheet/SheetScrollWrapper.svelte @@ -12,6 +12,7 @@ hoveredRowId, maxScrollTop, maxScrollLeft, + selectedCellId, } = getContext("sheet") export let scrollVertically = true @@ -71,7 +72,11 @@ }) -
+
($selectedCellId = null)} +>
diff --git a/packages/frontend-core/src/components/sheet/StickyColumn.svelte b/packages/frontend-core/src/components/sheet/StickyColumn.svelte index 090f9c6c98..9dd2230483 100644 --- a/packages/frontend-core/src/components/sheet/StickyColumn.svelte +++ b/packages/frontend-core/src/components/sheet/StickyColumn.svelte @@ -1,7 +1,6 @@