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.sudrajat 2021-12-23 15:11:35 +07:00
commit c95aa84026
9 changed files with 200 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -120,15 +120,15 @@ export const DesktopLayout = observer(() => {
<Menu> <Menu>
<Menu.Item key="home"> <Menu.Item key="home">
<Link to={LINKS.HOME}> <Link to={LINKS.HOME}>
<HomeOutlined /> <HomeOutlined/>
<span>Home</span> <span>Beranda</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
{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}>
<FileProtectOutlined /> <FileProtectOutlined/>
<span>Membership</span> <span>Keanggotaan</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
@ -141,14 +141,14 @@ export const DesktopLayout = observer(() => {
> >
<Menu.Item key="partner"> <Menu.Item key="partner">
<Link to={LINKS.PARTNER}> <Link to={LINKS.PARTNER}>
<HomeOutlined /> <HomeOutlined/>
<span>Partner</span> <span>Rekanan</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
<Menu.Item key="commision"> <Menu.Item key="commision">
<Link to={LINKS.COMMISSION}> <Link to={LINKS.COMMISSION}>
<HomeOutlined /> <HomeOutlined/>
<span>Commision</span> <span>Komisi</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
<Menu.Item key="supplier"> <Menu.Item key="supplier">
@ -167,23 +167,23 @@ export const DesktopLayout = observer(() => {
> >
<Menu.Item key="product"> <Menu.Item key="product">
<Link to={LINKS.PRODUCT}> <Link to={LINKS.PRODUCT}>
<DatabaseOutlined /> <DatabaseOutlined/>
<span>Product</span> <span>Produk</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
{store.authentication.userData.role === "Admin" && ( {store.authentication.userData.role === "Admin" && (
<Menu.Item key="category"> <Menu.Item key="category">
<Link to={LINKS.CATEGORY}> <Link to={LINKS.CATEGORY}>
<FileAddOutlined /> <FileAddOutlined/>
<span>Category</span> <span>Kategori</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
{store.authentication.userData.role === "Admin" && ( {store.authentication.userData.role === "Admin" && (
<Menu.Item key="sub-category"> <Menu.Item key="sub-category">
<Link to={LINKS.SUBCATEGORY}> <Link to={LINKS.SUBCATEGORY}>
<FileSyncOutlined /> <FileSyncOutlined/>
<span>Sub Category</span> <span>Sub Kategori</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
@ -192,16 +192,16 @@ export const DesktopLayout = observer(() => {
{store.authentication.userData.role !== "Admin" && ( {store.authentication.userData.role !== "Admin" && (
<Menu.Item key="product"> <Menu.Item key="product">
<Link to={LINKS.PRODUCT}> <Link to={LINKS.PRODUCT}>
<DatabaseOutlined /> <DatabaseOutlined/>
<span>Product</span> <span>Produk</span>
</Link> </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}>
<ShoppingCartOutlined /> <ShoppingCartOutlined/>
<span>Transaction</span> <span>Transaksi</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
@ -214,7 +214,7 @@ export const DesktopLayout = observer(() => {
<Menu.Item key="payback-to-user"> <Menu.Item key="payback-to-user">
<Link to={LINKS.PAYBACK}> <Link to={LINKS.PAYBACK}>
<PayCircleOutlined/> <PayCircleOutlined/>
<span>Confirmation</span> <span>Konfirmasi</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
@ -222,7 +222,7 @@ export const DesktopLayout = observer(() => {
<Menu.Item key="payback-from-user"> <Menu.Item key="payback-from-user">
<Link to={LINKS.PAYBACK_CREATED}> <Link to={LINKS.PAYBACK_CREATED}>
<AlipayOutlined/> <AlipayOutlined/>
<span>Created</span> <span>Dibuat oleh Saya</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
@ -230,8 +230,8 @@ export const DesktopLayout = observer(() => {
{store.authentication.userData.role !== "Admin" && ( {store.authentication.userData.role !== "Admin" && (
<Menu.Item key="profile"> <Menu.Item key="profile">
<Link to={LINKS.PROFILE}> <Link to={LINKS.PROFILE}>
<UserOutlined /> <UserOutlined/>
<span>Profile</span> <span>Profil</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}

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

@ -2,7 +2,6 @@ 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 {
AlipayOutlined,
AppstoreOutlined, AppstoreOutlined,
DatabaseOutlined, DatabaseOutlined,
FileAddOutlined, FileAddOutlined,
@ -11,7 +10,6 @@ import {
HomeOutlined, HomeOutlined,
MenuUnfoldOutlined, MenuUnfoldOutlined,
MoneyCollectOutlined, MoneyCollectOutlined,
PayCircleOutlined,
ProfileOutlined, ProfileOutlined,
ProjectOutlined, ProjectOutlined,
ShoppingCartOutlined, ShoppingCartOutlined,
@ -132,7 +130,7 @@ export const MenuList = observer((props) => {
<Menu.Item key="payback-to-user"> <Menu.Item key="payback-to-user">
<Link to={LINKS.PAYBACK}> <Link to={LINKS.PAYBACK}>
<FileProtectOutlined/> <FileProtectOutlined/>
<span>konfirmasi</span> <span>Konfirmasi</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
@ -140,7 +138,7 @@ export const MenuList = observer((props) => {
<Menu.Item key="payback-from-user"> <Menu.Item key="payback-from-user">
<Link to={LINKS.PAYBACK_CREATED}> <Link to={LINKS.PAYBACK_CREATED}>
<FileProtectOutlined/> <FileProtectOutlined/>
<span>Buat Pembayaran</span> <span>Dibuat oleh Saya</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
@ -148,17 +146,11 @@ export const MenuList = observer((props) => {
{store.authentication.userData.role !== "Admin" && ( {store.authentication.userData.role !== "Admin" && (
<Menu.Item key="profile"> <Menu.Item key="profile">
<Link to={LINKS.PROFILE}> <Link to={LINKS.PROFILE}>
<UserOutlined /> <UserOutlined/>
<span>Profile</span> <span>Profil</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
{/*<Menu.Item key="about">*/}
{/* <Link to={'/app/about'}>*/}
{/* <CalendarOutlined/>*/}
{/* <span>About</span>*/}
{/* </Link>*/}
{/*</Menu.Item>*/}
<Menu.Divider style={{ background: "transparent", paddingTop: 15 }} /> <Menu.Divider style={{ background: "transparent", paddingTop: 15 }} />
</Menu> </Menu>
); );

5
src/pages/Membership/DetailUser.js
View File

@ -20,19 +20,18 @@ import { ModalLoaderContext } from "../../utils/modal";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { MembershipModal } from "./MembershipModal"; import { MembershipModal } from "./MembershipModal";
const { Title, Text } = Typography; const {Title, Text} = Typography;
export const DetailUser = observer(() => { export const DetailUser = observer(() => {
const store = useStore(); const store = useStore();
const modalLoader = useContext(ModalLoaderContext); const modalLoader = useContext(ModalLoaderContext);
const { id } = useParams(); const {id} = useParams();
const [visibleModal, setVisibleModal] = useState(false); const [visibleModal, setVisibleModal] = useState(false);
const [isVisibleTopUpModal, setIsVisibleTopUpModal] = useState(false); const [isVisibleTopUpModal, setIsVisibleTopUpModal] = useState(false);
const [destination, setDestination] = useState(null); const [destination, setDestination] = useState(null);
const [initialData, setInitialData] = useState({}); const [initialData, setInitialData] = useState({});
const [confirmLoading, setConfirmLoading] = useState(false); const [confirmLoading, setConfirmLoading] = useState(false);
//console.log(id)
useEffect(() => { useEffect(() => {
(async () => { (async () => {
modalLoader.setLoading(true); modalLoader.setLoading(true);

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

@ -1,4 +1,4 @@
import React, { useContext, useEffect, useState } from "react"; import React, {useContext, useEffect, useState} from "react";
import { import {
Button, Button,
Card, Card,
@ -14,19 +14,19 @@ import {
Select, Select,
Space, Space,
Table, Table,
Tag, Tag
} from "antd"; } 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 { DownloadOutlined, PlusSquareOutlined } from "@ant-design/icons"; import {DownloadOutlined, PlusSquareOutlined} from "@ant-design/icons";
import { MembershipModal } from "./MembershipModal"; import {MembershipModal} from "./MembershipModal";
import { BreadcumbComponent } from "../../component/BreadcumbComponent"; import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app"; import {LINKS} from "../../routes/app";
import { useHistory } from "react-router-dom"; import {useHistory} from "react-router-dom";
import { ModalLoaderContext } from "../../utils/modal"; import {ModalLoaderContext} from "../../utils/modal";
const { Search } = Input; const {Search} = Input;
const { Option } = Select; const {Option} = Select;
export const Membership = observer(() => { export const Membership = observer(() => {
const history = useHistory(); const history = useHistory();
const [form] = Form.useForm(); const [form] = Form.useForm();

3
src/pages/Payback/PaybackModal.js
View File

@ -3,7 +3,6 @@ import {Form, InputNumber, message, Modal, Upload,} from "antd";
import {useStore} from "../../utils/useStore"; import {useStore} from "../../utils/useStore";
import {LoadingOutlined, PlusOutlined} from "@ant-design/icons"; import {LoadingOutlined, PlusOutlined} from "@ant-design/icons";
import {ModalLoaderContext} from "../../utils/modal"; import {ModalLoaderContext} from "../../utils/modal";
import {http} from "../../utils/http";
import {appConfig} from "../../config/app"; import {appConfig} from "../../config/app";
export const PaybackModal = ({initialData}) => { export const PaybackModal = ({initialData}) => {
@ -32,7 +31,7 @@ export const PaybackModal = ({initialData}) => {
const uploadHandler = async (args) => { const uploadHandler = async (args) => {
const file = args.file; const file = args.file;
const res = await http.upload(file); const res = await store.payback.uploadImages(file);
setImage(`${appConfig.apiUrl}/config/image/${res.body.filename}`); setImage(`${appConfig.apiUrl}/config/image/${res.body.filename}`);
setResponseFilename(res.body.filename); setResponseFilename(res.body.filename);
setFileList([{ setFileList([{

192
src/pages/Product/Product.js
View File

@ -1,22 +1,19 @@
import React, { useContext, useEffect } from "react"; import React, {useContext, useEffect, useState} from "react";
import { Button, Card, Col, Input, message, Row, Upload } from "antd"; import {Button, Card, Col, Input, message, Row, Upload} from "antd";
import { import {FilterOutlined, LoadingOutlined, UploadOutlined,} from "@ant-design/icons";
FilterOutlined, import {BreadcumbComponent} from "../../component/BreadcumbComponent";
PlusSquareOutlined, import {useStore} from "../../utils/useStore";
UploadOutlined, import {observer} from "mobx-react-lite";
} from "@ant-design/icons"; import {ProductComponent} from "../../component/ProductComponent";
import { BreadcumbComponent } from "../../component/BreadcumbComponent"; import {LINKS} from "../../routes/app";
import { useStore } from "../../utils/useStore"; import {ModalLoaderContext} from "../../utils/modal";
import { observer } from "mobx-react-lite";
import { ProductComponent } from "../../component/ProductComponent";
import { LINKS } from "../../routes/app";
import { ModalLoaderContext } from "../../utils/modal";
const { Search } = Input; const {Search} = Input;
export const Product = observer(() => { export const Product = observer(() => {
const store = useStore(); const store = useStore();
const modalLoader = useContext(ModalLoaderContext); const modalLoader = useContext(ModalLoaderContext);
const [loading, setLoading] = useState(false);
useEffect(() => { useEffect(() => {
const init = async () => { const init = async () => {
@ -49,36 +46,97 @@ export const Product = observer(() => {
}, },
{ {
route: LINKS.PRODUCT, route: LINKS.PRODUCT,
name: <span style={{ fontWeight: "bold" }}>Product</span>, name: <span style={{fontWeight: "bold"}}>Product</span>,
}, },
]; ];
const beforeUpload = (file) => {
let isLt2M;
let allowedFile = [
"text/csv", "application/csv",
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
"application/vnd.ms-excel.sheet.binary.macroEnabled.12",
"application/vnd.ms-excel",
"application/vnd.ms-excel.sheet.macroEnabled.12"
];
let isValid = allowedFile.includes(file.type);
if (!isValid) {
message.error("You can only upload Excel file!");
}
isLt2M = file.size / 1024 / 1024 < 10;
if (!isLt2M) {
message.error("File must smaller than 10MB!");
}
return isValid && isLt2M ? true : Upload.LIST_IGNORE;
};
const uploadHandler = async (args) => {
const file = args.file;
const responseUpload = await store.product.uploadExcel(file);
if (responseUpload.status === 201) {
message.success("Success upload excel!");
} else {
message.error("Failed upload excel!");
setLoading(false);
}
const responseUploadProduct = await handleUploadProduct(responseUpload);
setLoading(false);
};
const handleChange = (info) => {
if (info.file.status === 'uploading') {
setLoading(true);
} else {
setLoading(false)
}
};
const handleUploadProduct = async (data) => {
const response = await store.product.uploadProduct({fileName: data.body.filename});
if (response.status === 201) {
message.success("Success Create Product by Excel!");
} else {
message.error("Failed Create Product by Excel!");
setLoading(false);
}
return response;
}
const loadingState = (
<div>
{loading ? <LoadingOutlined/> : null}
</div>
);
return ( return (
<div className={["ppob-container"].join(" ")}> <div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData} /> <BreadcumbComponent data={routeData}/>
<Card> <Card>
{store.authentication.userData.role !== "Admin" && ( {store.authentication.userData.role !== "Admin" && (
<div> <div>
<Row style={{ marginBottom: 20 }}> <Row style={{marginBottom: 20}}>
<Col span={12}> <Col span={12}>
<Button <Button
onClick={() => { onClick={() => {
store.product.visibleModalFilterProduct = true; store.product.visibleModalFilterProduct = true;
}} }}
> >
<FilterOutlined /> <FilterOutlined/>
Filter Filter
</Button> </Button>
</Col> </Col>
<Col span={12}> <Col span={12}>
<div <div
style={{ style={{
display: store.ui.mediaQuery.isMobile ? "" : "flex", display: store.ui.mediaQuery.isMobile ? "" : "flex",
justifyContent: "flex-end", justifyContent: "flex-end",
textAlign: "right", textAlign: "right",
}} }}
> >
{/* <Search {/* <Search
placeholder="input search text" placeholder="input search text"
style={{ style={{
width: store.ui.mediaQuery.isMobile ? 160 : 200, width: store.ui.mediaQuery.isMobile ? 160 : 200,
@ -87,32 +145,36 @@ export const Product = observer(() => {
}} }}
/> */} /> */}
<div <div
style={{ style={{
display: store.ui.mediaQuery.isMobile ? "" : "flex", display: store.ui.mediaQuery.isMobile ? "" : "flex",
justifyContent: "flex-end", justifyContent: "flex-end",
textAlign: "right", textAlign: "right",
}} }}
>
<Upload>
<Button
disabled={store.product.uploadBtnProduct}
style={{
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 10,
}}
icon={<UploadOutlined />}
> >
Upload Product <Upload
</Button> showUploadList={false}
</Upload> onChange={handleChange}
{/* <Button beforeUpload={(file) => beforeUpload(file)}
onClick={() => (store.product.visibleModalProduct = true)} customRequest={(args) => uploadHandler(args)}
> onRemove={(file) => {
<PlusSquareOutlined /> New setLoading(false);
</Button> */} }}
</div> >
</div> <Button
disabled={loading}
style={{
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 10,
}}
icon={<UploadOutlined/>}
>
Upload Product
</Button>
</Upload>
{loadingState}
</div>
</div>
</Col> </Col>
</Row> </Row>
</div> </div>

9
src/store/payback.js
View File

@ -93,4 +93,13 @@ export class Payback {
console.error(e); console.error(e);
} }
} }
async uploadImages(data) {
try {
const response = await http.upload(data);
return response;
} catch (e) {
console.error(e);
}
}
} }

18
src/store/product.js
View File

@ -132,6 +132,24 @@ export class Product {
console.error(e); console.error(e);
} }
} }
async uploadExcel(data) {
try {
const response = await http.upload(data);
return response;
} catch (e) {
console.error(e);
}
}
async uploadProduct(data) {
try {
const response = await http.post('/product/upload-product').send(data);
return response;
} catch (e) {
console.error(e);
}
}
} }

11
src/store/transaction.js
View File

@ -22,14 +22,15 @@ export class Transaction {
filterSubCategory = null; filterSubCategory = null;
pageHistoryTransaction = 0; pageHistoryTransaction = 0;
pageHistoryTopUp = 0;
pageSizeHistoryTransaction = 10 pageSizeHistoryTransaction = 10
dataHistoryTransaction = []; dataHistoryTransaction = [];
total_dataHistoryTransaction = 0; total_dataHistoryTransaction = 0;
dataHistoryTopUp=[]; pageHistoryTopUp = 0;
pageSizeHistoryTopUp = 10;
dataHistoryTopUp = [];
total_dataHistoryTopUp = 0; total_dataHistoryTopUp = 0;
constructor(ctx) { constructor(ctx) {
this.ctx = ctx; this.ctx = ctx;
makeAutoObservable(this); makeAutoObservable(this);
@ -80,9 +81,7 @@ export class Transaction {
async getDataHistoryTopUp(id) { async getDataHistoryTopUp(id) {
try { try {
//console.log("Top up") const response = await http.get(`/transaction/history-deposit?page=${this.pageHistoryTopUp}&pageSize=${this.pageSizeHistoryTopUp}&user-destination=${id}`);
const response = await http.get(`/transaction/history-deposit?page=${this.pageHistoryTopUp}&user-destination=${id}`);
//console.log(response,"data")
this.dataHistoryTopUp = response.body.data ?? [] this.dataHistoryTopUp = response.body.data ?? []
this.total_dataHistoryTopUp = response?.body?.count ?? 0 this.total_dataHistoryTopUp = response?.body?.count ?? 0
} catch (e) { } catch (e) {