BOD-67 Implemented baseline job supplementing

client/src/components/jobs-available-supplement/jobs-available-supplement.component.jsx

@@ -1,4 +1,8 @@
-import { DeleteFilled, PlusCircleFilled, SyncOutlined } from "@ant-design/icons";
+import {
+  DeleteFilled,
+  PlusCircleFilled,
+  SyncOutlined,
+} from "@ant-design/icons";
 import { Button, notification, Table } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -22,13 +26,13 @@ export default function JobsAvailableSupplementComponent({
   deleteAllNewJobs,
   loadEstData,
   estData,
-  importOptionsState
+  importOptionsState,
 }) {
   const { t } = useTranslation();
 
   const [state, setState] = useState({
     sortedInfo: {},
-    filteredInfo: { text: "" }
+    filteredInfo: { text: "" },
   });
 
   const handleTableChange = (pagination, filters, sorter) => {
@@ -45,7 +49,7 @@ export default function JobsAvailableSupplementComponent({
       // filteredValue: state.filteredInfo.text || null,
       sorter: (a, b) => alphaSort(a, b),
       sortOrder:
-        state.sortedInfo.columnKey === "cieca_id" && state.sortedInfo.order
+        state.sortedInfo.columnKey === "cieca_id" && state.sortedInfo.order,
     },
     {
       title: t("jobs.fields.ro_number"),
@@ -57,7 +61,7 @@ export default function JobsAvailableSupplementComponent({
       sorter: (a, b) => alphaSort(a, b),
       sortOrder:
         state.sortedInfo.columnKey === "cieca_id" && state.sortedInfo.order,
-      render: (text, record) => <div>{record.job && record.job.ro_number}</div>
+      render: (text, record) => <div>{record.job && record.job.ro_number}</div>,
     },
     {
       title: t("jobs.fields.owner"),
@@ -67,7 +71,7 @@ export default function JobsAvailableSupplementComponent({
       sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
       //width: "25%",
       sortOrder:
-        state.sortedInfo.columnKey === "ownr_name" && state.sortedInfo.order
+        state.sortedInfo.columnKey === "ownr_name" && state.sortedInfo.order,
     },
     {
       title: t("jobs.fields.vehicle"),
@@ -75,7 +79,7 @@ export default function JobsAvailableSupplementComponent({
       key: "vehicle_info",
       sorter: (a, b) => alphaSort(a.vehicle_info, b.vehicle_info),
       sortOrder:
-        state.sortedInfo.columnKey === "vehicle_info" && state.sortedInfo.order
+        state.sortedInfo.columnKey === "vehicle_info" && state.sortedInfo.order,
       //ellipsis: true
     },
     {
@@ -84,7 +88,7 @@ export default function JobsAvailableSupplementComponent({
       key: "clm_no",
       sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
       sortOrder:
-        state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order
+        state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order,
       //width: "12%",
       //ellipsis: true
     },
@@ -97,7 +101,7 @@ export default function JobsAvailableSupplementComponent({
         state.sortedInfo.columnKey === "clm_amt" && state.sortedInfo.order,
       render: (text, record) => (
         <CurrencyFormatter>{record.clm_amt}</CurrencyFormatter>
-      )
+      ),
       //width: "12%",
       //ellipsis: true
     },
@@ -107,7 +111,7 @@ export default function JobsAvailableSupplementComponent({
       key: "uploaded_by",
       sorter: (a, b) => alphaSort(a.uploaded_by, b.uploaded_by),
       sortOrder:
-        state.sortedInfo.columnKey === "uploaded_by" && state.sortedInfo.order
+        state.sortedInfo.columnKey === "uploaded_by" && state.sortedInfo.order,
       //width: "12%",
       //ellipsis: true
     },
@@ -120,7 +124,7 @@ export default function JobsAvailableSupplementComponent({
         state.sortedInfo.columnKey === "updated_at" && state.sortedInfo.order,
       render: (text, record) => (
         <DateTimeFormatter>{record.updated_at}</DateTimeFormatter>
-      )
+      ),
       //width: "12%",
       //ellipsis: true
     },
@@ -131,31 +135,46 @@ export default function JobsAvailableSupplementComponent({
         <span>
           <Button
             onClick={() => {
-              deleteJob({ variables: { id: record.id } }).then(r => {
+              deleteJob({ variables: { id: record.id } }).then((r) => {
                 notification["success"]({
-                  message: t("jobs.successes.deleted")
+                  message: t("jobs.successes.deleted"),
                 });
                 refetch();
               });
-            }}
-          >
+            }}>
             <DeleteFilled />
           </Button>
           <Button
             onClick={() => {
               loadEstData({ variables: { id: record.id } });
               setModalVisible(true);
-            }}
-          >
+            }}>
             <PlusCircleFilled />
           </Button>
         </span>
-      )
+      ),
       //width: "12%",
       //ellipsis: true
-    }
+    },
   ];
 
+  const handleDeleteAll = () => {
+    deleteAllNewJobs()
+      .then((r) => {
+        notification["success"]({
+          message: t("jobs.successes.all_deleted", {
+            count: r.data.delete_available_jobs.affected_rows,
+          }),
+        });
+        refetch();
+      })
+      .catch((r) => {
+        notification["error"]({
+          message: t("jobs.errors.deleted") + " " + r.message,
+        });
+      });
+  };
+
   return (
     <div>
       <JobsFindModalContainer
@@ -177,37 +196,17 @@ export default function JobsAvailableSupplementComponent({
               <Button
                 onClick={() => {
                   refetch();
-                }}
-              >
+                }}>
                 <SyncOutlined />
               </Button>
-              <Button
-                onClick={() => {
-                  deleteAllNewJobs()
-                    .then(r => {
-                      notification["success"]({
-                        message: t("jobs.successes.all_deleted", {
-                          count: r.data.delete_available_jobs.affected_rows
-                        })
-                      });
-                      refetch();
-                    })
-                    .catch(r => {
-                      notification["error"]({
-                        message: t("jobs.errors.deleted") + " " + r.message
-                      });
-                    });
-                }}
-              >
-                Delete All
-              </Button>
+              <Button onClick={handleDeleteAll}>Delete All</Button>
             </div>
           );
         }}
-        size="small"
+        size='small'
         pagination={{ position: "top" }}
-        columns={columns.map(item => ({ ...item }))}
-        rowKey="id"
+        columns={columns}
+        rowKey='id'
         dataSource={data && data.available_jobs}
         onChange={handleTableChange}
       />