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

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