PPOB/ppob-frontend
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Page Category

Browse Source
This commit is contained in:
ajat91
2021-12-15 15:29:01 +07:00
parent 7b95d2901b 5e3f8fa3a2
commit d54e2a8669
7 changed files with 571 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/pages/App/DesktopLayout.js
View File

@@ -1,32 +1,32 @@
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} 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,39 +138,45 @@ 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>
{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>
</Link>
</Menu.Item>
)}
{store.authentication.userData.role === "Retail" && (
<Menu.Item key="transaction">
<Link to={LINKS.TRANSACTION}>
<HomeOutlined />
<span>Transaction</span>
</Link>
{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.Item key="profile">
<Link to={LINKS.PROFILE}>
<UserOutlined />
<span>Profile</span>
</Link>
</Menu.Item>
<Menu.Divider
style={{ background: "transparent", paddingTop: 15 }}
/>
<Menu.Divider
style={{background: "transparent", paddingTop: 15}}
/>
</Menu>
</div>
</Drawer>

66
src/pages/App/MenuList.js
View File

@@ -1,38 +1,40 @@
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 {
HomeOutlined,
UserOutlined,
AppstoreOutlined,
MenuUnfoldOutlined,
DatabaseOutlined,
FileProtectOutlined,
HomeOutlined,
MenuUnfoldOutlined,
MoneyCollectOutlined,
ProjectOutlined,
FileProtectOutlined,
FileAddOutlined,
FileSyncOutlined,
ProfileOutlined
ProfileOutlined,
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,
}}
@@ -116,11 +118,31 @@ export const MenuList = observer((props) => {
<Link to={LINKS.TRANSACTION}>
<HomeOutlined />
<span>Transaction</span>
</Link>
{store.authentication.userData.role !== "Retail" && (
<Menu.Item key="product">
<Link to={LINKS.PRODUCT}>
<DatabaseOutlined/>
<span>Product</span>
</Link>
</Menu.Item>
)}
<Menu.Item key="payback">
<Link to={LINKS.PAYBACK}>
<DatabaseOutlined/>
<span>Payback</span>
</Link>
</Menu.Item>
)}
<Menu.Item key="profile">
<Link to={LINKS.PROFILE}>
{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}>
<UserOutlined />
<span>Profile</span>
</Link>
@@ -132,6 +154,6 @@ export const MenuList = observer((props) => {
{/* </Link>*/}
{/*</Menu.Item>*/}
<Menu.Divider style={{ background: "transparent", paddingTop: 15 }} />
</Menu>
</Menu.Item>
);
});