Automatically search for claim number on supplement as a part of BOD-41

client/src/components/jobs-find-modal/jobs-find-modal.component.jsx

@@ -1,4 +1,4 @@
-import { Checkbox, Divider, Table } from "antd";
+import { Checkbox, Divider, Table, Input } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -9,12 +9,13 @@ export default function JobsFindModalComponent({
   setSelectedJob,
   jobsList,
   jobsListLoading,
-  importOptionsState
+  importOptionsState,
+  modalSearchState,
 }) {
   const { t } = useTranslation();
-
+  const [modalSearch, setModalSearch] = modalSearchState;
   const [importOptions, setImportOptions] = importOptionsState;
-  console.log("importOptions", importOptions);
+
   const columns = [
     {
       title: t("jobs.fields.ro_number"),
@@ -27,7 +28,7 @@ export default function JobsFindModalComponent({
             {record.ro_number ? record.ro_number : "EST-" + record.est_number}
           </Link>
         </span>
-      )
+      ),
     },
     {
       title: t("jobs.fields.owner"),
@@ -46,7 +47,7 @@ export default function JobsFindModalComponent({
           // t("jobs.errors.noowner")
           <span>{`${record.ownr_fn} ${record.ownr_ln}`}</span>
         );
-      }
+      },
     },
     {
       title: t("jobs.fields.ownr_ph1"),
@@ -60,7 +61,7 @@ export default function JobsFindModalComponent({
         ) : (
           t("general.labels.unknown")
         );
-      }
+      },
     },
     {
       title: t("jobs.fields.status"),
@@ -70,7 +71,7 @@ export default function JobsFindModalComponent({
       ellipsis: true,
       render: (text, record) => {
         return record.status || t("general.labels.na");
-      }
+      },
     },
 
     {
@@ -82,13 +83,14 @@ export default function JobsFindModalComponent({
       render: (text, record) => {
         return record.vehicle ? (
           <Link to={"/manage/vehicles/" + record.vehicleid}>
-            {`${record.v_model_yr || ""} ${record.v_make_desc ||
-              ""} ${record.v_model_desc || ""}`}
+            {`${record.v_model_yr || ""} ${record.v_make_desc || ""} ${
+              record.v_model_desc || ""
+            }`}
           </Link>
         ) : (
           t("jobs.errors.novehicle")
         );
-      }
+      },
     },
     {
       title: t("vehicles.fields.plate_no"),
@@ -102,7 +104,7 @@ export default function JobsFindModalComponent({
         ) : (
           t("general.labels.unknown")
         );
-      }
+      },
     },
     {
       title: t("jobs.fields.clm_no"),
@@ -116,11 +118,11 @@ export default function JobsFindModalComponent({
         ) : (
           t("general.labels.unknown")
         );
-      }
-    }
+      },
+    },
   ];
 
-  const handleOnRowClick = record => {
+  const handleOnRowClick = (record) => {
     if (record) {
       if (record.id) {
         setSelectedJob(record.id);
@@ -133,35 +135,45 @@ export default function JobsFindModalComponent({
   return (
     <div>
       <Table
-        title={() => t("jobs.labels.existing_jobs")}
+        title={() => (
+          <div style={{ display: "flex" }}>
+            {t("jobs.labels.existing_jobs")}
+            <Input
+              value={modalSearch}
+              onChange={(e) => {
+                setModalSearch(e.target.value);
+              }}
+            />
+          </div>
+        )}
         size='small'
         pagination={{ position: "bottom" }}
-        columns={columns.map(item => ({ ...item }))}
+        columns={columns.map((item) => ({ ...item }))}
         rowKey='id'
         loading={jobsListLoading}
         dataSource={jobsList}
         rowSelection={{
-          onSelect: props => {
+          onSelect: (props) => {
             setSelectedJob(props.id);
           },
           type: "radio",
-          selectedRowKeys: [selectedJob]
+          selectedRowKeys: [selectedJob],
         }}
         onRow={(record, rowIndex) => {
           return {
-            onClick: event => {
+            onClick: (event) => {
               handleOnRowClick(record);
-            }
+            },
           };
         }}
       />
       <Divider />
       <Checkbox
         defaultChecked={importOptions.overrideHeader}
-        onChange={e =>
+        onChange={(e) =>
           setImportOptions({
             ...importOptions,
-            overrideHeaders: e.target.checked
+            overrideHeaders: e.target.checked,
           })
         }>
         {t("jobs.labels.override_header")}