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

feat: handler dynamic action columnin payback confirmation, and add column name

Browse Source
This commit is contained in:
caturbgs 2021-12-23 01:23:58 +07:00
parent 874e5dbf5c
commit a0e42fff8e
2 changed files with 105 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import React, {useContext, useEffect} from "react"; 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 {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import {CheckCircleOutlined, CheckOutlined, CloseOutlined, FilterOutlined, StopOutlined,} from "@ant-design/icons"; 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 {ModalLoaderContext} from "../../utils/modal";
import {appConfig} from "../../config/app"; import {appConfig} from "../../config/app";
import {capitalize} from "lodash"; import {capitalize} from "lodash";
import {PAYBACK_STATUS} from "../../constants/payback";
const {Search} = Input; const {Search} = Input;
@ -35,88 +36,100 @@ export const Payback = observer(() => {
}, []); }, []);
const columns = [ const columns = [
{
title: "Name",
dataIndex: "userData_name",
key: "userData_name",
},
{ {
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'}}
alt={record.id} alt={record.id}
/> />
), ),
}, },
{ {
title: "Amount", title: "Amount",
dataIndex: "amount", dataIndex: "amount",
key: "amount", key: "amount",
width: '20%', width: '20%',
render: (text) => render: (text) =>
new Intl.NumberFormat("id-ID", { new Intl.NumberFormat("id-ID", {
style: "currency", style: "currency",
currency: "IDR", currency: "IDR",
}).format(text), }).format(text),
}, },
{ {
title: "Action", title: "Action",
dataIndex: "amount", dataIndex: "amount",
key: "action", key: "action",
width: '10%', width: '10%',
render: (text, record) => ( render: (text, record) => (
<Space size="middle"> PAYBACK_STATUS[record.status] === PAYBACK_STATUS[0] ?
<Button <Space size="middle">
onClick={async () => { <Button
Modal.confirm({ onClick={async () => {
title: `Are you sure Accept this submission?`, Modal.confirm({
icon: <CheckOutlined/>, title: `Are you sure Accept this submission?`,
okText: "Accept", icon: <CheckOutlined/>,
cancelText: "Cancel", okText: "Accept",
okType: "primary", cancelText: "Cancel",
onOk() { okType: "primary",
handleAction(record.id, "accept"); onOk() {
}, handleAction(record.id, "accept");
onCancel() { },
console.log("Cancel"); onCancel() {
}, console.log("Cancel");
}) },
}} })
icon={<CheckCircleOutlined/>} }}
style={{ icon={<CheckCircleOutlined/>}
backgroundColor: "#1bb91d", style={{
color: "#fff", backgroundColor: "#1bb91d",
borderColor: "#1bb91d", color: "#fff",
}} borderColor: "#1bb91d",
> }}
Accept >
</Button> Accept
<Button </Button>
onClick={async () => { <Button
Modal.confirm({ onClick={async () => {
title: `Are you sure Reject this submission?`, Modal.confirm({
icon: <StopOutlined/>, title: `Are you sure Reject this submission?`,
okText: "Reject", icon: <StopOutlined/>,
cancelText: "Cancel", okText: "Reject",
okType: "primary", cancelText: "Cancel",
onOk() { okType: "primary",
handleAction(record.id, "reject"); onOk() {
}, handleAction(record.id, "reject");
onCancel() { },
console.log("Cancel"); onCancel() {
}, console.log("Cancel");
}) },
})
}} }}
icon={<CloseOutlined/>} icon={<CloseOutlined/>}
style={{ style={{
backgroundColor: "#ff1c1c", backgroundColor: "#ff1c1c",
color: "#fff", color: "#fff",
borderColor: "#ff1c1c", borderColor: "#ff1c1c",
}} }}
> >
Reject Reject
</Button> </Button>
</Space> </Space> :
<Tag
color={PAYBACK_STATUS[record.status] === PAYBACK_STATUS[3] ? "cyan" : "red"}
style={{color: "#4F566B"}}
>
{PAYBACK_STATUS[record.status]}
</Tag>
), ),
}, },
]; ];

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

@ -1,5 +1,5 @@
import React, {useContext, useEffect, useState} from "react"; 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 {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons"; import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
@ -8,6 +8,7 @@ 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 {PAYBACK_STATUS} from "../../constants/payback";
const {Search} = Input; const {Search} = Input;
@ -61,6 +62,19 @@ export const PaybackCreated = observer(() => {
currency: "IDR", currency: "IDR",
}).format(text), }).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 = [ const routeData = [