Menu Supplier
This commit is contained in:
@@ -1,32 +1,40 @@
|
||||
import React, {useState} from "react";
|
||||
import {Button, Drawer, Layout, Menu, Popover, Typography} from "antd";
|
||||
import {MenuList} from "./MenuList";
|
||||
import {Link, useHistory} from "react-router-dom";
|
||||
import {HomeOutlined, MenuOutlined, UserOutlined} from "@ant-design/icons";
|
||||
import {AppRoute, LINKS} from "../../routes/app";
|
||||
import {useStore} from "../../utils/useStore";
|
||||
import {observer} from "mobx-react-lite";
|
||||
import {useMediaQuery} from "react-responsive";
|
||||
import React, { useState } from "react";
|
||||
import { Button, Drawer, Layout, Menu, Popover, Typography } from "antd";
|
||||
import { MenuList } from "./MenuList";
|
||||
import { Link, useHistory } from "react-router-dom";
|
||||
import {
|
||||
HomeOutlined,
|
||||
MenuOutlined,
|
||||
UserOutlined,
|
||||
ProfileOutlined,
|
||||
DatabaseOutlined,
|
||||
FileAddOutlined,
|
||||
FileSyncOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { AppRoute, LINKS } from "../../routes/app";
|
||||
import { useStore } from "../../utils/useStore";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useMediaQuery } from "react-responsive";
|
||||
|
||||
const {Text, Paragraph} = Typography;
|
||||
const {Header, Content, Sider} = Layout;
|
||||
const {SubMenu} = Menu;
|
||||
const { Text, Paragraph } = Typography;
|
||||
const { Header, Content, Sider } = Layout;
|
||||
const { SubMenu } = Menu;
|
||||
|
||||
export const DesktopLayout = observer(() => {
|
||||
let history = useHistory();
|
||||
const xl = useMediaQuery({minWidth: 1024});
|
||||
const store = useStore();
|
||||
const [clicked, setClicked] = useState(false);
|
||||
let history = useHistory();
|
||||
const xl = useMediaQuery({ minWidth: 1024 });
|
||||
const store = useStore();
|
||||
const [clicked, setClicked] = useState(false);
|
||||
|
||||
return (
|
||||
<Layout
|
||||
theme={"light"}
|
||||
className={"transparent"}
|
||||
hasSider={store.ui.mediaQuery.isDesktop}
|
||||
style={{
|
||||
paddingLeft: xl ? "calc(70vw - 1024px)" : "0",
|
||||
display: "flex",
|
||||
// minWidth: 1024,
|
||||
return (
|
||||
<Layout
|
||||
theme={"light"}
|
||||
className={"transparent"}
|
||||
hasSider={store.ui.mediaQuery.isDesktop}
|
||||
style={{
|
||||
paddingLeft: xl ? "calc(70vw - 1024px)" : "0",
|
||||
display: "flex",
|
||||
// minWidth: 1024,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "relative",
|
||||
@@ -138,45 +146,71 @@ export const DesktopLayout = observer(() => {
|
||||
<span>Commision</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="supplier">
|
||||
<Link to={LINKS.SUPPLIER}>
|
||||
<HomeOutlined/>
|
||||
<span>Supplier</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="supplier">
|
||||
<Link to={LINKS.SUPPLIER}>
|
||||
<HomeOutlined />
|
||||
<span>Supplier</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
</SubMenu>
|
||||
)}
|
||||
{store.authentication.userData.role !== "Retail" && (
|
||||
<Menu.Item key="product">
|
||||
<Link to={LINKS.PRODUCT}>
|
||||
<HomeOutlined/>
|
||||
<span>Product</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
)}
|
||||
<Menu.Item key="payback">
|
||||
<Link to={LINKS.PAYBACK}>
|
||||
<HomeOutlined/>
|
||||
<span>Payback</span>
|
||||
{store.authentication.userData.role !== "Retail" && (
|
||||
<SubMenu
|
||||
key="product-main"
|
||||
icon={<ProfileOutlined />}
|
||||
title="Product"
|
||||
>
|
||||
<Menu.Item key="product">
|
||||
<Link to={LINKS.PRODUCT}>
|
||||
<DatabaseOutlined />
|
||||
<span>Product</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
{store.authentication.userData.role === "Retail" && (
|
||||
<Menu.Item key="transaction">
|
||||
<Link to={LINKS.TRANSACTION}>
|
||||
<HomeOutlined/>
|
||||
<span>Transaction</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
)}
|
||||
<Menu.Item key="profile">
|
||||
<Link to={LINKS.PROFILE}>
|
||||
<UserOutlined/>
|
||||
<span>Profile</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="category">
|
||||
<Link to={LINKS.CATEGORY}>
|
||||
<FileAddOutlined />
|
||||
<span>Category</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="sub-category">
|
||||
<Link to={LINKS.SUBCATEGORY}>
|
||||
<FileSyncOutlined />
|
||||
<span>Sub Category</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
</SubMenu>
|
||||
)}
|
||||
{store.authentication.userData.role !== "Retail" && (
|
||||
<Menu.Item key="product">
|
||||
<Link to={LINKS.PRODUCT}>
|
||||
<HomeOutlined />
|
||||
<span>Product</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Divider
|
||||
style={{background: "transparent", paddingTop: 15}}
|
||||
/>
|
||||
)}
|
||||
<Menu.Item key="payback">
|
||||
<Link to={LINKS.PAYBACK}>
|
||||
<HomeOutlined />
|
||||
<span>Payback</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
{store.authentication.userData.role === "Retail" && (
|
||||
<Menu.Item key="transaction">
|
||||
<Link to={LINKS.TRANSACTION}>
|
||||
<HomeOutlined />
|
||||
<span>Transaction</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
)}
|
||||
<Menu.Item key="profile">
|
||||
<Link to={LINKS.PROFILE}>
|
||||
<UserOutlined />
|
||||
<span>Profile</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Divider
|
||||
style={{ background: "transparent", paddingTop: 15 }}
|
||||
/>
|
||||
</Menu>
|
||||
</div>
|
||||
</Drawer>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {Menu} from "antd";
|
||||
import {Link} from "react-router-dom";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Menu } from "antd";
|
||||
import { Link } from "react-router-dom";
|
||||
import {
|
||||
AppstoreOutlined,
|
||||
DatabaseOutlined,
|
||||
@@ -14,26 +14,25 @@ import {
|
||||
ProjectOutlined,
|
||||
UserOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import {observer} from "mobx-react-lite";
|
||||
import {useStore} from "../../utils/useStore";
|
||||
import {LINKS} from "../../routes/app";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useStore } from "../../utils/useStore";
|
||||
import { LINKS } from "../../routes/app";
|
||||
|
||||
const {SubMenu} = Menu;
|
||||
const { SubMenu } = Menu;
|
||||
|
||||
export const MenuList = observer((props) => {
|
||||
const store = useStore();
|
||||
useEffect(() => {
|
||||
}, []);
|
||||
useEffect(() => {}, []);
|
||||
|
||||
const [setKeys, setSetKeys] = useState(["dashboard"]);
|
||||
|
||||
return (
|
||||
<Menu
|
||||
defaultOpenKeys={["sub4"]}
|
||||
theme="light"
|
||||
style={{
|
||||
backgroundColor: "transparent",
|
||||
borderRightWidth: 0,
|
||||
<Menu
|
||||
defaultOpenKeys={["sub4"]}
|
||||
theme="light"
|
||||
style={{
|
||||
backgroundColor: "transparent",
|
||||
borderRightWidth: 0,
|
||||
fontWeight: 400,
|
||||
paddingLeft: 0,
|
||||
}}
|
||||
@@ -61,11 +60,7 @@ export const MenuList = observer((props) => {
|
||||
</Menu.Item>
|
||||
)}
|
||||
{store.authentication.userData.role !== "Retail" && (
|
||||
<SubMenu
|
||||
key="config"
|
||||
icon={<MenuUnfoldOutlined />}
|
||||
title="Config"
|
||||
>
|
||||
<SubMenu key="config" icon={<MenuUnfoldOutlined />} title="Config">
|
||||
<Menu.Item key="partner">
|
||||
<Link to={LINKS.PARTNER}>
|
||||
<ProjectOutlined />
|
||||
@@ -87,74 +82,70 @@ export const MenuList = observer((props) => {
|
||||
</SubMenu>
|
||||
)}
|
||||
{store.authentication.userData.role !== "Retail" && (
|
||||
<SubMenu
|
||||
key="product-main"
|
||||
icon={<ProfileOutlined />}
|
||||
title="Product"
|
||||
>
|
||||
<Menu.Item key="product">
|
||||
<SubMenu key="product-main" icon={<ProfileOutlined />} title="Product">
|
||||
<Menu.Item key="product">
|
||||
<Link to={LINKS.PRODUCT}>
|
||||
<DatabaseOutlined />
|
||||
<span>Product</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="category">
|
||||
<Link to={LINKS.CATEGORY}>
|
||||
<FileAddOutlined />
|
||||
<span>Category</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="sub-category">
|
||||
<Link to={LINKS.SUBCATEGORY}>
|
||||
<FileSyncOutlined />
|
||||
<span>Sub Category</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
</SubMenu>
|
||||
)}
|
||||
{store.authentication.userData.role === ("Retail" || "Admin") && (
|
||||
<Menu.Item key="transaction">
|
||||
<Link to={LINKS.TRANSACTION}>
|
||||
<HomeOutlined />
|
||||
<span>Transaction</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
)}
|
||||
{store.authentication.userData.role !== "Retail" && (
|
||||
<Menu.Item key="retail">
|
||||
<Link to={LINKS.PRODUCT}>
|
||||
<DatabaseOutlined />
|
||||
<span>Product</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="category">
|
||||
<Link to={LINKS.CATEGORY}>
|
||||
<FileAddOutlined />
|
||||
<span>Category</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="sub-category">
|
||||
<Link to={LINKS.SUBCATEGORY}>
|
||||
<FileSyncOutlined />
|
||||
<span>Sub Category</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
</SubMenu>
|
||||
)}
|
||||
{store.authentication.userData.role === ("Retail" || "Admin") && (
|
||||
<Menu.Item key="transaction">
|
||||
<Link to={LINKS.TRANSACTION}>
|
||||
<HomeOutlined/>
|
||||
<span>Transaction</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
)}
|
||||
{store.authentication.userData.role !== "Retail" && (
|
||||
<Menu.Item key="retail">
|
||||
<Link to={LINKS.PRODUCT}>
|
||||
<DatabaseOutlined/>
|
||||
<span>Product</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
)}
|
||||
<Menu.Item key="payback">
|
||||
<Link to={LINKS.PAYBACK}>
|
||||
<DatabaseOutlined/>
|
||||
<span>Payback</span>
|
||||
<Menu.Item key="payback">
|
||||
<Link to={LINKS.PAYBACK}>
|
||||
<DatabaseOutlined />
|
||||
<span>Payback</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
{store.authentication.userData.role === ("Retail" || "Admin") && (
|
||||
<Menu.Item key="transaction">
|
||||
<Link to={LINKS.TRANSACTION}>
|
||||
<HomeOutlined />
|
||||
<span>Transaction</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
{store.authentication.userData.role === ("Retail" || "Admin") && (
|
||||
<Menu.Item key="transaction">
|
||||
<Link to={LINKS.TRANSACTION}>
|
||||
<HomeOutlined/>
|
||||
<span>Transaction</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
)}
|
||||
<Menu.Item key="profile">
|
||||
<Link to={LINKS.PROFILE}>
|
||||
)}
|
||||
<Menu.Item key="profile">
|
||||
<Link to={LINKS.PROFILE}>
|
||||
<UserOutlined />
|
||||
<span>Profile</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
{/*<Menu.Item key="about">*/}
|
||||
{/* <Link to={'/app/about'}>*/}
|
||||
{/* <CalendarOutlined/>*/}
|
||||
{/* <span>About</span>*/}
|
||||
{/* </Link>*/}
|
||||
{/*</Menu.Item>*/}
|
||||
<Menu.Divider style={{background: "transparent", paddingTop: 15}}/>
|
||||
</Menu>
|
||||
<span>Profile</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
{/*<Menu.Item key="about">*/}
|
||||
{/* <Link to={'/app/about'}>*/}
|
||||
{/* <CalendarOutlined/>*/}
|
||||
{/* <span>About</span>*/}
|
||||
{/* </Link>*/}
|
||||
{/*</Menu.Item>*/}
|
||||
<Menu.Divider style={{ background: "transparent", paddingTop: 15 }} />
|
||||
</Menu>
|
||||
);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user