diff --git a/src/pages/transfer/transfertype/blocks/ListToolBar.tsx b/src/pages/transfer/transfertype/blocks/ListToolBar.tsx index 7325816..7d9e413 100644 --- a/src/pages/transfer/transfertype/blocks/ListToolBar.tsx +++ b/src/pages/transfer/transfertype/blocks/ListToolBar.tsx @@ -1,10 +1,21 @@ import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components'; import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext'; import { Button } from '@/components/ui/button'; +import { useEffect, useState } from 'react'; const ListToolbar = () => { const { table, reload } = useDataGrid(); const { handleAddDialog, handleEditDialog } = useManageTransferTypeContext(); + + const [searchValue, setSearchValue] = useState((table.getColumn('name')?.getFilterValue() as string) ?? ''); + + useEffect(() => { + const timer = setTimeout(() => { + table.getColumn('name')?.setFilterValue(searchValue); + }, 200); + + return () => clearTimeout(timer); + }, [searchValue, table]); return (
@@ -16,8 +27,8 @@ const ListToolbar = () => { table.getColumn('name')?.setFilterValue(event.target.value)} + value={searchValue} + onChange={(event) => setSearchValue(event.target.value)} />
@@ -41,4 +52,4 @@ const ListToolbar = () => { ); }; -export default ListToolbar; +export default ListToolbar; \ No newline at end of file diff --git a/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx b/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx index 7e886a3..dfdd72d 100644 --- a/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx +++ b/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx @@ -6,6 +6,22 @@ import { ColumnDef } from '@tanstack/react-table'; import { createContext, useCallback, useEffect, useMemo, useState } from 'react'; import ListToolbar from '../blocks/ListToolBar'; +function useDebounce(value: T, delay: number): T { + const [debouncedValue, setDebouncedValue] = useState(value); + + useEffect(() => { + const timer = setTimeout(() => { + setDebouncedValue(value); + }, delay); + + return () => { + clearTimeout(timer); + }; + }, [value, delay]); + + return debouncedValue; +} + interface AccountProps { id: string; name: string; @@ -33,6 +49,8 @@ interface ContextProps { selectedTransferType: string | null; transferType: string | null; accounts: AccountProps[]; + searchTerm: string; + setSearchTerm: (term: string) => void; } const initialProps: ContextProps = { @@ -44,7 +62,9 @@ const initialProps: ContextProps = { handleDeleteDialog: () => {}, selectedTransferType: null, accounts: [], - transferType: null + transferType: null, + searchTerm: '', + setSearchTerm: () => {} }; const ManageTransferTypeContext = createContext(initialProps); @@ -59,6 +79,9 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React const { GetData } = useCallApi(); const [selectedTransferType, setSelectedTransferType] = useState(null); const [transferType, setTransferType] = useState(null); + const [searchTerm, setSearchTerm] = useState(''); + + const debouncedSearchTerm = useDebounce(searchTerm, 200); const handleEditDialog = useCallback((show: boolean, selected_transfertype: string | null) => { setSelectedTransferType(show ? selected_transfertype : null); @@ -231,7 +254,9 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React const orderDirection = sorting.length > 0 ? (sorting[0].desc ? 'DESC' : 'ASC') : 'DESC'; - filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() }; + const searchFilter = debouncedSearchTerm ? { any: debouncedSearchTerm.toLowerCase() } : {}; + + filter = filter.length == 0 ? searchFilter : { any: filter[0].value?.toLowerCase() }; const response = await GetData(`${API_URL}/transactiontype/list`, { limit: limit, @@ -241,7 +266,6 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React order_direction: orderDirection, filter: JSON.stringify(filter) }); - // console.log(response?.data.list); return { data: response?.data.list, totalCount: response?.data.total_count }; }; @@ -257,7 +281,9 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React handleDeleteDialog, selectedTransferType, accounts, - transferType + transferType, + searchTerm, + setSearchTerm }} > @@ -283,4 +309,4 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React }; export { ManageTransferTypeContext, ManageTransferTypeContextProvider }; -export type { TransferType }; +export type { TransferType }; \ No newline at end of file