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

[skip ci] Change filter on transfer type to button

Browse Source
This commit is contained in:
bagusajisaputroo
2025-05-29 17:12:59 +07:00
parent 5c6d834c19
commit c5073b88be
1 changed files with 66 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/pages/transfer/transfertype/blocks/ListToolBar.tsx
View File

@ -52,41 +52,15 @@ const ListToolbar = () => {
const { handleAddDialog } = useManageTransferTypeContext();
const [transferTypes, setTransferTypes] = useState<TransferType[]>([]);
const { GetData } = useCallApi();
const [statusKind, setStatusKind] = useState('');
const [searchValue, setSearchValue] = useState('');
const [statusTypes, setStatusTypes] = useState('');
const [approval, setApproval] = useState('');
const [tempSearchValue, setTempSearchValue] = useState('');
const [tempStatusTypes, setTempStatusTypes] = useState('');
const [tempApproval, setTempApproval] = useState('');
const [tempStatusKind, setTempStatusKind] = useState('');
const unique = (arr: string[]) => Array.from(new Set(arr));
const types = unique(transferTypes.map((t) => t.type));
const handleKeyDown = (event: React.KeyboardEvent) => {
if (event.key === 'Enter') {
table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
table.setPageIndex(0);
}
};
useEffect(() => {
const timer = setTimeout(() => {
table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
table.setPageIndex(0);
}, 200);
return () => clearTimeout(timer);
}, [searchValue, table]);
useEffect(() => {
table.getColumn('type')?.setFilterValue(statusTypes);
}, [statusTypes, table]);
useEffect(() => {
table.getColumn('status_approval')?.setFilterValue(approval);
}, [approval, table]);
useEffect(() => {
table.getColumn('status_kind')?.setFilterValue(statusKind);
}, [statusKind, table]);
const fetchTransferTypes = async () => {
try {
const response = await GetData(`${API_URL}/transactiontype/list`, {
@ -106,11 +80,21 @@ table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
fetchTransferTypes();
}, []);
const handleApplyFilter = () => {
table.getColumn('name')?.setFilterValue(tempSearchValue ? `%${tempSearchValue}%` : '');
table.getColumn('type')?.setFilterValue(tempStatusTypes);
table.getColumn('status_approval')?.setFilterValue(tempApproval);
table.getColumn('status_kind')?.setFilterValue(tempStatusKind);
table.setPageIndex(0);
};
const handleClearFilter = () => {
setSearchValue('');
setStatusTypes('');
setApproval('');
setStatusKind('');
setTempSearchValue('');
setTempStatusTypes('');
setTempApproval('');
setTempStatusKind('');
table.getColumn('status_kind')?.setFilterValue('');
table.getColumn('name')?.setFilterValue('');
@ -123,6 +107,27 @@ table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
}, 0);
};
const handleRefreshAndClearFilter = () => {
setTempSearchValue('');
setTempStatusTypes('');
setTempApproval('');
setTempStatusKind('');
table.getColumn('name')?.setFilterValue('');
table.getColumn('type')?.setFilterValue('');
table.getColumn('status_approval')?.setFilterValue('');
table.getColumn('status_kind')?.setFilterValue('');
table.setPageIndex(0);
reload();
};
const handleKeyDown = (event: React.KeyboardEvent) => {
if (event.key === 'Enter') {
handleApplyFilter();
}
};
return (
<div className="card-header flex-wrap border-b-0 px-5">
<div className="flex flex-wrap gap-1 w-full">
@ -135,18 +140,18 @@ table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
<input
type="text"
placeholder="Search Name"
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
className="input input-sm w-full pl-9 text-ellipsis overflow-hidden"
value={tempSearchValue}
onChange={(e) => setTempSearchValue(e.target.value)}
className="input input-sm w-full pl-9 text-ellipsis overflow-hidden"
onKeyDown={handleKeyDown}
/>
</div>
<div className="min-w-[220px] shrink-0">
<Select
key={`type-filter-${statusTypes}`}
value={statusTypes}
onValueChange={setStatusTypes}
key={`type-filter-${tempStatusTypes}`}
value={tempStatusTypes}
onValueChange={setTempStatusTypes}
>
<SelectTrigger className="h-8">
<SelectValue
@ -166,9 +171,9 @@ table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
<div className="min-w-[220px] shrink-0">
<Select
key={`approval-filter-${approval}`}
value={approval}
onValueChange={setApproval}
key={`approval-filter-${tempApproval}`}
value={tempApproval}
onValueChange={setTempApproval}
>
<SelectTrigger className="h-8">
<SelectValue
@ -186,11 +191,12 @@ table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
</SelectContent>
</Select>
</div>
<div className="min-w-[220px] shrink-0">
<Select
key={`status-kind-filter-${statusKind}`}
value={statusKind}
onValueChange={setStatusKind}
key={`status-kind-filter-${tempStatusKind}`}
value={tempStatusKind}
onValueChange={setTempStatusKind}
>
<SelectTrigger className="h-8">
<SelectValue
@ -223,12 +229,17 @@ table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
</Select>
</div>
<DefaultTooltip title={'Reset Filter'} placement={'top'}>
<Button
variant="outline"
className="h-7.5 disabled:bg-gray-400 shrink-0"
onClick={handleClearFilter}
>
{/* Filter Button */}
<DefaultTooltip title={'Apply Filter'} placement={'top'}>
<Button variant="default" className="h-8 px-4 shrink-0" onClick={handleApplyFilter}>
<KeenIcon icon="filter" className="mr-1" />
Filter
</Button>
</DefaultTooltip>
{/* Clear Filter Button */}
<DefaultTooltip title={'Refresh Data (Keep Filter)'} placement={'top'}>
<Button variant="outline" className="h-8 px-3 shrink-0" onClick={() => reload()}>
<KeenIcon icon="arrow-circle-left" />
</Button>
</DefaultTooltip>
@ -242,8 +253,8 @@ table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
>
Add
</Button>
<DefaultTooltip title="Refresh" placement="top">
<Button variant="outline" className="h-8 px-3" onClick={() => reload()}>
<DefaultTooltip title="Reset Filter & Refresh" placement="top">
<Button variant="outline" className="h-8 px-3" onClick={handleRefreshAndClearFilter}>
<KeenIcon icon="arrows-circle" />
</Button>
</DefaultTooltip>