From a15aa14eb329b105d196bebdf6ea267e8ee7dbf3 Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Mon, 14 Apr 2025 15:08:06 +0700
Subject: [PATCH] fix table and list toolbar on Manage Menu - add button search
 for not debounce searching - set if condition parent to `id_parent` === null

---
 .../menu/manage-menu/blocks/ListToolbar.tsx   | 22 +++++++++++++++++--
 .../manage-menu/hooks/ManageMenusContext.tsx  |  2 +-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/pages/menu/manage-menu/blocks/ListToolbar.tsx b/src/pages/menu/manage-menu/blocks/ListToolbar.tsx
index 9ed6b64..8d1915c 100644
--- a/src/pages/menu/manage-menu/blocks/ListToolbar.tsx
+++ b/src/pages/menu/manage-menu/blocks/ListToolbar.tsx
@@ -1,10 +1,22 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useManageMenusContext } from '../hooks/useManageMenusContext';
 import { Button } from '@/components/ui/button';
+import React, { useState } from 'react';
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog } = useManageMenusContext();
+  const [searchValue, setSearchValue] = useState('');
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      handleSearch();
+    }
+  };
+
+  const handleSearch = () => {
+    table.getColumn('name')?.setFilterValue(searchValue);
+  };
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
@@ -16,10 +28,16 @@ const ListToolbar = () => {
               <input
                 type="text"
                 placeholder="Search Menu"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
-                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+                value={searchValue}
+                onChange={(event) => setSearchValue(event.target.value)}
+                onKeyDown={handleKeyDown}
               />
             </label>
+            <DefaultTooltip title={'Search'} placement={'top'}>
+              <Button variant="outline" className="h-7.5" onClick={handleSearch}>
+                <KeenIcon icon="magnifier" />
+              </Button>
+            </DefaultTooltip>
             {/* <DefaultTooltip title={'Filter'} placement={'top'}>
               <Button
                 variant="outline"
diff --git a/src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx b/src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx
index 7ced52f..967c343 100644
--- a/src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx
+++ b/src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx
@@ -191,7 +191,7 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
   const flattenChildren = (parent: any, parentIdx: number, depth = 0, parentName = '') => {
     let result: any[] = [];
 
-    if (parent.link === '/') {
+    if (parent.id_parent === null) {
       if (!parents.find((el: any) => el.id === parent.id))
         setParents((el: any) => [...el, { id: parent.id, name: parent.name }]);