Added vendor and RO search to enter invoice modal.

client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx

@@ -1,6 +1,6 @@
 import { Form, notification } from "antd";
-import React from "react";
-import { useMutation } from "react-apollo";
+import React, { useState } from "react";
+import { useQuery } from "react-apollo";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -11,6 +11,8 @@ import {
 import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectInvoiceEnterModal } from "../../redux/modals/modals.selectors";
 import InvoiceEnterModalComponent from "./invoice-enter-modal.component";
+import { SEARCH_RO_AUTOCOMPLETE } from "../../graphql/jobs.queries";
+import { SEARCH_VENDOR_AUTOCOMPLETE } from "../../graphql/vendors.queries";
 
 const mapStateToProps = createStructuredSelector({
   invoiceEnterModal: selectInvoiceEnterModal
@@ -25,12 +27,34 @@ function InvoiceEnterModalContainer({
   form
 }) {
   const { t } = useTranslation();
-  //   const [insertJobLine] = useMutation(INSERT_NEW_JOB_LINE);
-  //   const [updateJobLine] = useMutation(UPDATE_JOB_LINE);
+
+  const roSearchState = useState("");
+  const [roSearch, setRoSearch] = roSearchState;
+  const handleRoAutoComplete = e => {
+    setRoSearch(e);
+  };
+  const { data: RoAutoCompleteData } = useQuery(SEARCH_RO_AUTOCOMPLETE, {
+    fetchPolicy: "network-only",
+    variables: { search: `%${roSearch}%` },
+    skip: !roSearch
+  });
+
+  const vendorSearchState = useState("");
+  const [vendorSearch, setVendorSearch] = vendorSearchState;
+  const handleVendorAutoComplete = e => {
+    setVendorSearch(e);
+  };
+  const { data: VendorAutoCompleteData } = useQuery(
+    SEARCH_VENDOR_AUTOCOMPLETE,
+    {
+      fetchPolicy: "network-only",
+      variables: { search: `%${vendorSearch}%` },
+      skip: !vendorSearch
+    }
+  );
 
   const handleSubmit = e => {
     e.preventDefault();
-
     form.validateFieldsAndScroll((err, values) => {
       if (err) {
         notification["error"]({
@@ -39,6 +63,7 @@ function InvoiceEnterModalContainer({
         });
       }
       if (!err) {
+        console.log("values", values);
         alert("Closing this modal.");
         toggleModalVisible();
         // if (!jobLineEditModal.context.id) {
@@ -100,6 +125,33 @@ function InvoiceEnterModalContainer({
       handleSubmit={handleSubmit}
       handleCancel={handleCancel}
       form={form}
+      handleRoAutoComplete={handleRoAutoComplete}
+      roAutoCompleteOptions={
+        RoAutoCompleteData
+          ? RoAutoCompleteData.jobs.reduce((acc, value) => {
+              acc.push({
+                value: value.id,
+                text: `${value.ro_number || ""} | ${value.ownr_ln ||
+                  ""} ${value.ownr_fn || ""} | ${value.vehicle.v_model_yr ||
+                  ""} ${value.vehicle.v_make_desc || ""} ${value.vehicle
+                  .v_model_desc || ""}`
+              });
+              return acc;
+            }, [])
+          : null
+      }
+      handleVendorAutoComplete={handleVendorAutoComplete}
+      vendorAutoCompleteOptions={
+        VendorAutoCompleteData
+          ? VendorAutoCompleteData.vendors.reduce((acc, value) => {
+              acc.push({
+                value: value.id,
+                text: `${value.name || ""}`
+              });
+              return acc;
+            }, [])
+          : null
+      }
     />
   );
 }