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.Item key="home">
<Link to={LINKS.HOME}>
<HomeOutlined />
<span>Home</span>
<HomeOutlined/>
<span>Beranda</span>
</Link>
</Menu.Item>
{store.authentication.userData.role !== "Retail" && (
<Menu.Item key="membership">
<Link to={LINKS.MEMBERSHIP}>
<FileProtectOutlined />
<span>Membership</span>
<FileProtectOutlined/>
<span>Keanggotaan</span>
</Link>
</Menu.Item>
)}
@ -141,14 +141,14 @@ export const DesktopLayout = observer(() => {
>
<Menu.Item key="partner">
<Link to={LINKS.PARTNER}>
<HomeOutlined />
<span>Partner</span>
<HomeOutlined/>
<span>Rekanan</span>
</Link>
</Menu.Item>
<Menu.Item key="commision">
<Link to={LINKS.COMMISSION}>
<HomeOutlined />
<span>Commision</span>
<HomeOutlined/>
<span>Komisi</span>
</Link>
</Menu.Item>
<Menu.Item key="supplier">
@ -167,23 +167,23 @@ export const DesktopLayout = observer(() => {
>
<Menu.Item key="product">
<Link to={LINKS.PRODUCT}>
<DatabaseOutlined />
<span>Product</span>
<DatabaseOutlined/>
<span>Produk</span>
</Link>
</Menu.Item>
{store.authentication.userData.role === "Admin" && (
<Menu.Item key="category">
<Link to={LINKS.CATEGORY}>
<FileAddOutlined />
<span>Category</span>
<FileAddOutlined/>
<span>Kategori</span>
</Link>
</Menu.Item>
)}
{store.authentication.userData.role === "Admin" && (
<Menu.Item key="sub-category">
<Link to={LINKS.SUBCATEGORY}>
<FileSyncOutlined />
<span>Sub Category</span>
<FileSyncOutlined/>
<span>Sub Kategori</span>
</Link>
</Menu.Item>
)}
@ -192,16 +192,16 @@ export const DesktopLayout = observer(() => {
{store.authentication.userData.role !== "Admin" && (
<Menu.Item key="product">
<Link to={LINKS.PRODUCT}>
<DatabaseOutlined />
<span>Product</span>
<DatabaseOutlined/>
<span>Produk</span>
</Link>
</Menu.Item>
)}
{store.authentication.userData.role === "Retail" && (
<Menu.Item key="transaction">
<Link to={LINKS.TRANSACTION}>
<ShoppingCartOutlined />
<span>Transaction</span>
<ShoppingCartOutlined/>
<span>Transaksi</span>
</Link>
</Menu.Item>
)}
@ -214,7 +214,7 @@ export const DesktopLayout = observer(() => {
<Menu.Item key="payback-to-user">
<Link to={LINKS.PAYBACK}>
<PayCircleOutlined/>
<span>Confirmation</span>
<span>Konfirmasi</span>
</Link>
</Menu.Item>
)}
@ -222,7 +222,7 @@ export const DesktopLayout = observer(() => {
<Menu.Item key="payback-from-user">
<Link to={LINKS.PAYBACK_CREATED}>
<AlipayOutlined/>
<span>Created</span>
<span>Dibuat oleh Saya</span>
</Link>
</Menu.Item>
)}
@ -230,8 +230,8 @@ export const DesktopLayout = observer(() => {
{store.authentication.userData.role !== "Admin" && (
<Menu.Item key="profile">
<Link to={LINKS.PROFILE}>
<UserOutlined />
<span>Profile</span>
<UserOutlined/>
<span>Profil</span>
</Link>
</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 {Link} from "react-router-dom";
import {
AlipayOutlined,
AppstoreOutlined,
DatabaseOutlined,
FileAddOutlined,
@ -11,7 +10,6 @@ import {
HomeOutlined,
MenuUnfoldOutlined,
MoneyCollectOutlined,
PayCircleOutlined,
ProfileOutlined,
ProjectOutlined,
ShoppingCartOutlined,
@ -132,7 +130,7 @@ export const MenuList = observer((props) => {
<Menu.Item key="payback-to-user">
<Link to={LINKS.PAYBACK}>
<FileProtectOutlined/>
<span>konfirmasi</span>
<span>Konfirmasi</span>
</Link>
</Menu.Item>
)}
@ -140,7 +138,7 @@ export const MenuList = observer((props) => {
<Menu.Item key="payback-from-user">
<Link to={LINKS.PAYBACK_CREATED}>
<FileProtectOutlined/>
<span>Buat Pembayaran</span>
<span>Dibuat oleh Saya</span>
</Link>
</Menu.Item>
)}
@ -148,17 +146,11 @@ export const MenuList = observer((props) => {
{store.authentication.userData.role !== "Admin" && (
<Menu.Item key="profile">
<Link to={LINKS.PROFILE}>
<UserOutlined />
<span>Profile</span>
<UserOutlined/>
<span>Profil</span>
</Link>
</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>
);

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

@ -20,19 +20,18 @@ import { ModalLoaderContext } from "../../utils/modal";
import { useParams } from "react-router-dom";
import { MembershipModal } from "./MembershipModal";
const { Title, Text } = Typography;
const {Title, Text} = Typography;
export const DetailUser = observer(() => {
const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
const { id } = useParams();
const {id} = useParams();
const [visibleModal, setVisibleModal] = useState(false);
const [isVisibleTopUpModal, setIsVisibleTopUpModal] = useState(false);
const [destination, setDestination] = useState(null);
const [initialData, setInitialData] = useState({});
const [confirmLoading, setConfirmLoading] = useState(false);
//console.log(id)
useEffect(() => {
(async () => {
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 {
Button,
Card,
@ -14,19 +14,19 @@ import {
Select,
Space,
Table,
Tag,
Tag
} from "antd";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { DownloadOutlined, PlusSquareOutlined } from "@ant-design/icons";
import { MembershipModal } from "./MembershipModal";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app";
import { useHistory } from "react-router-dom";
import { ModalLoaderContext } from "../../utils/modal";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {DownloadOutlined, PlusSquareOutlined} from "@ant-design/icons";
import {MembershipModal} from "./MembershipModal";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app";
import {useHistory} from "react-router-dom";
import {ModalLoaderContext} from "../../utils/modal";
const { Search } = Input;
const { Option } = Select;
const {Search} = Input;
const {Option} = Select;
export const Membership = observer(() => {
const history = useHistory();
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 {LoadingOutlined, PlusOutlined} from "@ant-design/icons";
import {ModalLoaderContext} from "../../utils/modal";
import {http} from "../../utils/http";
import {appConfig} from "../../config/app";
export const PaybackModal = ({initialData}) => {
@ -32,7 +31,7 @@ export const PaybackModal = ({initialData}) => {
const uploadHandler = async (args) => {
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}`);
setResponseFilename(res.body.filename);
setFileList([{

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

@ -1,22 +1,19 @@
import React, { useContext, useEffect } from "react";
import { Button, Card, Col, Input, message, Row, Upload } from "antd";
import {
FilterOutlined,
PlusSquareOutlined,
UploadOutlined,
} from "@ant-design/icons";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { ProductComponent } from "../../component/ProductComponent";
import { LINKS } from "../../routes/app";
import { ModalLoaderContext } from "../../utils/modal";
import React, {useContext, useEffect, useState} from "react";
import {Button, Card, Col, Input, message, Row, Upload} from "antd";
import {FilterOutlined, LoadingOutlined, UploadOutlined,} from "@ant-design/icons";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {useStore} from "../../utils/useStore";
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(() => {
const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
const [loading, setLoading] = useState(false);
useEffect(() => {
const init = async () => {
@ -49,36 +46,97 @@ export const Product = observer(() => {
},
{
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 (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData} />
<Card>
{store.authentication.userData.role !== "Admin" && (
<div>
<Row style={{ marginBottom: 20 }}>
<Col span={12}>
<Button
onClick={() => {
store.product.visibleModalFilterProduct = true;
}}
>
<FilterOutlined />
Filter
</Button>
</Col>
<Col span={12}>
<div
style={{
display: store.ui.mediaQuery.isMobile ? "" : "flex",
justifyContent: "flex-end",
textAlign: "right",
}}
>
{/* <Search
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData}/>
<Card>
{store.authentication.userData.role !== "Admin" && (
<div>
<Row style={{marginBottom: 20}}>
<Col span={12}>
<Button
onClick={() => {
store.product.visibleModalFilterProduct = true;
}}
>
<FilterOutlined/>
Filter
</Button>
</Col>
<Col span={12}>
<div
style={{
display: store.ui.mediaQuery.isMobile ? "" : "flex",
justifyContent: "flex-end",
textAlign: "right",
}}
>
{/* <Search
placeholder="input search text"
style={{
width: store.ui.mediaQuery.isMobile ? 160 : 200,
@ -87,32 +145,36 @@ export const Product = observer(() => {
}}
/> */}
<div
style={{
display: store.ui.mediaQuery.isMobile ? "" : "flex",
justifyContent: "flex-end",
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 />}
<div
style={{
display: store.ui.mediaQuery.isMobile ? "" : "flex",
justifyContent: "flex-end",
textAlign: "right",
}}
>
Upload Product
</Button>
</Upload>
{/* <Button
onClick={() => (store.product.visibleModalProduct = true)}
>
<PlusSquareOutlined /> New
</Button> */}
</div>
</div>
<Upload
showUploadList={false}
onChange={handleChange}
beforeUpload={(file) => beforeUpload(file)}
customRequest={(args) => uploadHandler(args)}
onRemove={(file) => {
setLoading(false);
}}
>
<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>
</Row>
</div>

9
src/store/payback.js
View File

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