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"

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

@ -1,8 +1,25 @@
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 {
Button,
Card,
Col,
Divider,
Image,
Input,
List,
message,
Row,
Space,
Table,
} from "antd";
import { useStore } from "../../utils/useStore"; import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import {CheckCircleOutlined, CloseOutlined, FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons"; import {
CheckCircleOutlined,
CloseOutlined,
FilterOutlined,
PlusSquareOutlined,
} from "@ant-design/icons";
import { PaybackModal } from "./PaybackModal"; import { PaybackModal } from "./PaybackModal";
import { BreadcumbComponent } from "../../component/BreadcumbComponent"; import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app"; import { LINKS } from "../../routes/app";
@ -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 = [
{ {
@ -93,7 +114,7 @@ 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={{
@ -106,7 +127,7 @@ 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={{
@ -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,
@ -147,17 +170,10 @@ 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}>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Modal> */}
<BreadcumbComponent data={routeData} /> <BreadcumbComponent data={routeData} />
<Card> <Card>
<div> <div>
@ -177,6 +193,7 @@ 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({});
@ -185,6 +202,7 @@ export const Payback = observer(() => {
> >
<PlusSquareOutlined /> New <PlusSquareOutlined /> New
</Button> </Button>
)}
</Col> </Col>
</Row> </Row>
{store.ui.mediaQuery.isDesktop && ( {store.ui.mediaQuery.isDesktop && (