Most functionality is restored after antd upgrade. WIP on invoice enter screen.

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

@@ -1,5 +1,5 @@
 import {
-  AutoComplete,
+  Select,
   Button,
   DatePicker,
   Form,
@@ -20,10 +20,9 @@ export default function InvoiceEnterModalComponent({
   handleCancel,
   handleFinish,
 
-  handleRoAutoComplete,
   handleRoSelect,
   roAutoCompleteOptions,
-  handleVendorAutoComplete,
+
   handleVendorSelect,
   vendorAutoCompleteOptions,
   lineData,
@@ -48,7 +47,7 @@ export default function InvoiceEnterModalComponent({
         width={"90%"}
         visible={visible}
         okText={t("general.labels.save")}
-        onOk={handleFinish}
+        onOk={() => form.submit()}
         okButtonProps={{ htmlType: "submit" }}
         onCancel={handleCancel}
       >
@@ -59,21 +58,31 @@ export default function InvoiceEnterModalComponent({
             rules={[
               {
                 required: true,
-                pattern: new RegExp(
-                  "[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}"
-                ),
-                message: t("invoices.errors.invalidro")
+                message: t("general.validation.required")
               }
             ]}
           >
-            <AutoComplete
-              options={roAutoCompleteOptions}
-              onSearch={handleRoAutoComplete}
+            <Select
+              showSearch
               autoFocus
               style={{ width: "300px" }}
               onSelect={handleRoSelect}
-              backfill
-            />
+            >
+              {roAutoCompleteOptions
+                ? roAutoCompleteOptions.map(o => (
+                    <Select.Option
+                      key={o.id}
+                      value={o.ro_number ? o.ro_number : o.est_number}
+                    >
+                      {`${
+                        o.ro_number ? o.ro_number : o.est_number
+                      } | ${o.ownr_ln || ""} ${o.ownr_fn || ""} | ${o.vehicle
+                        .v_model_yr || ""} ${o.vehicle.v_make_desc || ""} ${o
+                        .vehicle.v_model_desc || ""}`}
+                    </Select.Option>
+                  ))
+                : null}
+            </Select>
           </Form.Item>
           <Form.Item
             label={t("invoices.fields.vendor")}
@@ -81,20 +90,23 @@ export default function InvoiceEnterModalComponent({
             rules={[
               {
                 required: true,
-                pattern: new RegExp(
-                  "[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}"
-                ),
-                message: t("invoices.errors.invalidvendor")
+                message: t("general.validation.required")
               }
             ]}
           >
-            <AutoComplete
-              options={vendorAutoCompleteOptions}
+            <Select
+              showSearch
               onSelect={handleVendorSelect}
               style={{ width: "300px" }}
-              onSearch={handleVendorAutoComplete}
-              backfill
-            />
+            >
+              {vendorAutoCompleteOptions
+                ? vendorAutoCompleteOptions.map(o => (
+                    <Select.Option key={o.id} value={o.name}>
+                      {o.name}
+                    </Select.Option>
+                  ))
+                : null}
+            </Select>
           </Form.Item>
           <Button onClick={() => resetFields()}>
             {t("general.actions.reset")}

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

@@ -3,7 +3,7 @@ import { useLazyQuery, useQuery } from "react-apollo";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { GET_JOB_LINES_TO_ENTER_INVOICE } from "../../graphql/jobs-lines.queries";
-import { SEARCH_RO_AUTOCOMPLETE } from "../../graphql/jobs.queries";
+import { ACTIVE_JOBS_FOR_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";
@@ -27,13 +27,11 @@ function InvoiceEnterModalContainer({
   const linesState = useState([]);
   const roSearchState = useState({ text: "", selectedId: null });
   const [roSearch, setRoSearch] = roSearchState;
-  const handleRoAutoComplete = e => {
-    setRoSearch({ ...roSearch, text: e });
-  };
-  const { data: RoAutoCompleteData } = useQuery(SEARCH_RO_AUTOCOMPLETE, {
+
+  const { data: RoAutoCompleteData } = useQuery(ACTIVE_JOBS_FOR_AUTOCOMPLETE, {
     fetchPolicy: "network-only",
-    variables: { search: `%${roSearch.text}%` },
-    skip: !roSearch.text || roSearch.text.length < 3
+    variables: { statuses: bodyshop.md_ro_statuses.open_statuses || ["Open"] },
+    skip: !invoiceEnterModal.visible
   });
 
   const vendorSearchState = useState({
@@ -41,15 +39,11 @@ function InvoiceEnterModalContainer({
     selectedId: null
   });
   const [vendorSearch, setVendorSearch] = vendorSearchState;
-  const handleVendorAutoComplete = e => {
-    setVendorSearch({ ...vendorSearch, text: e });
-  };
   const { data: VendorAutoCompleteData } = useQuery(
     SEARCH_VENDOR_AUTOCOMPLETE,
     {
       fetchPolicy: "network-only",
-      variables: { search: `%${vendorSearch.text}%` },
-      skip: !vendorSearch.text || vendorSearch.text.length < 3
+      skip: !invoiceEnterModal.visible
     }
   );
 
@@ -65,14 +59,15 @@ function InvoiceEnterModalContainer({
     if (!called) loadLines();
   }
   const handleRoSelect = (value, obj) => {
-    setRoSearch({ ...roSearch, selectedId: obj.id });
+    setRoSearch({ ...roSearch, selectedId: obj.key });
   };
 
   const handleVendorSelect = (value, obj) => {
-    setVendorSearch({ ...vendorSearch, selectedId: obj.id });
+    setVendorSearch({ ...vendorSearch, selectedId: obj.key });
   };
 
   const handleFinish = values => {
+    console.log("values", values);
     alert("Closing this modal.");
     toggleModalVisible();
     // if (!jobLineEditModal.context.id) {
@@ -131,34 +126,11 @@ function InvoiceEnterModalContainer({
       invoice={invoiceEnterModal.context}
       handleFinish={handleFinish}
       handleCancel={handleCancel}
-      handleRoAutoComplete={handleRoAutoComplete}
       handleRoSelect={handleRoSelect}
-      roAutoCompleteOptions={
-        RoAutoCompleteData
-          ? RoAutoCompleteData.jobs.reduce((acc, value) => {
-              acc.push({
-                id: value.id,
-                value: `${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}
+      roAutoCompleteOptions={RoAutoCompleteData && RoAutoCompleteData.jobs}
       handleVendorSelect={handleVendorSelect}
       vendorAutoCompleteOptions={
-        VendorAutoCompleteData
-          ? VendorAutoCompleteData.vendors.reduce((acc, value) => {
-              acc.push({
-                id: value.id,
-                value: `${value.name || ""}`
-              });
-              return acc;
-            }, [])
-          : null
+        VendorAutoCompleteData && VendorAutoCompleteData.vendors
       }
       linesState={linesState}
       lineData={lineData ? lineData.joblines : null}