diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 4e56ca758d..bf32b98ff6 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -5598,6 +5598,21 @@ } ] }, + { + "type": "event", + "label": "On row click", + "key": "onRowClick", + "context": [ + { + "label": "Clicked row", + "key": "row" + } + ], + "dependsOn": { + "setting": "allowEditRows", + "value": false + } + }, { "type": "boolean", "label": "Add rows", diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte index 9bdea52124..375cba6039 100644 --- a/packages/client/src/components/app/GridBlock.svelte +++ b/packages/client/src/components/app/GridBlock.svelte @@ -14,12 +14,14 @@ export let initialSortOrder = null export let fixedRowHeight = null export let columns = null + export let onRowClick = null const component = getContext("component") const { styleable, API, builderStore, notificationStore } = getContext("sdk") $: columnWhitelist = columns?.map(col => col.name) $: schemaOverrides = getSchemaOverrides(columns) + $: handleRowClick = allowEditRows ? undefined : onRowClick const getSchemaOverrides = columns => { let overrides = {} @@ -56,6 +58,7 @@ showControls={false} notifySuccess={notificationStore.actions.success} notifyError={notificationStore.actions.error} + on:rowclick={e => handleRowClick?.({ row: e.detail })} /> diff --git a/packages/frontend-core/src/components/grid/cells/GutterCell.svelte b/packages/frontend-core/src/components/grid/cells/GutterCell.svelte index 5357d4b5cf..ae51599edd 100644 --- a/packages/frontend-core/src/components/grid/cells/GutterCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/GutterCell.svelte @@ -17,13 +17,24 @@ const { config, dispatch, selectedRows } = getContext("grid") const svelteDispatch = createEventDispatcher() - const select = () => { + const select = e => { + e.stopPropagation() svelteDispatch("select") const id = row?._id if (id) { selectedRows.actions.toggleRow(id) } } + + const bulkDelete = e => { + e.stopPropagation() + dispatch("request-bulk-delete") + } + + const expand = e => { + e.stopPropagation() + svelteDispatch("expand") + } dispatch("request-bulk-delete")}> +
{:else}
- svelteDispatch("expand")} - /> +
{/if}
diff --git a/packages/frontend-core/src/components/grid/layout/GridRow.svelte b/packages/frontend-core/src/components/grid/layout/GridRow.svelte index fe74f05663..bd65d34498 100644 --- a/packages/frontend-core/src/components/grid/layout/GridRow.svelte +++ b/packages/frontend-core/src/components/grid/layout/GridRow.svelte @@ -17,6 +17,7 @@ columnHorizontalInversionIndex, contentLines, isDragging, + dispatch, } = getContext("grid") $: rowSelected = !!$selectedRows[row._id] @@ -30,6 +31,7 @@ on:focus on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)} on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)} + on:click={() => dispatch("rowclick", row)} > {#each $renderedColumns as column, columnIdx (column.name)} {@const cellId = `${row._id}-${column.name}`} diff --git a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte index f3af0d9362..9f38841f7a 100644 --- a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte +++ b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte @@ -74,6 +74,7 @@ class="row" on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)} on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)} + on:click={() => dispatch("rowclick", row)} > {#if $stickyColumn}