From 3034886eef14053a3d4dc8dd0213999d10fc79a6 Mon Sep 17 00:00:00 2001
From: Raja Oktafrianto <rajaoktafrianto3.com>
Date: Thu, 17 Apr 2025 11:14:53 +0700
Subject: [PATCH] update search

---
 src/pages/notification/blocks/ListToolbar.tsx | 23 ++++---------------
 .../manage-position/blocks/ListToolBar.tsx    | 20 ++++------------
 .../user/manage-user/blocks/ListToolBar.tsx   | 23 +++++--------------
 3 files changed, 15 insertions(+), 51 deletions(-)

diff --git a/src/pages/notification/blocks/ListToolbar.tsx b/src/pages/notification/blocks/ListToolbar.tsx
index 2f4c918..823454b 100644
--- a/src/pages/notification/blocks/ListToolbar.tsx
+++ b/src/pages/notification/blocks/ListToolbar.tsx
@@ -1,22 +1,10 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useManageNotificationContext } from '../hooks/useManageNotificationContext';
 import { Button } from '@/components/ui/button';
-import React, { useState } from 'react';
 
 const ListToolBar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog } = useManageNotificationContext();
-  const [searchValue, setSearchValue] = useState('');
-
-  const handleKeydown = (event: React.KeyboardEvent) => {
-    if (event.key === 'Enter') {
-      handleSearch();
-    }
-  };
-
-  const handleSearch = () => {
-    table.getColumn('content')?.setFilterValue(searchValue);
-  };
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
@@ -27,13 +15,12 @@ const ListToolBar = () => {
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search users"
-                value={searchValue}
-                onChange={(event) => setSearchValue(event.target.value)}
-                onKeyDown={handleKeydown}
+                placeholder="Search notifications"
+                value={table.getColumn(`content`)?.getFilterValue() as string}
+                onChange={(event) => table.getColumn('content')?.setFilterValue(event.target.value)}
               />
             </label>
-            <DefaultTooltip title={'Search'} placement={'top'}>
+            {/* <DefaultTooltip title={'Search'} placement={'top'}>
               <Button
                 variant="outline"
                 className="h-7.5 disabled:bg-gray-400"
@@ -41,7 +28,7 @@ const ListToolBar = () => {
               >
                 <KeenIcon icon="magnifier" />
               </Button>
-            </DefaultTooltip>
+            </DefaultTooltip> */}
           </div>
           <div className="flex gap-3 items-center">
             <Button
diff --git a/src/pages/settings/user/manage-position/blocks/ListToolBar.tsx b/src/pages/settings/user/manage-position/blocks/ListToolBar.tsx
index b310bd8..156a507 100644
--- a/src/pages/settings/user/manage-position/blocks/ListToolBar.tsx
+++ b/src/pages/settings/user/manage-position/blocks/ListToolBar.tsx
@@ -6,17 +6,6 @@ import { useState } from 'react';
 const ListToolBar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog } = useManagePositionContext();
-  const [searchValue, setSearchValue] = useState('');
-
-  const handleSearch = () => {
-    table.getColumn('name')?.setFilterValue(searchValue);
-  };
-
-  const handleKeyDown = (event: React.KeyboardEvent) => {
-    if (event.key === 'Enter') {
-      handleSearch();
-    }
-  };
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
@@ -28,12 +17,11 @@ const ListToolBar = () => {
               <input
                 type="text"
                 placeholder="Search roles"
-                value={searchValue}
-                onChange={(event) => setSearchValue(event.target.value)}
-                onKeyDown={handleKeyDown}
+                value={table.getColumn(`name`)?.getFilterValue() as string}
+                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
               />
             </label>
-            <DefaultTooltip title={'Search'} placement={'top'}>
+            {/* <DefaultTooltip title={'Search'} placement={'top'}>
               <Button
                 variant="outline"
                 className="h-7.5 disabled:bg-gray-400"
@@ -41,7 +29,7 @@ const ListToolBar = () => {
               >
                 <KeenIcon icon="magnifier" />
               </Button>
-            </DefaultTooltip>
+            </DefaultTooltip> */}
           </div>
 
           <div className="flex gap-3 items-center">
diff --git a/src/pages/settings/user/manage-user/blocks/ListToolBar.tsx b/src/pages/settings/user/manage-user/blocks/ListToolBar.tsx
index daa8cec..a884d14 100644
--- a/src/pages/settings/user/manage-user/blocks/ListToolBar.tsx
+++ b/src/pages/settings/user/manage-user/blocks/ListToolBar.tsx
@@ -1,22 +1,10 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useUserContext } from '../hooks';
 import { Button } from '@/components/ui/button';
-import React, { useState } from 'react';
 
 const ListToolBar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog } = useUserContext();
-  const [searchValue, setSearchValue] = useState('');
-
-  const handleSearch = () => {
-    table.getColumn('username')?.setFilterValue(searchValue);
-  };
-
-  const handleKeyDown = (event: React.KeyboardEvent) => {
-    if (event.key === 'Enter') {
-      handleSearch();
-    }
-  };
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
@@ -28,12 +16,13 @@ const ListToolBar = () => {
               <input
                 type="text"
                 placeholder="Search Username"
-                value={searchValue}
-                onChange={(event) => setSearchValue(event.target.value)}
-                onKeyDown={handleKeyDown}
+                value={table.getColumn(`username`)?.getFilterValue() as string}
+                onChange={(event) =>
+                  table.getColumn('username')?.setFilterValue(event.target.value)
+                }
               />
             </label>
-            <DefaultTooltip title={'Search'} placement={'top'}>
+            {/* <DefaultTooltip title={'Search'} placement={'top'}>
               <Button
                 variant="outline"
                 className="h-7.5 disabled:bg-gray-400"
@@ -41,7 +30,7 @@ const ListToolBar = () => {
               >
                 <KeenIcon icon="magnifier" />
               </Button>
-            </DefaultTooltip>
+            </DefaultTooltip> */}
           </div>
           <div className="flex gap-3 items-center">
             <Button