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

fix: add API payback confirmation

Browse Source
This commit is contained in:
caturbgs 2021-12-22 22:48:34 +07:00
parent 1e92eee5b5
commit 7b07d1a1d8
3 changed files with 109 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,44 +1,45 @@
import React, {useContext, useEffect} from "react"; import React, {useContext, useEffect} 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, Modal, 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,} from "@ant-design/icons"; import {CheckCircleOutlined, CheckOutlined, CloseOutlined, FilterOutlined, StopOutlined,} from "@ant-design/icons";
import {BreadcumbComponent} from "../../component/BreadcumbComponent"; import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app"; import {LINKS} from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal"; import {ModalLoaderContext} from "../../utils/modal";
import {appConfig} from "../../config/app"; import {appConfig} from "../../config/app";
import {capitalize} from "lodash";
const {Search} = Input; const {Search} = Input;
export const Payback = observer(() => { export const Payback = observer(() => {
const store = useStore(); const store = useStore();
const modalLoader = useContext(ModalLoaderContext); const modalLoader = useContext(ModalLoaderContext);
useEffect(() => { useEffect(() => {
const init = async () => { const init = async () => {
try { try {
modalLoader.setLoading(true); modalLoader.setLoading(true);
await store.payback.getDataConfirmation(); await store.payback.getDataConfirmation();
modalLoader.setLoading(false); modalLoader.setLoading(false);
} catch (e) { } catch (e) {
modalLoader.setLoading(false); modalLoader.setLoading(false);
if (e.response?.body?.message) { if (e.response?.body?.message) {
message.error(e.response.body.message); message.error(e.response.body.message);
return; return;
} }
message.error(e.message); message.error(e.message);
} }
}; };
init(); init();
}, []); }, []);
const columns = [ const columns = [
{ {
title: "Picture", title: "Picture",
dataIndex: "image_prove", dataIndex: "image_prove",
key: "image_prove", key: "image_prove",
render: (text, record) => ( render: (text, record) => (
<Image <Image
src={`${appConfig.apiUrl}/config/image/${text}`} src={`${appConfig.apiUrl}/config/image/${text}`}
style={{width: '5vw'}} style={{width: '5vw'}}
@ -66,7 +67,19 @@ export const Payback = observer(() => {
<Space size="middle"> <Space size="middle">
<Button <Button
onClick={async () => { onClick={async () => {
await handleAction(record, "accept"); Modal.confirm({
title: `Are you sure Accept this submission?`,
icon: <CheckOutlined/>,
okText: "Accept",
cancelText: "Cancel",
okType: "primary",
onOk() {
handleAction(record.id, "accept");
},
onCancel() {
console.log("Cancel");
},
})
}} }}
icon={<CheckCircleOutlined/>} icon={<CheckCircleOutlined/>}
style={{ style={{
@ -79,7 +92,20 @@ export const Payback = observer(() => {
</Button> </Button>
<Button <Button
onClick={async () => { onClick={async () => {
await handleAction(record, "reject"); Modal.confirm({
title: `Are you sure Reject this submission?`,
icon: <StopOutlined/>,
okText: "Reject",
cancelText: "Cancel",
okType: "primary",
onOk() {
handleAction(record.id, "reject");
},
onCancel() {
console.log("Cancel");
},
})
}} }}
icon={<CloseOutlined/>} icon={<CloseOutlined/>}
style={{ style={{
@ -98,63 +124,52 @@ export const Payback = observer(() => {
if (store.authentication.userData.role === "Retail") columns.pop(); if (store.authentication.userData.role === "Retail") columns.pop();
const routeData = [ const routeData = [
{ {
route: LINKS.HOME, route: LINKS.HOME,
name: "Home", name: "Home",
}, },
{ {
route: LINKS.PAYBACK, route: LINKS.PAYBACK,
name: <span style={{fontWeight: "bold"}}>Payback</span>, name: <span style={{fontWeight: "bold"}}>Payback Confirmation</span>,
}, },
]; ];
const onSubmit = async (data) => { const handleAction = async (id, type) => {
modalLoader.setLoading(true); modalLoader.setLoading(true);
try { try {
// await store.payback.create(data); const response = await store.payback.confirmPayback(id, {status: capitalize(type)});
// message.success("Success Add New Member"); if (response.body.status !== 201) {
// await store.payback.getData(); message.error(`Failed ${capitalize(type)} Payback`);
} catch (e) { }
console.error(e, "apa errornya"); message.success(`Success ${capitalize(type)} Payback`);
message.error("Failed Add Member"); } catch (e) {
} console.error(e, "apa errornya");
modalLoader.setLoading(false); message.error("Failed Handler Action Payback");
}; }
modalLoader.setLoading(false);
};
const handleAction = async (record, type) => { return (
}; <div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData}/>
return ( <Card>
<div className={["ppob-container"].join(" ")}> <div>
<BreadcumbComponent data={routeData}/> <Row style={{marginBottom: 20}}>
<Card> <Col span={12}>
<div> <Button>
<Row style={{marginBottom: 20}}> <FilterOutlined/>
<Col span={12}> Filter
<Button> </Button>
<FilterOutlined/> </Col>
Filter <Col span={12} style={{textAlign: "right"}}>
</Button> <Search
</Col> placeholder="input search text"
<Col span={12} style={{textAlign: "right"}}> style={{
<Search width: store.ui.mediaQuery.isMobile ? 160 : 200,
placeholder="input search text" marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
style={{
width: store.ui.mediaQuery.isMobile ? 160 : 200,
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0, marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}} }}
/> />
{/* {store.authentication.userData.role !== "Admin" && (
<Button
onClick={() => {
setInitialData({});
setVisibleModal(true);
}}
>
<PlusSquareOutlined /> New
</Button>
)} */}
</Col> </Col>
</Row> </Row>
{store.ui.mediaQuery.isDesktop && ( {store.ui.mediaQuery.isDesktop && (

2
src/pages/Payback/PaybackCreated.js
View File

@ -70,7 +70,7 @@ export const PaybackCreated = observer(() => {
}, },
{ {
route: LINKS.PAYBACK_CREATED, route: LINKS.PAYBACK_CREATED,
name: <span style={{fontWeight: "bold"}}>Payback User</span>, name: <span style={{fontWeight: "bold"}}>Payback Created</span>,
}, },
]; ];

13
src/store/payback.js
View File

@ -80,4 +80,17 @@ export class Payback {
console.error(e); console.error(e);
} }
} }
async confirmPayback(id, data) {
try {
const response = await http.put(`/transaction/deposit-return/confirmation/${id}`).send(data);
await Promise.all([
this.getDataConfirmation(),
this.getDataCreated()
])
return response;
} catch (e) {
console.error(e);
}
}
} }