adding handle debounce on some sub modules in master data

This commit is contained in:
bagusajisaputroo
2025-04-16 19:48:10 +07:00
parent 14a6db5eaa
commit 68e5c15a00
5 changed files with 60 additions and 98 deletions

View File

@ -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"