fix: menus

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

View File

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

View File

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

View File

@ -45,6 +45,7 @@ export const Membership = observer(() => {
setIsLoading(true);
await getData();
store.role.getData();
if (store.authentication.userData.role === "Admin")
await store.supplier.getData();
setIsLoading(false);
} catch (e) {
@ -85,10 +86,11 @@ export const Membership = observer(() => {
const handleSubmitTransaction = async (data) => {
setConfirmLoading(true);
try {
let input = data;
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");
//await store.supplier.getData()
} catch (e) {
@ -266,11 +268,6 @@ export const Membership = observer(() => {
};
return (
<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} />
<Card>
<div>
@ -410,6 +407,7 @@ export const Membership = observer(() => {
}}
>
<Form form={form} layout="vertical">
{store.authentication.userData.role === "Admin" && (
<Form.Item
name="supplier"
label="Supplier"
@ -423,6 +421,7 @@ export const Membership = observer(() => {
))}
</Select>
</Form.Item>
)}
<Form.Item
name="amount"
label="Amount"

View File

@ -1,13 +1,30 @@
import React, {useState} from "react";
import {Button, Card, Col, Divider, Image, 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";
import React, { useState } from "react";
import {
Button,
Card,
Col,
Divider,
Image,
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(() => {
const store = useStore();
@ -32,34 +49,38 @@ export const Payback = observer(() => {
const dummyData = [
{
key: '1',
key: "1",
id: 1,
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",
},
{
key: '2',
key: "2",
id: 1,
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",
},
{
key: '3',
key: "3",
id: 1,
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",
},
{
key: '4',
key: "4",
id: 1,
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",
},
]
];
const columns = [
{
@ -74,7 +95,7 @@ export const Payback = observer(() => {
render: (text, record) => (
<Image
src={record.picture}
style={{width: 50, height: 50}}
style={{ width: 50, height: 50 }}
shape="circle"
alt="avatar"
/>
@ -93,9 +114,9 @@ export const Payback = observer(() => {
<Space size="middle">
<Button
onClick={async () => {
await handleAction(record, 'accept');
await handleAction(record, "accept");
}}
icon={<CheckCircleOutlined/>}
icon={<CheckCircleOutlined />}
style={{
backgroundColor: "#1bb91d",
color: "#fff",
@ -106,9 +127,9 @@ export const Payback = observer(() => {
</Button>
<Button
onClick={async () => {
await handleAction(record, 'reject');
await handleAction(record, "reject");
}}
icon={<CloseOutlined/>}
icon={<CloseOutlined />}
style={{
backgroundColor: "#ff1c1c",
color: "#fff",
@ -122,6 +143,8 @@ export const Payback = observer(() => {
},
];
if(store.authentication.userData.role === "Retail") columns.pop();
const routeData = [
{
route: LINKS.HOME,
@ -129,7 +152,7 @@ export const Payback = observer(() => {
},
{
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);
};
const handleAction = async (record, type) => {
};
const handleAction = async (record, type) => {};
return (
<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>
<div>
<Row style={{marginBottom: 20}}>
<Row style={{ marginBottom: 20 }}>
<Col span={12}>
<Button>
<FilterOutlined/>
<FilterOutlined />
Filter
</Button>
</Col>
<Col span={12} style={{textAlign: "right"}}>
<Col span={12} style={{ textAlign: "right" }}>
<Search
placeholder="input search text"
style={{
@ -177,14 +193,16 @@ export const Payback = observer(() => {
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}}
/>
{store.authentication.userData.role !== "Admin" && (
<Button
onClick={() => {
setInitialData({});
setVisibleModal(true);
}}
>
<PlusSquareOutlined/> New
<PlusSquareOutlined /> New
</Button>
)}
</Col>
</Row>
{store.ui.mediaQuery.isDesktop && (
@ -228,7 +246,7 @@ export const Payback = observer(() => {
// style: {marginBottom: "1rem", marginRight: "1rem"},
// }}
dataSource={dummyData}
style={{padding: 0}}
style={{ padding: 0 }}
renderItem={(item) => {
return (
<div>
@ -249,11 +267,11 @@ export const Payback = observer(() => {
title={item.name}
description={
<div style={{}}>
<Image src={item.picture} preview={false}/>
<Image src={item.picture} preview={false} />
</div>
}
/>
<div style={{marginRight: 16}}>
<div style={{ marginRight: 16 }}>
<p
style={{
fontSize: 9,
@ -264,7 +282,7 @@ export const Payback = observer(() => {
</p>
</div>
</List.Item>
<Divider plain style={{margin: 0}}/>
<Divider plain style={{ margin: 0 }} />
</div>
);
}}