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

2020-04-27 09:16:20 -07:00
parent c9ce58ce3d
commit 17787da0b4
5 changed files with 94 additions and 42 deletions
--- a/client/src/App/App.container.jsx
+++ b/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() {
--- a/client/src/components/jobs-available-supplement/jobs-available-supplement.component.jsx
+++ b/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}
--- a/client/src/components/jobs-available-supplement/jobs-available-supplement.container.jsx
+++ b/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,
-    {
-      fetchPolicy: "network-only",
-    }
+    QUERY_AVAILABLE_SUPPLEMENT_JOBS
  );
  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>
  );
--- a/client/src/components/jobs-find-modal/jobs-find-modal.component.jsx
+++ b/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")}
--- a/client/src/components/jobs-find-modal/jobs-find-modal.container.jsx
+++ b/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.data && jobsList.data.jobs ? jobsList.data.jobs : null
-          }
+          jobsList={jobsData}
+          modalSearchState={modalSearchState}
        />
      ) : null}
    </Modal>