update add notification & search

src/pages/notification/blocks/AddDialog.tsx

@@ -65,15 +65,15 @@ const AddDialog = () => {
   const doCreateNotification = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    const payload = {
+    // const payload = {
-      ...formField,
+    //   ...formField,
-      subject:
+    //   subject:
-        formField.subject.trim() === '' && formField.via === 'sms'
+    //     formField.subject.trim() === '' && formField.via === 'sms'
-          ? 'SMS Notification'
+    //       ? 'SMS Notification'
-          : formField.subject
+    //       : formField.subject
-    };
+    // };
 
-    const response = await PostData(`${API_URL_NOTIFICATION}/send`, payload);
+    const response = await PostData(`${API_URL_NOTIFICATION}/send`, formField);
     // console.log('send response :', response);
 
     if (response?.status) {

src/pages/notification/blocks/ListToolbar.tsx

@@ -1,10 +1,34 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useManageNotificationContext } from '../hooks/useManageNotificationContext';
 import { Button } from '@/components/ui/button';
+import { useEffect, useState } from 'react';
 
 const ListToolBar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog } = useManageNotificationContext();
+  const [searchValue, setSearchValue] = useState<string>(
+    (table.getColumn('content')?.getFilterValue() as string) ?? ''
+  );
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      handleSearch();
+    }
+  };
+
+  const handleSearch = () => {
+    table.getColumn('content')?.setFilterValue(searchValue);
+    table.setPageIndex(0);
+  };
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.getColumn('content')?.setFilterValue(searchValue);
+      table.setPageIndex(0);
+    }, 200);
+
+    return () => clearTimeout(timer);
+  }, [searchValue, table]);
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
@@ -16,8 +40,8 @@ const ListToolBar = () => {
               <input
                 type="text"
                 placeholder="Search notifications"
-                value={table.getColumn(`content`)?.getFilterValue() as string}
+                value={searchValue}
-                onChange={(event) => table.getColumn('content')?.setFilterValue(event.target.value)}
+                onChange={(event) => setSearchValue(event.target.value)}
               />
             </label>
             {/* <DefaultTooltip title={'Search'} placement={'top'}>

src/pages/settings/user/manage-position/blocks/ListToolBar.tsx

@@ -1,11 +1,33 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useManagePositionContext } from '../hooks';
 import { Button } from '@/components/ui/button';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 const ListToolBar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog } = useManagePositionContext();
+  const [searchValue, setSearchValue] = useState<string>(
+    (table.getColumn('name')?.getFilterValue() as string) ?? ''
+  );
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      handleSearch();
+    }
+  };
+
+  const handleSearch = () => {
+    table.getColumn('username')?.setFilterValue(searchValue);
+    table.setPageIndex(0);
+  };
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.getColumn('username')?.setFilterValue(searchValue);
+      table.setPageIndex(0);
+    }, 200);
+    return () => clearTimeout(timer);
+  }, [searchValue, table]);
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
@@ -17,8 +39,8 @@ const ListToolBar = () => {
               <input
                 type="text"
                 placeholder="Search roles"
-                value={table.getColumn(`name`)?.getFilterValue() as string}
+                value={searchValue}
-                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+                onChange={(event) => setSearchValue(event.target.value)}
               />
             </label>
             {/* <DefaultTooltip title={'Search'} placement={'top'}>

src/pages/settings/user/manage-user/blocks/ListToolBar.tsx

@@ -1,10 +1,33 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useUserContext } from '../hooks';
 import { Button } from '@/components/ui/button';
+import { useEffect, useState } from 'react';
 
 const ListToolBar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog } = useUserContext();
+  const [searchValue, setSearchValue] = useState<string>(
+    (table.getColumn('username')?.getFilterValue() as string) ?? ''
+  );
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      handleSearch();
+    }
+  };
+
+  const handleSearch = () => {
+    table.getColumn('username')?.setFilterValue(searchValue);
+    table.setPageIndex(0);
+  };
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.getColumn('username')?.setFilterValue(searchValue);
+      table.setPageIndex(0);
+    }, 200);
+    return () => clearTimeout(timer);
+  }, [searchValue, table]);
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
@@ -16,10 +39,8 @@ const ListToolBar = () => {
               <input
                 type="text"
                 placeholder="Search Username"
-                value={table.getColumn(`username`)?.getFilterValue() as string}
+                value={searchValue}
-                onChange={(event) =>
+                onChange={(event) => setSearchValue(event.target.value)}
-                  table.getColumn('username')?.setFilterValue(event.target.value)
-                }
               />
             </label>
             {/* <DefaultTooltip title={'Search'} placement={'top'}>