diff --git a/src/Gridler/components/Computer.tsx b/src/Gridler/components/Computer.tsx index c8d8fc8..b10aad9 100644 --- a/src/Gridler/components/Computer.tsx +++ b/src/Gridler/components/Computer.tsx @@ -1,4 +1,5 @@ import { CompactSelection } from '@glideapps/glide-data-grid'; +import { useDebouncedValue } from '@mantine/hooks'; import React, { useEffect, useRef } from 'react'; import { useGridlerStore } from './GridlerStore'; @@ -21,6 +22,7 @@ export const Computer = React.memo(() => { ready, scrollToRowKey, + searchStr, selectedRowKey, setState, setStateFN, @@ -39,6 +41,7 @@ export const Computer = React.memo(() => { ready: s.ready, scrollToRowKey: s.scrollToRowKey, + searchStr: s.searchStr, selectedRowKey: s.selectedRowKey, setState: s.setState, setStateFN: s.setStateFN, @@ -46,6 +49,10 @@ export const Computer = React.memo(() => { values: s.values, })); + const debouncedSearchStr = useDebouncedValue(searchStr, 400, { + leading: true, + }); + useEffect(() => { const searchSelection = async () => { const page_data = getState('_page_data'); @@ -161,6 +168,21 @@ export const Computer = React.memo(() => { ); }, [columns]); + useEffect(() => { + if (debouncedSearchStr === undefined || debouncedSearchStr === null) { + return; + } + + loadPage(0, 'all').then(() => { + getState('refreshCells')?.(); + getState('_events')?.dispatchEvent?.( + new CustomEvent('onSearched', { + detail: { search: debouncedSearchStr }, + }) + ); + }); + }, [debouncedSearchStr]); + useEffect(() => { if (!colSort) { return; diff --git a/src/Gridler/components/adaptors/GlidlerAPIAdaptorForGoLangv2.tsx b/src/Gridler/components/adaptors/GlidlerAPIAdaptorForGoLangv2.tsx index e367085..f6ed717 100644 --- a/src/Gridler/components/adaptors/GlidlerAPIAdaptorForGoLangv2.tsx +++ b/src/Gridler/components/adaptors/GlidlerAPIAdaptorForGoLangv2.tsx @@ -76,7 +76,7 @@ function _GlidlerAPIAdaptorForGoLangv2(props: GlidlerAPIAdaptorForG ?.forEach((filter: any) => { ops.push({ name: `${filter.id}`, - op: filter.operator, + op: 'contains', type: 'searchor', value: searchStr, }); diff --git a/src/Gridler/stories/Examples.goapi.tsx b/src/Gridler/stories/Examples.goapi.tsx index 7d56550..d376ff5 100644 --- a/src/Gridler/stories/Examples.goapi.tsx +++ b/src/Gridler/stories/Examples.goapi.tsx @@ -17,6 +17,7 @@ export const GridlerGoAPIExampleEventlog = () => { const [apiKey, setApiKey] = useLocalStorage({ defaultValue: '', key: 'apikey' }); const [selectRow, setSelectRow] = useState(''); const [values, setValues] = useState>>([]); + const [search, setSearch] = useState(''); const [sections, setSections] = useState | undefined>(undefined); const columns: GridlerColumns = [ { @@ -110,6 +111,7 @@ export const GridlerGoAPIExampleEventlog = () => { }} ref={ref} scrollToRowKey={selectRow ? parseInt(selectRow, 10) : undefined} + searchStr={search} sections={{ ...sections, rightElementDisabled: false }} selectFirstRowOnMount={true} selectMode="row" @@ -131,6 +133,13 @@ export const GridlerGoAPIExampleEventlog = () => { + S} + onChange={(e) => setSearch(e.target.value)} + placeholder="Search" + value={search} + w="190px" + /> setSelectRow(e.target.value)} placeholder="row"