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

Merge branch 'develop' into 'devops-staging'

Browse Source 
Develop

See merge request empatnusabangsa/ppob/ppob-frontend!16
This commit is contained in:
Catur Bagaskara 2021-12-22 18:24:47 +00:00
commit c13c78e95f
3 changed files with 114 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/constants/payback.js Normal file
View File

@ -0,0 +1,7 @@
export const PAYBACK_STATUS = {
0: 'Pending',
1: 'Success',
2: 'Failed',
3: 'Approved',
4: 'Rejected',
}

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

@ -1,5 +1,5 @@
import React, {useContext, useEffect} from "react";
import {Button, Card, Col, Divider, Image, Input, List, message, Modal, Row, Space, Table,} from "antd";
import {Button, Card, Col, Divider, Image, Input, List, message, Modal, Row, Space, Table, Tag,} from "antd";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {CheckCircleOutlined, CheckOutlined, CloseOutlined, FilterOutlined, StopOutlined,} from "@ant-design/icons";
@ -8,6 +8,7 @@ import {LINKS} from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";
import {appConfig} from "../../config/app";
import {capitalize} from "lodash";
import {PAYBACK_STATUS} from "../../constants/payback";
const {Search} = Input;
@ -35,88 +36,100 @@ export const Payback = observer(() => {
}, []);
const columns = [
{
title: "Name",
dataIndex: "userData_name",
key: "userData_name",
},
{
title: "Picture",
dataIndex: "image_prove",
key: "image_prove",
render: (text, record) => (
<Image
src={`${appConfig.apiUrl}/config/image/${text}`}
style={{width: '5vw'}}
alt={record.id}
/>
),
},
{
title: "Amount",
dataIndex: "amount",
key: "amount",
width: '20%',
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
},
{
title: "Action",
dataIndex: "amount",
key: "action",
width: '10%',
render: (text, record) => (
<Space size="middle">
<Button
onClick={async () => {
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/>}
style={{
backgroundColor: "#1bb91d",
color: "#fff",
borderColor: "#1bb91d",
}}
>
Accept
</Button>
<Button
onClick={async () => {
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");
},
})
<Image
src={`${appConfig.apiUrl}/config/image/${text}`}
style={{width: '5vw'}}
alt={record.id}
/>
),
},
{
title: "Amount",
dataIndex: "amount",
key: "amount",
width: '20%',
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
},
{
title: "Action",
dataIndex: "amount",
key: "action",
width: '10%',
render: (text, record) => (
PAYBACK_STATUS[record.status] === PAYBACK_STATUS[0] ?
<Space size="middle">
<Button
onClick={async () => {
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/>}
style={{
backgroundColor: "#1bb91d",
color: "#fff",
borderColor: "#1bb91d",
}}
>
Accept
</Button>
<Button
onClick={async () => {
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/>}
style={{
backgroundColor: "#ff1c1c",
color: "#fff",
borderColor: "#ff1c1c",
}}
>
Reject
</Button>
</Space>
}}
icon={<CloseOutlined/>}
style={{
backgroundColor: "#ff1c1c",
color: "#fff",
borderColor: "#ff1c1c",
}}
>
Reject
</Button>
</Space> :
<Tag
color={PAYBACK_STATUS[record.status] === PAYBACK_STATUS[3] ? "cyan" : "red"}
style={{color: "#4F566B"}}
>
{PAYBACK_STATUS[record.status]}
</Tag>
),
},
];
@ -140,8 +153,9 @@ export const Payback = observer(() => {
const response = await store.payback.confirmPayback(id, type);
if (response.body.status !== 201) {
message.error(`Failed ${capitalize(type)} Payback`);
} else {
message.success(`Success ${capitalize(type)} Payback`);
}
message.success(`Success ${capitalize(type)} Payback`);
} catch (e) {
console.error(e, "apa errornya");
message.error("Failed Handler Action Payback");

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

@ -1,5 +1,5 @@
import React, {useContext, useEffect, useState} from "react";
import {Button, Card, Col, Divider, Image, Input, List, message, Row, Table,} from "antd";
import {Button, Card, Col, Divider, Image, Input, List, message, Row, Table, Tag,} from "antd";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
@ -8,6 +8,7 @@ import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";
import {appConfig} from "../../config/app";
import {PAYBACK_STATUS} from "../../constants/payback";
const {Search} = Input;
@ -61,6 +62,19 @@ export const PaybackCreated = observer(() => {
currency: "IDR",
}).format(text),
},
{
title: "Status",
dataIndex: "status",
key: "status",
width: '10%',
render: (text) =>
<Tag
color={PAYBACK_STATUS[text] === PAYBACK_STATUS[3] ? "cyan" : "red"}
style={{color: "#4F566B"}}
>
{PAYBACK_STATUS[text]}
</Tag>
},
];
const routeData = [