diff --git a/src/pages/master/aldeias/blocks/ListToolbar.tsx b/src/pages/master/aldeias/blocks/ListToolbar.tsx index c5c77ab..f627d3f 100644 --- a/src/pages/master/aldeias/blocks/ListToolbar.tsx +++ b/src/pages/master/aldeias/blocks/ListToolbar.tsx @@ -1,12 +1,12 @@ import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components'; import { Button } from '@/components/ui/button'; import { useManageAldeiasContext } from '../hooks/useManageAldeiasContext'; -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; const ListToolbar = () => { const { table, reload } = useDataGrid(); const { handleAddDialog, handleSearchDialog } = useManageAldeiasContext(); - const [searchValue, setSearchValue] = useState(''); + const [searchValue, setSearchValue] = useState((table.getColumn('name')?.getFilterValue() as string) ?? ''); const handleKeyDown = (event: React.KeyboardEvent) => { if (event.key === 'Enter') { @@ -14,6 +14,13 @@ const ListToolbar = () => { } }; + useEffect(() => { + const timer = setTimeout(() => { + table.getColumn('name')?.setFilterValue(searchValue); + }, 200); + + return () => clearTimeout(timer); + }, [searchValue, table]); const handleSearch = () => { table.getColumn('name')?.setFilterValue(searchValue); table.setPageIndex(0); @@ -28,17 +35,11 @@ const ListToolbar = () => { setSearchValue(event.target.value)} - onKeyDown={handleKeyDown} /> - - - {/* - {/* diff --git a/src/pages/master/profession/blocks/ListToolbar.tsx b/src/pages/master/profession/blocks/ListToolbar.tsx index 0e5b23d..442b4d1 100644 --- a/src/pages/master/profession/blocks/ListToolbar.tsx +++ b/src/pages/master/profession/blocks/ListToolbar.tsx @@ -1,24 +1,21 @@ import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components'; import { useManageProfessionContext } from '../hooks/useManageProfessionContext'; import { Button } from '@/components/ui/button'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { set } from 'date-fns'; const ListToolbar = () => { const { reload, table } = useDataGrid(); const { handleAddDialog } = useManageProfessionContext(); - const [searchProfession, setSearchProfession]= useState(''); + const [searchValue, setSearchValue] = useState((table.getColumn('name')?.getFilterValue() as string) ?? ''); - const handleKeyDown = (event: React.KeyboardEvent) =>{ - if(event.key==='Enter'){ - handleSearch(); - } - } - - const handleSearch = () =>{ - table.getColumn('name')?.setFilterValue(searchProfession); - table.setPageIndex(0); - } + useEffect(() => { + const timer = setTimeout(() => { + table.getColumn('name')?.setFilterValue(searchValue); + }, 200); + + return () => clearTimeout(timer); + }, [searchValue, table]); @@ -32,19 +29,12 @@ const ListToolbar = () => { - setSearchProfession(event.target.value) - } - onKeyDown={handleKeyDown} + placeholder="Search Transaction Type" + value={searchValue} + onChange={(event) => setSearchValue(event.target.value)} /> - - - + {/* - + {/* -