From 2f81da93a998c25d6f2c47ef3c5230c78d8f7d22 Mon Sep 17 00:00:00 2001
From: Raja Oktafrianto <rajaoktafrianto3.com>
Date: Wed, 16 Apr 2025 14:53:40 +0700
Subject: [PATCH] add button search for searching

---
 src/pages/notification/blocks/ListToolbar.tsx | 29 +++++++++----
 .../manage-position/blocks/ListToolBar.tsx    | 42 +++++++++++++++----
 .../user/manage-user/blocks/ListToolBar.tsx   | 29 ++++++++-----
 3 files changed, 72 insertions(+), 28 deletions(-)

diff --git a/src/pages/notification/blocks/ListToolbar.tsx b/src/pages/notification/blocks/ListToolbar.tsx
index 5ca290f..2f4c918 100644
--- a/src/pages/notification/blocks/ListToolbar.tsx
+++ b/src/pages/notification/blocks/ListToolbar.tsx
@@ -1,10 +1,22 @@
 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">
@@ -16,21 +28,20 @@ const ListToolBar = () => {
               <input
                 type="text"
                 placeholder="Search users"
-                value={(table.getColumn('content')?.getFilterValue() as string) ?? ''}
-                onChange={(event) => table.getColumn('content')?.setFilterValue(event.target.value)}
+                value={searchValue}
+                onChange={(event) => setSearchValue(event.target.value)}
+                onKeyDown={handleKeydown}
               />
             </label>
-            {/* <DefaultTooltip title={'Filter'} placement={'top'}>
+            <DefaultTooltip title={'Search'} placement={'top'}>
               <Button
                 variant="outline"
                 className="h-7.5 disabled:bg-gray-400"
-                // disabled={isLoading}
-                // onClick={handleFilterData}
+                onClick={handleSearch}
               >
-                {/* {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} */}
-            {/* <KeenIcon icon="filter" /> */}
-            {/* </Button>
-            </DefaultTooltip> */}
+                <KeenIcon icon="magnifier" />
+              </Button>
+            </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 4e8a8b1..b310bd8 100644
--- a/src/pages/settings/user/manage-position/blocks/ListToolBar.tsx
+++ b/src/pages/settings/user/manage-position/blocks/ListToolBar.tsx
@@ -1,24 +1,48 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useManagePositionContext } from '../hooks';
 import { Button } from '@/components/ui/button';
+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">
       <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
         <div className="flex justify-between w-full items-center">
-          <label className="input input-sm w-1/6">
-            <KeenIcon icon="magnifier" />
-            <input
-              type="text"
-              placeholder="Search roles"
-              value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
-              onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
-            />
-          </label>
+          <div className="flex w-[50%] gap-3 items-center">
+            <label className="input input-sm w-1/3">
+              <KeenIcon icon="magnifier" />
+              <input
+                type="text"
+                placeholder="Search roles"
+                value={searchValue}
+                onChange={(event) => setSearchValue(event.target.value)}
+                onKeyDown={handleKeyDown}
+              />
+            </label>
+            <DefaultTooltip title={'Search'} placement={'top'}>
+              <Button
+                variant="outline"
+                className="h-7.5 disabled:bg-gray-400"
+                onClick={handleSearch}
+              >
+                <KeenIcon icon="magnifier" />
+              </Button>
+            </DefaultTooltip>
+          </div>
 
           <div className="flex gap-3 items-center">
             <Button
diff --git a/src/pages/settings/user/manage-user/blocks/ListToolBar.tsx b/src/pages/settings/user/manage-user/blocks/ListToolBar.tsx
index ff30fa0..daa8cec 100644
--- a/src/pages/settings/user/manage-user/blocks/ListToolBar.tsx
+++ b/src/pages/settings/user/manage-user/blocks/ListToolBar.tsx
@@ -1,10 +1,22 @@
 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">
@@ -16,23 +28,20 @@ const ListToolBar = () => {
               <input
                 type="text"
                 placeholder="Search Username"
-                value={(table.getColumn('username')?.getFilterValue() as string) ?? ''}
-                onChange={(event) =>
-                  table.getColumn('username')?.setFilterValue(event.target.value)
-                }
+                value={searchValue}
+                onChange={(event) => setSearchValue(event.target.value)}
+                onKeyDown={handleKeyDown}
               />
             </label>
-            {/* <DefaultTooltip title={'Filter'} placement={'top'}>
+            <DefaultTooltip title={'Search'} placement={'top'}>
               <Button
                 variant="outline"
                 className="h-7.5 disabled:bg-gray-400"
-                // disabled={isLoading}
-                // onClick={handleFilterData}
+                onClick={handleSearch}
               >
-                {/* {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} */}
-            {/* <KeenIcon icon="filter" />
+                <KeenIcon icon="magnifier" />
               </Button>
-            </DefaultTooltip> */}
+            </DefaultTooltip>
           </div>
           <div className="flex gap-3 items-center">
             <Button