TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adding handle debounce on some sub modules in master data

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

19
src/pages/master/aldeias/blocks/ListToolbar.tsx
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"

34
src/pages/master/products/blocks/ListToolbar.tsx
View File

@ -1,24 +1,21 @@
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { useManageProductsContext } from '../hooks/useManageProductsContext';
import { Button } from '@/components/ui/button';
import { useState } from 'react';
import { useEffect, useState } from 'react';
const ListToolbar = () => {
const { table, reload } = useDataGrid();
const { handleAddDialog } = useManageProductsContext();
const[searchProduct, setSearchProduct] = useState('');
const [searchValue, setSearchValue] = useState<string>((table.getColumn('name')?.getFilterValue() as string) ?? '');
useEffect(() => {
const timer = setTimeout(() => {
table.getColumn('name')?.setFilterValue(searchValue);
}, 200);
return () => clearTimeout(timer);
}, [searchValue, table]);
const handleSearch = ()=>{
table.getColumn('name')?.setFilterValue(searchProduct);
table.setPageIndex(0);
}
const handleKeyDown = (event:React.KeyboardEvent) =>{
if(event.key==='Enter'){
handleSearch();
}
}
return (
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
@ -29,17 +26,11 @@ const ListToolbar = () => {
<KeenIcon icon="magnifier" />
<input
type="text"
placeholder="Search Products"
value={ searchProduct}
onChange={(event) => setSearchProduct(event.target.value)}
onKeyDown={handleKeyDown}
placeholder="Search Transaction Type"
value={searchValue}
onChange={(event) => setSearchValue(event.target.value)}
/>
</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"
@ -57,7 +48,6 @@ const ListToolbar = () => {
variant="outline"
className="h-7.5 text-[0.8rem]"
onClick={() => handleAddDialog(true)}
onKeyDown={handleKeyDown}
>
Add Data
</Button>

36
src/pages/master/profession/blocks/ListToolbar.tsx
View File

@ -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<string>((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 = () => {
<KeenIcon icon="magnifier" />
<input
type="text"
placeholder="Search Profession"
value={searchProfession}
onChange={(event) =>
setSearchProfession(event.target.value)
}
onKeyDown={handleKeyDown}
placeholder="Search Transaction Type"
value={searchValue}
onChange={(event) => setSearchValue(event.target.value)}
/>
</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"

36
src/pages/master/provider/blocks/ListToolbar.tsx
View File

@ -1,23 +1,20 @@
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { useManageProviderContext } from '../hooks/useManageProviderContext';
import { Button } from '@/components/ui/button';
import { useState } from 'react';
import { useEffect, useState } from 'react';
const ListToolbar = () => {
const { reload, table } = useDataGrid();
const { handleAddDialog } = useManageProviderContext();
const [searchProvider, setSearchProvider] = useState('');
const handleSearch = () =>{
table.getColumn('name')?.setFilterValue(searchProvider);
table.setPageIndex(0);
}
const [searchValue, setSearchValue] = useState<string>((table.getColumn('name')?.getFilterValue() as string) ?? '');
const handleKeyDown = (event: React.KeyboardEvent)=>{
if(event.key === 'Enter'){
handleSearch();
}
}
useEffect(() => {
const timer = setTimeout(() => {
table.getColumn('name')?.setFilterValue(searchValue);
}, 200);
return () => clearTimeout(timer);
}, [searchValue, table]);
return (
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
@ -28,19 +25,12 @@ const ListToolbar = () => {
<KeenIcon icon="magnifier" />
<input
type="text"
placeholder="Search Provider"
value={searchProvider}
onChange={(event) =>
setSearchProvider(event.target.value)
}
onKeyDown={handleKeyDown}
placeholder="Search Transaction Type"
value={searchValue}
onChange={(event) => setSearchValue(event.target.value)}
/>
</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"

33
src/pages/master/reward/blocks/ListToolbar.tsx
View File

@ -1,23 +1,20 @@
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { Button } from '@/components/ui/button';
import { useManageRewardContext } from '../hooks/useManageRewardContext';
import { useState } from 'react';
import { useEffect, useState } from 'react';
const ListToolbar = () => {
const { table, reload } = useDataGrid();
const { handleAddDialog } = useManageRewardContext();
const [searchReward, setSearchReward] = useState('');
const [searchValue, setSearchValue] = useState<string>((table.getColumn('name')?.getFilterValue() as string) ?? '');
const handleSearch = () =>{
table.getColumn('name')?.setFilterValue(searchReward);
table.setPageIndex(0);
}
const handleKeyDown = (event: React.KeyboardEvent)=>{
if(event.key === 'Enter'){
handleSearch();
}
}
useEffect(() => {
const timer = setTimeout(() => {
table.getColumn('name')?.setFilterValue(searchValue);
}, 200);
return () => clearTimeout(timer);
}, [searchValue, table]);
return (
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
@ -28,17 +25,11 @@ const ListToolbar = () => {
<KeenIcon icon="magnifier" />
<input
type="text"
placeholder="Search Reward"
value={searchReward}
onChange={(event) => setSearchReward(event.target.value)}
onKeyDown={handleKeyDown}
placeholder="Search Transaction Type"
value={searchValue}
onChange={(event) => setSearchValue(event.target.value)}
/>
</label>
<DefaultTooltip title={'Search'} placement={'top'}>
<Button variant="outline" className="h-7.5" onClick={handleSearch}>
<KeenIcon icon="magnifier" />
</Button>
</DefaultTooltip>
</div>
<div className="flex gap-3 items-center">
<Button