From d466e1f017491c22983eab2e9e575abf9f5b22fb Mon Sep 17 00:00:00 2001 From: Bryan Date: Wed, 14 Aug 2024 17:22:11 -0700 Subject: [PATCH] Small plan export improvements (#1422) * created CancellableProgressRadial component to make plan export more DRY * fix an issue where progress radial is being reset in plans table if row is changed to selected or unselected --- src/components/plan/PlanForm.svelte | 31 +-------- .../ui/CancellableProgressRadial.svelte | 44 +++++++++++++ src/components/ui/DataGrid/DataGrid.svelte | 66 +++++++++++-------- .../ui/DataGrid/DataGridActions.svelte | 26 +------- src/routes/plans/+page.svelte | 27 +------- 5 files changed, 91 insertions(+), 103 deletions(-) create mode 100644 src/components/ui/CancellableProgressRadial.svelte diff --git a/src/components/plan/PlanForm.svelte b/src/components/plan/PlanForm.svelte index b6566955d3..0b404cec57 100644 --- a/src/components/plan/PlanForm.svelte +++ b/src/components/plan/PlanForm.svelte @@ -1,7 +1,6 @@ + +
+ +
+
+ + diff --git a/src/components/ui/DataGrid/DataGrid.svelte b/src/components/ui/DataGrid/DataGrid.svelte index ddeaefcc1a..c64ed8c946 100644 --- a/src/components/ui/DataGrid/DataGrid.svelte +++ b/src/components/ui/DataGrid/DataGrid.svelte @@ -56,7 +56,6 @@ import { SvelteComponent, createEventDispatcher, onDestroy, onMount, type ComponentEvents } from 'svelte'; import type { Dispatcher } from '../../../types/component'; import type { DataGridRowDoubleClick, DataGridRowSelection, RowId, TRowData } from '../../../types/data-grid'; - import { filterEmpty } from '../../../utilities/generic'; import ContextMenu from '../../context-menu/ContextMenu.svelte'; import ColumnResizeContextMenu from './column-menu/ColumnResizeContextMenu.svelte'; @@ -119,9 +118,17 @@ }; export let isRowSelectable: ((node: IRowNode) => boolean) | undefined = undefined; + type RowIdRef = { + value: RowId | null; + }; + + const CURRENT_SELECTED_ROW_CLASS = 'ag-current-row-selected'; const dispatch = createEventDispatcher>(); let contextMenu: ContextMenu; + // This is used so that the current instance of ag-grid always has a pointer to the latest current selected row id + // without having to call anything on the ag-grid instance that results in a full rerender + let currentSelectedRowIdRef: RowIdRef = { value: null }; let gridOptions: GridOptions; let gridApi: GridApi | undefined; let gridDiv: HTMLDivElement; @@ -199,13 +206,24 @@ This has been seen to result in unintended and often glitchy behavior, which oft currentSelectedRowId = selectedRowIds[0]; } + $: currentSelectedRowIdRef.value = currentSelectedRowId; + + /** + * Manually manipulate the old and newly selected row classes instead of invoking `redrawRows` + * in order to correctly mark what the current selected row is. Calling `redrawRows` caused cellrenders to + * lose their current state and be reinitialized. `refreshCells` is not enough to cause ag-grid to recompute + * all the row styles + */ $: { - gridApi?.redrawRows({ - rowNodes: [ - gridApi?.getRowNode(`${currentSelectedRowId}`), - gridApi?.getRowNode(`${previousSelectedRowId}`), - ].filter(filterEmpty), - }); + const previousSelectedRow = gridDiv?.querySelector(`[row-id="${previousSelectedRowId}"]`); + if (previousSelectedRow != null) { + previousSelectedRow.classList.remove(CURRENT_SELECTED_ROW_CLASS); + } + const currentSelectedRow = gridDiv?.querySelector(`[row-id="${currentSelectedRowId}"]`); + if (currentSelectedRow != null) { + currentSelectedRow.classList.add(CURRENT_SELECTED_ROW_CLASS); + } + previousSelectedRowId = currentSelectedRowId; } @@ -218,24 +236,6 @@ This has been seen to result in unintended and often glitchy behavior, which oft resizeObserver?.disconnect(); }); - function getRowClass(params: RowClassParams) { - const rowClass: string[] = []; - - if (isRowSelectable) { - if (isRowSelectable(params.node)) { - rowClass.push('ag-selectable-row'); - } - } else if (rowSelection !== undefined) { - rowClass.push('ag-selectable-row'); - } - - if (params.data && currentSelectedRowId === getRowId(params.data)) { - rowClass.push('ag-current-row-selected'); - } - - return rowClass.join(' '); - } - function onAutoSizeContent() { gridApi?.autoSizeAllColumns(); } @@ -274,7 +274,6 @@ This has been seen to result in unintended and often glitchy behavior, which oft columnDefs, doesExternalFilterPass, excludeHiddenColumnsFromQuickFilter: false, - getRowClass, ...(shouldAutoGenerateId ? {} : { getRowId: (params: { data: RowData }) => `${getRowId(params.data)}` }), isExternalFilterPresent, isRowSelectable, @@ -392,6 +391,21 @@ This has been seen to result in unintended and often glitchy behavior, which oft onColumnStateChangeDebounced(); }, preventDefaultOnContextMenu: useCustomContextMenu, + rowClassRules: { + CURRENT_SELECTED_ROW_CLASS: (params: RowClassParams) => { + return !!params.data && currentSelectedRowIdRef.value === getRowId(params.data); + }, + 'ag-selectable-row': (params: RowClassParams) => { + if (isRowSelectable) { + if (isRowSelectable(params.node)) { + return true; + } + } else if (rowSelection !== undefined) { + return true; + } + return false; + }, + }, rowData, rowHeight, rowSelection, diff --git a/src/components/ui/DataGrid/DataGridActions.svelte b/src/components/ui/DataGrid/DataGridActions.svelte index f1c908bd6e..a74285bd48 100644 --- a/src/components/ui/DataGrid/DataGridActions.svelte +++ b/src/components/ui/DataGrid/DataGridActions.svelte @@ -3,7 +3,6 @@