menu crud

src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx

@@ -27,15 +27,26 @@ interface MenuProps {
   status: string;
 }
 
+const initialState = {
+  id: '',
+  module: '',
+  name: '',
+  link: '',
+  id_parent: '',
+  order_number: 0,
+  icon: '',
+  status: ''
+};
+
 interface ContextProps {
   menus: MenuProps[];
   showEditDialog: boolean;
-  handleEditDialog: (show: boolean, selected_postoAdms: string | null) => void;
+  handleEditDialog: (show: boolean, selected_postoAdms: object | null) => void;
   showAddDialog: boolean;
   handleAddDialog: (show: boolean) => void;
   showDeleteDialog: boolean;
-  handleDeleteDialog: (show: boolean, selected_postoAdms: string | null) => void;
-  selectedMenu: string | null;
+  handleDeleteDialog: (show: boolean, selected_postoAdms: object | null) => void;
+  selectedMenu: object | null;
   getMenusLists: (
     limit: number,
     page: number,
@@ -43,6 +54,8 @@ interface ContextProps {
     order_field: any,
     order_direction: any
   ) => Promise<{ data: MenuProps[]; totalCount: number } | undefined>;
+  setSelectedMenu: (data: object) => void;
+  parents: any;
 }
 
 const initialProps: ContextProps = {
@@ -50,11 +63,13 @@ const initialProps: ContextProps = {
   showAddDialog: false,
   handleAddDialog: (show: boolean) => {},
   showEditDialog: false,
-  handleEditDialog: (show: boolean, selected_menu: string | null) => {},
+  handleEditDialog: (show: boolean, selected_menu: object | null) => {},
   showDeleteDialog: false,
-  handleDeleteDialog: (show: boolean, selected_menu: string | null) => {},
-  selectedMenu: null,
-  getMenusLists: async () => ({ data: [], totalCount: 0 })
+  handleDeleteDialog: (show: boolean, selected_menu: object | null) => {},
+  selectedMenu: initialState,
+  getMenusLists: async () => ({ data: [], totalCount: 0 }),
+  setSelectedMenu: (data: object) => {},
+  parents: []
 };
 
 const ManageMenusContext = createContext<ContextProps>(initialProps);
@@ -65,21 +80,22 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
   const [showAddDialog, setShowAddDialog] = useState(false);
   const [showEditDialog, setShowEditDialog] = useState(false);
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
-  const [selectedMenu, setSelectedMenu] = useState<string | null>(null);
+  const [selectedMenu, setSelectedMenu] = useState<object | null>(initialState);
+  const [parents, setParents] = useState<any>([]);
   const { GetData } = useCallApi();
 
   const handleAddDialog = useCallback((show: boolean) => {
     setShowAddDialog(show);
   }, []);
 
-  const handleEditDialog = useCallback((show: boolean, selected_menu: string | null) => {
+  const handleEditDialog = useCallback((show: boolean, selected_menu: object | null) => {
+    if (show) setSelectedMenu(selected_menu);
     setShowEditDialog(show);
-    setSelectedMenu(selected_menu);
   }, []);
 
-  const handleDeleteDialog = useCallback((show: boolean, selected_menu: string | null) => {
+  const handleDeleteDialog = useCallback((show: boolean, selected_menu: object | null) => {
+    if (show) setSelectedMenu(selected_menu);
     setShowDeleteDialog(show);
-    setSelectedMenu(selected_menu);
   }, []);
 
   const columns = useMemo<ColumnDef<any>[]>(
@@ -135,13 +151,13 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
             <>
               <button
                 className="btn btn-sm btn-icon btn-clear btn-light"
-                onClick={() => handleEditDialog(true, row.id)}
+                onClick={() => handleEditDialog(true, row)}
               >
                 <KeenIcon icon="notepad-edit" />
               </button>
               <button
                 className="btn btn-sm btn-icon btn-clear btn-light"
-                onClick={() => handleDeleteDialog(true, row.id)}
+                onClick={() => handleDeleteDialog(true, row)}
               >
                 <KeenIcon icon="trash" />
               </button>
@@ -158,25 +174,27 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
   );
 
   const flattenChildren = (parent: any, parentIdx: number, depth = 0, parentName = '') => {
+    if (parent.link === '/') {
+      if (!parents.find((el: any) => el.id === parent.id)) setParents((el: any) => [...el, { id: parent.id, name: parent.name }]) // GET PARENTS
+    }
     if (!parent.children || parent.children.length === 0) {
       return []; // Jika tidak ada children, kembalikan array kosong
     }
 
     return parent.children.flatMap((child: any, childIdx: number) => {
-      // Jika child masih punya children, lakukan rekursi lebih dalam
       if (child.children && child.children.length > 0) {
         return flattenChildren(child, parentIdx * 100 + childIdx, depth + 1, child.name);
       }
 
-      // Jika ini adalah child terakhir (leaf node), masukkan ke array hasil
       return {
-        id: parentIdx * 100 + childIdx + 1,
+        id: child.id,
         module: parent.module,
         parentName: parentName || parent.name,
         name: child.name,
         link: child.link,
-        id_parent: parent.id_parent,
-        status: parent.status
+        id_parent: child.id_parent,
+        status: parent.status,
+        order_number: parent.order_number
       };
     });
   };
@@ -194,10 +212,8 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
         order_direction: sorting[0].desc ? 'DESC' : 'ASC'
       });
 
-      console.log(response?.data);
       if (!response?.data.list) return { data: [], totalCount: 0 };
 
-      // Gunakan rekursi untuk mencari children paling dalam
       const transformedData = response.data.list.flatMap((row: any, parentIdx: number) =>
         flattenChildren(row, parentIdx)
       );
@@ -205,7 +221,6 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
       const total_count = transformedData.length;
 
       setMenus(transformedData);
-      console.log(menus);
       return { data: transformedData, totalCount: total_count };
     } catch (error) {
       console.error('Error fetching Menus', error);
@@ -224,7 +239,9 @@ const ManageMenusContextProvider = ({ children }: { children: React.ReactNode })
         showDeleteDialog,
         handleDeleteDialog,
         selectedMenu,
-        getMenusLists
+        getMenusLists,
+        setSelectedMenu,
+        parents
       }}
     >
       <Toaster expand visibleToasts={9} duration={3000} />