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

post payback

Browse Source
This commit is contained in:
ajat91.sudrajat 2021-12-20 13:42:24 +07:00
parent c73f642b93
commit 5f062ed630
7 changed files with 609 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -124,12 +124,20 @@ export const MenuList = observer((props) => {
</Link>
</Menu.Item>
)}
<Menu.Item key="payback">
<Link to={LINKS.PAYBACK}>
<DatabaseOutlined />
<span>Payback</span>
</Link>
</Menu.Item>
<SubMenu key="payback-main" icon={<ProfileOutlined />} title="Payback">
<Menu.Item key="payback-to-user">
<Link to={LINKS.PAYBACK}>
<DatabaseOutlined />
<span>Payback</span>
</Link>
</Menu.Item>
<Menu.Item key="payback-from-user">
<Link to={LINKS.PAYBACKFROMUSER}>
<DatabaseOutlined />
<span>Payback User</span>
</Link>
</Menu.Item>
</SubMenu>
{store.authentication.userData.role !== "Admin" && (
<Menu.Item key="profile">
<Link to={LINKS.PROFILE}>

75
src/pages/Payback/Payback.js
View File

@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { useState ,useEffect} from "react";
import {
Button,
Card,
@ -31,56 +31,25 @@ export const Payback = observer(() => {
const [visibleModal, setVisibleModal] = useState(false);
const [confirmLoading, setConfirmLoading] = useState(false);
const [initialData, setInitialData] = useState({});
//const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);
// useEffect(() => {
// // const init = async () => {
// // try {
// // setIsLoading(true);
// // await store.membership.getData();
// // await store.role.getData();
// // setIsLoading(false);
// // } catch (e) {
// // setIsLoading(false);
// // }
// // };
//
// // init();
// }, []);
const dummyData = [
{
key: "1",
id: 1,
name: "John Doe",
picture:
"https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
amount: "Rp. 1.000.000",
},
{
key: "2",
id: 1,
name: "John Doe",
picture:
"https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
amount: "Rp. 1.000.000",
},
{
key: "3",
id: 1,
name: "John Doe",
picture:
"https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
amount: "Rp. 1.000.000",
},
{
key: "4",
id: 1,
name: "John Doe",
picture:
"https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
amount: "Rp. 1.000.000",
},
];
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
await store.payback.getDataUser();
//await store.role.getData();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
init();
}, []);
const columns = [
{
@ -90,8 +59,8 @@ export const Payback = observer(() => {
},
{
title: "Picture",
dataIndex: "picture",
key: "picture",
dataIndex: "image_prove",
key: "image_prove",
render: (text, record) => (
<Image
src={record.picture}
@ -210,7 +179,7 @@ export const Payback = observer(() => {
key="1"
hasEmpty
columns={columns}
dataSource={dummyData}
dataSource={store.payback.data}
bordered
// pagination={{
// pageSize: store.membership.pageSize,
@ -245,7 +214,7 @@ export const Payback = observer(() => {
// current: store.membership.page,
// style: {marginBottom: "1rem", marginRight: "1rem"},
// }}
dataSource={dummyData}
dataSource={store.payback.data}
style={{ padding: 0 }}
renderItem={(item) => {
return (

277
src/pages/Payback/PaybackFromUser.js Normal file
View File

@ -0,0 +1,277 @@
import React, { useState ,useEffect} 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 PaybackFromUser = observer(() => {
const store = useStore();
const [visibleModal, setVisibleModal] = useState(false);
const [confirmLoading, setConfirmLoading] = useState(false);
const [initialData, setInitialData] = useState({});
//const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
await store.payback.getData();
//await store.role.getData();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
init();
}, []);
const columns = [
// {
// title: "Name",
// dataIndex: "name",
// key: "name",
// },
{
title: "Picture",
dataIndex: "image_prove",
key: "image_prove",
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>
// ),
// },
];
if(store.authentication.userData.role === "Retail") columns.pop();
const routeData = [
{
route: LINKS.HOME,
name: "Home",
},
{
route: LINKS.PAYBACKFROMUSER,
name: <span style={{ fontWeight: "bold" }}>Payback User</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(" ")}>
<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,
}}
/>
{store.authentication.userData.role !== "Admin" && (
<Button
onClick={() => {
setInitialData({});
setVisibleModal(true);
}}
>
<PlusSquareOutlined /> New
</Button>
)}
</Col>
</Row>
{store.ui.mediaQuery.isDesktop && (
<Table
key="1"
hasEmpty
columns={columns}
dataSource={store.payback.data}
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={store.payback.data}
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>
);
});

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

@ -1,164 +1,206 @@
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";
import React, { useState, useEffect } 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();
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 [isLoading, setIsLoading] = useState(false);
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];
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
//await store.membership.getData();
//await store.role.getData();
await store.authentication.getProfile();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
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;
init();
}, []);
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 ?? ""}`}
/>
);
const handleSubmit = async (data) => {
console.log(data, "isi data2");
try {
await store.payback.create(data);
message.success("Success Add New Member");
} catch (e) {
console.log(e, "apa errornya");
message.error("Failed Add Member");
}
const handlePreview = async (file) => {
const fileUrl = appConfig.apiUrl + file.response.path;
setPreviewTitle(file.url?.substring(file.url?.lastIndexOf("/") + 1));
};
store.payback.visibleModalPayback = false;
form.resetFields();
};
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);
});
}}
return (
<Modal
visible={visible}
title={"Create a new Payback"}
okText={"Create"}
cancelText="Cancel"
onCancel={() => {
form.resetFields();
onCancel();
}}
onOk={() => {
form
.validateFields()
.then((values) => {
handleSubmit(values);
console.log(values);
form.resetFields();
})
.catch((info) => {
console.log("Validate Failed:", info);
});
}}
>
<Form
form={form}
layout="vertical"
name="form_in_modal"
initialValues={initialData}
>
<Form.Item
name="destination"
label="destination"
rules={[{ required: true, message: "Please input Name!" }]}
initialValue={store.authentication.profileData.superior?.id}
>
<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>
);
<Input />
</Form.Item>
<Form.Item
label="Upload Picture"
name="image_prove"
initialValue={"tes"}
>
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<div>
<Upload
name="image_prove"
maxCount={1}
className="avatar-uploader"
// listType="picture-card"
action={appConfig.apiUrl + "/files"}
fileList={fileList}
beforeUpload={beforeUpload}
onPreview={handlePreview}
onChange={handleChange}
defaultValue={"tes"}
>
{!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

@ -10,6 +10,7 @@ import {Partner} from "../pages/Config/Partner";
import {Supplier} from "../pages/Config/Supplier";
import {Category} from "../pages/Product/Category";
import {Payback} from "../pages/Payback/Payback";
import {PaybackFromUser} from "../pages/Payback/PaybackFromUser";
import {Subcategory} from "../pages/Product/Subcategory";
export const LINKS = {
@ -24,6 +25,7 @@ export const LINKS = {
SUPPLIER: "/app/supplier",
CATEGORY: "/app/category",
PAYBACK: "/app/payback",
PAYBACKFROMUSER: "/app/payback-from-user",
SUBCATEGORY: "/app/subcategory",
};
@ -36,6 +38,9 @@ export const AppRoute = () => {
<Route path={LINKS.COMMISSION}>
<Commission/>
</Route>
<Route path={LINKS.PAYBACKFROMUSER}>
<PaybackFromUser/>
</Route>
<Route path={LINKS.CATEGORY}>
<Category/>
</Route>

3
src/store/index.js
View File

@ -10,7 +10,7 @@ import { Transaction } from "./transaction";
import { TokenUtil } from "../utils/token";
import { Category } from "./category";
import { Subcategory } from "./subcategory";
import { Payback } from "./payback";
import { Role } from "./role";
export class Store {
@ -23,6 +23,7 @@ export class Store {
supplier = new Supplier(this);
commission = new Commission(this);
category = new Category(this);
payback = new Payback(this);
transaction = new Transaction(this);
subcategory = new Subcategory(this);
role = new Role(this);

91
src/store/payback.js Normal file
View File

@ -0,0 +1,91 @@
import { makeAutoObservable } from "mobx";
import { http } from "../utils/http";
export class Payback {
page = 0;
pageSize = 10;
data = [];
total_data = 0;
filterCategory = null;
visibleModalPayback = false;
pageCategories = 0;
pageSizeCategories = 10;
dataCategories = [];
total_dataCategories = 0;
pageSubCategories = 0;
pageSizeSubCategories = 10;
dataSubCategories = [];
total_dataSubCategories = 0;
constructor(ctx) {
this.ctx = ctx;
makeAutoObservable(this);
}
async getData() {
try {
const response = await http.get(
`/transaction/deposit-return?page=${this.page}&pageSize=${this.pageSize}`
);
//console.log(response)
this.data =
response.body[0].map((item, idx) => {
item.key = idx;
return item;
}) ?? [];
this.total_data = response.body.total_data ?? 0;
} catch (e) {
console.error(e);
}
}
async getDataUser() {
try {
const response = await http.get(
`/transaction/deposit-return/confirmation?page=${this.page}&pageSize=${this.pageSize}`
);
console.log(response);
this.data =
response.body[0].map((item, idx) => {
item.key = idx;
return item;
}) ?? [];
this.total_data = response.body.total_data ?? 0;
} catch (e) {
console.error(e);
}
}
async update(id, data) {
try {
const response = await http.put(`/config/commission/${id}`).send(data);
await this.getData();
return response;
} catch (e) {
console.error(e);
}
}
async delete(id) {
try {
const response = await http.del(`/product/${id}`);
await this.getData();
return response;
} catch (e) {
console.error(e);
}
}
async create(data) {
try {
console.log(data)
return await http.post("/transaction/deposit-return").send(data);
} catch (e) {
console.error(e);
}
}
}