BOD-61 Fixed invoice enter modal to simplify + follow new modal pattern.

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

@@ -1,8 +1,10 @@
+import { useLazyQuery, useMutation, useQuery } from "@apollo/react-hooks";
+import { Form, Modal, notification } from "antd";
 import React, { useState } from "react";
-import { notification } from "antd";
-import { useLazyQuery, useQuery, useMutation } from "@apollo/react-hooks";
+import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { INSERT_NEW_INVOICE } from "../../graphql/invoices.queries";
 import { GET_JOB_LINES_TO_ENTER_INVOICE } from "../../graphql/jobs-lines.queries";
 import { ACTIVE_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries";
 import { SEARCH_VENDOR_AUTOCOMPLETE } from "../../graphql/vendors.queries";
@@ -10,8 +12,6 @@ import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectInvoiceEnterModal } from "../../redux/modals/modals.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import InvoiceEnterModalComponent from "./invoice-enter-modal.component";
-import { INSERT_NEW_INVOICE } from "../../graphql/invoices.queries";
-import { useTranslation } from "react-i18next";
 
 const mapStateToProps = createStructuredSelector({
   invoiceEnterModal: selectInvoiceEnterModal,
@@ -26,10 +26,9 @@ function InvoiceEnterModalContainer({
   toggleModalVisible,
   bodyshop
 }) {
+  const [form] = Form.useForm();
   const { t } = useTranslation();
   const linesState = useState([]);
-  const roSearchState = useState({ text: "", selectedId: null });
-  const [roSearch, setRoSearch] = roSearchState;
 
   const [insertInvoice] = useMutation(INSERT_NEW_INVOICE);
 
@@ -39,11 +38,6 @@ function InvoiceEnterModalContainer({
     skip: !invoiceEnterModal.visible
   });
 
-  const vendorSearchState = useState({
-    text: "",
-    selectedId: null
-  });
-  const [vendorSearch, setVendorSearch] = vendorSearchState;
   const { data: VendorAutoCompleteData } = useQuery(
     SEARCH_VENDOR_AUTOCOMPLETE,
     {
@@ -52,53 +46,33 @@ function InvoiceEnterModalContainer({
     }
   );
 
-  const [loadLines, { called, data: lineData }] = useLazyQuery(
+  const [loadLines, { data: lineData }] = useLazyQuery(
     GET_JOB_LINES_TO_ENTER_INVOICE,
     {
-      fetchPolicy: "network-only",
-      variables: { id: roSearch.selectedId }
+      fetchPolicy: "network-only"
     }
   );
 
-  if (roSearch.selectedId) {
-    if (!called) loadLines();
-  }
-  const handleRoSelect = (value, obj) => {
-    setRoSearch({ ...roSearch, selectedId: obj.key });
-  };
-
-  const handleVendorSelect = (value, obj) => {
-    setVendorSearch({ ...vendorSearch, selectedId: obj.key });
-  };
-
   const handleFinish = values => {
     insertInvoice({
       variables: {
         invoice: [
-          Object.assign(
-            {},
-            values,
-            { jobid: roSearch.selectedId },
-            { vendorid: vendorSearch.selectedId },
-            { invoicelines: { data: values.invoicelines } }
-          )
+          Object.assign({}, values, {
+            invoicelines: { data: values.invoicelines }
+          })
         ]
       }
     })
       .then(r => {
-        // if (jobLineEditModal.actions.refetch)
-        //   jobLineEditModal.actions.refetch();
-        // toggleModalVisible();
         notification["success"]({
           message: t("invoices.successes.created")
         });
+        toggleModalVisible();
       })
       .catch(error => {
-        console.log("error", error);
-
         notification["error"]({
           message: t("invoices.errors.creating", {
-            message: error.message
+            message: JSON.stringify(error)
           })
         });
       });
@@ -109,30 +83,33 @@ function InvoiceEnterModalContainer({
   };
 
   return (
-    <InvoiceEnterModalComponent
+    <Modal
+      title={
+        invoiceEnterModal.context && invoiceEnterModal.context.id
+          ? t("invoices.labels.edit")
+          : t("invoices.labels.new")
+      }
+      width={"90%"}
       visible={invoiceEnterModal.visible}
-      invoice={invoiceEnterModal.context}
-      handleFinish={handleFinish}
-      handleCancel={handleCancel}
-      handleRoSelect={handleRoSelect}
-      roAutoCompleteOptions={RoAutoCompleteData && RoAutoCompleteData.jobs}
-      handleVendorSelect={handleVendorSelect}
-      vendorAutoCompleteOptions={
-        VendorAutoCompleteData && VendorAutoCompleteData.vendors
-      }
-      linesState={linesState}
-      lineData={lineData ? lineData.joblines : null}
-      vendor={
-        vendorSearch.selectedId
-          ? VendorAutoCompleteData &&
-            VendorAutoCompleteData.vendors.filter(
-              v => v.id === vendorSearch.selectedId
-            )[0]
-          : null
-      }
-      job={invoiceEnterModal.context.job || null}
-      responsibilityCenters={bodyshop.md_responsibility_centers || null}
-    />
+      okText={t("general.actions.save")}
+      onOk={() => form.submit()}
+      onCancel={handleCancel}
+      destroyOnClose
+    >
+      <Form onFinish={handleFinish} autoComplete={"off"} form={form}>
+        <InvoiceEnterModalComponent
+          form={form}
+          roAutoCompleteOptions={RoAutoCompleteData && RoAutoCompleteData.jobs}
+          vendorAutoCompleteOptions={
+            VendorAutoCompleteData && VendorAutoCompleteData.vendors
+          }
+          loadLines={loadLines}
+          linesState={linesState}
+          lineData={lineData ? lineData.joblines : null}
+          responsibilityCenters={bodyshop.md_responsibility_centers || null}
+        />
+      </Form>
+    </Modal>
   );
 }