WIP for document upload on invoice enter.

client/src/components/documents-upload/documents-upload.component.jsx

@@ -2,13 +2,14 @@ import { UploadOutlined } from "@ant-design/icons";
 import { Button, Upload } from "antd";
 import React from "react";
 
-export default function DocumentsUploadComponent({ handleUpload }) {
+export default function DocumentsUploadComponent({ handleUpload, UploadRef }) {
   return (
     <div>
       <Upload
         multiple={true}
         customRequest={handleUpload}
         accept="audio/*,video/*,image/*"
+        ref={UploadRef}
       >
         <Button>
           <UploadOutlined /> Click to Upload

client/src/components/documents-upload/documents-upload.container.jsx

@@ -1,6 +1,6 @@
 import { notification } from "antd";
 import axios from "axios";
-import React from "react";
+import React, { useRef } from "react";
 import { useMutation } from "@apollo/react-hooks";
 import { useTranslation } from "react-i18next";
 import Resizer from "react-image-file-resizer";
@@ -9,30 +9,29 @@ import { createStructuredSelector } from "reselect";
 import { INSERT_NEW_DOCUMENT } from "../../graphql/documents.queries";
 import {
   selectBodyshop,
-  selectCurrentUser
+  selectCurrentUser,
 } from "../../redux/user/user.selectors";
 import { generateCdnThumb } from "../../utils/DocHelpers";
 import DocumentsUploadComponent from "./documents-upload.component";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
-  bodyshop: selectBodyshop
+  bodyshop: selectBodyshop,
 });
 
-export default connect(
-  mapStateToProps,
-  null
-)(function DocumentsUploadContainer({
+export function DocumentsUploadContainer({
   jobId,
   invoiceId,
   currentUser,
   bodyshop,
-  callbackAfterUpload
+  callbackAfterUpload,
+  onChange,
 }) {
   const { t } = useTranslation();
   const [insertNewDocument] = useMutation(INSERT_NEW_DOCUMENT);
+  const UploadRef = useRef(null);
 
-  const handleUpload = ev => {
+  const handleUpload = (ev) => {
     const { onError, onSuccess, onProgress } = ev;
     //If PDF, upload directly.
     //If JPEG, resize and upload.
@@ -49,7 +48,7 @@ export default connect(
         "PNG",
         75,
         0,
-        uri => {
+        (uri) => {
           let file = new File([uri], ev.file.name, {});
           file.uid = ev.file.uid;
           uploadToS3(key, file.type, file, onError, onSuccess, onProgress);
@@ -69,9 +68,9 @@ export default connect(
     axios
       .post("/sign_s3", {
         fileName,
-        fileType
+        fileType,
       })
-      .then(response => {
+      .then((response) => {
         var returnData = response.data.data.returnData;
         var signedRequest = returnData.signedRequest;
         var url = returnData.url;
@@ -79,16 +78,16 @@ export default connect(
         // Put the fileType in the headers for the upload
         var options = {
           headers: {
-            "Content-Type": fileType
+            "Content-Type": fileType,
           },
-          onUploadProgress: e => {
+          onUploadProgress: (e) => {
             onProgress({ percent: (e.loaded / e.total) * 100 });
-          }
+          },
         };
 
         axios
           .put(signedRequest, file, options)
-          .then(response => {
+          .then((response) => {
             insertNewDocument({
               variables: {
                 docInput: [
@@ -101,43 +100,55 @@ export default connect(
                         ? "application/pdf"
                         : generateCdnThumb(fileName),
                     key: fileName,
-                    invoiceid: invoiceId
-                  }
-                ]
-              }
-            }).then(r => {
+                    invoiceid: invoiceId,
+                  },
+                ],
+              },
+            }).then((r) => {
               onSuccess({
                 uid: r.data.insert_documents.returning[0].id,
                 url: r.data.insert_documents.returning[0].thumb_url,
                 name: r.data.insert_documents.returning[0].name,
                 status: "done",
                 full_url: r.data.insert_documents.returning[0].url,
-                key: r.data.insert_documents.returning[0].key
+                key: r.data.insert_documents.returning[0].key,
               });
               notification["success"]({
-                message: t("documents.successes.insert")
+                message: t("documents.successes.insert"),
               });
               if (callbackAfterUpload) {
                 callbackAfterUpload();
               }
+              console.log("ref", UploadRef.current.state.fileList);
+              if (onChange) {
+                //Used in a form.
+                onChange(UploadRef.current.state.fileList);
+              }
             });
           })
-          .catch(error => {
+          .catch((error) => {
             onError(error);
             notification["error"]({
               message: t("documents.errors.insert", {
-                message: JSON.stringify(error)
-              })
+                message: JSON.stringify(error),
+              }),
             });
           });
       })
-      .catch(error => {
+      .catch((error) => {
         notification["error"]({
           message: t("documents.errors.getpresignurl", {
-            message: JSON.stringify(error)
-          })
+            message: JSON.stringify(error),
+          }),
         });
       });
   };
-  return <DocumentsUploadComponent handleUpload={handleUpload} />;
-});
+  return (
+    <DocumentsUploadComponent
+      handleUpload={handleUpload}
+      UploadRef={UploadRef}
+    />
+  );
+}
+
+export default connect(mapStateToProps, null)(DocumentsUploadContainer);

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

@@ -5,6 +5,7 @@ import CurrencyInput from "../form-items-formatted/currency-form-item.component"
 import JobSearchSelect from "../job-search-select/job-search-select.component";
 import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
 import InvoiceEnterModalLinesComponent from "./invoice-enter-modal.lines.component";
+import DocumentsUploadContainer from "../documents-upload/documents-upload.container";
 
 export default function InvoiceEnterModalComponent({
   form,
@@ -12,7 +13,7 @@ export default function InvoiceEnterModalComponent({
   vendorAutoCompleteOptions,
   lineData,
   responsibilityCenters,
-  loadLines
+  loadLines,
 }) {
   const { t } = useTranslation();
 
@@ -31,8 +32,8 @@ export default function InvoiceEnterModalComponent({
           rules={[
             {
               required: true,
-              message: t("general.validation.required")
-            }
+              message: t("general.validation.required"),
+            },
           ]}
         >
           <JobSearchSelect
@@ -50,8 +51,8 @@ export default function InvoiceEnterModalComponent({
           rules={[
             {
               required: true,
-              message: t("general.validation.required")
-            }
+              message: t("general.validation.required"),
+            },
           ]}
         >
           <VendorSearchSelect
@@ -67,8 +68,8 @@ export default function InvoiceEnterModalComponent({
           rules={[
             {
               required: true,
-              message: t("general.validation.required")
-            }
+              message: t("general.validation.required"),
+            },
           ]}
         >
           <Input />
@@ -79,8 +80,8 @@ export default function InvoiceEnterModalComponent({
           rules={[
             {
               required: true,
-              message: t("general.validation.required")
-            }
+              message: t("general.validation.required"),
+            },
           ]}
         >
           <DatePicker />
@@ -98,8 +99,8 @@ export default function InvoiceEnterModalComponent({
           rules={[
             {
               required: true,
-              message: t("general.validation.required")
-            }
+              message: t("general.validation.required"),
+            },
           ]}
         >
           <CurrencyInput />
@@ -111,6 +112,20 @@ export default function InvoiceEnterModalComponent({
         form={form}
         responsibilityCenters={responsibilityCenters}
       />
+
+      <Form.Item
+        name="upload"
+        label="Upload"
+      >
+        <DocumentsUploadContainer jobId={form.getFieldValue("jobid")} />
+      </Form.Item>
+      <button
+        onClick={() => {
+          console.log(form.getFieldsValue());
+        }}
+      >
+        a
+      </button>
     </div>
   );
 }

client/src/pages/invoice-detail/invoice-detail.page.container.jsx

@@ -1,13 +1,27 @@
 import React from "react";
 import { useParams } from "react-router-dom";
 import InvoiceDetailPageComponent from "./invoice-detail.page.component";
+import { useQuery } from "@apollo/react-hooks";
+import { QUERY_INVOICE_BY_PK } from "../../graphql/invoices.queries";
+import AlertComponent from "../../components/alert/alert.component";
+import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
+import { Form } from "antd";
 
 export default function InvoiceDetailPageContainer() {
   const { invoiceId } = useParams();
+  const [form] = Form.useForm();
+
+  const { loading, error, data } = useQuery(QUERY_INVOICE_BY_PK, {
+    variables: { invoiceid: invoiceId },
+    skip: !!!invoiceId,
+  });
+
+  if (loading) return <LoadingSpinner />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (
-    <div>
+    <Form form={form} initialValues={data ? data.invoices_by_pk : {}}>
       <InvoiceDetailPageComponent />
-    </div>
+    </Form>
   );
 }