From 09022421db789af8f551e13d5e17eb9a4fb2fd46 Mon Sep 17 00:00:00 2001 From: Wikzyy Date: Thu, 6 Mar 2025 11:16:48 +0700 Subject: [PATCH] add menus context --- .../manage-menu/hooks/ManageMenusContext.tsx | 250 ++++++++++++++++++ 1 file changed, 250 insertions(+) create mode 100644 src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx diff --git a/src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx b/src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx new file mode 100644 index 0000000..69f43b1 --- /dev/null +++ b/src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx @@ -0,0 +1,250 @@ +// interface SelectedMenu { +// id: string; +// module: string; +// name: string; +// id_parent: string; +// order_number: number; +// icon: string; +// application: string; +// status: string; +// } + +import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components'; +import { apiConfig } from '@/config/api.config'; +import { useCallApi } from '@/hooks'; +import { ColumnDef } from '@tanstack/react-table'; +import React, { createContext, useCallback, useMemo, useState } from 'react'; +import { Toaster } from 'sonner'; +import ListToolbar from '../blocks/ListToolbar'; + +interface MenuProps { + id: string; + module: string; + name: string; + id_parent: string; + order_number: number; + icon: string; + status: string; +} + +interface ContextProps { + menus: MenuProps[]; + showEditDialog: boolean; + handleEditDialog: (show: boolean, selected_postoAdms: string | null) => void; + showAddDialog: boolean; + handleAddDialog: (show: boolean) => void; + showDeleteDialog: boolean; + handleDeleteDialog: (show: boolean, selected_postoAdms: string | null) => void; + selectedMenu: string | null; + getMenusLists: ( + limit: number, + page: number, + with_deleted: boolean, + order_field: any, + order_direction: any + ) => Promise<{ data: MenuProps[]; totalCount: number } | undefined>; +} + +const initialProps: ContextProps = { + menus: [], + showAddDialog: false, + handleAddDialog: (show: boolean) => {}, + showEditDialog: false, + handleEditDialog: (show: boolean, selected_menu: string | null) => {}, + showDeleteDialog: false, + handleDeleteDialog: (show: boolean, selected_menu: string | null) => {}, + selectedMenu: null, + getMenusLists: async () => ({ data: [], totalCount: 0 }) +}; + +const ManageMenusContext = createContext(initialProps); +const API_URL = apiConfig.service_dashboard; + +const ManageMenusContextProvider = ({ children }: { children: React.ReactNode }) => { + const [menus, setMenus] = useState([]); + const [showAddDialog, setShowAddDialog] = useState(false); + const [showEditDialog, setShowEditDialog] = useState(false); + const [showDeleteDialog, setShowDeleteDialog] = useState(false); + const [selectedMenu, setSelectedMenu] = useState(null); + const { GetData } = useCallApi(); + + const handleAddDialog = useCallback((show: boolean) => { + setShowAddDialog(show); + }, []); + + const handleEditDialog = useCallback((show: boolean, selected_menu: string | null) => { + setShowEditDialog(show); + setSelectedMenu(selected_menu); + }, []); + + const handleDeleteDialog = useCallback((show: boolean, selected_menu: string | null) => { + setShowDeleteDialog(show); + setSelectedMenu(selected_menu); + }, []); + + const columns = useMemo[]>( + () => [ + { + accessorFn: (row) => row.module, + id: 'module', + header: ({ column }) => , + enableSorting: true, + enableHiding: false, + meta: { headerClassName: 'w-[200px]' } + }, + { + accessorFn: (row) => row.parentName, + id: 'menu', + header: ({ column }) => , + enableSorting: false, + enableHiding: false, + meta: { headerClassName: 'w-[200px]' } + }, + { + accessorFn: (row) => row.name, + id: 'subMenu', + header: ({ column }) => , + enableSorting: false, + enableHiding: false, + meta: { headerClassName: 'w-[200px]' } + }, + { + accessorFn: (row) => row.link, + id: 'link', + header: ({ column }) => , + enableSorting: false, + enableHiding: false, + meta: { headerClassName: 'w-[250px]' } + }, + { + accessorFn: (row) => row.status, + id: 'status', + header: ({ column }) => , + enableSorting: false, + enableHiding: false, + meta: { headerClassName: 'w-[100px]', cellClassName: 'text-center' } + }, + { + id: 'actions', + header: ({ column }) => , + enableSorting: false, + enableHiding: false, + cell: (data) => { + const row = data.row.original; + return ( + <> + + + + ); + }, + meta: { + headerClassName: 'w-[100px]', + cellClassName: 'text-center' + } + } + ], + [handleEditDialog, handleDeleteDialog] + ); + + const flattenChildren = (parent: any, parentIdx: number, depth = 0, parentName = '') => { + 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, + module: parent.module, + parentName: parentName || parent.name, + name: child.name, + link: child.link, + id_parent: parent.id_parent, + status: parent.status + }; + }); + }; + + const getMenusLists = async (page: number, limit: number, sorting: any, filter: any) => { + try { + sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting; + filter = filter.length === 0 ? {} : { any: filter[0].value?.toLowerCase() }; + + const response = await GetData(`${API_URL}/menus/list`, { + limit, + page: page + 1, + with_deleted: false, + order_field: sorting[0].id, + 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) + ); + + const total_count = transformedData.length; + + setMenus(transformedData); + console.log(menus); + return { data: transformedData, totalCount: total_count }; + } catch (error) { + console.error('Error fetching Menus', error); + return { data: [], totalCount: 0 }; + } + }; + + return ( + + + + } + layout={{ card: true }} + sorting={[{ id: 'id', desc: false }]} + serverSide={true} + onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) => + getMenusLists(pageIndex, pageSize, sorting, columnFilters) + } + > + {children} + + + ); +}; + +export { ManageMenusContextProvider, ManageMenusContext }; +export type { MenuProps };