diff --git a/src/Gridler/GridlerDataGrid.tsx b/src/Gridler/GridlerDataGrid.tsx index d58a11b..389b0e3 100644 --- a/src/Gridler/GridlerDataGrid.tsx +++ b/src/Gridler/GridlerDataGrid.tsx @@ -188,6 +188,7 @@ export const GridlerDataGrid = () => { if (!refContextActivated.current) { refContextActivated.current = true; onContextClick('cell', event, cell[0], cell[1]); + setTimeout(() => { refContextActivated.current = false; }, 100); @@ -231,7 +232,7 @@ export const GridlerDataGrid = () => { rows = rows.hasIndex(r) ? rows : rows.add(r); } } - console.log('Debug:onGridSelectionChange', currentSelection, selection); + //console.log('Debug:onGridSelectionChange', currentSelection, selection); if ( JSON.stringify(currentSelection?.columns) !== JSON.stringify(selection.columns) || JSON.stringify(currentSelection?.rows) !== JSON.stringify(rows) || diff --git a/src/Gridler/components/Computer.tsx b/src/Gridler/components/Computer.tsx index e74550c..7d9c567 100644 --- a/src/Gridler/components/Computer.tsx +++ b/src/Gridler/components/Computer.tsx @@ -28,7 +28,7 @@ export const Computer = React.memo(() => { selectFirstRowOnMount, setState, setStateFN, - values + values, } = useGridlerStore((s) => ({ _glideref: s._glideref, _gridSelectionRows: s._gridSelectionRows, @@ -45,7 +45,7 @@ export const Computer = React.memo(() => { scrollToRowKey: s.scrollToRowKey, searchStr: s.searchStr, selectedRowKey: s.selectedRowKey, - selectFirstRowOnMount:s.selectFirstRowOnMount, + selectFirstRowOnMount: s.selectFirstRowOnMount, setState: s.setState, setStateFN: s.setStateFN, uniqueid: s.uniqueid, @@ -100,9 +100,12 @@ export const Computer = React.memo(() => { break; } } - if (!(rowIndex >= 0)) { + + if (rowIndex >= 0) { + rowIndexes.push(rowIndex); + } else { const idx = await getRowIndexByKey(key); - if (idx) { + if (idx !== null) { rowIndexes.push(idx); } } @@ -115,7 +118,9 @@ export const Computer = React.memo(() => { searchSelection().then((rowIndexes) => { let rows = CompactSelection.empty(); rowIndexes.forEach((r) => { - rows = rows.add(r); + if (r !== undefined) { + rows = rows.add(r); + } }); setStateFN('_gridSelectionRows', () => { @@ -276,14 +281,12 @@ export const Computer = React.memo(() => { const ready = getState('ready'); if (ready && selectFirstRowOnMount) { - const scrollToRowKey = getState('scrollToRowKey'); - - + if (scrollToRowKey && scrollToRowKey >= 0) { return; } - + const keyField = getState('keyField') ?? 'id'; const page_data = getState('_page_data'); @@ -299,7 +302,6 @@ export const Computer = React.memo(() => { ) { const values = [firstBuffer, ...(currentValues as Array>)]; - const onChange = getState('onChange'); //console.log('Selecting first row:', firstRow, firstBuffer, values); if (onChange) { @@ -348,9 +350,10 @@ export const Computer = React.memo(() => { const key = selectedRowKey ?? scrollToRowKey; if (key && ref && ready) { + //console.log('Computer:Scrolling to key:', key); getRowIndexByKey?.(key).then((r) => { if (r !== undefined) { - //console.log('Scrolling to selected row:', r, selectedRowKey, scrollToRowKey); + console.log('Scrolling to selected row:', r, selectedRowKey, scrollToRowKey); if (selectedRowKey) { const onChange = getState('onChange'); diff --git a/src/Gridler/components/GridlerStore.tsx b/src/Gridler/components/GridlerStore.tsx index cddf133..5d0bbde 100644 --- a/src/Gridler/components/GridlerStore.tsx +++ b/src/Gridler/components/GridlerStore.tsx @@ -140,7 +140,7 @@ export interface GridlerState { _visibleArea: Rectangle; _visiblePages: Rectangle; addError: (err: string, ...args: Array) => void; - askAPIRowNumber?: (key: string) => Promise; + askAPIRowNumber?: (key: string) => Promise; colFilters?: Array; colOrder?: Record; colSize?: Record; @@ -162,7 +162,7 @@ export interface GridlerState { hasLocalData: boolean; isEmpty: boolean; - isValuesInPages: () => boolean + isValuesInPages: () => boolean; loadingData?: boolean; loadPage: (page: number, clearMode?: 'all' | 'page') => Promise; mounted: boolean; @@ -191,7 +191,6 @@ export interface GridlerState { freezeRegions?: readonly Rectangle[]; selected?: Item; } - ) => void; pageSize: number; @@ -200,10 +199,7 @@ export interface GridlerState { reload?: () => Promise; renderColumns?: GridlerColumns; - setState: ( - key: K, - value: GridlerStoreState[K] - ) => void; + setState: (key: K, value: GridlerStoreState[K]) => void; setStateFN: ( key: K, value: (current: GridlerStoreState[K]) => Partial @@ -357,7 +353,7 @@ const { Provider, useStore: useGridlerStore } = createSyncStore 0) { - console.log('Local row index', rowIndex, key); + //console.log('Local row index', rowIndex, key); return rowIndex; } } @@ -366,8 +362,8 @@ const { Provider, useStore: useGridlerStore } = createSyncStore= 0) { - console.log('Remote row index', rowIndex, key); return rn; } } @@ -402,8 +398,8 @@ const { Provider, useStore: useGridlerStore } = createSyncStore { @@ -488,13 +484,16 @@ const { Provider, useStore: useGridlerStore } = createSyncStore { const state = get(); const [col, row] = cell; + const rowBuffer = state.getRowBuffer(row); if (state.glideProps?.onCellClicked) { state.glideProps?.onCellClicked?.(cell, event); } - if (state.values?.length) { + if (state.values?.length && state.values?.length > 0) { if (state.onChange) { state.onChange(state.values); } + } else if (rowBuffer && state.onChange) { + state.onChange([rowBuffer]); } state._events.dispatchEvent( @@ -949,7 +948,7 @@ const { Provider, useStore: useGridlerStore } = createSyncStore { const [setState, getState] = props.useStore((s) => [s.setState, s.getState]); diff --git a/src/Gridler/components/adaptors/GlidlerAPIAdaptorForGoLangv2.tsx b/src/Gridler/components/adaptors/GlidlerAPIAdaptorForGoLangv2.tsx index 7766844..e6889fa 100644 --- a/src/Gridler/components/adaptors/GlidlerAPIAdaptorForGoLangv2.tsx +++ b/src/Gridler/components/adaptors/GlidlerAPIAdaptorForGoLangv2.tsx @@ -36,7 +36,7 @@ function _GlidlerAPIAdaptorForGoLangv2(props: GlidlerAPIAdaptorForG const searchStr = getState('searchStr'); const searchFields = getState('searchFields'); const _active_requests = getState('_active_requests'); - const keyField = getState('keyField'); + const keyField = getState('keyField'); setState('loadingData', true); try { //console.log('APIAdaptorGoLangv2', { _active_requests, index, pageSize, props }); @@ -83,7 +83,7 @@ function _GlidlerAPIAdaptorForGoLangv2(props: GlidlerAPIAdaptorForG ) ?.forEach((filter: any) => { ops.push({ - name: `${filter.id ?? ""}`, + name: `${filter.id ?? ''}`, op: 'contains', type: 'searchor', value: searchStr, @@ -202,11 +202,13 @@ function _GlidlerAPIAdaptorForGoLangv2(props: GlidlerAPIAdaptorForG ] ); - const askAPIRowNumber: (key: string) => Promise = useCallback( + const askAPIRowNumber: (key: string) => Promise = useCallback( async (key: string) => { const colFilters = getState('colFilters'); - - //console.log('APIAdaptorGoLangv2', { _active_requests, index, pageSize, props }); + if (!key) { + return null; + } + //console.log('APIAdaptorGoLangv2', { key, props }); if (props && props.url) { const head = new Headers(); const ops: FetchAPIOperation[] = [ @@ -250,7 +252,7 @@ function _GlidlerAPIAdaptorForGoLangv2(props: GlidlerAPIAdaptorForG const controller = new AbortController(); - const res = await fetch(`${props.url}?x-fetch-rownumber=${key}}`, { + const res = await fetch(`${props.url}?x-fetch-rownumber=${key}`, { headers: head, method: 'GET', signal: controller?.signal, @@ -273,12 +275,12 @@ function _GlidlerAPIAdaptorForGoLangv2(props: GlidlerAPIAdaptorForG setState('useAPIQuery', useAPIQuery); setState('askAPIRowNumber', askAPIRowNumber); const isValuesInPages = getState('isValuesInPages'); - + const _refresh = getState('_refresh'); if (!isValuesInPages) { - setState('values', []); + setState('values', []); } - + //Reset the loaded pages to new rules _refresh?.().then(() => { const onChange = getState('onChange'); @@ -293,8 +295,6 @@ function _GlidlerAPIAdaptorForGoLangv2(props: GlidlerAPIAdaptorForG return <>; } - - //The computer component does not need to be recalculated on every render, so we use React.memo to prevent unnecessary re-renders. export const GlidlerAPIAdaptorForGoLangv2 = React.memo(_GlidlerAPIAdaptorForGoLangv2); diff --git a/src/Gridler/components/adaptors/GlidlerFormAdaptor.tsx b/src/Gridler/components/adaptors/GlidlerFormAdaptor.tsx index 67d205a..baa2692 100644 --- a/src/Gridler/components/adaptors/GlidlerFormAdaptor.tsx +++ b/src/Gridler/components/adaptors/GlidlerFormAdaptor.tsx @@ -61,7 +61,7 @@ export function GlidlerFormAdaptor(props: { col?: GridlerColumn, defaultItems?: MantineBetterMenuInstanceItem[] ): MantineBetterMenuInstanceItem[] => { - //console.log('GlidlerFormInterface getMenuItems', id); + //console.log('GlidlerFormInterface getMenuItems', id, row, defaultItems); if (id === 'header-menu') { return defaultItems || []; @@ -88,7 +88,7 @@ export function GlidlerFormAdaptor(props: { ? props.descriptionField(row) : undefined; - if (id === 'other') { + if (id === 'other' || (id === 'cell' && !row)) { items.push({ c: 'blue', label: 'Add',