From 2b8bbafcac4cb9aba6b79e89e2007ca4c6b708f0 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 1 Nov 2023 16:45:37 +0000 Subject: [PATCH] Add support for buttons inside grids --- .../src/components/app/GridBlock.svelte | 27 +++- packages/client/src/sdk.js | 14 +- .../src/components/grid/cells/GridCell.svelte | 2 +- .../grid/layout/ButtonColumn.svelte | 137 ++++++++++++++++++ .../src/components/grid/layout/Grid.svelte | 2 + .../components/grid/layout/GridBody.svelte | 5 + .../src/components/grid/stores/scroll.js | 18 ++- .../src/components/grid/stores/ui.js | 2 + 8 files changed, 198 insertions(+), 9 deletions(-) create mode 100644 packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte index 8febaf44ff..9f93b6c4ff 100644 --- a/packages/client/src/components/app/GridBlock.svelte +++ b/packages/client/src/components/app/GridBlock.svelte @@ -2,6 +2,7 @@ // NOTE: this is not a block - it's just named as such to avoid confusing users, // because it functions similarly to one import { getContext } from "svelte" + import { get } from "svelte/store" import { Grid } from "@budibase/frontend-core" // table is actually any datasource, but called table for legacy compatibility @@ -16,12 +17,21 @@ export let fixedRowHeight = null export let columns = null export let onRowClick = null + export let buttons = null + const context = getContext("context") const component = getContext("component") - const { styleable, API, builderStore, notificationStore } = getContext("sdk") + const { + styleable, + API, + builderStore, + notificationStore, + enrichButtonActions, + } = getContext("sdk") $: columnWhitelist = columns?.map(col => col.name) $: schemaOverrides = getSchemaOverrides(columns) + $: parsedButtons = parseButtons(buttons) const getSchemaOverrides = columns => { let overrides = {} @@ -33,6 +43,20 @@ }) return overrides } + + const parseButtons = buttons => { + if (!buttons?.length) { + return null + } + return buttons.map(settings => ({ + size: "M", + text: settings.text, + type: settings.type, + onClick: async () => { + return await enrichButtonActions(settings.onClick, get(context))() + }, + })) + }
onRowClick?.({ row: e.detail })} />
diff --git a/packages/client/src/sdk.js b/packages/client/src/sdk.js index 1d77f3e2da..77089d648b 100644 --- a/packages/client/src/sdk.js +++ b/packages/client/src/sdk.js @@ -24,9 +24,12 @@ import BlockComponent from "components/BlockComponent.svelte" import { ActionTypes } from "./constants" import { fetchDatasourceSchema } from "./utils/schema.js" import { getAPIKey } from "./utils/api.js" +import { enrichButtonActions } from "./utils/buttonActions.js" export default { API, + + // Stores authStore, notificationStore, routeStore, @@ -41,13 +44,20 @@ export default { currentRole, confirmationStore, roleStore, + + // Utils styleable, linkable, getAction, fetchDatasourceSchema, - Provider, - ActionTypes, getAPIKey, + enrichButtonActions, + + // Components + Provider, Block, BlockComponent, + + // Constants + ActionTypes, } diff --git a/packages/frontend-core/src/components/grid/cells/GridCell.svelte b/packages/frontend-core/src/components/grid/cells/GridCell.svelte index dcc76b9c75..d10eb25528 100644 --- a/packages/frontend-core/src/components/grid/cells/GridCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/GridCell.svelte @@ -15,7 +15,7 @@ $: style = getStyle(width, selectedUser) const getStyle = (width, selectedUser) => { - let style = `flex: 0 0 ${width}px;` + let style = width === "auto" ? "width: auto;" : `flex: 0 0 ${width}px;` if (selectedUser) { style += `--user-color:${selectedUser.color};` } diff --git a/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte new file mode 100644 index 0000000000..4acd8b6b70 --- /dev/null +++ b/packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte @@ -0,0 +1,137 @@ + + + +
+ +
+ {#each buttons as button} + + {/each} +
+ +
+ +
+
($hoveredRowId = null)}> + + {#each $renderedRows as row} + {@const rowSelected = !!$selectedRows[row._id]} + {@const rowHovered = $hoveredRowId === row._id} + {@const rowFocused = $focusedRow?._id === row._id} +
($hoveredRowId = row._id)} + on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)} + > + +
+ {#each buttons as button} + + {/each} +
+ +
+ {/each} + +
+
+ + diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte index e2ecd0f968..285282ddf7 100644 --- a/packages/frontend-core/src/components/grid/layout/Grid.svelte +++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte @@ -48,6 +48,7 @@ export let fixedRowHeight = null export let notifySuccess = null export let notifyError = null + export let buttons = null // Unique identifier for DOM nodes inside this instance const rand = Math.random() @@ -99,6 +100,7 @@ fixedRowHeight, notifySuccess, notifyError, + buttons, }) // Set context for children to consume diff --git a/packages/frontend-core/src/components/grid/layout/GridBody.svelte b/packages/frontend-core/src/components/grid/layout/GridBody.svelte index 0bb2a51fb4..559c465b86 100644 --- a/packages/frontend-core/src/components/grid/layout/GridBody.svelte +++ b/packages/frontend-core/src/components/grid/layout/GridBody.svelte @@ -3,6 +3,7 @@ import GridScrollWrapper from "./GridScrollWrapper.svelte" import GridRow from "./GridRow.svelte" import { BlankRowID } from "../lib/constants" + import ButtonColumn from "./ButtonColumn.svelte" const { bounds, @@ -13,6 +14,7 @@ dispatch, isDragging, config, + props, } = getContext("grid") let body @@ -54,6 +56,9 @@ /> {/if} + {#if $props.buttons?.length} + + {/if}