[skip ci] Change filter on transfer type to button

src/pages/transfer/transfertype/blocks/ListToolBar.tsx

@@ -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 [tempSearchValue, setTempSearchValue] = useState('');
-  const [statusTypes, setStatusTypes] = useState('');
+  const [tempStatusTypes, setTempStatusTypes] = useState('');
-  const [approval, setApproval] = 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('');
+    setTempSearchValue('');
-    setStatusTypes('');
+    setTempStatusTypes('');
-    setApproval('');
+    setTempApproval('');
-    setStatusKind('');
+    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}
+                value={tempSearchValue}
-                onChange={(e) => setSearchValue(e.target.value)}
+                onChange={(e) => setTempSearchValue(e.target.value)}
-                className="input input-sm  w-full pl-9 text-ellipsis overflow-hidden"
+                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}`}
+                key={`type-filter-${tempStatusTypes}`}
-                value={statusTypes}
+                value={tempStatusTypes}
-                onValueChange={setStatusTypes}
+                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}`}
+                key={`approval-filter-${tempApproval}`}
-                value={approval}
+                value={tempApproval}
-                onValueChange={setApproval}
+                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}`}
+                key={`status-kind-filter-${tempStatusKind}`}
-                value={statusKind}
+                value={tempStatusKind}
-                onValueChange={setStatusKind}
+                onValueChange={setTempStatusKind}
               >
                 <SelectTrigger className="h-8">
                   <SelectValue
@@ -223,12 +229,17 @@ table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
               </Select>
             </div>
 
-            <DefaultTooltip title={'Reset Filter'} placement={'top'}>
+            {/* Filter Button */}
-              <Button
+            <DefaultTooltip title={'Apply Filter'} placement={'top'}>
-                variant="outline"
+              <Button variant="default" className="h-8 px-4 shrink-0" onClick={handleApplyFilter}>
-                className="h-7.5 disabled:bg-gray-400 shrink-0"
+                <KeenIcon icon="filter" className="mr-1" />
-                onClick={handleClearFilter}
+                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">
+            <DefaultTooltip title="Reset Filter & Refresh" placement="top">
-              <Button variant="outline" className="h-8 px-3" onClick={() => reload()}>
+              <Button variant="outline" className="h-8 px-3" onClick={handleRefreshAndClearFilter}>
                 <KeenIcon icon="arrows-circle" />
               </Button>
             </DefaultTooltip>