Added functional upload on invoice enter. BOD-75

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

@@ -6,13 +6,15 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { INSERT_NEW_INVOICE } from "../../graphql/invoices.queries";
 import { toggleModalVisible } from "../../redux/modals/modals.actions";
-import { selectBodyshop } from "../../redux/user/user.selectors";
 import { selectInvoiceEnterModal } from "../../redux/modals/modals.selectors";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import { handleUpload } from "../documents-upload/documents-upload.utility";
 import InvoiceFormContainer from "../invoice-form/invoice-form.container";
 
 const mapStateToProps = createStructuredSelector({
   invoiceEnterModal: selectInvoiceEnterModal,
   bodyshop: selectBodyshop,
+  currentUser: selectCurrentUser,
 });
 const mapDispatchToProps = (dispatch) => ({
   toggleModalVisible: () => dispatch(toggleModalVisible("invoiceEnter")),
@@ -22,19 +24,23 @@ function InvoiceEnterModalContainer({
   invoiceEnterModal,
   toggleModalVisible,
   bodyshop,
+  currentUser,
 }) {
   const [form] = Form.useForm();
   const { t } = useTranslation();
   const [enterAgain, setEnterAgain] = useState(false);
   const [insertInvoice] = useMutation(INSERT_NEW_INVOICE);
+  const [loading, setLoading] = useState(false);
 
   const handleFinish = (values) => {
+    setLoading(true);
+    const { upload, ...remainingValues } = values;
     insertInvoice({
       variables: {
         invoice: [
-          Object.assign({}, values, {
+          Object.assign({}, remainingValues, {
             invoicelines: {
-              data: values.invoicelines.map((i) => {
+              data: remainingValues.invoicelines.map((i) => {
                 return {
                   ...i,
                   joblineid: i.joblineid === "noline" ? null : i.joblineid,
@@ -46,6 +52,27 @@ function InvoiceEnterModalContainer({
       },
     })
       .then((r) => {
+        const invoiceId = r.data.insert_invoices.returning[0].id;
+        console.log("invoiceId", invoiceId);
+        /////////////////////////
+        if (upload && upload.length > 0) {
+          //insert Each of the documents?
+          upload.forEach((u) => {
+            handleUpload(
+              { file: u.originFileObj },
+              {
+                bodyshop: bodyshop,
+                uploaded_by: currentUser.email,
+                jobId: values.jobid,
+                invoiceId: invoiceId,
+                tagsArray: null,
+                callback: null,
+              }
+            );
+          });
+        }
+        ///////////////////////////
+        setLoading(false);
         notification["success"]({
           message: t("invoices.successes.created"),
         });
@@ -60,6 +87,7 @@ function InvoiceEnterModalContainer({
         setEnterAgain(false);
       })
       .catch((error) => {
+        setLoading(false);
         setEnterAgain(false);
         notification["error"]({
           message: t("invoices.errors.creating", {
@@ -89,12 +117,13 @@ function InvoiceEnterModalContainer({
       footer={
         <span>
           <Button onClick={handleCancel}>{t("general.actions.cancel")}</Button>
-          <Button onClick={() => form.submit()}>
+          <Button loading={loading} onClick={() => form.submit()}>
             {t("general.actions.save")}
           </Button>
           {invoiceEnterModal.context && invoiceEnterModal.context.id ? null : (
             <Button
               type="primary"
+              loading={loading}
               onClick={() => {
                 setEnterAgain(true);
               }}