Additional WIP on enter invoice modal

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

@@ -27,7 +27,7 @@ function InvoiceEnterModalContainer({
   bodyshop
 }) {
   const { t } = useTranslation();
-  const linesState  = useState([]);
+  const linesState = useState([]);
   const roSearchState = useState({ text: "", selectedId: null });
   const [roSearch, setRoSearch] = roSearchState;
   const handleRoAutoComplete = e => {
@@ -39,36 +39,42 @@ function InvoiceEnterModalContainer({
     skip: !roSearch.text || roSearch.text.length < 3
   });
 
-  const vendorSearchState = useState("");
+  const vendorSearchState = useState({
+    text: "",
+    selectedId: null
+  });
   const [vendorSearch, setVendorSearch] = vendorSearchState;
   const handleVendorAutoComplete = e => {
-    setVendorSearch(e);
+    setVendorSearch({ ...vendorSearch, text: e });
   };
   const { data: VendorAutoCompleteData } = useQuery(
     SEARCH_VENDOR_AUTOCOMPLETE,
     {
       fetchPolicy: "network-only",
-      variables: { search: `%${vendorSearch}%` },
-      skip: !vendorSearch || vendorSearch.length < 3
+      variables: { search: `%${vendorSearch.text}%` },
+      skip: !vendorSearch.text || vendorSearch.text.length < 3
     }
   );
 
-  const [
-    loadLines,
-    { called, loading: lineLoading, data: lineData }
-  ] = useLazyQuery(GET_JOB_LINES_TO_ENTER_INVOICE, {
-    fetchPolicy: "network-only",
-    variables: { id: roSearch.selectedId }
-  });
+  const [loadLines, { called, data: lineData }] = useLazyQuery(
+    GET_JOB_LINES_TO_ENTER_INVOICE,
+    {
+      fetchPolicy: "network-only",
+      variables: { id: roSearch.selectedId }
+    }
+  );
 
   if (roSearch.selectedId) {
     if (!called) loadLines();
-    console.log("lineData", lineData);
   }
   const handleRoSelect = v => {
     setRoSearch({ ...roSearch, selectedId: v });
   };
 
+  const handleVendorSelect = v => {
+    setVendorSearch({ ...vendorSearch, selectedId: v });
+  };
+
   const handleSubmit = e => {
     e.preventDefault();
     form.validateFieldsAndScroll((err, values) => {
@@ -134,6 +140,12 @@ function InvoiceEnterModalContainer({
     toggleModalVisible();
   };
 
+  console.log(
+    "c",
+    VendorAutoCompleteData?.vendors.filter(
+      v => v.id === vendorSearch.selectedId
+    )
+  );
   return (
     <InvoiceEnterModalComponent
       visible={invoiceEnterModal.visible}
@@ -158,6 +170,7 @@ function InvoiceEnterModalContainer({
           : null
       }
       handleVendorAutoComplete={handleVendorAutoComplete}
+      handleVendorSelect={handleVendorSelect}
       vendorAutoCompleteOptions={
         VendorAutoCompleteData
           ? VendorAutoCompleteData.vendors.reduce((acc, value) => {
@@ -171,6 +184,13 @@ function InvoiceEnterModalContainer({
       }
       linesState={linesState}
       lineData={lineData ? lineData.joblines : null}
+      vendor={
+        vendorSearch.selectedId
+          ? VendorAutoCompleteData.vendors.filter(
+              v => v.id === vendorSearch.selectedId
+            )[0]
+          : null
+      }
     />
   );
 }