WIP on invoice enter modal.

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

@@ -1,21 +1,20 @@
 import { Form, notification } from "antd";
 import React, { useState } from "react";
-import { useQuery } from "react-apollo";
+import { useQuery, useLazyQuery } from "react-apollo";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import {
-  INSERT_NEW_JOB_LINE,
-  UPDATE_JOB_LINE
-} from "../../graphql/jobs-lines.queries";
+import { SEARCH_RO_AUTOCOMPLETE } from "../../graphql/jobs.queries";
+import { SEARCH_VENDOR_AUTOCOMPLETE } from "../../graphql/vendors.queries";
 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";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { GET_JOB_LINES_TO_ENTER_INVOICE } from "../../graphql/jobs-lines.queries";
 
 const mapStateToProps = createStructuredSelector({
-  invoiceEnterModal: selectInvoiceEnterModal
+  invoiceEnterModal: selectInvoiceEnterModal,
+  bodyshop: selectBodyshop
 });
 const mapDispatchToProps = dispatch => ({
   toggleModalVisible: () => dispatch(toggleModalVisible("invoiceEnter"))
@@ -24,19 +23,20 @@ const mapDispatchToProps = dispatch => ({
 function InvoiceEnterModalContainer({
   invoiceEnterModal,
   toggleModalVisible,
-  form
+  form,
+  bodyshop
 }) {
   const { t } = useTranslation();
-
-  const roSearchState = useState("");
+  const linesState  = useState([]);
+  const roSearchState = useState({ text: "", selectedId: null });
   const [roSearch, setRoSearch] = roSearchState;
   const handleRoAutoComplete = e => {
-    setRoSearch(e);
+    setRoSearch({ ...roSearch, text: e });
   };
   const { data: RoAutoCompleteData } = useQuery(SEARCH_RO_AUTOCOMPLETE, {
     fetchPolicy: "network-only",
-    variables: { search: `%${roSearch}%` },
-    skip: !roSearch
+    variables: { search: `%${roSearch.text}%` },
+    skip: !roSearch.text || roSearch.text.length < 3
   });
 
   const vendorSearchState = useState("");
@@ -49,10 +49,26 @@ function InvoiceEnterModalContainer({
     {
       fetchPolicy: "network-only",
       variables: { search: `%${vendorSearch}%` },
-      skip: !vendorSearch
+      skip: !vendorSearch || vendorSearch.length < 3
     }
   );
 
+  const [
+    loadLines,
+    { called, loading: lineLoading, 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 handleSubmit = e => {
     e.preventDefault();
     form.validateFieldsAndScroll((err, values) => {
@@ -126,6 +142,7 @@ function InvoiceEnterModalContainer({
       handleCancel={handleCancel}
       form={form}
       handleRoAutoComplete={handleRoAutoComplete}
+      handleRoSelect={handleRoSelect}
       roAutoCompleteOptions={
         RoAutoCompleteData
           ? RoAutoCompleteData.jobs.reduce((acc, value) => {
@@ -152,6 +169,8 @@ function InvoiceEnterModalContainer({
             }, [])
           : null
       }
+      linesState={linesState}
+      lineData={lineData ? lineData.joblines : null}
     />
   );
 }