From eb934adc338b9be9a56b68a9f13acfdc876e6e4b Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 29 Sep 2023 16:47:53 +0100 Subject: [PATCH 1/4] Add row click events to grid --- packages/client/manifest.json | 15 +++++++++++++++ .../client/src/components/app/GridBlock.svelte | 3 +++ .../src/components/grid/layout/GridRow.svelte | 2 ++ .../components/grid/layout/StickyColumn.svelte | 1 + 4 files changed, 21 insertions(+) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 4e56ca758d..52a74befa9 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -5621,6 +5621,21 @@ "label": "High contrast", "key": "stripeRows", "defaultValue": false + }, + { + "type": "event", + "label": "On row click", + "key": "onRowClick", + "context": [ + { + "label": "Clicked row", + "key": "row" + } + ], + "dependsOn": { + "setting": "allowEditRows", + "value": false + } } ] }, diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte index 9bdea52124..916f1aa447 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:row-click={e => handleRowClick?.({ row: e.detail })} /> diff --git a/packages/frontend-core/src/components/grid/layout/GridRow.svelte b/packages/frontend-core/src/components/grid/layout/GridRow.svelte index fe74f05663..260898da56 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("row-click", 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..e005a945dd 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("row-click", row)} > {#if $stickyColumn} From 68215684e19e3fe3c831f781684112abb812fdac Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 2 Oct 2023 09:13:23 +0100 Subject: [PATCH 2/4] Prevent row selection, deletion and expansion from triggering on click events in grids --- .../components/grid/cells/GutterCell.svelte | 22 ++++++++++++------- 1 file changed, 14 insertions(+), 8 deletions(-) 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}
From 0506adee50b73a3eb2fe9adbd11e9db83191205a Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 2 Oct 2023 09:18:25 +0100 Subject: [PATCH 3/4] Update row click event name to match best practices --- packages/client/src/components/app/GridBlock.svelte | 2 +- .../frontend-core/src/components/grid/layout/GridRow.svelte | 2 +- .../src/components/grid/layout/StickyColumn.svelte | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/client/src/components/app/GridBlock.svelte b/packages/client/src/components/app/GridBlock.svelte index 916f1aa447..375cba6039 100644 --- a/packages/client/src/components/app/GridBlock.svelte +++ b/packages/client/src/components/app/GridBlock.svelte @@ -58,7 +58,7 @@ showControls={false} notifySuccess={notificationStore.actions.success} notifyError={notificationStore.actions.error} - on:row-click={e => handleRowClick?.({ row: e.detail })} + on:rowclick={e => handleRowClick?.({ row: e.detail })} /> diff --git a/packages/frontend-core/src/components/grid/layout/GridRow.svelte b/packages/frontend-core/src/components/grid/layout/GridRow.svelte index 260898da56..bd65d34498 100644 --- a/packages/frontend-core/src/components/grid/layout/GridRow.svelte +++ b/packages/frontend-core/src/components/grid/layout/GridRow.svelte @@ -31,7 +31,7 @@ on:focus on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)} on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)} - on:click={() => dispatch("row-click", row)} + 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 e005a945dd..9f38841f7a 100644 --- a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte +++ b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte @@ -74,7 +74,7 @@ class="row" on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)} on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)} - on:click={() => dispatch("row-click", row)} + on:click={() => dispatch("rowclick", row)} > {#if $stickyColumn} From 7d036ab30d6760e13a3076d262150aab2fe2d9bc Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 2 Oct 2023 09:25:59 +0100 Subject: [PATCH 4/4] Move position of grid row click setting --- packages/client/manifest.json | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 52a74befa9..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", @@ -5621,21 +5636,6 @@ "label": "High contrast", "key": "stripeRows", "defaultValue": false - }, - { - "type": "event", - "label": "On row click", - "key": "onRowClick", - "context": [ - { - "label": "Clicked row", - "key": "row" - } - ], - "dependsOn": { - "setting": "allowEditRows", - "value": false - } } ] },