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

Merge branch 'develop' of https://gitlab.com/empatnusabangsa/ppob/ppob-frontend into develop

Browse Source
This commit is contained in:
ajat91 2021-12-16 17:47:24 +07:00
commit c25ce840c7
7 changed files with 413 additions and 353 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/component/PartnerComponent.js
View File

@ -114,7 +114,10 @@ export const PartnerComponent = observer((props) => {
key: "action", key: "action",
render: (text, record) => ( render: (text, record) => (
<Space size="middle"> <Space size="middle">
<Button onClick={() => changeStatus(record?.id, record?.status)}> <Button
type={record?.status === true ? "danger" : "primary"}
onClick={() => changeStatus(record?.id, record?.status)}
>
{record?.status === true ? "Inactive" : "Active"} {record?.status === true ? "Inactive" : "Active"}
</Button> </Button>
<Button onClick={() => handleEditButton(record)}>Edit</Button> <Button onClick={() => handleEditButton(record)}>Edit</Button>
@ -166,10 +169,18 @@ export const PartnerComponent = observer((props) => {
setConfirmLoading(true); setConfirmLoading(true);
try { try {
await store.partner.update(idData, data); await store.partner.update(idData, data);
message.success(isChangePassword ? "Failed Change Partner Password" : "Success Update Data Partner"); message.success(
isChangePassword
? "Failed Change Partner Password"
: "Success Update Data Partner"
);
//await store.partner.getData() //await store.partner.getData()
} catch (e) { } catch (e) {
message.error(isChangePassword ? "Failed Change Partner Password" : "Failed Update Data Partner"); message.error(
isChangePassword
? "Failed Change Partner Password"
: "Failed Update Data Partner"
);
} }
setConfirmLoading(false); setConfirmLoading(false);
store.partner.visibleModalPartner = false; store.partner.visibleModalPartner = false;

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 />

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

@ -33,6 +33,8 @@ export const Membership = observer(() => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const store = useStore(); const store = useStore();
const [visibleModal, setVisibleModal] = useState(false); const [visibleModal, setVisibleModal] = useState(false);
const [isVisibleTopUpModal, setIsVisibleTopUpModal] = useState(false);
const [destination, setDestination] = useState(null);
const [initialData, setInitialData] = useState({}); const [initialData, setInitialData] = useState({});
const [confirmLoading, setConfirmLoading] = useState(false); const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
@ -43,6 +45,8 @@ 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();
setIsLoading(false); setIsLoading(false);
} catch (e) { } catch (e) {
setIsLoading(false); setIsLoading(false);
@ -53,10 +57,10 @@ export const Membership = observer(() => {
}, []); }, []);
const getData = () => { const getData = () => {
(store.authentication.userData.role === "Admin") store.authentication.userData.role === "Admin"
? store.membership.getData() ? store.membership.getData()
: store.membership.getDataBySuperior(); : store.membership.getDataBySuperior();
} };
const changeStatus = async (id, isActive) => { const changeStatus = async (id, isActive) => {
const status = isActive ? "inactive" : "active"; const status = isActive ? "inactive" : "active";
@ -76,13 +80,17 @@ export const Membership = observer(() => {
} }
}; };
const handleCancelTransaction = () => { const handleCancelTransaction = () => {
store.supplier.visibleModalTransaction = false; setIsVisibleTopUpModal(false);
setDestination(null);
}; };
const handleSubmitTransaction = async (data) => { const handleSubmitTransaction = async (data) => {
console.log(data, "isi data2");
setConfirmLoading(true); setConfirmLoading(true);
try { try {
await store.supplier.createTransaction(data); data.destination = destination;
(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) {
@ -90,8 +98,9 @@ export const Membership = observer(() => {
message.error("Failed Top Up"); message.error("Failed Top Up");
} }
setConfirmLoading(false); setConfirmLoading(false);
store.supplier.visibleModalTransaction = false; setIsVisibleTopUpModal(false);
form.resetFields(); form.resetFields();
setDestination(null);
}; };
const columns = [ const columns = [
@ -128,9 +137,20 @@ export const Membership = observer(() => {
key: "action", key: "action",
render: (text, record) => ( render: (text, record) => (
<Space size="middle"> <Space size="middle">
<Button onClick={() => changeStatus(record?.id, record?.isActive)}> <Button
type={record?.status === true ? "danger" : "primary"}
onClick={() => changeStatus(record?.id, record?.isActive)}
>
{record?.isActive === true ? "Inactive" : "Active"} {record?.isActive === true ? "Inactive" : "Active"}
</Button> </Button>
<Button
onClick={() => {
setDestination(record?.user_detail?.id);
setIsVisibleTopUpModal(true);
}}
>
<DownloadOutlined /> Top Up Saldo
</Button>
<Button <Button
onClick={() => { onClick={() => {
let record2 = record; let record2 = record;
@ -248,20 +268,15 @@ 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>
<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
@ -282,19 +297,6 @@ export const Membership = observer(() => {
</Button> </Button>
</Col> </Col>
</Row> </Row>
<Col
span={24}
style={{
textAlign: "right",
marginBottom: store.ui.mediaQuery.isMobile ? 30 : 10,
}}
>
<Button
onClick={() => (store.supplier.visibleModalTransaction = true)}
>
<DownloadOutlined /> Top Up Saldo
</Button>
</Col>
{store.ui.mediaQuery.isDesktop && ( {store.ui.mediaQuery.isDesktop && (
<Table <Table
key="1" key="1"
@ -383,7 +385,7 @@ export const Membership = observer(() => {
</div> </div>
</Card> </Card>
<Modal <Modal
visible={store.supplier.visibleModalTransaction} visible={isVisibleTopUpModal}
title="Top Up Saldo" title="Top Up Saldo"
okText="Top Up" okText="Top Up"
cancelText="Cancel" cancelText="Cancel"
@ -405,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"
@ -418,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 && (

26
src/pages/Profile/Profile.js
View File

@ -50,13 +50,23 @@ export const Profile = observer(() => {
}, },
] ]
const styleSaldoTitle = store.ui.mediaQuery.isDesktop ? {
display: "flex",
justifyContent: "center"
} : {fontSize: "0.75rem"};
const styleSaldoContent = store.ui.mediaQuery.isDesktop ? {
fontSize: '1.25rem',
display: "flex",
justifyContent: "center"
} : null;
return ( return (
<div className={["ppob-container"].join(" ")}> <div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData}/> <BreadcumbComponent data={routeData}/>
<Card> <Card>
<Title strong>Profile</Title> <Title strong>Profile</Title>
<Row style={{marginBottom: 20}}> <Row style={{marginBottom: 20}}>
<Col span={12}> <Col lg={12} xs={24}>
<Row> <Row>
<Col span={12}> <Col span={12}>
<Text strong>Name</Text> <Text strong>Name</Text>
@ -90,11 +100,15 @@ export const Profile = observer(() => {
</Col> </Col>
</Row> </Row>
</Col> </Col>
<Col span={12}> <Col lg={12} xs={24}>
<div style={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}> <Row justify={"center"}>
<Title strong level={3}>Saldo</Title> <Col lg={24} xs={12}>
<Text style={{fontSize: '1.25rem'}}>{store.authentication.profileData?.wallet}</Text> <Title strong level={3} style={styleSaldoTitle}>Saldo</Title>
</div> </Col>
<Col lg={24} xs={12}>
<Text style={styleSaldoContent}>{store.authentication.profileData?.wallet}</Text>
</Col>
</Row>
</Col> </Col>
</Row> </Row>
<Row> <Row>

10
src/store/transaction.js
View File

@ -76,6 +76,16 @@ export class Transaction {
await this.getData(); await this.getData();
return response; return response;
} }
async distribute(data) {
const response = await http.post('/transaction/distribute').send(data);
return response;
}
async distributeAdmin(data) {
const response = await http.post('/transaction/distribute-admin').send(data);
return response;
}
} }