Added find owner modal and basic searching logic.

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

@@ -1,8 +1,8 @@
-import { Input, Table, Button, Icon, notification, Modal } from "antd";
+import { Button, Icon, Input, notification, Table } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { alphaSort } from "../../utils/sorters";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
+import { alphaSort } from "../../utils/sorters";
 import OwnerFindModalContainer from "../owner-find-modal/owner-find-modal.container";
 export default function JobsAvailableComponent({
   loading,
@@ -10,9 +10,12 @@ export default function JobsAvailableComponent({
   refetch,
   deleteJob,
   deleteAllNewJobs,
-  insertNewJob,
-  setJobId,
-  estDataLazyLoad
+  estDataLazyLoad,
+  onModalOk,
+  onModalCancel,
+  modalVisible,
+  setModalVisible,
+  selectedOwner, setSelectedOwner
 }) {
   const { t } = useTranslation();
   const [loadEstData, estData] = estDataLazyLoad;
@@ -22,7 +25,7 @@ export default function JobsAvailableComponent({
     filteredInfo: { text: "" }
   });
 
-  const [modalVisible, setModalVisible] = useState(false);
+  
 
   const handleTableChange = (pagination, filters, sorter) => {
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
@@ -121,8 +124,6 @@ export default function JobsAvailableComponent({
           </Button>
           <Button
             onClick={() => {
-              console.log("record.id", record.id);
-
               loadEstData({ variables: { id: record.id } });
               setModalVisible(true);
             }}
@@ -136,8 +137,6 @@ export default function JobsAvailableComponent({
     }
   ];
 
-  console.log("estData", estData);
-
   const owner =
     estData.data &&
     estData.data.available_jobs_by_pk &&
@@ -146,27 +145,18 @@ export default function JobsAvailableComponent({
     estData.data.available_jobs_by_pk.est_data.owner.data
       ? estData.data.available_jobs_by_pk.est_data.owner.data
       : null;
+
   return (
     <div>
       <OwnerFindModalContainer
         loading={estData.loading}
         error={estData.error}
         owner={owner}
+        selectedOwner={selectedOwner}
+        setSelectedOwner={setSelectedOwner}
         visible={modalVisible}
-        onOk={() => {
-          setModalVisible(false);
-          // insertNewJob({
-          //   variables: {
-          //     job: record.est_data
-          //   }
-          // }).then(r => {
-          //   notification["success"]({
-          //     message: t("jobs.successes.created")
-          //   });
-          //   refetch();
-          // });
-        }}
-        onCancel={() => setModalVisible(false)}
+        onOk={onModalOk}
+        onCancel={onModalCancel}
       />
 
       <Table

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { useMutation, useQuery } from "react-apollo";
 import {
   DELETE_ALL_AVAILABLE_NEW_JOBS,
@@ -13,9 +13,28 @@ export default function JobsAvailableContainer({ deleteJob, estDataLazyLoad }) {
     fetchPolicy: "network-only"
   });
 
+  const [modalVisible, setModalVisible] = useState(false);
+  const [selectedOwner, setSelectedOwner] = useState(null);
   const [deleteAllNewJobs] = useMutation(DELETE_ALL_AVAILABLE_NEW_JOBS);
   const [insertNewJob] = useMutation(INSERT_NEW_JOB);
 
+  const onModalOk = () => {
+    setModalVisible(false);
+    console.log("selectedOwner", selectedOwner);
+    // insertNewJob({
+    //   variables: {
+    //     job: record.est_data
+    //   }
+    // }).then(r => {
+    //   notification["success"]({
+    //     message: t("jobs.successes.created")
+    //   });
+    //   refetch();
+    // });
+  };
+
+  const onModalCancel = () => setModalVisible(false);
+
   if (error) return <AlertComponent type="error" message={error.message} />;
   return (
     <JobsAvailableComponent
@@ -26,6 +45,12 @@ export default function JobsAvailableContainer({ deleteJob, estDataLazyLoad }) {
       deleteAllNewJobs={deleteAllNewJobs}
       insertNewJob={insertNewJob}
       estDataLazyLoad={estDataLazyLoad}
+      onModalCancel={onModalCancel}
+      onModalOk={onModalOk}
+      modalVisible={modalVisible}
+      setModalVisible={setModalVisible}
+      selectedOwner={selectedOwner}
+      setSelectedOwner={setSelectedOwner}
     />
   );
 }