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

fix: menus

Browse Source
This commit is contained in:
rarsyansyahr 2021-12-16 17:45:00 +07:00
parent 06eb607c7a
commit a8a8330941
4 changed files with 342 additions and 322 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +10,8 @@ import {
DatabaseOutlined, DatabaseOutlined,
FileAddOutlined, FileAddOutlined,
FileSyncOutlined, FileSyncOutlined,
FileProtectOutlined,
ShoppingCartOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
import { AppRoute, LINKS } from "../../routes/app"; import { AppRoute, LINKS } from "../../routes/app";
import { useStore } from "../../utils/useStore"; import { useStore } from "../../utils/useStore";
@ -122,12 +124,12 @@ export const DesktopLayout = observer(() => {
{store.authentication.userData.role !== "Retail" && ( {store.authentication.userData.role !== "Retail" && (
<Menu.Item key="membership"> <Menu.Item key="membership">
<Link to={LINKS.MEMBERSHIP}> <Link to={LINKS.MEMBERSHIP}>
<HomeOutlined /> <FileProtectOutlined />
<span>Membership</span> <span>Membership</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
{store.authentication.userData.role !== "Retail" && ( {store.authentication.userData.role === "Admin" && (
<SubMenu <SubMenu
key="config" key="config"
icon={<HomeOutlined />} icon={<HomeOutlined />}
@ -154,10 +156,10 @@ export const DesktopLayout = observer(() => {
</Menu.Item> </Menu.Item>
</SubMenu> </SubMenu>
)} )}
{store.authentication.userData.role !== "Retail" && ( {store.authentication.userData.role === "Admin" && (
<SubMenu <SubMenu
key="product-main" key="product-main"
icon={<ProfileOutlined />} icon={<DatabaseOutlined />}
title="Product" title="Product"
> >
<Menu.Item key="product"> <Menu.Item key="product">
@ -180,28 +182,28 @@ export const DesktopLayout = observer(() => {
</Menu.Item> </Menu.Item>
</SubMenu> </SubMenu>
)} )}
{store.authentication.userData.role !== "Retail" && ( {store.authentication.userData.role !== "Admin" && (
<Menu.Item key="product"> <Menu.Item key="product">
<Link to={LINKS.PRODUCT}> <Link to={LINKS.PRODUCT}>
<HomeOutlined /> <DatabaseOutlined />
<span>Product</span> <span>Product</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
{store.authentication.userData.role === "Retail" && (
<Menu.Item key="transaction">
<Link to={LINKS.TRANSACTION}>
<ShoppingCartOutlined />
<span>Transaction</span>
</Link>
</Menu.Item>
)}
<Menu.Item key="payback"> <Menu.Item key="payback">
<Link to={LINKS.PAYBACK}> <Link to={LINKS.PAYBACK}>
<HomeOutlined /> <DatabaseOutlined />
<span>Payback</span> <span>Payback</span>
</Link> </Link>
</Menu.Item> </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"> <Menu.Item key="profile">
<Link to={LINKS.PROFILE}> <Link to={LINKS.PROFILE}>
<UserOutlined /> <UserOutlined />

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

@ -12,6 +12,7 @@ import {
MoneyCollectOutlined, MoneyCollectOutlined,
ProfileOutlined, ProfileOutlined,
ProjectOutlined, ProjectOutlined,
ShoppingCartOutlined,
UserOutlined, UserOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
@ -59,7 +60,7 @@ export const MenuList = observer((props) => {
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
{store.authentication.userData.role !== "Retail" && ( {store.authentication.userData.role === "Admin" && (
<SubMenu key="config" icon={<MenuUnfoldOutlined />} title="Config"> <SubMenu key="config" icon={<MenuUnfoldOutlined />} title="Config">
<Menu.Item key="partner"> <Menu.Item key="partner">
<Link to={LINKS.PARTNER}> <Link to={LINKS.PARTNER}>
@ -81,7 +82,7 @@ export const MenuList = observer((props) => {
</Menu.Item> </Menu.Item>
</SubMenu> </SubMenu>
)} )}
{store.authentication.userData.role !== "Retail" && ( {store.authentication.userData.role === "Admin" && (
<SubMenu key="product-main" icon={<ProfileOutlined />} title="Product"> <SubMenu key="product-main" icon={<ProfileOutlined />} title="Product">
<Menu.Item key="product"> <Menu.Item key="product">
<Link to={LINKS.PRODUCT}> <Link to={LINKS.PRODUCT}>
@ -103,10 +104,18 @@ export const MenuList = observer((props) => {
</Menu.Item> </Menu.Item>
</SubMenu> </SubMenu>
)} )}
{store.authentication.userData.role === ("Retail" || "Admin") && ( {store.authentication.userData.role !== "Admin" && (
<Menu.Item key="retail">
<Link to={LINKS.PRODUCT}>
<DatabaseOutlined />
<span>Product</span>
</Link>
</Menu.Item>
)}
{store.authentication.userData.role === "Retail" && (
<Menu.Item key="transaction"> <Menu.Item key="transaction">
<Link to={LINKS.TRANSACTION}> <Link to={LINKS.TRANSACTION}>
<HomeOutlined /> <ShoppingCartOutlined />
<span>Transaction</span> <span>Transaction</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
@ -117,14 +126,6 @@ export const MenuList = observer((props) => {
<span>Payback</span> <span>Payback</span>
</Link> </Link>
</Menu.Item> </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"> <Menu.Item key="profile">
<Link to={LINKS.PROFILE}> <Link to={LINKS.PROFILE}>
<UserOutlined /> <UserOutlined />

13
src/pages/Membership/Membership.js
View File

@ -45,6 +45,7 @@ export const Membership = observer(() => {
setIsLoading(true); setIsLoading(true);
await getData(); await getData();
store.role.getData(); store.role.getData();
if (store.authentication.userData.role === "Admin")
await store.supplier.getData(); await store.supplier.getData();
setIsLoading(false); setIsLoading(false);
} catch (e) { } catch (e) {
@ -85,10 +86,11 @@ export const Membership = observer(() => {
const handleSubmitTransaction = async (data) => { const handleSubmitTransaction = async (data) => {
setConfirmLoading(true); setConfirmLoading(true);
try { try {
let input = data;
data.destination = destination; data.destination = destination;
await store.transaction.distributeAdmin(data); (await store.authentication.userData.role) === "Admin"
? store.transaction.distributeAdmin(data)
: store.transaction.distribute(data);
message.success("Success Top Up"); message.success("Success Top Up");
//await store.supplier.getData() //await store.supplier.getData()
} catch (e) { } catch (e) {
@ -266,11 +268,6 @@ export const Membership = observer(() => {
}; };
return ( return (
<div className={["ppob-container"].join(" ")}> <div className={["ppob-container"].join(" ")}>
{/* <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Modal> */}
<BreadcumbComponent data={routeData} /> <BreadcumbComponent data={routeData} />
<Card> <Card>
<div> <div>
@ -410,6 +407,7 @@ export const Membership = observer(() => {
}} }}
> >
<Form form={form} layout="vertical"> <Form form={form} layout="vertical">
{store.authentication.userData.role === "Admin" && (
<Form.Item <Form.Item
name="supplier" name="supplier"
label="Supplier" label="Supplier"
@ -423,6 +421,7 @@ export const Membership = observer(() => {
))} ))}
</Select> </Select>
</Form.Item> </Form.Item>
)}
<Form.Item <Form.Item
name="amount" name="amount"
label="Amount" label="Amount"

100
src/pages/Payback/Payback.js
View File

@ -1,13 +1,30 @@
import React, {useState} from "react"; import React, { useState } from "react";
import {Button, Card, Col, Divider, Image, Input, List, message, Row, Space, Table,} from "antd"; import {
import {useStore} from "../../utils/useStore"; Button,
import {observer} from "mobx-react-lite"; Card,
import {CheckCircleOutlined, CloseOutlined, FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons"; Col,
import {PaybackModal} from "./PaybackModal"; Divider,
import {BreadcumbComponent} from "../../component/BreadcumbComponent"; Image,
import {LINKS} from "../../routes/app"; Input,
List,
message,
Row,
Space,
Table,
} from "antd";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import {
CheckCircleOutlined,
CloseOutlined,
FilterOutlined,
PlusSquareOutlined,
} from "@ant-design/icons";
import { PaybackModal } from "./PaybackModal";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app";
const {Search} = Input; const { Search } = Input;
export const Payback = observer(() => { export const Payback = observer(() => {
const store = useStore(); const store = useStore();
@ -32,34 +49,38 @@ export const Payback = observer(() => {
const dummyData = [ const dummyData = [
{ {
key: '1', key: "1",
id: 1, id: 1,
name: "John Doe", name: "John Doe",
picture: "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg", picture:
"https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
amount: "Rp. 1.000.000", amount: "Rp. 1.000.000",
}, },
{ {
key: '2', key: "2",
id: 1, id: 1,
name: "John Doe", name: "John Doe",
picture: "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg", picture:
"https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
amount: "Rp. 1.000.000", amount: "Rp. 1.000.000",
}, },
{ {
key: '3', key: "3",
id: 1, id: 1,
name: "John Doe", name: "John Doe",
picture: "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg", picture:
"https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
amount: "Rp. 1.000.000", amount: "Rp. 1.000.000",
}, },
{ {
key: '4', key: "4",
id: 1, id: 1,
name: "John Doe", name: "John Doe",
picture: "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg", picture:
"https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
amount: "Rp. 1.000.000", amount: "Rp. 1.000.000",
}, },
] ];
const columns = [ const columns = [
{ {
@ -74,7 +95,7 @@ export const Payback = observer(() => {
render: (text, record) => ( render: (text, record) => (
<Image <Image
src={record.picture} src={record.picture}
style={{width: 50, height: 50}} style={{ width: 50, height: 50 }}
shape="circle" shape="circle"
alt="avatar" alt="avatar"
/> />
@ -93,9 +114,9 @@ export const Payback = observer(() => {
<Space size="middle"> <Space size="middle">
<Button <Button
onClick={async () => { onClick={async () => {
await handleAction(record, 'accept'); await handleAction(record, "accept");
}} }}
icon={<CheckCircleOutlined/>} icon={<CheckCircleOutlined />}
style={{ style={{
backgroundColor: "#1bb91d", backgroundColor: "#1bb91d",
color: "#fff", color: "#fff",
@ -106,9 +127,9 @@ export const Payback = observer(() => {
</Button> </Button>
<Button <Button
onClick={async () => { onClick={async () => {
await handleAction(record, 'reject'); await handleAction(record, "reject");
}} }}
icon={<CloseOutlined/>} icon={<CloseOutlined />}
style={{ style={{
backgroundColor: "#ff1c1c", backgroundColor: "#ff1c1c",
color: "#fff", color: "#fff",
@ -122,6 +143,8 @@ export const Payback = observer(() => {
}, },
]; ];
if(store.authentication.userData.role === "Retail") columns.pop();
const routeData = [ const routeData = [
{ {
route: LINKS.HOME, route: LINKS.HOME,
@ -129,7 +152,7 @@ export const Payback = observer(() => {
}, },
{ {
route: LINKS.PAYBACK, route: LINKS.PAYBACK,
name: <span style={{fontWeight: "bold"}}>Payback</span>, name: <span style={{ fontWeight: "bold" }}>Payback</span>,
}, },
]; ];
@ -147,28 +170,21 @@ export const Payback = observer(() => {
setVisibleModal(false); setVisibleModal(false);
}; };
const handleAction = async (record, type) => { const handleAction = async (record, type) => {};
};
return ( return (
<div className={["ppob-container"].join(" ")}> <div className={["ppob-container"].join(" ")}>
{/* <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}> <BreadcumbComponent data={routeData} />
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Modal> */}
<BreadcumbComponent data={routeData}/>
<Card> <Card>
<div> <div>
<Row style={{marginBottom: 20}}> <Row style={{ marginBottom: 20 }}>
<Col span={12}> <Col span={12}>
<Button> <Button>
<FilterOutlined/> <FilterOutlined />
Filter Filter
</Button> </Button>
</Col> </Col>
<Col span={12} style={{textAlign: "right"}}> <Col span={12} style={{ textAlign: "right" }}>
<Search <Search
placeholder="input search text" placeholder="input search text"
style={{ style={{
@ -177,14 +193,16 @@ export const Payback = observer(() => {
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0, marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}} }}
/> />
{store.authentication.userData.role !== "Admin" && (
<Button <Button
onClick={() => { onClick={() => {
setInitialData({}); setInitialData({});
setVisibleModal(true); setVisibleModal(true);
}} }}
> >
<PlusSquareOutlined/> New <PlusSquareOutlined /> New
</Button> </Button>
)}
</Col> </Col>
</Row> </Row>
{store.ui.mediaQuery.isDesktop && ( {store.ui.mediaQuery.isDesktop && (
@ -228,7 +246,7 @@ export const Payback = observer(() => {
// style: {marginBottom: "1rem", marginRight: "1rem"}, // style: {marginBottom: "1rem", marginRight: "1rem"},
// }} // }}
dataSource={dummyData} dataSource={dummyData}
style={{padding: 0}} style={{ padding: 0 }}
renderItem={(item) => { renderItem={(item) => {
return ( return (
<div> <div>
@ -249,11 +267,11 @@ export const Payback = observer(() => {
title={item.name} title={item.name}
description={ description={
<div style={{}}> <div style={{}}>
<Image src={item.picture} preview={false}/> <Image src={item.picture} preview={false} />
</div> </div>
} }
/> />
<div style={{marginRight: 16}}> <div style={{ marginRight: 16 }}>
<p <p
style={{ style={{
fontSize: 9, fontSize: 9,
@ -264,7 +282,7 @@ export const Payback = observer(() => {
</p> </p>
</div> </div>
</List.Item> </List.Item>
<Divider plain style={{margin: 0}}/> <Divider plain style={{ margin: 0 }} />
</div> </div>
); );
}} }}