From a0e42fff8ef6f65e0babcd699fe320aeb87feca1 Mon Sep 17 00:00:00 2001
From: caturbgs <savemeplease11>
Date: Thu, 23 Dec 2021 01:23:58 +0700
Subject: [PATCH] feat: handler dynamic action columnin payback confirmation,
 and add column name

---
 src/pages/Payback/Payback.js        | 167 +++++++++++++++-------------
 src/pages/Payback/PaybackCreated.js |  16 ++-
 2 files changed, 105 insertions(+), 78 deletions(-)

diff --git a/src/pages/Payback/Payback.js b/src/pages/Payback/Payback.js
index 808a332..bbb5291 100644
--- a/src/pages/Payback/Payback.js
+++ b/src/pages/Payback/Payback.js
@@ -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>
           ),
       },
   ];
diff --git a/src/pages/Payback/PaybackCreated.js b/src/pages/Payback/PaybackCreated.js
index 70dd3e6..54005ef 100644
--- a/src/pages/Payback/PaybackCreated.js
+++ b/src/pages/Payback/PaybackCreated.js
@@ -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 = [