From 03210a3a7ac9c91db8271460cdf47499df2b1840 Mon Sep 17 00:00:00 2001 From: Hein Date: Thu, 30 Oct 2025 14:23:30 +0200 Subject: [PATCH] docs(changeset): Updated selected cols bug --- .changeset/loose-terms-march.md | 5 ++ src/Gridler/components/Computer.tsx | 77 +++++++------------ src/Gridler/components/GridlerStore.tsx | 42 +++++++++- .../adaptors/GlidlerAPIAdaptorForGoLangv2.tsx | 24 ++++-- 4 files changed, 86 insertions(+), 62 deletions(-) create mode 100644 .changeset/loose-terms-march.md diff --git a/.changeset/loose-terms-march.md b/.changeset/loose-terms-march.md new file mode 100644 index 0000000..d9d1c6f --- /dev/null +++ b/.changeset/loose-terms-march.md @@ -0,0 +1,5 @@ +--- +'@warkypublic/oranguru': patch +--- + +Updated selected cols bug diff --git a/src/Gridler/components/Computer.tsx b/src/Gridler/components/Computer.tsx index 06cfc33..bb3bea5 100644 --- a/src/Gridler/components/Computer.tsx +++ b/src/Gridler/components/Computer.tsx @@ -67,6 +67,7 @@ export const Computer = React.memo(() => { } ); + //When values change, update selection useEffect(() => { const searchSelection = async () => { const page_data = getState('_page_data'); @@ -128,40 +129,12 @@ export const Computer = React.memo(() => { } }, [values]); + //Fire onChange when selection changes useEffect(() => { const onChange = getState('onChange'); if (onChange && typeof onChange === 'function') { - const page_data = getState('_page_data'); - const pageSize = getState('pageSize'); - - const buffers = []; - if (_gridSelectionRows) { - for (const range of _gridSelectionRows) { - let buffer = undefined; - - for (const p in page_data) { - for (const r in page_data[p]) { - const idx = Number(p) * pageSize + Number(r); - if (isNaN(idx)) { - continue; - } - - if (Number(page_data[p][r]?._rownumber) === range + 1) { - buffer = page_data[p][r]; - //console.log('Found row', range, idx, page_data[p][r]?._rownumber); - break; - } else if (idx === range + 1) { - buffer = page_data[p][r]; - //console.log('Found row 2', range, idx, page_data[p][r]?._rownumber); - break; - } - } - } - if (buffer !== undefined) { - buffers.push(buffer); - } - } - } + const getGridSelectedRows = getState('getGridSelectedRows'); + const buffers = getGridSelectedRows(); const _values = getState('values'); @@ -278,6 +251,7 @@ export const Computer = React.memo(() => { }); }, [colOrder]); + //Initial Load useEffect(() => { if (!_glideref) { return; @@ -291,11 +265,12 @@ export const Computer = React.memo(() => { }); }, [ready, loadPage]); + //Logic to select first row on mount useEffect(() => { const _events = getState('_events'); const loadPage = () => { const selectFirstRowOnMount = getState('selectFirstRowOnMount'); - if (selectFirstRowOnMount) { + if (ready && selectFirstRowOnMount) { const scrollToRowKey = getState('scrollToRowKey'); if (scrollToRowKey && scrollToRowKey >= 0) { return; @@ -328,28 +303,28 @@ export const Computer = React.memo(() => { return () => { _events?.removeEventListener('loadPage', loadPage); }; - }, []); + }, [ready]); /// logic to apply the selected row. - useEffect(() => { - const ready = getState('ready'); - const ref = getState('_glideref'); - const getRowIndexByKey = getState('getRowIndexByKey'); + // useEffect(() => { + // const ready = getState('ready'); + // const ref = getState('_glideref'); + // const getRowIndexByKey = getState('getRowIndexByKey'); - if (scrollToRowKey && ref && ready) { - getRowIndexByKey?.(scrollToRowKey).then((r) => { - if (r !== undefined) { - //console.log('Scrolling to selected row:', scrollToRowKey, r); - ref.scrollTo(0, r); - getState('_events').dispatchEvent( - new CustomEvent('scrollToRowKeyFound', { - detail: { rowNumber: r, scrollToRowKey: scrollToRowKey }, - }) - ); - } - }); - } - }, [scrollToRowKey]); + // if (scrollToRowKey && ref && ready) { + // getRowIndexByKey?.(scrollToRowKey).then((r) => { + // if (r !== undefined) { + // //console.log('Scrolling to selected row:', scrollToRowKey, r); + // ref.scrollTo(0, r); + // getState('_events').dispatchEvent( + // new CustomEvent('scrollToRowKeyFound', { + // detail: { rowNumber: r, scrollToRowKey: scrollToRowKey }, + // }) + // ); + // } + // }); + // } + // }, [scrollToRowKey]); useEffect(() => { const ready = getState('ready'); diff --git a/src/Gridler/components/GridlerStore.tsx b/src/Gridler/components/GridlerStore.tsx index fb46e1e..b8a4e6e 100644 --- a/src/Gridler/components/GridlerStore.tsx +++ b/src/Gridler/components/GridlerStore.tsx @@ -155,13 +155,14 @@ export interface GridlerState { selection: Rectangle, abortSignal: AbortSignal ) => CellArray | GetCellsThunk; + getGridSelectedRows: () => Array; getRowBuffer: (row: number) => Record; getRowIndexByKey: (key: number | string) => Promise; getState: (key: K) => GridlerStoreState[K]; hasLocalData: boolean; isEmpty: boolean; - loadingData?: boolean; + loadingData?: boolean; loadPage: (page: number, clearMode?: 'all' | 'page') => Promise; mounted: boolean; onCellActivated: (cell: Item) => void; @@ -278,6 +279,42 @@ const { Provider, useStore: useGridlerStore } = createSyncStore { + const state = get(); + const buffers: Array = []; + const page_data = state._page_data; + const pageSize = state.pageSize; + + if (state._gridSelectionRows) { + for (const range of state._gridSelectionRows) { + let buffer = undefined; + + for (const p in page_data) { + for (const r in page_data[p]) { + const idx = Number(p) * pageSize + Number(r); + if (isNaN(idx)) { + continue; + } + + if (Number(page_data[p][r]?._rownumber) === range + 1) { + buffer = page_data[p][r]; + //console.log('Found row', range, idx, page_data[p][r]?._rownumber); + break; + } else if (idx === range + 1) { + buffer = page_data[p][r]; + //console.log('Found row 2', range, idx, page_data[p][r]?._rownumber); + break; + } + } + } + if (buffer !== undefined) { + buffers.push(buffer); + } + } + } + return buffers; + }, + getRowBuffer: (row: number) => { const state = get(); //Handle local data @@ -300,7 +337,6 @@ const { Provider, useStore: useGridlerStore } = createSyncStore { const state = get(); @@ -477,6 +513,7 @@ const { Provider, useStore: useGridlerStore } = createSyncStore { const s = get(); const coldef = s.renderColumns?.[col ?? -1]; diff --git a/src/Gridler/components/adaptors/GlidlerAPIAdaptorForGoLangv2.tsx b/src/Gridler/components/adaptors/GlidlerAPIAdaptorForGoLangv2.tsx index 4fffb59..b6a6e87 100644 --- a/src/Gridler/components/adaptors/GlidlerAPIAdaptorForGoLangv2.tsx +++ b/src/Gridler/components/adaptors/GlidlerAPIAdaptorForGoLangv2.tsx @@ -77,6 +77,7 @@ function _GlidlerAPIAdaptorForGoLangv2(props: GlidlerAPIAdaptorForG (f) => !f.disableFilter && !f.disableSearch && + !f.virtual && ((searchFields ?? []).length == 0 || searchFields?.includes(f.id)) ) ?.forEach((filter: any) => { @@ -112,13 +113,6 @@ function _GlidlerAPIAdaptorForGoLangv2(props: GlidlerAPIAdaptorForG col_ids?.push(props.hotfields.join(',')); } - if (ops && ops.length > 0) { - const optionHeaders = GoAPIHeaders(ops); - for (const oh in GoAPIHeaders(ops)) { - head.set(oh, optionHeaders[oh]); - } - } - if (col_ids && col_ids.length > 0) { ops.push({ type: 'select-fields', @@ -126,6 +120,13 @@ function _GlidlerAPIAdaptorForGoLangv2(props: GlidlerAPIAdaptorForG }); } + if (ops && ops.length > 0) { + const optionHeaders = GoAPIHeaders(ops); + for (const oh in GoAPIHeaders(ops)) { + head.set(oh, optionHeaders[oh]); + } + } + const currentRequestIndex = _active_requests?.findIndex((f) => f.page === index) ?? -1; _active_requests?.forEach((r) => { if ((r.page >= 0 && r.page < index - 2) || (index >= 0 && r.page > index + 2)) { @@ -262,7 +263,14 @@ function _GlidlerAPIAdaptorForGoLangv2(props: GlidlerAPIAdaptorForG //Reset the loaded pages to new rules useEffect(() => { - loadPage(0, 'all'); + loadPage(0, 'all').then(() => { + const onChange = getState('onChange'); + const getGridSelectedRows = getState('getGridSelectedRows'); + if (onChange && typeof onChange === 'function') { + const buffers = getGridSelectedRows?.(); + onChange(buffers); + } + }); }, [JSON.stringify(props.options), props.filter, props.url, props.authtoken]); //Reset the function in the store.