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

client/src/App/App.container.jsx

@@ -14,9 +14,9 @@ import GlobalLoadingBar from "../components/global-loading-bar/global-loading-ba
 import { auth } from "../firebase/firebase.utils";
 import errorLink from "../graphql/apollo-error-handling";
 import App from "./App";
-
 import LogRocket from "logrocket";
-LogRocket.init("gvfvfw/bodyshopapp");
+
+if (process.env.NODE_ENV === "production") LogRocket.init("gvfvfw/bodyshopapp");
 
 export default class AppContainer extends Component {
   constructor() {

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

@@ -16,7 +16,6 @@ export default function JobsAvailableSupplementComponent({
   data,
   refetch,
   deleteJob,
-  updateJob,
   onModalOk,
   onModalCancel,
   modalVisible,
@@ -27,6 +26,7 @@ export default function JobsAvailableSupplementComponent({
   loadEstData,
   estData,
   importOptionsState,
+  modalSearchState,
 }) {
   const { t } = useTranslation();
 
@@ -131,7 +131,7 @@ export default function JobsAvailableSupplementComponent({
     {
       title: t("general.labels.actions"),
       key: "actions",
-      render: (text, record) => (
+      render: (text, record, index) => (
         <span>
           <Button
             onClick={() => {
@@ -147,14 +147,13 @@ export default function JobsAvailableSupplementComponent({
           <Button
             onClick={() => {
               loadEstData({ variables: { id: record.id } });
+              modalSearchState[1](record.clm_no);
               setModalVisible(true);
             }}>
             <PlusCircleFilled />
           </Button>
         </span>
       ),
-      //width: "12%",
-      //ellipsis: true
     },
   ];
 
@@ -186,6 +185,7 @@ export default function JobsAvailableSupplementComponent({
         visible={modalVisible}
         onOk={onModalOk}
         onCancel={onModalCancel}
+        modalSearchState={modalSearchState}
       />
       <Table
         loading={loading}

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

@@ -1,5 +1,6 @@
-import { useMutation, useQuery, useApolloClient } from "@apollo/react-hooks";
+import { useApolloClient, useMutation, useQuery } from "@apollo/react-hooks";
 import { notification } from "antd";
+import { gql } from "apollo-boost";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -15,9 +16,8 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import JobsAvailableSupplementComponent from "./jobs-available-supplement.component";
-import HeaderFields from "./jobs-available-supplement.headerfields";
 import { GetSupplementDelta } from "./jobs-available-supplement.estlines.util";
-import { gql } from "apollo-boost";
+import HeaderFields from "./jobs-available-supplement.headerfields";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -29,10 +29,7 @@ export function JobsAvailableSupplementContainer({
   bodyshop,
 }) {
   const { loading, error, data, refetch } = useQuery(
-    QUERY_AVAILABLE_SUPPLEMENT_JOBS,
+    QUERY_AVAILABLE_SUPPLEMENT_JOBS
-    {
-      fetchPolicy: "network-only",
-    }
   );
   const { t } = useTranslation();
   const history = useHistory();
@@ -42,6 +39,7 @@ export function JobsAvailableSupplementContainer({
   const [modalVisible, setModalVisible] = useState(false);
   const [selectedJob, setSelectedJob] = useState(null);
   const [insertLoading, setInsertLoading] = useState(false);
+  const modalSearchState = useState("");
   const [updateJob] = useMutation(UPDATE_JOB);
   const [loadEstData, estData] = estDataLazyLoad;
   const importOptionsState = useState({ overrideHeaders: false });
@@ -135,6 +133,7 @@ export function JobsAvailableSupplementContainer({
 
   const onModalCancel = () => {
     setModalVisible(false);
+    modalSearchState[1]("");
     setSelectedJob(null);
   };
 
@@ -159,6 +158,7 @@ export function JobsAvailableSupplementContainer({
         loadEstData={loadEstData}
         estData={estData}
         importOptionsState={importOptionsState}
+        modalSearchState={modalSearchState}
       />
     </LoadingSpinner>
   );

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_yr || ""} ${record.v_make_desc || ""} ${
-              ""} ${record.v_model_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")}

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

@@ -10,7 +10,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop
+  bodyshop: selectBodyshop,
 });
 
 export default connect(
@@ -23,6 +23,7 @@ export default connect(
   selectedJob,
   setSelectedJob,
   importOptionsState,
+  modalSearchState,
   ...modalProps
 }) {
   const { t } = useTranslation();
@@ -30,14 +31,54 @@ export default connect(
   const jobsList = useQuery(QUERY_ALL_ACTIVE_JOBS, {
     fetchPolicy: "network-only",
     variables: {
-      statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"]
+      statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"],
-    }
+    },
   });
 
+  const modalSearch = modalSearchState[0];
+
+  const jobsData =
+    jobsList.data && jobsList.data.jobs
+      ? modalSearch
+        ? jobsList.data.jobs.filter(
+            (j) =>
+              (j.ro_number || "")
+                .toLowerCase()
+                .includes(modalSearch.toLowerCase()) ||
+              (j.est_number || "")
+                .toString()
+                .toLowerCase()
+                .includes(modalSearch.toLowerCase()) ||
+              (j.ownr_fn || "")
+                .toLowerCase()
+                .includes(modalSearch.toLowerCase()) ||
+              (j.ownr_ln || "")
+                .toLowerCase()
+                .includes(modalSearch.toLowerCase()) ||
+              (j.status || "")
+                .toLowerCase()
+                .includes(modalSearch.toLowerCase()) ||
+              (j.v_make_desc || "")
+                .toLowerCase()
+                .includes(modalSearch.toLowerCase()) ||
+              (j.v_model_desc || "")
+                .toLowerCase()
+                .includes(modalSearch.toLowerCase()) ||
+              (j.clm_no || "")
+                .toLowerCase()
+                .includes(modalSearch.toLowerCase()) ||
+              (j.plate_no || "")
+                .toLowerCase()
+                .includes(modalSearch.toLowerCase())
+          )
+        : jobsList.data.jobs
+      : null;
+
   return (
     <Modal
       title={t("jobs.labels.existing_jobs")}
       width={"80%"}
+      destroyOnClose
       okButtonProps={{ disabled: selectedJob ? false : true }}
       {...modalProps}>
       {loading ? <LoadingSpinner /> : null}
@@ -48,9 +89,8 @@ export default connect(
           setSelectedJob={setSelectedJob}
           importOptionsState={importOptionsState}
           jobsListLoading={jobsList.loading}
-          jobsList={
+          jobsList={jobsData}
-            jobsList.data && jobsList.data.jobs ? jobsList.data.jobs : null
+          modalSearchState={modalSearchState}
-          }
         />
       ) : null}
     </Modal>