Added base logic for seeing jobs to supplement. Supplement import not yet working.

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

@@ -0,0 +1,172 @@
+import { Checkbox, Divider, Table } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import PhoneFormatter from "../../utils/PhoneFormatter";
+
+export default function JobsFindModalComponent({
+  selectedJob,
+  setSelectedJob,
+  jobsList,
+  jobsListLoading,
+  importOptionsState
+}) {
+  const { t } = useTranslation();
+
+  const [importOptions, setImportOptions] = importOptionsState;
+
+  const columns = [
+    {
+      title: t("jobs.fields.ro_number"),
+      dataIndex: "ro_number",
+      key: "ro_number",
+      width: "8%",
+      render: (text, record) => (
+        <span>
+          <Link to={"/manage/jobs/" + record.id}>
+            {record.ro_number ? record.ro_number : "EST-" + record.est_number}
+          </Link>
+        </span>
+      )
+    },
+    {
+      title: t("jobs.fields.owner"),
+      dataIndex: "owner",
+      key: "owner",
+      ellipsis: true,
+
+      width: "25%",
+
+      render: (text, record) => {
+        return record.owner ? (
+          <Link to={"/manage/owners/" + record.owner.id}>
+            {record.ownr_fn} {record.ownr_ln}
+          </Link>
+        ) : (
+          // t("jobs.errors.noowner")
+          <span>{`${record.ownr_fn} ${record.ownr_ln}`}</span>
+        );
+      }
+    },
+    {
+      title: t("jobs.fields.ownr_ph1"),
+      dataIndex: "ownr_ph1",
+      key: "ownr_ph1",
+      width: "12%",
+      ellipsis: true,
+      render: (text, record) => {
+        return record.ownr_ph1 ? (
+          <PhoneFormatter>{record.ownr_ph1}</PhoneFormatter>
+        ) : (
+          t("general.labels.unknown")
+        );
+      }
+    },
+    {
+      title: t("jobs.fields.status"),
+      dataIndex: "status",
+      key: "status",
+      width: "10%",
+      ellipsis: true,
+      render: (text, record) => {
+        return record.status || t("general.labels.na");
+      }
+    },
+
+    {
+      title: t("jobs.fields.vehicle"),
+      dataIndex: "vehicle",
+      key: "vehicle",
+      width: "15%",
+      ellipsis: true,
+      render: (text, record) => {
+        return record.vehicle ? (
+          <Link to={"/manage/vehicles/" + record.vehicle.id}>
+            {record.vehicle.v_model_yr} {record.vehicle.v_make_desc}{" "}
+            {record.vehicle.v_model_desc}
+          </Link>
+        ) : (
+          t("jobs.errors.novehicle")
+        );
+      }
+    },
+    {
+      title: t("vehicles.fields.plate_no"),
+      dataIndex: "plate_no",
+      key: "plate_no",
+      width: "8%",
+      ellipsis: true,
+      render: (text, record) => {
+        return record.vehicle.plate_no ? (
+          <span>{record.vehicle.plate_no}</span>
+        ) : (
+          t("general.labels.unknown")
+        );
+      }
+    },
+    {
+      title: t("jobs.fields.clm_no"),
+      dataIndex: "clm_no",
+      key: "clm_no",
+      width: "12%",
+      ellipsis: true,
+      render: (text, record) => {
+        return record.clm_no ? (
+          <span>{record.clm_no}</span>
+        ) : (
+          t("general.labels.unknown")
+        );
+      }
+    }
+  ];
+
+  const handleOnRowClick = record => {
+    if (record) {
+      if (record.id) {
+        setSelectedJob(record.id);
+        return;
+      }
+    }
+    setSelectedJob(null);
+  };
+
+  return (
+    <div>
+      <Table
+        title={() => t("jobs.labels.existing_jobs")}
+        size="small"
+        pagination={{ position: "bottom" }}
+        columns={columns.map(item => ({ ...item }))}
+        rowKey="id"
+        loading={jobsListLoading}
+        dataSource={jobsList}
+        rowSelection={{
+          onSelect: props => {
+            setSelectedJob(props.id);
+          },
+          type: "radio",
+          selectedRowKeys: [selectedJob]
+        }}
+        onRow={(record, rowIndex) => {
+          return {
+            onClick: event => {
+              handleOnRowClick(record);
+            }
+          };
+        }}
+      />
+      <Divider />
+      <Checkbox
+        defaultChecked={importOptions.overrideHeader}
+        onChange={e =>
+          setImportOptions({
+            ...importOptions,
+            overrideHeader: e.target.checked
+          })
+        }
+      >
+        {t("jobs.labels.override_header")}
+      </Checkbox>
+    </div>
+  );
+}

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

@@ -0,0 +1,46 @@
+import { Modal } from "antd";
+import React from "react";
+import { useQuery } from "react-apollo";
+import { useTranslation } from "react-i18next";
+import { QUERY_ALL_OPEN_JOBS } from "../../graphql/jobs.queries";
+import AlertComponent from "../alert/alert.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import JobsFindModalComponent from "./jobs-find-modal.component";
+
+export default function JobsFindModalContainer({
+  loading,
+  error,
+  selectedJob,
+  setSelectedJob,
+  importOptionsState,
+  ...modalProps
+}) {
+  const { t } = useTranslation();
+
+  const jobsList = useQuery(QUERY_ALL_OPEN_JOBS, {
+    fetchPolicy: "network-only"
+  });
+
+  return (
+    <Modal
+      title={t("jobs.labels.existing_jobs")}
+      width={"80%"}
+      okButtonProps={{ disabled: selectedJob ? false : true }}
+      {...modalProps}
+    >
+      {loading ? <LoadingSpinner /> : null}
+      {error ? <AlertComponent message={error.message} type="error" /> : null}
+      {true ? (
+        <JobsFindModalComponent
+          selectedJob={selectedJob}
+          setSelectedJob={setSelectedJob}
+          importOptionsState={importOptionsState}
+          jobsListLoading={jobsList.loading}
+          jobsList={
+            jobsList.data && jobsList.data.jobs ? jobsList.data.jobs : null
+          }
+        />
+      ) : null}
+    </Modal>
+  );
+}