96 lines
3.6 KiB
JavaScript
96 lines
3.6 KiB
JavaScript
import {Alert, Layout, Menu, Result} from "antd";
|
|
import {Outlet} from "react-router-dom";
|
|
import {
|
|
HomeOutlined,
|
|
CalendarOutlined,
|
|
DatabaseOutlined,
|
|
FolderViewOutlined,
|
|
UserOutlined,
|
|
TeamOutlined,
|
|
LogoutOutlined,
|
|
MessageOutlined, ControlOutlined
|
|
} from "@ant-design/icons";
|
|
import useMainLayout from "./useMainLayout.js";
|
|
import useMainLayoutUI from "./useMainLayoutUI.js";
|
|
import LoadingIndicator from "../Widgets/LoadingIndicator/LoadingIndicator.jsx";
|
|
|
|
const {Content, Footer, Sider} = Layout;
|
|
|
|
const MainLayout = () => {
|
|
const mainLayoutData = useMainLayout();
|
|
const mainLayoutUI = useMainLayoutUI(mainLayoutData.user);
|
|
|
|
const menuItems = [
|
|
mainLayoutUI.getItem("Главная", "/", <HomeOutlined />),
|
|
mainLayoutUI.getItem("Приёмы", "/appointments", <CalendarOutlined />),
|
|
mainLayoutUI.getItem("Выдачи линз", "/issues", <DatabaseOutlined />),
|
|
mainLayoutUI.getItem("Линзы и наборы", "/Lenses", <FolderViewOutlined />),
|
|
mainLayoutUI.getItem("Пациенты", "/Patients", <TeamOutlined />),
|
|
mainLayoutUI.getItem("Рассылки", "/mailing", <MessageOutlined />),
|
|
{ type: "divider" }
|
|
];
|
|
|
|
if (mainLayoutData.user?.role.title === "Администратор") {
|
|
menuItems.push(mainLayoutUI.getItem("Панель администратора", "/admin", <ControlOutlined />));
|
|
}
|
|
|
|
menuItems.push(
|
|
mainLayoutUI.getItem("Мой профиль", "profile", <UserOutlined />, [
|
|
mainLayoutUI.getItem("Перейти в профиль", "/profile", <UserOutlined />),
|
|
mainLayoutUI.getItem("Выйти", "logout", <LogoutOutlined />)
|
|
])
|
|
);
|
|
|
|
if (mainLayoutData.isUserError) {
|
|
return <Result status="500" title="500" subTitle="Произошла ошибка при загрузке данных"/>
|
|
}
|
|
|
|
return (
|
|
<Layout style={{minHeight: "100vh"}}>
|
|
<Sider
|
|
collapsible={!mainLayoutUI.screens.xs}
|
|
collapsed={mainLayoutUI.collapsed}
|
|
onCollapse={mainLayoutUI.setCollapsed}
|
|
style={{height: "100vh", position: "fixed", left: 0}}
|
|
>
|
|
<div style={{display: "flex", justifyContent: "center", padding: 16}}>
|
|
<img
|
|
src="/logo_rounded.png"
|
|
alt="Логотип"
|
|
style={{width: mainLayoutUI.collapsed ? 40 : 80, transition: "width 0.2s"}}
|
|
/>
|
|
</div>
|
|
<Menu
|
|
theme="dark"
|
|
selectedKeys={[location.pathname]}
|
|
mode="inline"
|
|
items={menuItems}
|
|
onClick={mainLayoutUI.handleMenuClick}
|
|
/>
|
|
</Sider>
|
|
|
|
<Layout
|
|
style={{marginLeft: mainLayoutUI.collapsed ? 80 : 200, transition: "margin-left 0.2s"}}
|
|
>
|
|
<Content style={{
|
|
margin: "0 16px",
|
|
padding: 24,
|
|
minHeight: "100vh",
|
|
overflow: "auto",
|
|
background: "#fff",
|
|
borderRadius: 8,
|
|
marginTop: "15px"
|
|
}}>
|
|
{mainLayoutData.isUserLoading ? (
|
|
<LoadingIndicator/>
|
|
) : (
|
|
<Outlet/>
|
|
)}
|
|
</Content>
|
|
<Footer style={{textAlign: "center"}}>Visus+ © {new Date().getFullYear()}</Footer>
|
|
</Layout>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
export default MainLayout; |