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

Page Category

Browse Source
This commit is contained in:
ajat91 2021-12-15 15:29:01 +07:00
commit d54e2a8669
7 changed files with 571 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -173,7 +173,7 @@
[ [
"@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-class-properties",
{ {
"loose": false "loose": true
} }
] ]
] ]

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

@ -1,32 +1,32 @@
import React, { useState } from "react"; import React, {useState} from "react";
import { Button, Drawer, Layout, Menu, Popover, Typography } from "antd"; import {Button, Drawer, Layout, Menu, Popover, Typography} from "antd";
import { MenuList } from "./MenuList"; import {MenuList} from "./MenuList";
import { Link, useHistory } from "react-router-dom"; import {Link, useHistory} from "react-router-dom";
import { HomeOutlined, MenuOutlined, UserOutlined } from "@ant-design/icons"; import {HomeOutlined, MenuOutlined, UserOutlined} 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";
import { observer } from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import { useMediaQuery } from "react-responsive"; import {useMediaQuery} from "react-responsive";
const { Text, Paragraph } = Typography; const {Text, Paragraph} = Typography;
const { Header, Content, Sider } = Layout; const {Header, Content, Sider} = Layout;
const { SubMenu } = Menu; const {SubMenu} = Menu;
export const DesktopLayout = observer(() => { export const DesktopLayout = observer(() => {
let history = useHistory(); let history = useHistory();
const xl = useMediaQuery({ minWidth: 1024 }); const xl = useMediaQuery({minWidth: 1024});
const store = useStore(); const store = useStore();
const [clicked, setClicked] = useState(false); const [clicked, setClicked] = useState(false);
return ( return (
<Layout <Layout
theme={"light"} theme={"light"}
className={"transparent"} className={"transparent"}
hasSider={store.ui.mediaQuery.isDesktop} hasSider={store.ui.mediaQuery.isDesktop}
style={{ style={{
paddingLeft: xl ? "calc(70vw - 1024px)" : "0", paddingLeft: xl ? "calc(70vw - 1024px)" : "0",
display: "flex", display: "flex",
// minWidth: 1024, // minWidth: 1024,
width: "100%", width: "100%",
height: "100%", height: "100%",
position: "relative", position: "relative",
@ -138,39 +138,45 @@ export const DesktopLayout = observer(() => {
<span>Commision</span> <span>Commision</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
<Menu.Item key="supplier"> <Menu.Item key="supplier">
<Link to={LINKS.SUPPLIER}> <Link to={LINKS.SUPPLIER}>
<HomeOutlined /> <HomeOutlined/>
<span>Supplier</span> <span>Supplier</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
</SubMenu> </SubMenu>
)} )}
{store.authentication.userData.role !== "Retail" && ( {store.authentication.userData.role !== "Retail" && (
<Menu.Item key="product"> <Menu.Item key="product">
<Link to={LINKS.PRODUCT}> <Link to={LINKS.PRODUCT}>
<HomeOutlined /> <HomeOutlined/>
<span>Product</span> <span>Product</span>
</Link> </Link>
</Menu.Item>
)}
<Menu.Item key="payback">
<Link to={LINKS.PAYBACK}>
<HomeOutlined/>
<span>Payback</span>
</Link>
</Menu.Item> </Menu.Item>
)} {store.authentication.userData.role === "Retail" && (
{store.authentication.userData.role === "Retail" && ( <Menu.Item key="transaction">
<Menu.Item key="transaction"> <Link to={LINKS.TRANSACTION}>
<Link to={LINKS.TRANSACTION}> <HomeOutlined/>
<HomeOutlined /> <span>Transaction</span>
<span>Transaction</span> </Link>
</Link> </Menu.Item>
)}
<Menu.Item key="profile">
<Link to={LINKS.PROFILE}>
<UserOutlined/>
<span>Profile</span>
</Link>
</Menu.Item> </Menu.Item>
)} <Menu.Divider
<Menu.Item key="profile"> style={{background: "transparent", paddingTop: 15}}
<Link to={LINKS.PROFILE}> />
<UserOutlined />
<span>Profile</span>
</Link>
</Menu.Item>
<Menu.Divider
style={{ background: "transparent", paddingTop: 15 }}
/>
</Menu> </Menu>
</div> </div>
</Drawer> </Drawer>

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

@ -1,38 +1,40 @@
import React, { useEffect, useState } from "react"; import React, {useEffect, useState} from "react";
import { Menu } from "antd"; import {Menu} from "antd";
import { Link } from "react-router-dom"; import {Link} from "react-router-dom";
import { import {
HomeOutlined,
UserOutlined,
AppstoreOutlined, AppstoreOutlined,
MenuUnfoldOutlined,
DatabaseOutlined, DatabaseOutlined,
FileProtectOutlined,
HomeOutlined,
MenuUnfoldOutlined,
MoneyCollectOutlined, MoneyCollectOutlined,
ProjectOutlined, ProjectOutlined,
FileProtectOutlined, FileProtectOutlined,
FileAddOutlined, FileAddOutlined,
FileSyncOutlined, FileSyncOutlined,
ProfileOutlined ProfileOutlined,
UserOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
import { observer } from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import { useStore } from "../../utils/useStore"; import {useStore} from "../../utils/useStore";
import { LINKS } from "../../routes/app"; import {LINKS} from "../../routes/app";
const { SubMenu } = Menu; const {SubMenu} = Menu;
export const MenuList = observer((props) => { export const MenuList = observer((props) => {
const store = useStore(); const store = useStore();
useEffect(() => {}, []); useEffect(() => {
}, []);
const [setKeys, setSetKeys] = useState(["dashboard"]); const [setKeys, setSetKeys] = useState(["dashboard"]);
return ( return (
<Menu <Menu
defaultOpenKeys={["sub4"]} defaultOpenKeys={["sub4"]}
theme="light" theme="light"
style={{ style={{
backgroundColor: "transparent", backgroundColor: "transparent",
borderRightWidth: 0, borderRightWidth: 0,
fontWeight: 400, fontWeight: 400,
paddingLeft: 0, paddingLeft: 0,
}} }}
@ -116,11 +118,31 @@ export const MenuList = observer((props) => {
<Link to={LINKS.TRANSACTION}> <Link to={LINKS.TRANSACTION}>
<HomeOutlined /> <HomeOutlined />
<span>Transaction</span> <span>Transaction</span>
</Link>
{store.authentication.userData.role !== "Retail" && (
<Menu.Item key="product">
<Link to={LINKS.PRODUCT}>
<DatabaseOutlined/>
<span>Product</span>
</Link>
</Menu.Item>
)}
<Menu.Item key="payback">
<Link to={LINKS.PAYBACK}>
<DatabaseOutlined/>
<span>Payback</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} {store.authentication.userData.role === ("Retail" || "Admin") && (
<Menu.Item key="profile"> <Menu.Item key="transaction">
<Link to={LINKS.PROFILE}> <Link to={LINKS.TRANSACTION}>
<HomeOutlined/>
<span>Transaction</span>
</Link>
</Menu.Item>
)}
<Menu.Item key="profile">
<Link to={LINKS.PROFILE}>
<UserOutlined /> <UserOutlined />
<span>Profile</span> <span>Profile</span>
</Link> </Link>
@ -132,6 +154,6 @@ export const MenuList = observer((props) => {
{/* </Link>*/} {/* </Link>*/}
{/*</Menu.Item>*/} {/*</Menu.Item>*/}
<Menu.Divider style={{ background: "transparent", paddingTop: 15 }} /> <Menu.Divider style={{ background: "transparent", paddingTop: 15 }} />
</Menu> </Menu.Item>
); );
}); });

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

@ -1,29 +1,13 @@
import React, { useEffect, useState } from "react"; import React, {useEffect, useState} from "react";
import { import {Button, Card, Col, Divider, Input, List, message, Modal, Row, Space, Table, Tag,} from "antd";
Button, import {useStore} from "../../utils/useStore";
Card, import {observer} from "mobx-react-lite";
Col, import {ExclamationCircleOutlined, FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
Divider, import {MembershipModal} from "./MembershipModal";
Input, import {BreadcumbComponent} from "../../component/BreadcumbComponent";
List, import {LINKS} from "../../routes/app";
message,
Modal,
Row,
Space,
Table,
Tag,
} from "antd";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import {
ExclamationCircleOutlined,
FilterOutlined,
PlusSquareOutlined,
} from "@ant-design/icons";
import { MembershipModal } from "./MembershipModal";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
const { Search } = Input; const {Search} = Input;
export const Membership = observer(() => { export const Membership = observer(() => {
const store = useStore(); const store = useStore();
@ -105,7 +89,7 @@ export const Membership = observer(() => {
const routeData = [ const routeData = [
{ {
route: "/app/home", route: LINKS.HOME,
name: "Home", name: "Home",
}, },
{ {

286
src/pages/Payback/Payback.js Normal file
View File

@ -0,0 +1,286 @@
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;
export const Payback = observer(() => {
const store = useStore();
const [visibleModal, setVisibleModal] = useState(false);
const [confirmLoading, setConfirmLoading] = useState(false);
const [initialData, setInitialData] = useState({});
// useEffect(() => {
// // const init = async () => {
// // try {
// // setIsLoading(true);
// // await store.membership.getData();
// // await store.role.getData();
// // setIsLoading(false);
// // } catch (e) {
// // setIsLoading(false);
// // }
// // };
//
// // init();
// }, []);
const dummyData = [
{
id: 1,
name: "John Doe",
picture: "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
amount: "Rp. 1.000.000",
},
{
id: 1,
name: "John Doe",
picture: "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
amount: "Rp. 1.000.000",
},
{
id: 1,
name: "John Doe",
picture: "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
amount: "Rp. 1.000.000",
},
{
id: 1,
name: "John Doe",
picture: "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
amount: "Rp. 1.000.000",
},
]
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name",
},
{
title: "Picture",
dataIndex: "picture",
key: "picture",
render: (text, record) => (
<Image
src={record.picture}
style={{width: 50, height: 50}}
shape="circle"
alt="avatar"
/>
),
},
{
title: "Amount",
dataIndex: "amount",
key: "amount",
},
{
title: "Action",
key: "action",
width: 100,
render: (text, record) => (
<Space size="middle">
<Button
onClick={async () => {
await handleAction(record, 'accept');
}}
icon={<CheckCircleOutlined/>}
style={{
backgroundColor: "#1bb91d",
color: "#fff",
borderColor: "#1bb91d",
}}
>
Accept
</Button>
<Button
onClick={async () => {
await handleAction(record, 'reject');
}}
icon={<CloseOutlined/>}
style={{
backgroundColor: "#ff1c1c",
color: "#fff",
borderColor: "#ff1c1c",
}}
>
Reject
</Button>
</Space>
),
},
];
const routeData = [
{
route: LINKS.HOME,
name: "Home",
},
{
route: LINKS.PAYBACK,
name: <span style={{fontWeight: "bold"}}>Payback</span>,
},
];
const onSubmit = async (data) => {
setConfirmLoading(true);
try {
// await store.membership.create(data);
// message.success("Success Add New Member");
// await store.membership.getData();
} catch (e) {
console.error(e, "apa errornya");
message.error("Failed Add Member");
}
setConfirmLoading(false);
setVisibleModal(false);
};
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}/>
<Card>
<div>
<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: store.ui.mediaQuery.isMobile ? 160 : 200,
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}}
/>
<Button
onClick={() => {
setInitialData({});
setVisibleModal(true);
}}
>
<PlusSquareOutlined/> New
</Button>
</Col>
</Row>
{store.ui.mediaQuery.isDesktop && (
<Table
key="1"
hasEmpty
columns={columns}
dataSource={dummyData}
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;
// }}
/>
)}
{store.ui.mediaQuery.isMobile && (
<List
itemLayout="horizontal"
position={"top"}
// pagination={{
// onChange: (page) => {
// store.membership.pageSize = page.pageSize;
// store.membership.page = page.current;
// store.membership.getData();
// },
// pageSize: store.membership.pageSize,
// total: store.membership.total_data,
// current: store.membership.page,
// style: {marginBottom: "1rem", marginRight: "1rem"},
// }}
dataSource={dummyData}
style={{padding: 0}}
renderItem={(item) => {
return (
<div>
<List.Item
key={item.id}
style={{
backgroundColor: "#ffffff",
paddingTop: 0,
paddingBottom: 0,
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
}}
>
<List.Item.Meta
className={["cariparkir-container"].join(" ")}
title={item.name}
description={
<div style={{}}>
<Image src={item.picture} preview={false}/>
</div>
}
/>
<div style={{marginRight: 16}}>
<p
style={{
fontSize: 9,
margin: 0,
}}
>
{item.amount}
</p>
</div>
</List.Item>
<Divider plain style={{margin: 0}}/>
</div>
);
}}
/>
)}
</div>
</Card>
<PaybackModal
visible={visibleModal}
confirmLoading={confirmLoading}
initialData={initialData}
onCreate={async (data) => {
await onSubmit(data);
}}
onCancel={() => {
setInitialData({});
setVisibleModal(false);
}}
/>
</div>
);
});

164
src/pages/Payback/PaybackModal.js Normal file
View File

@ -0,0 +1,164 @@
import React, {useState} from 'react';
import {Button, Form, Image, Input, message, Modal, Upload} from 'antd';
import {useStore} from "../../utils/useStore";
import {appConfig} from "../../config/app";
import {LoadingOutlined, UploadOutlined} from "@ant-design/icons";
export const PaybackModal = ({
visible,
onCreate,
onCancel,
initialData,
}) => {
const [form] = Form.useForm();
const store = useStore();
const [fileList, setFileList] = useState([]);
const [previewTitle, setPreviewTitle] = useState("");
const [previewImage, setPreviewImage] = useState("");
const [loading, setLoading] = useState(false);
const [fileUrl, setFileUrl] = useState("");
const firstIndexFileList = fileList[0];
const beforeUpload = (file) => {
let isPdf, isLt2M;
let allowedFile = ['image/jpeg', 'image/png', "application/pdf"];
let isValid = allowedFile.includes(file.type)
if (!isValid) {
message.error("You can only upload PDF or Image file!");
}
// return file.type === 'application/pdf' ? true : Upload.LIST_IGNORE;
isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error("File must smaller than 2MB!");
}
return isValid && isLt2M ? true : Upload.LIST_IGNORE;
}
const handlePreview = async (file) => {
const fileUrl = appConfig.apiUrl + file.response.path;
setPreviewTitle(file.url?.substring(file.url?.lastIndexOf("/") + 1));
};
const handleChange = ({fileList}) => {
setFileList(fileList);
if (fileList.length && fileList[0].status === "done") {
form.setFieldsValue({
file_url: fileList[0].response.path,
});
console.log(fileList, "apaaaaaa");
setFileUrl(fileList[0].response.path);
setPreviewImage(fileList[0].response.path);
setPreviewTitle(fileList[0].name);
}
};
const uploadButton = (
<div>
{loading ? (
<LoadingOutlined/>
) : (
<Button icon={<UploadOutlined/>}>Click to Upload</Button>
)}
</div>
);
const previewUpload = (
<Image className="w-full h-full" preview={false}
src={!fileUrl ? null : `${appConfig.apiUrl}${fileUrl ?? ""}`}/>
)
return (
<Modal
visible={visible}
title={"Create a new Payback"}
okText={"Create"}
cancelText="Cancel"
onCancel={() => {
form.resetFields()
onCancel()
}}
onOk={() => {
form
.validateFields()
.then(values => {
onCreate(values);
form.resetFields()
})
.catch(info => {
console.log('Validate Failed:', info);
});
}}
>
<Form
form={form}
layout="vertical"
name="form_in_modal"
initialValues={initialData}
>
<Form.Item
name="name"
label="name"
rules={[{required: true, message: 'Please input Name!'}]}
>
<Input/>
</Form.Item>
<Form.Item
label="Upload Picture"
name="picture"
>
<div style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}>
<div>
<Upload
name="file"
maxCount={1}
className="avatar-uploader"
// listType="picture-card"
action={appConfig.apiUrl + "/files"}
fileList={fileList}
beforeUpload={beforeUpload}
onPreview={handlePreview}
onChange={handleChange}
>
{!firstIndexFileList ? uploadButton : null}
</Upload>
<h5
style={{
marginTop: 12,
color: "rgba(0, 0, 0, 0.45)",
}}
>
Max size of file 2 mb
</h5>
</div>
<div>
<h5>Preview</h5>
<div>
<img
src={previewImage}
alt="preview"
style={{width: "100%"}}
/>
</div>
<h5>{previewTitle}</h5>
<h5>{previewUpload}
{previewTitle && <span>{`${previewTitle ?? ""}`}</span>}</h5>
</div>
</div>
</Form.Item>
<Form.Item
name="amount"
label="amount"
rules={[{required: true, message: 'Please input Amount!'}]}
>
<Input/>
</Form.Item>
</Form>
</Modal>
);
};

5
src/routes/app.js
View File

@ -9,6 +9,7 @@ import {Commission} from "../pages/Config/Commission";
import {Partner} from "../pages/Config/Partner"; import {Partner} from "../pages/Config/Partner";
import {Supplier} from "../pages/Config/Supplier"; import {Supplier} from "../pages/Config/Supplier";
import {Category} from "../pages/Product/Category"; import {Category} from "../pages/Product/Category";
import {Payback} from "../pages/Payback/Payback";
export const LINKS = { export const LINKS = {
@ -22,6 +23,7 @@ export const LINKS = {
COMMISSION: "/app/commission", COMMISSION: "/app/commission",
SUPPLIER: "/app/supplier", SUPPLIER: "/app/supplier",
CATEGORY: "/app/category", CATEGORY: "/app/category",
PAYBACK: "/app/payback",
}; };
@ -51,6 +53,9 @@ export const AppRoute = () => {
<Route path={LINKS.TRANSACTION}> <Route path={LINKS.TRANSACTION}>
<Transaction/> <Transaction/>
</Route> </Route>
<Route path={LINKS.PAYBACK}>
<Payback/>
</Route>
<Route path={LINKS.ABOUT}> <Route path={LINKS.ABOUT}>
<About/> <About/>
</Route> </Route>