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

fix toolbar on transfer type + wallet history

Browse Source
This commit is contained in:
bagusajisaputroo
2025-05-06 10:33:56 +07:00
parent 69ebdc31ed
commit 49f32883f7
4 changed files with 36 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/transfer/transferfee/blocks/ListToolBar.tsx
View File

@ -11,7 +11,7 @@
<div className="flex flex-wrap gap-2 lg:gap-5 w-full">
<div className="flex justify-between w-full items-center">
<div className="flex w-[50%] gap-3 items-center">
<label className="input input-sm w-1/3">
{/* <label className="input input-sm w-1/3">
<KeenIcon icon="magnifier" />
<input
type="text"
@ -19,7 +19,7 @@
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
/>
</label>
</label> */}
</div>
<div className="flex gap-3 items-center">
<Button

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

@ -59,21 +59,28 @@ const ListToolbar = () => {
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]);
}, [searchValue, table]);
useEffect(() => {
table.getColumn('type')?.setFilterValue(statusTypes);
}, [statusTypes]);
}, [statusTypes, table]);
useEffect(() => {
table.getColumn('status_approval')?.setFilterValue(approval);
}, [approval]);
}, [approval, table]);
const fetchTransferTypes = async () => {
try {
@ -114,16 +121,19 @@ const ListToolbar = () => {
<div className="flex flex-wrap gap-1 w-full">
<div className="flex justify-between w-full items-center mb-3">
<div className="flex flex-nowrap items-end gap-3 w-full overflow-x-auto">
<div className="w-48 shrink-0">
<label className="input input-sm w-full text-sm">
{/* Fixed Search Input dengan icon yang selalu terlihat */}
<div className="relative w-48 shrink-0">
<div className="absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none ">
<KeenIcon icon="magnifier" />
<input
type="text"
placeholder="Search Name"
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
/>
</label>
</div>
<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"
onKeyDown={handleKeyDown}
/>
</div>
<div className="min-w-[220px] shrink-0">
@ -132,8 +142,8 @@ const ListToolbar = () => {
value={statusTypes}
onValueChange={setStatusTypes}
>
<SelectTrigger className="h-8 text-sm">
<SelectValue placeholder="Select Status Transaction Type" />
<SelectTrigger className="h-8">
<SelectValue placeholder="Select Status Transaction Type" className="text-ellipsis overflow-hidden" />
</SelectTrigger>
<SelectContent className="max-h-64 overflow-y-auto">
{types.map((opt) => (
@ -151,8 +161,8 @@ const ListToolbar = () => {
value={approval}
onValueChange={setApproval}
>
<SelectTrigger className="h-8 text-sm">
<SelectValue placeholder="Select Status Approval" />
<SelectTrigger className="h-8">
<SelectValue placeholder="Select Status Approval" className="text-ellipsis overflow-hidden" />
</SelectTrigger>
<SelectContent className="max-h-64 overflow-y-auto">
<SelectItem value="Y" className="truncate">
@ -167,7 +177,7 @@ const ListToolbar = () => {
<DefaultTooltip title={'Reset Filter'} placement={'top'}>
<Button
variant="outline"
className="h-7.5 disabled:bg-gray-400"
className="h-7.5 disabled:bg-gray-400 shrink-0"
onClick={handleClearFilter}
>
<KeenIcon icon="arrow-circle-left" />
@ -175,7 +185,7 @@ const ListToolbar = () => {
</DefaultTooltip>
</div>
<div className="flex gap-2 items-center">
<div className="flex gap-2 items-center ml-2 shrink-0">
<Button
variant="outline"
className="h-8 px-3 text-xs"
@ -196,4 +206,4 @@ const ListToolbar = () => {
);
};
export default ListToolbar;
export default ListToolbar;

4
src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
View File

@ -212,7 +212,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
header: ({ column }) => (
<DataGridColumnHeader title="Status Transaction Type" column={column} />
),
enableSorting: true,
enableSorting: false,
enableHiding: false,
meta: { headerClassName: 'w-[250px]' }
},
@ -241,7 +241,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
header: ({ column }) => (
<DataGridColumnHeader title="Status Kind" column={column} />
),
enableSorting: true,
enableSorting: false,
enableHiding: false,
meta: { headerClassName: 'w-[250px]' }
},

5
src/pages/wallet/wallet-history/blocks/ListToolbar.tsx
View File

@ -162,6 +162,7 @@ const ListToolbar = () => {
placeholder="Search MSISDN"
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
className="overflow-hidden text-ellipsis w-full"
/>
</label>
@ -182,7 +183,7 @@ const ListToolbar = () => {
<DefaultTooltip title={'Reset Filter'} placement={'top'}>
<Button
variant="outline"
className="h-7.5 disabled:bg-gray-400"
className="h-8 disabled:bg-gray-400"
onClick={handleClearAllFilters}
>
<KeenIcon icon="arrow-circle-left" />
@ -203,4 +204,4 @@ const ListToolbar = () => {
);
};
export default ListToolbar;
export default ListToolbar;