pages config
This commit is contained in:
@@ -1,451 +1,500 @@
|
||||
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 { 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,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "relative",
|
||||
}}
|
||||
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",
|
||||
}}
|
||||
>
|
||||
{store.ui.mediaQuery.isDesktop && (
|
||||
<Sider
|
||||
className={"transparent"}
|
||||
width={240}
|
||||
style={{
|
||||
overflowX: "hidden",
|
||||
bottom: 0,
|
||||
justifyContent: "flex-start",
|
||||
paddingTop: 20,
|
||||
paddingLeft: 20,
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
{store.ui.mediaQuery.isDesktop && <Sider
|
||||
className={"transparent"}
|
||||
width={240}
|
||||
style={{
|
||||
overflowX: "hidden",
|
||||
bottom: 0,
|
||||
justifyContent: "flex-start",
|
||||
paddingTop: 20,
|
||||
paddingLeft: 20,
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
zIndex: 10,
|
||||
}}
|
||||
<div
|
||||
style={{
|
||||
paddingLeft: 20,
|
||||
marginBottom: 40,
|
||||
}}
|
||||
>
|
||||
<Paragraph
|
||||
style={{
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
fontSize: 20,
|
||||
marginLeft: 5,
|
||||
fontWeight: 600,
|
||||
color: "#828282",
|
||||
}}
|
||||
>
|
||||
PPOB
|
||||
</Paragraph>
|
||||
<Paragraph
|
||||
style={{
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
fontSize: 11,
|
||||
marginLeft: 5,
|
||||
fontWeight: 600,
|
||||
color: "#413d3e",
|
||||
}}
|
||||
>
|
||||
Admin
|
||||
</Paragraph>
|
||||
</div>
|
||||
<MenuList closeLeftDrawer={() => {}} />
|
||||
</Sider>
|
||||
)}
|
||||
|
||||
{store.ui.mediaQuery.isMobile && (
|
||||
<Drawer
|
||||
title="Navigation"
|
||||
placement={"left"}
|
||||
closable={false}
|
||||
width={"50%"}
|
||||
onClose={() => {
|
||||
store.ui.toggleLeftDrawerIsShown();
|
||||
}}
|
||||
visible={store.ui.leftDrawerIsShown}
|
||||
key={"dashboard-drawer"}
|
||||
bodyStyle={{
|
||||
padding: 0,
|
||||
paddingTop: 20,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
marginLeft: 0,
|
||||
paddingLeft: 0,
|
||||
}}
|
||||
>
|
||||
<Menu>
|
||||
<Menu.Item key="home">
|
||||
<Link to={LINKS.HOME}>
|
||||
<HomeOutlined />
|
||||
<span>Home</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
{store.authentication.userData.role !== "Retail" && (
|
||||
<Menu.Item key="membership">
|
||||
<Link to={LINKS.MEMBERSHIP}>
|
||||
<HomeOutlined />
|
||||
<span>Membership</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
)}
|
||||
{store.authentication.userData.role !== "Retail" && (
|
||||
<SubMenu
|
||||
key="config"
|
||||
icon={<HomeOutlined />}
|
||||
title="Config"
|
||||
style={{ backgroundColor: "#e3e8ee" }}
|
||||
>
|
||||
<Menu.Item key="partner">
|
||||
<Link to={LINKS.PARTNER}>
|
||||
<HomeOutlined />
|
||||
<span>Partner</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="commision">
|
||||
<Link to={LINKS.PARTNER}>
|
||||
<HomeOutlined />
|
||||
<span>Commision</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="supplier">
|
||||
<Link to={LINKS.PARTNER}>
|
||||
<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>
|
||||
)}
|
||||
{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="about">*/}
|
||||
{/* <Link to={'/app/about'}>*/}
|
||||
{/* <CalendarOutlined/>*/}
|
||||
{/* <span>About</span>*/}
|
||||
{/* </Link>*/}
|
||||
{/*</Menu.Item>*/}
|
||||
<Menu.Divider
|
||||
style={{ background: "transparent", paddingTop: 15 }}
|
||||
/>
|
||||
</Menu>
|
||||
</div>
|
||||
</Drawer>
|
||||
)}
|
||||
|
||||
<Layout
|
||||
className={"transparent"}
|
||||
style={{
|
||||
position: "relative",
|
||||
display: "block",
|
||||
paddingLeft: store.ui.mediaQuery.isDesktop ? 200 : 0,
|
||||
height: "100vh",
|
||||
}}
|
||||
>
|
||||
<Header
|
||||
theme={"light"}
|
||||
className={store.ui.mediaQuery.isMobile ? "shadow" : null}
|
||||
style={{
|
||||
height: store.ui.mediaQuery.isDesktop ? 24 : 35,
|
||||
// width: 'calc(100vw - 200px)',
|
||||
width: "100%",
|
||||
position: store.ui.mediaQuery.isDesktop ? "fixed" : "fixed",
|
||||
zIndex: 99,
|
||||
paddingLeft: store.ui.mediaQuery.isDesktop ? 14 : 0,
|
||||
paddingRight: store.ui.mediaQuery.isDesktop ? 14 : 0,
|
||||
backgroundColor: store.ui.mediaQuery.isMobile
|
||||
? "#fff"
|
||||
: "transparent",
|
||||
maxWidth: store.ui.mediaQuery.isDesktop ? 1024 : 768,
|
||||
// minWidth: store.ui.mediaQuery.isDesktop ? 768 : 0,
|
||||
top: store.ui.mediaQuery.isMobile ? 0 : 12,
|
||||
/**/
|
||||
}}
|
||||
>
|
||||
{store.ui.mediaQuery.isMobile && (
|
||||
<div
|
||||
className={store.ui.mediaQuery.isMobile ? "shadow" : null}
|
||||
style={{
|
||||
top: 0,
|
||||
left: 0,
|
||||
paddingTop: 8,
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "stretch",
|
||||
flexDirection: "column",
|
||||
// boxShadow: '0 7px 14px 0 rgba(60, 66, 87, 0.05), 0 3px 6px 0 rgba(0, 0, 0, 0.05)'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
paddingLeft: store.ui.mediaQuery.isMobile ? 10 : 20,
|
||||
paddingRight: store.ui.mediaQuery.isMobile ? 0 : 20,
|
||||
paddingBottom: 4,
|
||||
marginTop: -5,
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
type="link"
|
||||
icon={
|
||||
<MenuOutlined
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
color: "#5b5b5b",
|
||||
marginLeft: -10,
|
||||
}}
|
||||
/>
|
||||
}
|
||||
onClick={() => {
|
||||
store.ui.toggleLeftDrawerIsShown();
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
paddingLeft: 20,
|
||||
marginBottom: 40,
|
||||
}}
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "stretch",
|
||||
padding: 0,
|
||||
margin: 0,
|
||||
paddingTop: 5,
|
||||
}}
|
||||
>
|
||||
<Paragraph
|
||||
style={{
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
fontSize: 20,
|
||||
marginLeft: 5,
|
||||
fontWeight: 600,
|
||||
color: "#828282",
|
||||
}}
|
||||
>
|
||||
PPOB
|
||||
</Paragraph>
|
||||
<Paragraph
|
||||
style={{
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
fontSize: 11,
|
||||
marginLeft: 5,
|
||||
fontWeight: 600,
|
||||
color: "#413d3e",
|
||||
}}
|
||||
>
|
||||
Admin
|
||||
</Paragraph>
|
||||
{/*<img*/}
|
||||
{/* className={[classes.logoFull]}*/}
|
||||
{/* style={{*/}
|
||||
{/* maxHeight: 18,*/}
|
||||
{/* maxWidth: 75,*/}
|
||||
{/* }}*/}
|
||||
{/* src={parkirLogoFull}*/}
|
||||
{/*/>*/}
|
||||
{/*<Paragraph*/}
|
||||
{/* style={{*/}
|
||||
{/* margin: "-5px 0px 0px 2px",*/}
|
||||
{/* padding: 0,*/}
|
||||
{/* lineHeight: "18px",*/}
|
||||
{/* fontSize: 8,*/}
|
||||
{/* fontWeight: 800,*/}
|
||||
{/* color: "#8c8c8c",*/}
|
||||
{/* textAlign: "center",*/}
|
||||
{/* }}*/}
|
||||
{/*>*/}
|
||||
{/* {store.authentication.userData.role || "Apps"}*/}
|
||||
{/*</Paragraph>*/}
|
||||
</div>
|
||||
<MenuList closeLeftDrawer={() => {
|
||||
}}/>
|
||||
</Sider>}
|
||||
|
||||
{store.ui.mediaQuery.isMobile && (
|
||||
<Drawer
|
||||
title="Navigation"
|
||||
placement={"left"}
|
||||
closable={false}
|
||||
width={"50%"}
|
||||
onClose={() => {
|
||||
store.ui.toggleLeftDrawerIsShown()
|
||||
}}
|
||||
visible={store.ui.leftDrawerIsShown}
|
||||
key={"dashboard-drawer"}
|
||||
bodyStyle={{
|
||||
padding: 0,
|
||||
paddingTop: 20,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
marginLeft: 0,
|
||||
paddingLeft: 0,
|
||||
}}
|
||||
<Popover
|
||||
className={store.ui.mediaQuery.isDesktop ? "shadow" : null}
|
||||
autoAdjustOverflow={true}
|
||||
placement="bottomRight"
|
||||
content={
|
||||
<Menu
|
||||
type={"line"}
|
||||
inlineIndent={0}
|
||||
theme="light"
|
||||
style={{
|
||||
backgroundColor: "transparent",
|
||||
borderRightWidth: 0,
|
||||
}}
|
||||
mode="inline"
|
||||
>
|
||||
<Menu>
|
||||
<Menu.Item key="home">
|
||||
<Link to={LINKS.HOME}>
|
||||
<HomeOutlined/>
|
||||
<span>Home</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
{store.authentication.userData.role !== 'Retail' && <Menu.Item key="membership">
|
||||
<Link to={LINKS.MEMBERSHIP}>
|
||||
<HomeOutlined/>
|
||||
<span>Membership</span>
|
||||
</Link>
|
||||
</Menu.Item>}
|
||||
{store.authentication.userData.role !== 'Retail' && <Menu.Item key="product">
|
||||
<Link to={LINKS.PRODUCT}>
|
||||
<HomeOutlined/>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</Drawer>
|
||||
)}
|
||||
|
||||
<Layout
|
||||
className={"transparent"}
|
||||
<Menu.Item>
|
||||
<Link to={LINKS.PROFILE}>
|
||||
<span>Profile</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
onClick={() => {
|
||||
store.authentication.logout();
|
||||
history.push("/login");
|
||||
}}
|
||||
>
|
||||
<span>Sign out</span>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
}
|
||||
title={
|
||||
<Text>
|
||||
{store.user.data.username}
|
||||
<Paragraph
|
||||
style={{ fontWeight: 400 }}
|
||||
type={"secondary-dark"}
|
||||
>
|
||||
{store.authentication.userData.username}
|
||||
</Paragraph>
|
||||
</Text>
|
||||
}
|
||||
trigger="click"
|
||||
visible={clicked}
|
||||
onVisibleChange={() => setClicked(!clicked)}
|
||||
>
|
||||
<Button
|
||||
size={"default"}
|
||||
type={store.ui.mediaQuery.isDesktop ? "" : "link"}
|
||||
style={{
|
||||
marginRight: store.ui.mediaQuery.isDesktop ? 20 : 10,
|
||||
}}
|
||||
icon={
|
||||
store.ui.mediaQuery.isDesktop ? (
|
||||
<UserOutlined style={{ fontSize: "13px" }} />
|
||||
) : (
|
||||
<UserOutlined
|
||||
style={{ fontSize: "13px", color: "#5b5b5b" }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Popover>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
display: "block",
|
||||
paddingLeft: store.ui.mediaQuery.isDesktop ? 200 : 0,
|
||||
height: "100vh",
|
||||
borderTopWidth: 0.5,
|
||||
borderTopColor: "#e3e3e3",
|
||||
borderTopStyle: "solid",
|
||||
}}
|
||||
/>
|
||||
{/*<BreadcumbComponent data={}/>*/}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{store.ui.mediaQuery.isDesktop && (
|
||||
<div
|
||||
className={["transparent"].join(" ")}
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
height: "100%",
|
||||
maxWidth: 1024,
|
||||
minWidth: 768,
|
||||
width: "calc(100vw - 220px)",
|
||||
}}
|
||||
>
|
||||
<Header
|
||||
theme={"light"}
|
||||
className={store.ui.mediaQuery.isMobile ? "shadow" : null}
|
||||
<div
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
display: "flex",
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "center",
|
||||
width: "100%",
|
||||
}}
|
||||
></div>
|
||||
<Popover
|
||||
className={store.ui.mediaQuery.isDesktop ? "shadow" : null}
|
||||
autoAdjustOverflow={true}
|
||||
placement="bottomRight"
|
||||
content={
|
||||
<Menu
|
||||
type={"line"}
|
||||
inlineIndent={0}
|
||||
theme="light"
|
||||
style={{
|
||||
height: store.ui.mediaQuery.isDesktop ? 24 : 35,
|
||||
// width: 'calc(100vw - 200px)',
|
||||
width: "100%",
|
||||
position: store.ui.mediaQuery.isDesktop ? "fixed" : "fixed",
|
||||
zIndex: 99,
|
||||
paddingLeft: store.ui.mediaQuery.isDesktop ? 14 : 0,
|
||||
paddingRight: store.ui.mediaQuery.isDesktop ? 14 : 0,
|
||||
backgroundColor: store.ui.mediaQuery.isMobile
|
||||
? "#fff"
|
||||
: "transparent",
|
||||
maxWidth: store.ui.mediaQuery.isDesktop ? 1024 : 768,
|
||||
// minWidth: store.ui.mediaQuery.isDesktop ? 768 : 0,
|
||||
top: store.ui.mediaQuery.isMobile ? 0 : 12,
|
||||
/**/
|
||||
backgroundColor: "transparent",
|
||||
borderRightWidth: 0,
|
||||
}}
|
||||
>
|
||||
{store.ui.mediaQuery.isMobile && (
|
||||
<div
|
||||
className={store.ui.mediaQuery.isMobile ? "shadow" : null}
|
||||
style={{
|
||||
top: 0,
|
||||
left: 0,
|
||||
paddingTop: 8,
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "stretch",
|
||||
flexDirection: "column",
|
||||
// boxShadow: '0 7px 14px 0 rgba(60, 66, 87, 0.05), 0 3px 6px 0 rgba(0, 0, 0, 0.05)'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
paddingLeft: store.ui.mediaQuery.isMobile ? 10 : 20,
|
||||
paddingRight: store.ui.mediaQuery.isMobile ? 0 : 20,
|
||||
paddingBottom: 4,
|
||||
marginTop: -5,
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
type="link"
|
||||
icon={
|
||||
<MenuOutlined
|
||||
style={{
|
||||
fontSize: "12px",
|
||||
color: "#5b5b5b",
|
||||
marginLeft: -10,
|
||||
}}
|
||||
/>
|
||||
}
|
||||
onClick={() => {
|
||||
store.ui.toggleLeftDrawerIsShown();
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "stretch",
|
||||
padding: 0,
|
||||
margin: 0,
|
||||
paddingTop: 5,
|
||||
}}
|
||||
>
|
||||
{/*<img*/}
|
||||
{/* className={[classes.logoFull]}*/}
|
||||
{/* style={{*/}
|
||||
{/* maxHeight: 18,*/}
|
||||
{/* maxWidth: 75,*/}
|
||||
{/* }}*/}
|
||||
{/* src={parkirLogoFull}*/}
|
||||
{/*/>*/}
|
||||
{/*<Paragraph*/}
|
||||
{/* style={{*/}
|
||||
{/* margin: "-5px 0px 0px 2px",*/}
|
||||
{/* padding: 0,*/}
|
||||
{/* lineHeight: "18px",*/}
|
||||
{/* fontSize: 8,*/}
|
||||
{/* fontWeight: 800,*/}
|
||||
{/* color: "#8c8c8c",*/}
|
||||
{/* textAlign: "center",*/}
|
||||
{/* }}*/}
|
||||
{/*>*/}
|
||||
{/* {store.authentication.userData.role || "Apps"}*/}
|
||||
{/*</Paragraph>*/}
|
||||
</div>
|
||||
<Popover
|
||||
className={store.ui.mediaQuery.isDesktop ? "shadow" : null}
|
||||
autoAdjustOverflow={true}
|
||||
placement="bottomRight"
|
||||
content={
|
||||
<Menu
|
||||
type={"line"}
|
||||
inlineIndent={0}
|
||||
theme="light"
|
||||
style={{
|
||||
backgroundColor: "transparent",
|
||||
borderRightWidth: 0,
|
||||
}}
|
||||
mode="inline"
|
||||
>
|
||||
<Menu.Item>
|
||||
<Link to={LINKS.PROFILE}>
|
||||
<span>Profile</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
onClick={() => {
|
||||
store.authentication.logout();
|
||||
history.push("/login");
|
||||
}}
|
||||
>
|
||||
<span>Sign out</span>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
}
|
||||
title={
|
||||
<Text>
|
||||
{store.user.data.username}
|
||||
<Paragraph style={{fontWeight: 400}} type={"secondary-dark"}>
|
||||
{store.authentication.userData.username}
|
||||
</Paragraph>
|
||||
</Text>
|
||||
}
|
||||
trigger="click"
|
||||
visible={clicked}
|
||||
onVisibleChange={() => setClicked(!clicked)}
|
||||
>
|
||||
<Button
|
||||
size={"default"}
|
||||
type={store.ui.mediaQuery.isDesktop ? "" : "link"}
|
||||
style={{marginRight: store.ui.mediaQuery.isDesktop ? 20 : 10}}
|
||||
icon={
|
||||
store.ui.mediaQuery.isDesktop ? (
|
||||
<UserOutlined style={{fontSize: "13px"}}/>
|
||||
) : (
|
||||
<UserOutlined style={{fontSize: "13px", color: "#5b5b5b"}}/>
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Popover>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
borderTopWidth: 0.5,
|
||||
borderTopColor: "#e3e3e3",
|
||||
borderTopStyle: "solid",
|
||||
}}
|
||||
/>
|
||||
{/*<BreadcumbComponent data={}/>*/}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{store.ui.mediaQuery.isDesktop && (
|
||||
<div
|
||||
className={["transparent"].join(" ")}
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
height: "100%",
|
||||
maxWidth: 1024,
|
||||
minWidth: 768,
|
||||
width: "calc(100vw - 220px)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
display: "flex",
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "center",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
</div>
|
||||
<Popover
|
||||
className={store.ui.mediaQuery.isDesktop ? "shadow" : null}
|
||||
autoAdjustOverflow={true}
|
||||
placement="bottomRight"
|
||||
content={
|
||||
<Menu
|
||||
type={"line"}
|
||||
inlineIndent={0}
|
||||
theme="light"
|
||||
style={{
|
||||
backgroundColor: "transparent",
|
||||
borderRightWidth: 0,
|
||||
}}
|
||||
mode="inline"
|
||||
>
|
||||
<Menu.Item key={'profile'}>
|
||||
<Link to={LINKS.PROFILE}>
|
||||
<span>Profile</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
key={'logout'}
|
||||
onClick={() => {
|
||||
store.authentication.logout();
|
||||
history.push("/login");
|
||||
}}
|
||||
>
|
||||
<span>Sign out</span>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
}
|
||||
title={
|
||||
<Text>
|
||||
{store.user.data.email}{" "}
|
||||
<Paragraph style={{fontWeight: 400}} type={"secondary-dark"}>
|
||||
{store.authentication.userData.username}
|
||||
</Paragraph>
|
||||
</Text>
|
||||
}
|
||||
trigger="click"
|
||||
visible={clicked}
|
||||
onVisibleChange={() => setClicked(!clicked)}
|
||||
>
|
||||
<Button
|
||||
size={"default"}
|
||||
type={store.ui.mediaQuery.isDesktop ? "" : "link"}
|
||||
style={{marginRight: store.ui.mediaQuery.isDesktop ? 20 : 10}}
|
||||
icon={
|
||||
store.ui.mediaQuery.isDesktop ? (
|
||||
<UserOutlined style={{fontSize: "13px"}}/>
|
||||
) : (
|
||||
<UserOutlined style={{fontSize: "13px", color: "#5b5b5b"}}/>
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Popover>
|
||||
|
||||
</div>
|
||||
)}
|
||||
</Header>
|
||||
|
||||
<Layout
|
||||
className={["transparent"].join(" ")}
|
||||
tabIndex={"-1"}
|
||||
style={{
|
||||
zIndex: 0,
|
||||
display: "flex",
|
||||
// overflowX: store.ui.mediaQuery.isMobile ? 'auto' : "hidden",
|
||||
// paddingLeft: 8,
|
||||
// paddingRight: 8,
|
||||
// width: 'calc(90vw - 220px)',
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<Content
|
||||
className={["transparent"].join(" ")}
|
||||
style={{
|
||||
// maxHeight: 'calc(100vh - 98px)',
|
||||
// paddingBottom: 48,
|
||||
padding: 0,
|
||||
margin: 0,
|
||||
position: "relative",
|
||||
marginTop: store.ui.mediaQuery.isDesktop ? 43 : 37,
|
||||
// overflow: 'auto',
|
||||
overflowX: store.ui.mediaQuery.isMobile ? "auto" : "hidden",
|
||||
// minWidth: 768,
|
||||
maxWidth: 1024,
|
||||
// minWidth: 768,
|
||||
width: store.ui.mediaQuery.isDesktop
|
||||
? "calc(100vw - 210px)"
|
||||
: "calc(100vw)",
|
||||
zIndex: 22,
|
||||
// height: `calc(100vh - ${store.ui.mediaQuery.isDesktop ? 78 : 71}px)`,
|
||||
height: `calc(100vh - ${
|
||||
store.ui.mediaQuery.isDesktop ? 43 : 37
|
||||
}px)`,
|
||||
// paddingLeft: 8,
|
||||
// paddingRight: 8
|
||||
}}
|
||||
mode="inline"
|
||||
>
|
||||
<Menu.Item key={"profile"}>
|
||||
<Link to={LINKS.PROFILE}>
|
||||
<span>Profile</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
key={"logout"}
|
||||
onClick={() => {
|
||||
store.authentication.logout();
|
||||
history.push("/login");
|
||||
}}
|
||||
>
|
||||
<AppRoute/>
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
<span>Sign out</span>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
}
|
||||
title={
|
||||
<Text>
|
||||
{store.user.data.email}{" "}
|
||||
<Paragraph
|
||||
style={{ fontWeight: 400 }}
|
||||
type={"secondary-dark"}
|
||||
>
|
||||
{store.authentication.userData.username}
|
||||
</Paragraph>
|
||||
</Text>
|
||||
}
|
||||
trigger="click"
|
||||
visible={clicked}
|
||||
onVisibleChange={() => setClicked(!clicked)}
|
||||
>
|
||||
<Button
|
||||
size={"default"}
|
||||
type={store.ui.mediaQuery.isDesktop ? "" : "link"}
|
||||
style={{
|
||||
marginRight: store.ui.mediaQuery.isDesktop ? 20 : 10,
|
||||
}}
|
||||
icon={
|
||||
store.ui.mediaQuery.isDesktop ? (
|
||||
<UserOutlined style={{ fontSize: "13px" }} />
|
||||
) : (
|
||||
<UserOutlined
|
||||
style={{ fontSize: "13px", color: "#5b5b5b" }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Popover>
|
||||
</div>
|
||||
)}
|
||||
</Header>
|
||||
|
||||
<Layout
|
||||
className={["transparent"].join(" ")}
|
||||
tabIndex={"-1"}
|
||||
style={{
|
||||
zIndex: 0,
|
||||
display: "flex",
|
||||
// overflowX: store.ui.mediaQuery.isMobile ? 'auto' : "hidden",
|
||||
// paddingLeft: 8,
|
||||
// paddingRight: 8,
|
||||
// width: 'calc(90vw - 220px)',
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<Content
|
||||
className={["transparent"].join(" ")}
|
||||
style={{
|
||||
// maxHeight: 'calc(100vh - 98px)',
|
||||
// paddingBottom: 48,
|
||||
padding: 0,
|
||||
margin: 0,
|
||||
position: "relative",
|
||||
marginTop: store.ui.mediaQuery.isDesktop ? 43 : 37,
|
||||
// overflow: 'auto',
|
||||
overflowX: store.ui.mediaQuery.isMobile ? "auto" : "hidden",
|
||||
// minWidth: 768,
|
||||
maxWidth: 1024,
|
||||
// minWidth: 768,
|
||||
width: store.ui.mediaQuery.isDesktop
|
||||
? "calc(100vw - 210px)"
|
||||
: "calc(100vw)",
|
||||
zIndex: 22,
|
||||
// height: `calc(100vh - ${store.ui.mediaQuery.isDesktop ? 78 : 71}px)`,
|
||||
height: `calc(100vh - ${
|
||||
store.ui.mediaQuery.isDesktop ? 43 : 37
|
||||
}px)`,
|
||||
// paddingLeft: 8,
|
||||
// paddingRight: 8
|
||||
}}
|
||||
>
|
||||
<AppRoute />
|
||||
</Content>
|
||||
</Layout>
|
||||
);
|
||||
</Layout>
|
||||
</Layout>
|
||||
);
|
||||
});
|
||||
|
||||
@@ -1,76 +1,112 @@
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {Menu} from "antd";
|
||||
import {Link} from "react-router-dom";
|
||||
import {HomeOutlined, UserOutlined,} from "@ant-design/icons";
|
||||
import {observer} from "mobx-react-lite";
|
||||
import {useStore} from "../../utils/useStore";
|
||||
import {LINKS} from "../../routes/app";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Menu } from "antd";
|
||||
import { Link } from "react-router-dom";
|
||||
import {
|
||||
HomeOutlined,
|
||||
UserOutlined,
|
||||
AppstoreOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
DatabaseOutlined,
|
||||
MoneyCollectOutlined,
|
||||
ProjectOutlined,
|
||||
FileProtectOutlined
|
||||
} from "@ant-design/icons";
|
||||
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(() => {
|
||||
}, []);
|
||||
const store = useStore();
|
||||
useEffect(() => {}, []);
|
||||
|
||||
const [setKeys, setSetKeys] = useState(["dashboard"]);
|
||||
const [setKeys, setSetKeys] = useState(["dashboard"]);
|
||||
|
||||
return (
|
||||
<Menu
|
||||
defaultOpenKeys={["sub4"]}
|
||||
theme="light"
|
||||
style={{
|
||||
backgroundColor: "transparent",
|
||||
borderRightWidth: 0,
|
||||
fontWeight: 400,
|
||||
paddingLeft: 0,
|
||||
}}
|
||||
onClick={({keyPath, item}) => {
|
||||
props.closeLeftDrawer();
|
||||
}}
|
||||
mode="inline"
|
||||
selectedKeys={setKeys}
|
||||
onSelect={({setKeys, item, selectedKeys}) => setSetKeys(selectedKeys)}
|
||||
overflowedIndicator={0}
|
||||
forceSubMenuRender={true}
|
||||
>
|
||||
<Menu.Item key="home">
|
||||
<Link to={LINKS.HOME}>
|
||||
<HomeOutlined/>
|
||||
<span>Home</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
{store.authentication.userData.role !== 'Retail' && <Menu.Item key="membership">
|
||||
<Link to={LINKS.MEMBERSHIP}>
|
||||
<HomeOutlined/>
|
||||
<span>Membership</span>
|
||||
</Link>
|
||||
</Menu.Item>}
|
||||
{store.authentication.userData.role !== 'Retail' && <Menu.Item key="product">
|
||||
<Link to={LINKS.PRODUCT}>
|
||||
<HomeOutlined/>
|
||||
<span>Product</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}>
|
||||
<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>
|
||||
);
|
||||
return (
|
||||
<Menu
|
||||
defaultOpenKeys={["sub4"]}
|
||||
theme="light"
|
||||
style={{
|
||||
backgroundColor: "transparent",
|
||||
borderRightWidth: 0,
|
||||
fontWeight: 400,
|
||||
paddingLeft: 0,
|
||||
}}
|
||||
onClick={({ keyPath, item }) => {
|
||||
props.closeLeftDrawer();
|
||||
}}
|
||||
mode="inline"
|
||||
selectedKeys={setKeys}
|
||||
onSelect={({ setKeys, item, selectedKeys }) => setSetKeys(selectedKeys)}
|
||||
overflowedIndicator={0}
|
||||
forceSubMenuRender={true}
|
||||
>
|
||||
<Menu.Item key="home">
|
||||
<Link to={LINKS.HOME}>
|
||||
<HomeOutlined />
|
||||
<span>Home</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
{store.authentication.userData.role !== "Retail" && (
|
||||
<Menu.Item key="membership">
|
||||
<Link to={LINKS.MEMBERSHIP}>
|
||||
<FileProtectOutlined />
|
||||
<span>Membership</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
)}
|
||||
{store.authentication.userData.role !== "Retail" && (
|
||||
<SubMenu key="config" icon={<MenuUnfoldOutlined />} title="Config" style={{backgroundColor:'#e3e8ee'}}>
|
||||
<Menu.Item key="partner">
|
||||
<Link to={LINKS.PARTNER}>
|
||||
<ProjectOutlined/>
|
||||
<span>Partner</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="commision">
|
||||
<Link to={LINKS.COMMISION}>
|
||||
<MoneyCollectOutlined />
|
||||
<span>Commision</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="supplier">
|
||||
<Link to={LINKS.SUPPLIER}>
|
||||
<AppstoreOutlined/>
|
||||
<span>Supplier</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
</SubMenu>
|
||||
)}
|
||||
{store.authentication.userData.role !== "Retail" && (
|
||||
<Menu.Item key="product">
|
||||
<Link to={LINKS.PRODUCT}>
|
||||
<DatabaseOutlined />
|
||||
<span>Product</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}>
|
||||
<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>
|
||||
);
|
||||
});
|
||||
|
||||
86
src/pages/Config/Commision.js
Normal file
86
src/pages/Config/Commision.js
Normal file
@@ -0,0 +1,86 @@
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {Button, Card, Col, Input, Row, Tabs} from "antd";
|
||||
import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
|
||||
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
|
||||
import {useStore} from "../../utils/useStore";
|
||||
import {observer} from "mobx-react-lite";
|
||||
import {CommisionComponent} from "../../component/CommisionComponent";
|
||||
import {LINKS} from "../../routes/app";
|
||||
|
||||
const {TabPane} = Tabs;
|
||||
const {Search} = Input;
|
||||
|
||||
export const Commision = observer(() => {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const store = useStore();
|
||||
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
await store.partner.getDataCategories();
|
||||
await store.partner.getData();
|
||||
setIsLoading(false);
|
||||
} catch (e) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
init();
|
||||
}, []);
|
||||
|
||||
const handleChangeTabPane = async (key) => {
|
||||
store.product.filterCategory = key;
|
||||
console.log(key);
|
||||
};
|
||||
|
||||
const routeData = [
|
||||
{
|
||||
route: LINKS.HOME,
|
||||
name: "Home",
|
||||
},
|
||||
{
|
||||
route: LINKS.PARTNER,
|
||||
name: <span style={{fontWeight: 'bold'}}>Partner</span>,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={["ppob-container"].join(" ")}>
|
||||
<BreadcumbComponent data={routeData}/>
|
||||
<Card>
|
||||
<Row style={{marginBottom: 20}}>
|
||||
<Col span={12}>
|
||||
<Button>
|
||||
<FilterOutlined/>
|
||||
Filter
|
||||
</Button>
|
||||
</Col>
|
||||
<Col span={12} style={{textAlign: "right"}}>
|
||||
<Search
|
||||
placeholder="input search text"
|
||||
style={{width: 200, marginRight: 10}}
|
||||
/>
|
||||
<Button onClick={() => store.partner.visibleModalPartner = true}>
|
||||
<PlusSquareOutlined/> New
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<Tabs
|
||||
onChange={handleChangeTabPane}
|
||||
size="default"
|
||||
tabBarGutter="50"
|
||||
>
|
||||
|
||||
<TabPane
|
||||
tab="Commision"
|
||||
key="1"
|
||||
>
|
||||
<CommisionComponent/>
|
||||
</TabPane>
|
||||
))
|
||||
</Tabs>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
86
src/pages/Config/Partner.js
Normal file
86
src/pages/Config/Partner.js
Normal file
@@ -0,0 +1,86 @@
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {Button, Card, Col, Input, Row, Tabs} from "antd";
|
||||
import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
|
||||
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
|
||||
import {useStore} from "../../utils/useStore";
|
||||
import {observer} from "mobx-react-lite";
|
||||
import {PartnerComponent} from "../../component/PartnerComponent";
|
||||
import {LINKS} from "../../routes/app";
|
||||
|
||||
const {TabPane} = Tabs;
|
||||
const {Search} = Input;
|
||||
|
||||
export const Partner = observer(() => {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const store = useStore();
|
||||
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
await store.partner.getDataCategories();
|
||||
await store.partner.getData();
|
||||
setIsLoading(false);
|
||||
} catch (e) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
init();
|
||||
}, []);
|
||||
|
||||
const handleChangeTabPane = async (key) => {
|
||||
store.product.filterCategory = key;
|
||||
console.log(key);
|
||||
};
|
||||
|
||||
const routeData = [
|
||||
{
|
||||
route: LINKS.HOME,
|
||||
name: "Home",
|
||||
},
|
||||
{
|
||||
route: LINKS.PARTNER,
|
||||
name: <span style={{fontWeight: 'bold'}}>Partner</span>,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={["ppob-container"].join(" ")}>
|
||||
<BreadcumbComponent data={routeData}/>
|
||||
<Card>
|
||||
<Row style={{marginBottom: 20}}>
|
||||
<Col span={12}>
|
||||
<Button>
|
||||
<FilterOutlined/>
|
||||
Filter
|
||||
</Button>
|
||||
</Col>
|
||||
<Col span={12} style={{textAlign: "right"}}>
|
||||
<Search
|
||||
placeholder="input search text"
|
||||
style={{width: 200, marginRight: 10}}
|
||||
/>
|
||||
<Button onClick={() => store.partner.visibleModalPartner = true}>
|
||||
<PlusSquareOutlined/> New
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<Tabs
|
||||
onChange={handleChangeTabPane}
|
||||
size="default"
|
||||
tabBarGutter="50"
|
||||
>
|
||||
|
||||
<TabPane
|
||||
tab="Partner"
|
||||
key="1"
|
||||
>
|
||||
<PartnerComponent/>
|
||||
</TabPane>
|
||||
))
|
||||
</Tabs>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
86
src/pages/Config/Supplier.js
Normal file
86
src/pages/Config/Supplier.js
Normal file
@@ -0,0 +1,86 @@
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {Button, Card, Col, Input, Row, Tabs} from "antd";
|
||||
import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
|
||||
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
|
||||
import {useStore} from "../../utils/useStore";
|
||||
import {observer} from "mobx-react-lite";
|
||||
import {SupplierComponent} from "../../component/SupplierComponent";
|
||||
import {LINKS} from "../../routes/app";
|
||||
|
||||
const {TabPane} = Tabs;
|
||||
const {Search} = Input;
|
||||
|
||||
export const Supplier = observer(() => {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const store = useStore();
|
||||
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
await store.supplier.getDataCategories();
|
||||
await store.supplier.getData();
|
||||
setIsLoading(false);
|
||||
} catch (e) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
init();
|
||||
}, []);
|
||||
|
||||
const handleChangeTabPane = async (key) => {
|
||||
store.product.filterCategory = key;
|
||||
console.log(key);
|
||||
};
|
||||
|
||||
const routeData = [
|
||||
{
|
||||
route: LINKS.HOME,
|
||||
name: "Home",
|
||||
},
|
||||
{
|
||||
route: LINKS.SUPPLIER,
|
||||
name: <span style={{fontWeight: 'bold'}}>Supplier</span>,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={["ppob-container"].join(" ")}>
|
||||
<BreadcumbComponent data={routeData}/>
|
||||
<Card>
|
||||
<Row style={{marginBottom: 20}}>
|
||||
<Col span={12}>
|
||||
<Button>
|
||||
<FilterOutlined/>
|
||||
Filter
|
||||
</Button>
|
||||
</Col>
|
||||
<Col span={12} style={{textAlign: "right"}}>
|
||||
<Search
|
||||
placeholder="input search text"
|
||||
style={{width: 200, marginRight: 10}}
|
||||
/>
|
||||
<Button onClick={() => store.supplier.visibleModalSupplier = true}>
|
||||
<PlusSquareOutlined/> New
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<Tabs
|
||||
onChange={handleChangeTabPane}
|
||||
size="default"
|
||||
tabBarGutter="50"
|
||||
>
|
||||
|
||||
<TabPane
|
||||
tab="Supplier"
|
||||
key="1"
|
||||
>
|
||||
<SupplierComponent/>
|
||||
</TabPane>
|
||||
))
|
||||
</Tabs>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@@ -204,26 +204,26 @@ export const Membership = observer(() => {
|
||||
</Row>
|
||||
{store.ui.mediaQuery.isDesktop && (
|
||||
<Table
|
||||
key="1"
|
||||
hasEmpty
|
||||
size={"small"}
|
||||
columns={columns}
|
||||
dataSource={store.membership.data}
|
||||
bordered
|
||||
|
||||
// pagination={{
|
||||
// total: store.membership.total_data,
|
||||
// current: store.membership.page,
|
||||
// pageSize: store.membership.pageSize,
|
||||
// simple: true
|
||||
// }}
|
||||
// onChange={(page) => {
|
||||
// store.membership.pageSize = page.pageSize;
|
||||
// store.membership.page = page.current;
|
||||
// store.membership.getData();
|
||||
// }}
|
||||
// current={store.membership.page}
|
||||
// loading={store.membership.pageSize}
|
||||
key="1"
|
||||
hasEmpty
|
||||
columns={columns}
|
||||
dataSource={store.membership.data}
|
||||
bordered
|
||||
pagination={{
|
||||
pageSize: store.membership.pageSize,
|
||||
total: store.membership.total_data,
|
||||
current: store.membership.page + 1,
|
||||
showSizeChanger: true,
|
||||
simple: false
|
||||
}}
|
||||
onChange={async (page) => {
|
||||
let pageNumber = page.current;
|
||||
store.membership.pageSize = page.pageSize;
|
||||
store.membership.page = pageNumber - 1;
|
||||
// store.membership.isLoading = true;
|
||||
await store.membership.getData();
|
||||
// store.membership.isLoading = false;
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
||||
@@ -76,9 +76,7 @@ export const Product = observer(() => {
|
||||
tab={item.name}
|
||||
key={item.id}
|
||||
>
|
||||
<ProductComponent
|
||||
data={store.product.data}
|
||||
/>
|
||||
<ProductComponent/>
|
||||
</TabPane>
|
||||
))}
|
||||
</Tabs>
|
||||
|
||||
@@ -1,25 +1,65 @@
|
||||
import React from "react";
|
||||
import {Button, Card, Col, Dropdown, Menu, message, Modal, Row, Space,} from "antd";
|
||||
import {DownOutlined, TabletOutlined, UserOutlined} from "@ant-design/icons";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useStore } from "../../utils/useStore";
|
||||
import { Button, Card, Col, Dropdown, Menu, message, Modal, Row, Space, } from "antd";
|
||||
import { DownOutlined, TabletOutlined, UserOutlined } from "@ant-design/icons";
|
||||
|
||||
export const Pulsa = () => {
|
||||
|
||||
function handleMenuClick(e) {
|
||||
message.info("Click on menu item.");
|
||||
console.log("click", e);
|
||||
const store = useStore();
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const [productData, setProductData] = useState([])
|
||||
const [productFilter, setProductFilter] = useState("")
|
||||
// useEffect(()=>{
|
||||
// if(!productFilter){
|
||||
// setProductData(store.transaction.data)
|
||||
// }
|
||||
// },[productFilter])
|
||||
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
await store.transaction.getDataSubCategories();
|
||||
await store.transaction.getData();
|
||||
setIsLoading(false);
|
||||
} catch (e) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
init();
|
||||
}, []);
|
||||
|
||||
// data
|
||||
useEffect(() => {
|
||||
console.log('⚡ transaction data store', store.transaction.data)
|
||||
setProductData(store.transaction.data)
|
||||
}, [store.transaction.data])
|
||||
|
||||
// Subcategory
|
||||
useEffect(() => {
|
||||
console.log('⚡ transaction subcategory store', store.transaction.dataSubCategories)
|
||||
}, [store.transaction.dataSubCategories])
|
||||
|
||||
|
||||
function handleMenuClick(item) {
|
||||
message.info("⚡ Click on menu item.");
|
||||
console.log("⚡ click", item);
|
||||
setProductFilter(item.name)
|
||||
}
|
||||
|
||||
const menu = (
|
||||
<Menu onClick={handleMenuClick}>
|
||||
<Menu.Item key="1" icon={<UserOutlined/>}>
|
||||
1st menu item
|
||||
</Menu.Item>
|
||||
<Menu.Item key="2" icon={<UserOutlined/>}>
|
||||
2nd menu item
|
||||
</Menu.Item>
|
||||
<Menu.Item key="3" icon={<UserOutlined/>}>
|
||||
3rd menu item
|
||||
</Menu.Item>
|
||||
<Menu style={{
|
||||
backgroundColor: 'white'
|
||||
}}>
|
||||
{store.transaction.dataSubCategories.map((item, index) => (
|
||||
<Menu.Item key="1" icon={<UserOutlined />} onClick={() => handleMenuClick(item)} >
|
||||
{item.name}
|
||||
</Menu.Item>
|
||||
))}
|
||||
|
||||
</Menu>
|
||||
);
|
||||
|
||||
@@ -29,55 +69,12 @@ export const Pulsa = () => {
|
||||
});
|
||||
}
|
||||
|
||||
const dataCard = [
|
||||
{
|
||||
title: "DATA AXIS BRONET 2GB-60HR",
|
||||
price: "Harga : Rp.6.000",
|
||||
},
|
||||
{
|
||||
title: "DATA AXIS BRONET 2GB-60HR",
|
||||
price: "Harga : Rp.6.000",
|
||||
},
|
||||
{
|
||||
title: "DATA AXIS BRONET 2GB-60HR",
|
||||
price: "Harga : Rp.6.000",
|
||||
},
|
||||
{
|
||||
title: "DATA AXIS BRONET 2GB-60HR",
|
||||
price: "Harga : Rp.6.000",
|
||||
},
|
||||
{
|
||||
title: "DATA AXIS BRONET 2GB-60HR",
|
||||
price: "Harga : Rp.6.000",
|
||||
},
|
||||
{
|
||||
title: "DATA AXIS BRONET 2GB-60HR",
|
||||
price: "Harga : Rp.6.000",
|
||||
},
|
||||
{
|
||||
title: "DATA AXIS BRONET 2GB-60HR",
|
||||
price: "Harga : Rp.6.000",
|
||||
},
|
||||
{
|
||||
title: "DATA AXIS BRONET 2GB-60HR",
|
||||
price: "Harga : Rp.6.000",
|
||||
},
|
||||
{
|
||||
title: "DATA AXIS BRONET 2GB-60HR",
|
||||
price: "Harga : Rp.6.000",
|
||||
},
|
||||
{
|
||||
title: "DATA AXIS BRONET 2GB-60HR",
|
||||
price: "Harga : Rp.6.000",
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Row>
|
||||
<span style={{fontWeight: "bold", marginBottom: "10px"}}>
|
||||
Sub-Category
|
||||
</span>
|
||||
<span style={{ fontWeight: "bold", marginBottom: "10px" }}>
|
||||
Sub-Category
|
||||
</span>
|
||||
</Row>
|
||||
<Row>
|
||||
<Space wrap>
|
||||
@@ -88,34 +85,34 @@ export const Pulsa = () => {
|
||||
color: "grey",
|
||||
}}
|
||||
>
|
||||
<TabletOutlined/>
|
||||
<TabletOutlined />
|
||||
Select sub-Category
|
||||
<DownOutlined/>
|
||||
<DownOutlined />
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</Space>
|
||||
</Row>
|
||||
<Row>
|
||||
<span style={{fontWeight: "bold", marginBottom: "10px"}}>
|
||||
Produk & Nominal
|
||||
</span>
|
||||
<span style={{ fontWeight: "bold", marginBottom: "10px" }}>
|
||||
Produk & Nominal
|
||||
</span>
|
||||
</Row>
|
||||
<Row>
|
||||
{dataCard.map((item, index) => (
|
||||
{productData.map((item, index) => (
|
||||
<Col key={index} xs={24} md={16} lg={8}>
|
||||
<Card onClick={success}>
|
||||
<span style={{color: "black"}}>{item.title}</span>
|
||||
<br/>
|
||||
<span style={{color: "grey", fontSize: 10}}>{item.price}</span>
|
||||
<span style={{ color: "black" }}>{item.name}</span>
|
||||
<br />
|
||||
<span style={{ color: "grey", fontSize: 10 }}>{item.price}</span>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
<Col style={{textAlign: "right"}}>
|
||||
<Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
|
||||
<Col style={{ textAlign: "right" }}>
|
||||
<Button style={{ backgroundColor: "#2D9CDB", color: "white" }}>
|
||||
Beli Sekarang
|
||||
</Button>
|
||||
</Col>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user