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

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

@@ -141,7 +141,8 @@ export default function JobsAvailableComponent({
     estData.data.available_jobs_by_pk &&
     estData.data.available_jobs_by_pk.est_data &&
     estData.data.available_jobs_by_pk.est_data.owner &&
-    estData.data.available_jobs_by_pk.est_data.owner.data
+    estData.data.available_jobs_by_pk.est_data.owner.data &&
+    !estData.data.available_jobs_by_pk.issupplement
       ? estData.data.available_jobs_by_pk.est_data.owner.data
       : null;
 
@@ -164,7 +165,7 @@ export default function JobsAvailableComponent({
           return (
             <div>
               <Input.Search
-                placeholder="Search..."
+                placeholder="Search...//TODO Implement Search"
                 onSearch={value => {
                   console.log(value);
                 }}

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

@@ -29,14 +29,7 @@ export default withRouter(function JobsAvailableContainer({
 
   const onModalOk = () => {
     setModalVisible(false);
-    console.log("selectedOwner", selectedOwner);
     setInsertLoading(true);
-    console.log(
-      "logitest",
-      estData.data &&
-        estData.data.available_jobs_by_pk &&
-        estData.data.available_jobs_by_pk.est_data
-    );
 
     if (
       !(

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

@@ -3,13 +3,24 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { alphaSort } from "../../utils/sorters";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
+import JobsFindModalContainer from "../jobs-find-modal/jobs-find-modal.container";
+
 export default function JobsAvailableSupplementComponent({
   loading,
   data,
   refetch,
   deleteJob,
+  updateJob,
+  onModalOk,
+  onModalCancel,
+  modalVisible,
+  setModalVisible,
+  selectedJob,
+  setSelectedJob,
   deleteAllNewJobs,
-  estDataLazyLoad
+  loadEstData,
+  estData,
+  importOptionsState
 }) {
   const { t } = useTranslation();
 
@@ -127,7 +138,8 @@ export default function JobsAvailableSupplementComponent({
           </Button>
           <Button
             onClick={() => {
-              alert("Add");
+              loadEstData({ variables: { id: record.id } });
+              setModalVisible(true);
             }}
           >
             <Icon type="plus" />
@@ -140,54 +152,67 @@ export default function JobsAvailableSupplementComponent({
   ];
 
   return (
-    <Table
-      loading={loading}
-      title={() => {
-        return (
-          <div>
-            <Input.Search
-              placeholder="Search..."
-              onSearch={value => {
-                console.log(value);
-              }}
-              enterButton
-            />
-            <Button
-              onClick={() => {
-                refetch();
-              }}
-            >
-              <Icon type="sync" />
-            </Button>
-            <Button
-              onClick={() => {
-                deleteAllNewJobs()
-                  .then(r => {
-                    notification["success"]({
-                      message: t("jobs.successes.all_deleted", {
-                        count: r.data.delete_available_jobs.affected_rows
-                      })
+    <div>
+      <JobsFindModalContainer
+        loading={estData.loading}
+        error={estData.error}
+        selectedJob={selectedJob}
+        setSelectedJob={setSelectedJob}
+        importOptionsState={importOptionsState}
+        visible={modalVisible}
+        onOk={onModalOk}
+        onCancel={onModalCancel}
+        
+      />
+      <Table
+        loading={loading}
+        title={() => {
+          return (
+            <div>
+              <Input.Search
+                placeholder="Search..."
+                onSearch={value => {
+                  console.log(value);
+                }}
+                enterButton
+              />
+              <Button
+                onClick={() => {
+                  refetch();
+                }}
+              >
+                <Icon type="sync" />
+              </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
+                      });
                     });
-                    refetch();
-                  })
-                  .catch(r => {
-                    notification["error"]({
-                      message: t("jobs.errors.deleted") + " " + r.message
-                    });
-                  });
-              }}
-            >
-              Delete All
-            </Button>
-          </div>
-        );
-      }}
-      size="small"
-      pagination={{ position: "top" }}
-      columns={columns.map(item => ({ ...item }))}
-      rowKey="id"
-      dataSource={data && data.available_jobs}
-      onChange={handleTableChange}
-    />
+                }}
+              >
+                Delete All
+              </Button>
+            </div>
+          );
+        }}
+        size="small"
+        pagination={{ position: "top" }}
+        columns={columns.map(item => ({ ...item }))}
+        rowKey="id"
+        dataSource={data && data.available_jobs}
+        onChange={handleTableChange}
+      />
+    </div>
   );
 }

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

@@ -1,12 +1,21 @@
-import React from "react";
+import { notification } from "antd";
+import React, { useState } from "react";
 import { useMutation, useQuery } from "react-apollo";
-import { DELETE_ALL_AVAILABLE_SUPPLEMENT_JOBS, QUERY_AVAILABLE_SUPPLEMENT_JOBS } from "../../graphql/available-jobs.queries";
+import { useTranslation } from "react-i18next";
+import { withRouter } from "react-router-dom";
+import {
+  DELETE_ALL_AVAILABLE_SUPPLEMENT_JOBS,
+  QUERY_AVAILABLE_SUPPLEMENT_JOBS
+} from "../../graphql/available-jobs.queries";
+import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import AlertComponent from "../alert/alert.component";
 import JobsAvailableSupplementComponent from "./jobs-available-supplement.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 
-export default function JobsAvailableSupplementContainer({
+export default withRouter(function JobsAvailableSupplementContainer({
   deleteJob,
-  estDataLazyLoad
+  estDataLazyLoad,
+  history
 }) {
   const { loading, error, data, refetch } = useQuery(
     QUERY_AVAILABLE_SUPPLEMENT_JOBS,
@@ -14,17 +23,96 @@ export default function JobsAvailableSupplementContainer({
       fetchPolicy: "network-only"
     }
   );
+  const { t } = useTranslation();
+
   const [deleteAllNewJobs] = useMutation(DELETE_ALL_AVAILABLE_SUPPLEMENT_JOBS);
 
+  const [modalVisible, setModalVisible] = useState(false);
+  const [selectedJob, setSelectedJob] = useState(null);
+  const [insertLoading, setInsertLoading] = useState(false);
+  const [updateJob] = useMutation(UPDATE_JOB);
+  const [loadEstData, estData] = estDataLazyLoad;
+const importOptionsState = useState({overrideHeaders: false,})
+
+  const onModalOk = () => {
+    setModalVisible(false);
+    setInsertLoading(true);
+
+    if (
+      !(
+        estData.data &&
+        estData.data.available_jobs_by_pk &&
+        estData.data.available_jobs_by_pk.est_data
+      )
+    ) {
+      //We don't have the right data. Error!
+      setInsertLoading(false);
+      notification["error"]({
+        message: t("jobs.errors.creating", { error: "No job data present." })
+      });
+    } else {
+      updateJob({
+        variables: {
+          job: estData.data.available_jobs_by_pk.est_data //STRAIGHT DATA PLACE, SHOULD REMOVE
+        }
+      })
+        .then(r => {
+          notification["success"]({
+            message: t("jobs.successes.created"),
+            onClick: () => {
+              console.log("r", r);
+              history.push(
+                `/manage/jobs/${r.data.update_jobs.returning[0].id}`
+              );
+            }
+          });
+          //Job has been inserted. Clean up the available jobs record.
+          deleteJob({
+            variables: { id: estData.data.available_jobs_by_pk.id }
+          }).then(r => {
+            refetch();
+            setInsertLoading(false);
+          });
+        })
+        .catch(r => {
+          //error while inserting
+          notification["error"]({
+            message: t("jobs.errors.creating", { error: r.message })
+          });
+          refetch();
+          setInsertLoading(false);
+        });
+    }
+  };
+
+  const onModalCancel = () => {
+    setModalVisible(false);
+    setSelectedJob(null);
+  };
+
   if (error) return <AlertComponent type="error" message={error.message} />;
   return (
-    <JobsAvailableSupplementComponent
-      loading={loading}
-      data={data}
-      refetch={refetch}
-      deleteJob={deleteJob}
-      deleteAllNewJobs={deleteAllNewJobs}
-      estDataLazyLoad={estDataLazyLoad}
-    />
+    <LoadingSpinner
+      loading={insertLoading}
+      message={t("jobs.labels.creating_new_job")}
+    >
+      <JobsAvailableSupplementComponent
+        loading={loading}
+        data={data}
+        refetch={refetch}
+        deleteJob={deleteJob}
+        updateJob={updateJob}
+        onModalOk={onModalOk}
+        onModalCancel={onModalCancel}
+        modalVisible={modalVisible}
+        setModalVisible={setModalVisible}
+        selectedJob={selectedJob}
+        setSelectedJob={setSelectedJob}
+        deleteAllNewJobs={deleteAllNewJobs}
+        loadEstData={loadEstData}
+        estData={estData}
+        importOptionsState={importOptionsState}
+      />
+    </LoadingSpinner>
   );
-}
+});

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>
+  );
+}

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

@@ -118,7 +118,8 @@ export default function OwnerFindModalComponent({
         checked={selectedOwner ? false : true}
         onClick={() => setSelectedOwner(null)}
       >
-        Create a new Owner record for this job.
+        
+        {t("owners.labels.create_new")}
       </Checkbox>
     </div>
   );

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

@@ -35,6 +35,7 @@ export default function OwnerFindModalContainer({
     <Modal
       title={t("owners.labels.existing_owners")}
       width={"80%"}
+      okButtonProps={{ disabled: selectedOwner ? false : true }}
       {...modalProps}
     >
       {loading ? <LoadingSpinner /> : null}