Changed RO Search Select to use RO searching and possible provided job value for options IMEX-129 IMEX-327

client/src/components/job-search-select/job-search-select.component.jsx

@@ -1,50 +1,94 @@
+import { useLazyQuery } from "@apollo/react-hooks";
 import { Select } from "antd";
-import React, { useEffect, useState, forwardRef } from "react";
+import React, { forwardRef, useEffect, useState } from "react";
+import {
+  SEARCH_JOBS_FOR_AUTOCOMPLETE,
+  SEARCH_JOBS_BY_ID_FOR_AUTOCOMPLETE,
+} from "../../graphql/jobs.queries";
+import { LoadingOutlined } from "@ant-design/icons";
+import _ from "lodash";
+
 const { Option } = Select;
 
-//To be used as a form element only.
+const JobSearchSelect = ({ value, onChange, onBlur, disabled }, ref) => {
+  const [callSearch, { loading, error, data }] = useLazyQuery(
+    SEARCH_JOBS_FOR_AUTOCOMPLETE
+  );
+  const [
+    callIdSearch,
+    { loading: idLoading, error: idError, data: idData },
+  ] = useLazyQuery(SEARCH_JOBS_BY_ID_FOR_AUTOCOMPLETE);
+
+  const executeSearch = (v) => {
+    callSearch(v);
+  };
+  const debouncedExecuteSearch = _.debounce(executeSearch, 800);
+
+  const handleSearch = (value) => {
+    debouncedExecuteSearch({ variables: { search: value } });
+  };
 
-const JobSearchSelect = (
-  { value, onChange, options, onBlur, disabled, loading },
-  ref
-) => {
   const [option, setOption] = useState(value);
 
   useEffect(() => {
+    if (value === option) {
+      console.log("Job ID Provided, searching...");
+      callIdSearch({ variables: { id: value } });
+    }
+  }, [value, option, callIdSearch]);
+
+  // useEffect(() => {
+  //   if (value !== option && onChange) {
+  //     onChange(option);
+  //   }
+  // }, [value, option, onChange]);
+
+  const handleSelect = (value) => {
+    setOption(value);
     if (value !== option && onChange) {
       onChange(option);
     }
-  }, [value, option, onChange]);
+  };
+
+  const theOptions = [
+    ...(idData && idData.jobs_by_pk ? [idData.jobs_by_pk] : []),
+    ...(data && data.search_jobs ? data.search_jobs : []),
+  ];
 
   return (
-    <Select
-      ref={ref}
-      disabled={disabled}
-      showSearch
-      autoFocus
-      value={option}
-      style={{
-        width: 300,
-      }}
-      loading={loading}
-      onChange={setOption}
-      optionFilterProp="children"
-      onBlur={onBlur}
-    >
-      {options
-        ? options.map((o) => (
-            <Option key={o.id} value={o.id}>
-              {`${o.ro_number ? o.ro_number : o.est_number} | ${
-                o.ownr_ln || ""
-              } ${o.ownr_fn || ""} ${
-                o.ownr_co_nm ? ` ${o.ownr_co_num}` : ""
-              }| ${o.v_model_yr || ""} ${o.v_make_desc || ""} ${
-                o.v_model_desc || ""
-              }`}
-            </Option>
-          ))
-        : null}
-    </Select>
+    <div>
+      <Select
+        ref={ref}
+        disabled={disabled}
+        showSearch
+        autoFocus
+        value={option}
+        style={{
+          width: 300,
+        }}
+        filterOption={false}
+        onSearch={handleSearch}
+        //     onChange={setOption}
+        onSelect={handleSelect}
+        notFoundContent={loading ? <LoadingOutlined /> : null}
+        onBlur={onBlur}
+      >
+        {theOptions
+          ? theOptions.map((o) => (
+              <Option key={o.id} value={o.id}>
+                {`${o.ro_number ? o.ro_number : o.est_number} | ${
+                  o.ownr_ln || ""
+                } ${o.ownr_fn || ""} ${
+                  o.ownr_co_nm ? ` ${o.ownr_co_num}` : ""
+                }| ${o.v_model_yr || ""} ${o.v_make_desc || ""} ${
+                  o.v_model_desc || ""
+                }`}
+              </Option>
+            ))
+          : null}
+      </Select>
+      {idLoading || loading ? <LoadingOutlined /> : null}
+    </div>
   );
 };
 export default forwardRef(JobSearchSelect);