diff --git a/src/pages/menu/manage-menu/ManageMenu.tsx b/src/pages/menu/manage-menu/ManageMenu.tsx index e9febec..75e0925 100644 --- a/src/pages/menu/manage-menu/ManageMenu.tsx +++ b/src/pages/menu/manage-menu/ManageMenu.tsx @@ -1,10 +1,22 @@ +import { Container, DataGridInner } from '@/components'; +import { ManageMenusContextProvider } from './hooks/ManageMenusContext'; +import AddDialog from './blocks/AddDIalog'; +import EditDialog from './blocks/EditDialog'; +import DeleteDialog from './blocks/DeleteDialog'; + const ManageMenu = () => { return ( -
-
-

Manage Menu

-
-
+ + +

Manage Menus

+
+ +
+ + + + + ); }; diff --git a/src/pages/menu/manage-menu/blocks/AddDIalog.tsx b/src/pages/menu/manage-menu/blocks/AddDIalog.tsx new file mode 100644 index 0000000..bc5f118 --- /dev/null +++ b/src/pages/menu/manage-menu/blocks/AddDIalog.tsx @@ -0,0 +1,228 @@ +import { apiConfig } from '@/config/api.config'; +import React, { useCallback, useRef, useState } from 'react'; +import { useManageMenusContext } from '../hooks/useManageMenusContext'; +import { Alert, useDataGrid } from '@/components'; +import { useCallApi } from '@/hooks'; +import { toast } from 'sonner'; +import { + Dialog, + DialogBody, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle +} from '@/components/ui/dialog'; +import { Input } from '@/components/ui/input'; +import { Button } from '@/components/ui/button'; + +const API_URL = apiConfig.service_dashboard; +const AddDialog = () => { + const parentRef = useRef(null); + const { showAddDialog, handleAddDialog } = useManageMenusContext(); + const { reload } = useDataGrid(); + const { PostData } = useCallApi(); + const [alert, setAlert] = useState({ + show: false, + message: '' + }); + const initialState = { + module: '', + name: '', + link: '', + id_parent: '', + order_number: 0, + icon: '', + application: '', + status: '' + }; + const [formField, setFormField] = useState(initialState); + + const doCreateMenu = useCallback( + async (e: React.FormEvent) => { + e.preventDefault(); + + const response = await PostData(`${API_URL}/menus/create`, formField); + + if (response?.status) { + handleAddDialog(false); + resetForm(); + toast.success('Success Create Menu'); + reload(); + } else { + toast.error('Failed Create Menu'); + setAlert({ show: true, message: 'Failed Create Menu' }); + } + }, + [formField] + ); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + + if ( + formField.module === '' || + formField.name === '' || + formField.link === '' || + formField.order_number === 0 || + formField.application === '' || + formField.status === '' + ) { + setAlert({ show: true, message: 'Please fill in all required fields.' }); + return; + } + + // doCreateMenu(e); + console.log(formField); + setAlert({ show: false, message: '' }); + }; + + const resetForm = () => { + setFormField(initialState); + setAlert({ show: false, message: '' }); + }; + + return ( + handleAddDialog(open)}> + + + Menu - Create + + + +
+ {alert.show && ( + +

{alert.message}

+ + )} + +
+
+
+
+ + setFormField({ ...formField, module: e.target.value })} + /> +
+
+ +
+
+ + setFormField({ ...formField, name: e.target.value })} + /> +
+
+ +
+
+ + setFormField({ ...formField, link: e.target.value })} + /> +
+
+ +
+
+ + setFormField({ ...formField, id_parent: e.target.value })} + /> +
+
+ +
+
+ + { + const value = parseInt(e.target.value, 10); + setFormField({ ...formField, order_number: isNaN(value) ? 0 : value }); + }} + /> +
+
+ +
+
+ + setFormField({ ...formField, name: e.target.value })} + /> +
+
+ +
+
+ + setFormField({ ...formField, application: e.target.value })} + /> +
+
+ +
+
+ + setFormField({ ...formField, status: e.target.value })} + /> +
+
+ +
+ + +
+
+
+
+ + + + ); +}; + +export default AddDialog; diff --git a/src/pages/menu/manage-menu/blocks/DeleteDialog.tsx b/src/pages/menu/manage-menu/blocks/DeleteDialog.tsx new file mode 100644 index 0000000..6d07093 --- /dev/null +++ b/src/pages/menu/manage-menu/blocks/DeleteDialog.tsx @@ -0,0 +1,74 @@ +import { apiConfig } from '@/config/api.config'; +import { useManageMenusContext } from '../hooks/useManageMenusContext'; +import { Alert, useDataGrid } from '@/components'; +import { useCallApi } from '@/hooks'; +import React, { ChangeEvent, useCallback, useState } from 'react'; +import { toast } from 'sonner'; +import { Dialog, DialogContent, DialogFooter, DialogHeader } from '@/components/ui/dialog'; +import { EnforceSwitch } from '@/components/switch'; +import { Button } from '@/components/ui/button'; + +const API_URL = apiConfig.service_dashboard; +const DeleteDialog = () => { + const { showDeleteDialog, handleDeleteDialog, selectedMenu } = useManageMenusContext(); + const { reload } = useDataGrid(); + const { DeleteData } = useCallApi(); + const [enforce, setEnforce] = useState(false); + const [alert, setAlert] = useState({ + show: false, + message: '' + }); + + const doDeleteMenu = useCallback(async () => { + const response = await DeleteData(`${API_URL}/menus/delete/${selectedMenu}/${enforce}`, { + id: selectedMenu + }); + + if (response?.status) { + setAlert((prev) => ({ ...prev, show: false, message: '' })); + handleDeleteDialog(false, null); + toast.success('Success Delete Menu'); + reload(); + } else { + toast.error('Failed Delete Menu'); + setAlert((prev) => ({ ...prev, show: true, message: response?.message })); + } + }, [selectedMenu, enforce]); + + return ( + handleDeleteDialog(open, null)}> + + + +

Are you sure?

+ you will delete this data! +
+ + ) => { + setEnforce(e.target.checked); + }} + /> +
+ + {alert.show && ( + +

{alert.message}

+ + )} + + + + + + + + ); +}; + +export default DeleteDialog; diff --git a/src/pages/menu/manage-menu/blocks/EditDialog.tsx b/src/pages/menu/manage-menu/blocks/EditDialog.tsx new file mode 100644 index 0000000..6674b95 --- /dev/null +++ b/src/pages/menu/manage-menu/blocks/EditDialog.tsx @@ -0,0 +1,221 @@ +import { Alert, useDataGrid } from '@/components'; +import { useManageMenusContext } from '../hooks/useManageMenusContext'; +import { useCallApi } from '@/hooks'; +import { apiConfig } from '@/config/api.config'; +import React, { useCallback, useState } from 'react'; +import { toast } from 'sonner'; +import { + Dialog, + DialogBody, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle +} from '@/components/ui/dialog'; +import { Input } from '@/components/ui/input'; +import { Button } from '@/components/ui/button'; + +const API_URL = apiConfig.service_dashboard; +const EditDialog = () => { + const { showEditDialog, handleEditDialog, selectedMenu } = useManageMenusContext(); + const { reload } = useDataGrid(); + const { PutData } = useCallApi(); + const [alert, setAlert] = useState({ + show: false, + message: '' + }); + const initialState = { + module: '', + name: '', + link: '', + id_parent: '', + order_number: 0, + icon: '', + application: '', + status: '' + }; + const [formField, setFormField] = useState(initialState); + + const doUpdateMenu = useCallback(async (e: React.FormEvent) => { + e.preventDefault(); + + const response = await PutData(`${API_URL}/menus/update/${selectedMenu}`, formField); + + if (response?.status) { + handleEditDialog(false, null); + resetForm(); + toast.success('Success Update Menu'); + reload(); + } else { + toast.error('Failed Update Menu'); + setAlert({ show: true, message: 'Failed Update Menu' }); + } + }, []); + + const handleUpdate = (e: React.FormEvent) => { + e.preventDefault(); + + if ( + formField.module === '' || + formField.name === '' || + formField.link === '' || + formField.order_number === 0 || + formField.application === '' || + formField.status === '' + ) { + setAlert({ show: true, message: 'Please fill in all required fields.' }); + return; + } + + // doUpdateMenu(e); + console.log(formField); + setAlert({ show: false, message: '' }); + }; + + const resetForm = () => { + setFormField(initialState); + setAlert({ show: false, message: '' }); + }; + + return ( + handleEditDialog(open, null)}> + + + Menu - Update + + + +
+ {alert.show && ( + +

{alert.message}

+ + )} + +
+
+
+
+ + setFormField({ ...formField, module: e.target.value })} + /> +
+
+ +
+
+ + setFormField({ ...formField, name: e.target.value })} + /> +
+
+ +
+
+ + setFormField({ ...formField, link: e.target.value })} + /> +
+
+ +
+
+ + setFormField({ ...formField, id_parent: e.target.value })} + /> +
+
+ +
+
+ + { + const value = parseInt(e.target.value, 10); + setFormField({ ...formField, order_number: isNaN(value) ? 0 : value }); + }} + /> +
+
+ +
+
+ + setFormField({ ...formField, name: e.target.value })} + /> +
+
+ +
+
+ + setFormField({ ...formField, application: e.target.value })} + /> +
+
+ +
+
+ + setFormField({ ...formField, status: e.target.value })} + /> +
+
+ +
+ +
+
+
+
+ + + + ); +}; + +export default EditDialog; diff --git a/src/pages/menu/manage-menu/blocks/ListToolbar.tsx b/src/pages/menu/manage-menu/blocks/ListToolbar.tsx new file mode 100644 index 0000000..784c705 --- /dev/null +++ b/src/pages/menu/manage-menu/blocks/ListToolbar.tsx @@ -0,0 +1,55 @@ +import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components'; +import { useManageMenusContext } from '../hooks/useManageMenusContext'; +import { Button } from '@/components/ui/button'; + +const ListToolbar = () => { + const { table, reload } = useDataGrid(); + const { handleAddDialog } = useManageMenusContext(); + + return ( +
+
+
+
+ + + + +
+
+ + + + +
+
+
+
+ ); +}; + +export default ListToolbar; 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..86aaf5d --- /dev/null +++ b/src/pages/menu/manage-menu/hooks/ManageMenusContext.tsx @@ -0,0 +1,251 @@ +// 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; + application: 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: true, + enableHiding: false, + meta: { headerClassName: 'w-[200px]' } + }, + { + accessorFn: (row) => row.name, + id: 'subMenu', + header: ({ column }) => , + enableSorting: true, + 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 }; diff --git a/src/pages/menu/manage-menu/hooks/useManageMenusContext.tsx b/src/pages/menu/manage-menu/hooks/useManageMenusContext.tsx new file mode 100644 index 0000000..1cf8f87 --- /dev/null +++ b/src/pages/menu/manage-menu/hooks/useManageMenusContext.tsx @@ -0,0 +1,12 @@ +import { useContext } from 'react'; +import { ManageMenusContext } from './ManageMenusContext'; + +const useManageMenusContext = () => { + const context = useContext(ManageMenusContext); + if (!context) { + throw new Error('useManageMenusContext must be used within a ManageMenusContextProvider'); + } + return context; +}; + +export { useManageMenusContext };