first commit
This commit is contained in:
223
src/routes/RouteLayout.tsx
Normal file
223
src/routes/RouteLayout.tsx
Normal file
@@ -0,0 +1,223 @@
|
||||
import { Outlet, useRouterState } from "@tanstack/react-router";
|
||||
import Drawer from "../components/Drawer/Drawer";
|
||||
import { useDrawerStore } from "../context/zustand-store/appStore";
|
||||
import { checkIsMobile } from "../utils/checkIsMobile";
|
||||
import BottomNavigation from "../screen/BottomNavigation";
|
||||
import Navbar from "../screen/NavBar";
|
||||
import Backdrop from "../components/BackDrop/Backdrop";
|
||||
import Modal from "../components/Modal/Modal";
|
||||
import {
|
||||
useUserProfileStore,
|
||||
useUserStore,
|
||||
} from "../context/zustand-store/userStore";
|
||||
import "../App.css";
|
||||
import { SideBar } from "../screen/SideBar";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { ItemWithSubItems } from "../types/userPermissions";
|
||||
import { getUserPermissions } from "../utils/getUserAvalableItems";
|
||||
import { getFaPermissions } from "../utils/getFaPermissions";
|
||||
import Typography from "../components/Typography/Typography";
|
||||
import { ArrowLeftIcon } from "@heroicons/react/24/outline";
|
||||
import Divider from "../components/Divider/Divider";
|
||||
import { RolesContextMenu } from "../components/Button/RolesContextMenu";
|
||||
import { useApiRequest } from "../utils/useApiRequest";
|
||||
|
||||
const sidebarVariants = {
|
||||
hidden: { opacity: 0, x: 50 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
transition: {
|
||||
type: "spring",
|
||||
stiffness: 300,
|
||||
damping: 30,
|
||||
},
|
||||
},
|
||||
exit: {
|
||||
opacity: 0,
|
||||
x: 50,
|
||||
transition: {
|
||||
type: "tween",
|
||||
ease: "easeInOut",
|
||||
duration: 0.25,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const RootLayout = () => {
|
||||
const { drawerState } = useDrawerStore();
|
||||
const contentRef = useRef<HTMLDivElement>(null);
|
||||
const { auth } = useUserStore();
|
||||
const isMobile = checkIsMobile();
|
||||
const location = useRouterState({ select: (state) => state.location });
|
||||
const { profile } = useUserProfileStore();
|
||||
// const [, setIsDark] = useDarkMode();
|
||||
const [contextMenu, setContextMenu] = useState<{
|
||||
x: number;
|
||||
y: number;
|
||||
} | null>(null);
|
||||
const [selectedAccess, setSelectedAccess] = useState<string | null>(null);
|
||||
|
||||
const menuItems: ItemWithSubItems[] = getUserPermissions(
|
||||
profile?.permissions
|
||||
);
|
||||
|
||||
const currentPath = window.location.pathname;
|
||||
const matchedItem = menuItems.find((item) =>
|
||||
item.subItems.some(
|
||||
(sub) =>
|
||||
sub.path === currentPath ||
|
||||
sub.path === "/" + currentPath.split("/")[1] ||
|
||||
sub.path.includes(currentPath.split("/")[1] + "/")
|
||||
)
|
||||
);
|
||||
|
||||
const matchedSubItem = menuItems
|
||||
.flatMap((item) => item.subItems)
|
||||
.find(
|
||||
(sub) =>
|
||||
sub.path === currentPath ||
|
||||
sub.path.includes(currentPath.split("/")[1] + "/")
|
||||
);
|
||||
|
||||
const isAdmin = profile?.role?.type?.key === "ADM";
|
||||
|
||||
const { data: permissionsData } = useApiRequest({
|
||||
api: "/auth/api/v1/permission/",
|
||||
method: "get",
|
||||
params: { page: 1, page_size: 1000 },
|
||||
queryKey: ["all-permissions"],
|
||||
enabled: !!contextMenu && isAdmin,
|
||||
});
|
||||
|
||||
const handleSitemapContextMenu = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (!isAdmin) return;
|
||||
const pageKey = matchedSubItem?.name;
|
||||
if (!pageKey) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setContextMenu({ x: e.clientX, y: e.clientY });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (contextMenu && permissionsData?.results && matchedSubItem?.name) {
|
||||
const firstNonModify =
|
||||
permissionsData.results.find(
|
||||
(p: any) => p.page === matchedSubItem.name && p.modify_state === false
|
||||
) || null;
|
||||
setSelectedAccess(firstNonModify?.name || null);
|
||||
}
|
||||
}, [contextMenu, permissionsData, matchedSubItem?.name]);
|
||||
|
||||
useEffect(() => {
|
||||
const closeOnClick = () => {
|
||||
if (contextMenu) setContextMenu(null);
|
||||
};
|
||||
if (contextMenu) {
|
||||
document.addEventListener("click", closeOnClick);
|
||||
}
|
||||
return () => {
|
||||
document.removeEventListener("click", closeOnClick);
|
||||
};
|
||||
}, [contextMenu]);
|
||||
|
||||
useEffect(() => {
|
||||
contentRef.current?.scrollTo(0, 0);
|
||||
// if (!auth) {
|
||||
// setIsDark(false);
|
||||
// }
|
||||
}, [location.pathname]);
|
||||
|
||||
return (
|
||||
<div className="h-screen flex flex-col relative bg-white dark:bg-dark-900 overflow-hidden">
|
||||
{auth && <Navbar />}
|
||||
{drawerState?.isOpen && <Drawer />}
|
||||
|
||||
<motion.div
|
||||
layout
|
||||
layoutId="root-container"
|
||||
className={`flex flex-1 overflow-hidden`}
|
||||
>
|
||||
{auth && (
|
||||
<AnimatePresence mode="popLayout">
|
||||
<motion.div
|
||||
layout
|
||||
key="sidebar"
|
||||
variants={sidebarVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="exit"
|
||||
className={`hidden sm:block`}
|
||||
style={{ zIndex: 10 }}
|
||||
>
|
||||
<SideBar />
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
)}
|
||||
|
||||
<motion.div
|
||||
ref={contentRef}
|
||||
layout
|
||||
layoutId="content"
|
||||
className={`flex-1 overflow-y-auto ${auth && "pt-2 px-2"} ${
|
||||
auth && isMobile ? "select-none" : "pb-4"
|
||||
} ${drawerState.isOpen && "blur-[1px] "}`}
|
||||
key="content"
|
||||
>
|
||||
{window.location.pathname !== "/" &&
|
||||
matchedItem?.fa &&
|
||||
auth &&
|
||||
!isMobile && (
|
||||
<div
|
||||
className="select-none mb-4 grid"
|
||||
onContextMenu={handleSitemapContextMenu}
|
||||
>
|
||||
<div className="flex justify-between mb-2">
|
||||
<Typography
|
||||
variant="caption"
|
||||
color="text-[#727272] dark:text-dark-100"
|
||||
>
|
||||
{matchedItem?.fa} /{" "}
|
||||
{getFaPermissions(matchedSubItem?.name || "") || "نمایش"}
|
||||
</Typography>
|
||||
{location.pathname !== "/" && (
|
||||
<div
|
||||
onClick={() => window.history.back()}
|
||||
className="p-1 rounded-full cursor-pointer w-25"
|
||||
>
|
||||
<div className="gap-2 flex items-center justify-center">
|
||||
<Typography
|
||||
variant="caption"
|
||||
color="text-[#727272] dark:text-dark-100"
|
||||
>
|
||||
بازگشت
|
||||
</Typography>
|
||||
<ArrowLeftIcon className="h-4 w-4 text-[#727272] dark:text-dark-100 " />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Divider />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Outlet />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
<Backdrop />
|
||||
<Modal />
|
||||
{isMobile && auth && <BottomNavigation />}
|
||||
{contextMenu && isAdmin && matchedSubItem?.name && selectedAccess && (
|
||||
<RolesContextMenu
|
||||
page={matchedSubItem.name}
|
||||
access={selectedAccess}
|
||||
position={contextMenu}
|
||||
onClose={() => setContextMenu(null)}
|
||||
isPage={true}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user