adding handle debounce on some sub modules in master data
This commit is contained in:
@ -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<string>((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 = () => {
|
||||
<KeenIcon icon="magnifier" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search Aldeia"
|
||||
placeholder="Search Transaction Type"
|
||||
value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
</label>
|
||||
<DefaultTooltip title={'Search'} placement={'top'}>
|
||||
<Button variant="outline" className="h-7.5" onClick={handleSearch}>
|
||||
<KeenIcon icon="magnifier" />
|
||||
</Button>
|
||||
</DefaultTooltip>
|
||||
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
|
||||
<Button
|
||||
variant="outline"
|
||||
|
||||
Reference in New Issue
Block a user