BOD-24 WIP for document previews for non images. Random cleanup included. #comment Current design for document previews may be bandwidth intensive. Proceeding with design to get v1 completed.

bodyshop_translations.babel

@@ -1,4 +1,4 @@
-<babeledit_project be_version="2.6.1" version="1.2">
+<babeledit_project version="1.2" be_version="2.6.1">
     <!--
 
     BabelEdit project file
@@ -2807,27 +2807,6 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
-                                    <concept_node>
-                                        <name>save</name>
-                                        <definition_loaded>false</definition_loaded>
-                                        <description></description>
-                                        <comment></comment>
-                                        <default_text></default_text>
-                                        <translations>
-                                            <translation>
-                                                <language>en-US</language>
-                                                <approved>false</approved>
-                                            </translation>
-                                            <translation>
-                                                <language>es-MX</language>
-                                                <approved>false</approved>
-                                            </translation>
-                                            <translation>
-                                                <language>fr-CA</language>
-                                                <approved>false</approved>
-                                            </translation>
-                                        </translations>
-                                    </concept_node>
                                     <concept_node>
                                         <name>search</name>
                                         <definition_loaded>false</definition_loaded>

client/package.json

@@ -32,8 +32,10 @@
     "react-i18next": "^11.3.3",
     "react-icons": "^3.9.0",
     "react-image-file-resizer": "^0.2.1",
+    "react-image-gallery": "^1.0.6",
     "react-moment": "^0.9.7",
     "react-number-format": "^4.4.1",
+    "react-pdf": "^4.1.0",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.0",

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

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

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

@@ -0,0 +1,143 @@
+import { notification } from "antd";
+import axios from "axios";
+import React from "react";
+import { useMutation } from "react-apollo";
+import { useTranslation } from "react-i18next";
+import Resizer from "react-image-file-resizer";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { INSERT_NEW_DOCUMENT } from "../../graphql/documents.queries";
+import {
+  selectBodyshop,
+  selectCurrentUser
+} from "../../redux/user/user.selectors";
+import { generateCdnThumb } from "../../utils/DocHelpers";
+import DocumentsUploadComponent from "./documents-upload.component";
+
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser,
+  bodyshop: selectBodyshop
+});
+
+export default connect(
+  mapStateToProps,
+  null
+)(function DocumentsUploadContainer({
+  jobId,
+  invoiceId,
+  currentUser,
+  bodyshop,
+  callbackAfterUpload
+}) {
+  const { t } = useTranslation();
+  const [insertNewDocument] = useMutation(INSERT_NEW_DOCUMENT);
+
+  const handleUpload = ev => {
+    const { onError, onSuccess, onProgress } = ev;
+    //If PDF, upload directly.
+    //If JPEG, resize and upload.
+    //TODO If this is just an invoice job? Where to put it?
+    let key = `${bodyshop.id}/${jobId}/${ev.file.name}`;
+    if (ev.file.type === "application/pdf") {
+      console.log("It's a PDF.");
+      uploadToS3(key, ev.file.type, ev.file, onError, onSuccess, onProgress);
+    } else {
+      Resizer.imageFileResizer(
+        ev.file,
+        3000,
+        3000,
+        "PNG",
+        75,
+        0,
+        uri => {
+          let file = new File([uri], ev.file.name, {});
+          file.uid = ev.file.uid;
+          uploadToS3(key, file.type, file, onError, onSuccess, onProgress);
+        },
+        "blob"
+      );
+    }
+  };
+  const uploadToS3 = (
+    fileName,
+    fileType,
+    file,
+    onError,
+    onSuccess,
+    onProgress
+  ) => {
+    axios
+      .post("/sign_s3", {
+        fileName,
+        fileType
+      })
+      .then(response => {
+        var returnData = response.data.data.returnData;
+        var signedRequest = returnData.signedRequest;
+        var url = returnData.url;
+        // setState({ ...state, url: url });
+        // Put the fileType in the headers for the upload
+        var options = {
+          headers: {
+            "Content-Type": fileType
+          },
+          onUploadProgress: e => {
+            onProgress({ percent: (e.loaded / e.total) * 100 });
+          }
+        };
+
+        axios
+          .put(signedRequest, file, options)
+          .then(response => {
+            insertNewDocument({
+              variables: {
+                docInput: [
+                  {
+                    jobid: jobId,
+                    uploaded_by: currentUser.email,
+                    url,
+                    thumb_url:
+                      fileType === "application/pdf"
+                        ? "application/pdf"
+                        : generateCdnThumb(fileName),
+                    key: fileName,
+                    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
+              });
+              notification["success"]({
+                message: t("documents.successes.insert")
+              });
+              if (callbackAfterUpload) {
+                callbackAfterUpload();
+              }
+            });
+          })
+          .catch(error => {
+            onError(error);
+            notification["error"]({
+              message: t("documents.errors.insert", {
+                message: JSON.stringify(error)
+              })
+            });
+          });
+      })
+      .catch(error => {
+        notification["error"]({
+          message: t("documents.errors.getpresignurl", {
+            message: JSON.stringify(error)
+          })
+        });
+      });
+  };
+  return <DocumentsUploadComponent handleUpload={handleUpload} />;
+});

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

@@ -41,7 +41,7 @@ export default function InvoiceEnterModalComponent({
         }
         width={"90%"}
         visible={visible}
-        okText={t("general.labels.save")}
+        okText={t("general.actions.save")}
         onOk={() => form.submit()}
         okButtonProps={{ htmlType: "submit" }}
         onCancel={handleCancel}

client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.component.jsx

@@ -30,7 +30,7 @@ export default function JobLinesUpsertModalComponent({
             : t("joblines.labels.new")
         }
         visible={visible}
-        okText={t("general.labels.save")}
+        okText={t("general.actions.save")}
         onOk={() => form.submit()}
         onCancel={handleCancel}
       >

client/src/components/jobs-detail-header/jobs-detail-header.component.jsx

@@ -86,7 +86,7 @@ export default connect(
       {t("jobs.actions.convert")}
     </Button>,
     <Button type="primary" key="submit" htmlType="submit">
-      {t("general.labels.save")}
+      {t("general.actions.save")}
     </Button>
   ];
 

client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx

@@ -0,0 +1,104 @@
+import axios from "axios";
+import React, { useEffect, useState } from "react";
+import Gallery from "react-grid-gallery";
+import { Document, Page, pdfjs } from "react-pdf";
+import DocumentsUploadContainer from "../documents-upload/documents-upload.container";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import { Collapse } from "antd";
+import { useTranslation } from "react-i18next";
+
+pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.1.266/pdf.worker.min.js`;
+
+function JobsDocumentsComponent({ data, jobId, refetch }) {
+  const [galleryImages, setgalleryImages] = useState([]);
+  const [pdfDocuments, setPdfDocuments] = useState([]);
+
+  useEffect(() => {
+    setgalleryImages(
+      data
+        .filter(item => item.thumb_url !== "application/pdf")
+        .reduce((acc, value) => {
+          acc.push({
+            src: value.url,
+            thumbnail: value.thumb_url,
+            thumbnailHeight: 150,
+            thumbnailWidth: 150,
+            isSelected: false
+          });
+          return acc;
+        }, [])
+    );
+  }, [data, setgalleryImages]);
+
+  useEffect(() => {
+    setPdfDocuments(
+      data
+        .filter(item => item.thumb_url === "application/pdf")
+        .reduce((acc, value) => {
+          acc.push({
+            src: value.url,
+            thumbnail: value.thumb_url,
+            thumbnailHeight: 150,
+            thumbnailWidth: 150,
+            isSelected: false
+          });
+          return acc;
+        }, [])
+    );
+  }, [data, setPdfDocuments]);
+  const { t } = useTranslation();
+  return (
+    <div className="clearfix">
+      <DocumentsUploadContainer jobId={jobId} callbackAfterUpload={refetch} />
+      <button
+        onClick={() => {
+          axios
+            .get("/downloadImages", {
+              images: galleryImages.map(i => i.src)
+            })
+            .then(r => console.log("r", r));
+        }}
+      >
+        Dl
+      </button>
+
+      <Collapse defaultActiveKey="photos">
+        <Collapse.Panel key="t" header="t">
+          <Gallery
+            images={pdfDocuments}
+            onSelectImage={(index, image) => {
+              setPdfDocuments(
+                pdfDocuments.map((g, idx) =>
+                  index === idx ? { ...g, isSelected: !g.isSelected } : g
+                )
+              );
+            }}
+          />
+        </Collapse.Panel>
+        <Collapse.Panel key="photos" header={t("documents.labels.photos")}>
+          <Gallery
+            images={galleryImages}
+            onSelectImage={(index, image) => {
+              setgalleryImages(
+                galleryImages.map((g, idx) =>
+                  index === idx ? { ...g, isSelected: !g.isSelected } : g
+                )
+              );
+            }}
+          ></Gallery>
+        </Collapse.Panel>
+        <Collapse.Panel
+          key="documents"
+          header={t("documents.labels.documents")}
+        >
+          {pdfDocuments.map((doc, idx) => (
+            <Document key={idx} loading={<LoadingSpinner />} file={doc.src}>
+              <Page pageIndex={0} />
+            </Document>
+          ))}
+        </Collapse.Panel>
+      </Collapse>
+    </div>
+  );
+}
+export default JobsDocumentsComponent;

client/src/components/jobs-documents-gallery/jobs-documents-gallery.container.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { useQuery } from "react-apollo";
+import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
+import AlertComponent from "../alert/alert.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import JobDocuments from "./jobs-documents-gallery.component";
+
+export default function JobsDocumentsContainer({ jobId }) {
+  const { loading, error, data, refetch } = useQuery(GET_DOCUMENTS_BY_JOB, {
+    variables: { jobId: jobId },
+    fetchPolicy: "network-only"
+  });
+
+  if (loading) return <LoadingSpinner />;
+  if (error) return <AlertComponent type="error" message={error.message} />;
+
+  return <JobDocuments data={data.documents} jobId={jobId} refetch={refetch} />;
+}

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

@@ -1,289 +0,0 @@
-import { InboxOutlined } from "@ant-design/icons";
-import { Modal, notification, Upload } from "antd";
-import axios from "axios";
-import React, { useState } from "react";
-import { useMutation } from "react-apollo";
-import Gallery from "react-grid-gallery";
-import { useTranslation } from "react-i18next";
-import Resizer from "react-image-file-resizer";
-import {
-  DELETE_DOCUMENT,
-  INSERT_NEW_DOCUMENT
-} from "../../graphql/documents.queries";
-import { generateCdnThumb } from "../../utils/DocHelpers";
-import "./jobs-documents.styles.scss";
-
-function getBase64(file) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.onload = () => resolve(reader.result);
-    reader.onerror = error => reject(error);
-  });
-}
-
-function JobsDocumentsComponent({ shopId, jobId, loading, data, currentUser }) {
-  const { t } = useTranslation();
-  const [insertNewDocument] = useMutation(INSERT_NEW_DOCUMENT);
-  const [deleteDocument] = useMutation(DELETE_DOCUMENT);
-
-  const [state, setState] = useState({
-    previewVisible: false,
-    previewImage: ""
-  });
-
-  const [fileList, setFileList] = useState(
-    data.reduce((acc, value) => {
-      acc.push({
-        uid: value.id,
-        url: value.thumb_url,
-        name: value.name,
-        status: "done",
-        full_url: value.url,
-        key: value.key
-      });
-      return acc;
-    }, [])
-  );
-
-  const [galleryImages, setgalleryImages] = useState(
-    data.reduce((acc, value) => {
-      acc.push({
-        src: value.url,
-        thumbnail: value.thumb_url,
-        thumbnailHeight: 150,
-        thumbnailWidth: 150,
-        isSelected: false
-      });
-      return acc;
-    }, [])
-  );
-
-  const uploadToS3 = (
-    fileName,
-    fileType,
-    file,
-    onError,
-    onSuccess,
-    onProgress
-  ) => {
-    axios
-      .post("/sign_s3", {
-        fileName,
-        fileType
-      })
-      .then(response => {
-        var returnData = response.data.data.returnData;
-        var signedRequest = returnData.signedRequest;
-        var url = returnData.url;
-        setState({ ...state, url: url });
-        // Put the fileType in the headers for the upload
-        var options = {
-          headers: {
-            "Content-Type": fileType
-          },
-          onUploadProgress: e => {
-            onProgress({ percent: (e.loaded / e.total) * 100 });
-          }
-        };
-
-        axios
-          .put(signedRequest, file, options)
-          .then(response => {
-            console.log("response from axios", response);
-            insertNewDocument({
-              variables: {
-                docInput: [
-                  {
-                    jobid: jobId,
-                    uploaded_by: currentUser.email,
-                    url,
-                    thumb_url: generateCdnThumb(fileName),
-                    key: fileName
-                  }
-                ]
-              }
-            }).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
-              });
-              notification["success"]({
-                message: t("documents.successes.insert")
-              });
-            });
-
-            setState({ ...state, success: true });
-          })
-          .catch(error => {
-            console.log("Error uploading to S3", error);
-            onError(error);
-            notification["error"]({
-              message: t("documents.errors.insert") + JSON.stringify(error)
-            });
-          });
-      })
-      .catch(error => {
-        console.log("Outside Error here.", error);
-        notification["error"]({
-          message: t("documents.errors.getpresignurl") + JSON.stringify(error)
-        });
-      });
-  };
-
-  const handleUpload = ev => {
-    const { onError, onSuccess, onProgress } = ev;
-    //If PDF, upload directly.
-    //If JPEG, resize and upload.
-    let key = `${shopId}/${jobId}/${ev.file.name}`;
-    if (ev.file.type === "application/pdf") {
-      console.log("It's a PDF.");
-      uploadToS3(key, ev.file.type, ev.file, onError, onSuccess, onProgress);
-    } else {
-      Resizer.imageFileResizer(
-        ev.file,
-        3000,
-        3000,
-        "JPEG",
-        75,
-        0,
-        uri => {
-          let file = new File([uri], ev.file.name, {});
-          file.uid = ev.file.uid;
-          uploadToS3(key, file.type, file, onError, onSuccess, onProgress);
-        },
-        "blob"
-      );
-    }
-  };
-  const handleCancel = () => setState({ ...state, previewVisible: false });
-
-  const handlePreview = async file => {
-    if (!file.full_url && !file.url) {
-      file.preview = await getBase64(file.originFileObj);
-    }
-
-    setState({
-      ...state,
-      previewImage: file.full_url || file.url,
-      previewVisible: true
-    });
-  };
-  const handleChange = props => {
-    const { event, fileList, file } = props;
-    //Required to ensure that the state accurately reflects new data and that images can be deleted in feeded.
-    if (!event) {
-      //SPread the new file in where the old one was.
-      const newFileList = fileList.map(i =>
-        i.uid === file.uid ? Object.assign({}, i, file.response) : i
-      );
-      setFileList(newFileList);
-    } else {
-      setFileList(fileList);
-    }
-  };
-
-  const { previewVisible, previewImage } = state;
-
-  const handleRemove = file => {
-    console.log("file", file);
-
-    //Remove the file on S3
-    axios
-      .post("/delete_s3", { fileName: file.key })
-      .then(response => {
-        //Delete the record in our database.
-        if (response.status === 200) {
-          deleteDocument({ variables: { id: file.uid } }).then(r => {
-            notification["success"]({
-              message: t("documents.successes.delete")
-            });
-          });
-        } else {
-          notification["error"]({
-            message:
-              1 +
-              t("documents.errors.deletes3") +
-              JSON.stringify(response.message)
-          });
-        }
-      })
-      .catch(error => {
-        notification["error"]({
-          message: "2" + t("documents.errors.deletes3") + JSON.stringify(error)
-        });
-      });
-  };
-
-  return (
-    <div className="clearfix">
-      <button
-        onClick={() => {
-          const imageRequest = JSON.stringify({
-            bucket: process.env.REACT_APP_S3_BUCKET,
-            key:
-              "52b7357c-0edd-4c95-85c3-dfdbcdfad9ac/c8ca5761-681a-4bb3-ab76-34c447357be3/Invoice_353284489.pdf",
-            edits: { format: "jpeg" }
-          });
-          const CloudFrontUrl = "https://d18fc493a0fm4o.cloudfront.net";
-          const url = `${CloudFrontUrl}/${btoa(imageRequest)}`;
-          console.log("url", url);
-        }}
-      >
-        Test PDF
-      </button>
-      <Upload.Dragger
-        customRequest={handleUpload}
-        accept=".pdf,.jpg,.jpeg"
-        listType="picture-card"
-        fileList={fileList}
-        multiple={true}
-        onPreview={handlePreview}
-        onRemove={handleRemove}
-        onChange={handleChange}
-      >
-        <p className="ant-upload-drag-icon">
-          <InboxOutlined />
-        </p>
-        <p className="ant-upload-text">
-          Click or drag file to this area to upload
-        </p>
-        <p className="ant-upload-hint">
-          Support for a single or bulk upload. Strictly prohibit from uploading
-          company data or other band files
-        </p>
-      </Upload.Dragger>
-      <Modal visible={previewVisible} footer={null} onCancel={handleCancel}>
-        <img alt="example" style={{ width: "100%" }} src={previewImage} />
-      </Modal>
-
-      <button
-        onClick={() => {
-          axios
-            .get("/downloadImages", {
-              images: galleryImages.map(i => i.src)
-            })
-            .then(r => console.log("r", r));
-        }}
-      >
-        Dl
-      </button>
-      <Gallery
-        images={galleryImages}
-        onSelectImage={(index, image) => {
-          console.log("index, image", index, image);
-          setgalleryImages(
-            galleryImages.map((g, idx) =>
-              index === idx ? { ...g, isSelected: !g.isSelected } : g
-            )
-          );
-        }}
-      ></Gallery>
-    </div>
-  );
-}
-export default JobsDocumentsComponent;

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

@@ -1,48 +0,0 @@
-import React from "react";
-import { useQuery } from "react-apollo";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { QUERY_SHOP_ID } from "../../graphql/bodyshop.queries";
-import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
-import { selectCurrentUser } from "../../redux/user/user.selectors";
-import AlertComponent from "../alert/alert.component";
-import LoadingSpinner from "../loading-spinner/loading-spinner.component";
-import JobDocuments from "./jobs-documents.component";
-
-const mapStateToProps = createStructuredSelector({
-  currentUser: selectCurrentUser
-});
-
-export default connect(
-  mapStateToProps,
-  null
-)(function JobsDocumentsContainer({ jobId, currentUser }) {
-  const { loading, error, data } = useQuery(GET_DOCUMENTS_BY_JOB, {
-    variables: { jobId: jobId },
-    fetchPolicy: "network-only"
-  });
-
-  const shopData = useQuery(QUERY_SHOP_ID, {
-    fetchPolicy: "network-only"
-  });
-
-  if (loading || shopData.loading) return <LoadingSpinner />;
-  if (error || shopData.error)
-    return (
-      <AlertComponent
-        type="error"
-        message={error.message || shopData.error.message}
-      />
-    );
-
-  return (
-    <JobDocuments
-      data={data.documents}
-      jobId={jobId}
-      currentUser={currentUser}
-      shopId={
-        shopData.data.bodyshops[0].id ? shopData.data.bodyshops[0].id : "error"
-      }
-    />
-  );
-});

client/src/components/note-upsert-modal/note-upsert-modal.component.jsx

@@ -16,7 +16,7 @@ export default function NoteUpsertModalComponent({
     <Modal
       title={noteState.id ? t("notes.actions.edit") : t("notes.actions.new")}
       visible={visible}
-      okText={t("general.labels.save")}
+      okText={t("general.actions.save")}
       onOk={() => {
         noteState.id ? updateExistingNote() : insertNewNote();
       }}

client/src/components/owner-detail-form/owner-detail-form.component.jsx

@@ -16,7 +16,7 @@ export default function OwnerDetailFormComponent({ form }) {
         <ResetForm resetFields={resetFields} />
       ) : null}
       <Button type="primary" key="submit" htmlType="submit">
-        {t("general.labels.save")}
+        {t("general.actions.save")}
       </Button>
       <Row>
         <Col span={8}>

client/src/components/vehicle-detail-form/vehicle-detail-form.component.jsx

@@ -7,7 +7,7 @@ export default function VehicleDetailFormComponent() {
   return (
     <div>
       <Button type="primary" key="submit" htmlType="submit">
-        {t("general.labels.save")}
+        {t("general.actions.save")}
       </Button>
       <Row>
         <Col span={8}>

client/src/pages/jobs-detail/jobs-detail.page.component.jsx

@@ -1,9 +1,21 @@
-import Icon, { BarsOutlined, CalendarFilled, DollarCircleOutlined, FileImageFilled, ToolFilled } from "@ant-design/icons";
+import Icon, {
+  BarsOutlined,
+  CalendarFilled,
+  DollarCircleOutlined,
+  FileImageFilled,
+  ToolFilled
+} from "@ant-design/icons";
 import { Form, notification, Tabs } from "antd";
 import moment from "moment";
 import React, { lazy, Suspense } from "react";
 import { useTranslation } from "react-i18next";
-import { FaHardHat, FaHistory, FaInfo, FaRegStickyNote, FaShieldAlt } from "react-icons/fa";
+import {
+  FaHardHat,
+  FaHistory,
+  FaInfo,
+  FaRegStickyNote,
+  FaShieldAlt
+} from "react-icons/fa";
 import { useHistory } from "react-router-dom";
 //import JobsLinesContainer from "../../components/job-detail-lines/job-lines.container";
 //import JobsDetailClaims from "../../components/jobs-detail-claims/jobs-detail-claims.component";
@@ -40,8 +52,10 @@ const JobsDetailInsurance = lazy(() =>
     "../../components/jobs-detail-insurance/jobs-detail-insurance.component"
   )
 );
-const JobsDocumentsContainer = lazy(() =>
+const JobsDocumentsGalleryContainer = lazy(() =>
-  import("../../components/jobs-documents/jobs-documents.container")
+  import(
+    "../../components/jobs-documents-gallery/jobs-documents-gallery.container"
+  )
 );
 const JobNotesContainer = lazy(() =>
   import("../../components/jobs-notes/jobs-notes.container")
@@ -249,7 +263,7 @@ export default function JobsDetailPage({
             }
             key="documents"
           >
-            <JobsDocumentsContainer jobId={job.id} />
+            <JobsDocumentsGalleryContainer jobId={job.id} />
           </Tabs.TabPane>
           <Tabs.TabPane
             tab={

client/src/pages/jobs-detail/jobs-detail.page.context.jsx

@@ -1,3 +0,0 @@
-import React from "react";
-const JobDetailFormContext = React.createContext(null);
-export default JobDetailFormContext;

client/src/translations/en_us/common.json

@@ -139,8 +139,8 @@
 		"documents": {
 			"errors": {
 				"deletes3": "Error deleting document from storage. ",
-				"getpresignurl": "Error obtaining presigned URL for document. ",
+				"getpresignurl": "Error obtaining presigned URL for document.  {{message}}",
-				"insert": "Unable to upload file.",
+				"insert": "Unable to upload file. {{message}}",
 				"nodocuments": "There are no documents."
 			},
 			"labels": {
@@ -205,7 +205,6 @@
 				"loggingin": "Logging you in...",
 				"na": "N/A",
 				"out": "Out",
-				"save": "Save",
 				"search": "Search...",
 				"unknown": "Unknown"
 			},

client/src/translations/es/common.json

@@ -139,8 +139,8 @@
 		"documents": {
 			"errors": {
 				"deletes3": "Error al eliminar el documento del almacenamiento.",
-				"getpresignurl": "Error al obtener la URL prescrita para el documento.",
+				"getpresignurl": "Error al obtener la URL prescrita para el documento. {{message}}",
-				"insert": "Incapaz de cargar el archivo.",
+				"insert": "Incapaz de cargar el archivo. {{message}}",
 				"nodocuments": "No hay documentos"
 			},
 			"labels": {
@@ -205,7 +205,6 @@
 				"loggingin": "Iniciando sesión ...",
 				"na": "N / A",
 				"out": "Afuera",
-				"save": "Salvar",
 				"search": "Buscar...",
 				"unknown": "Desconocido"
 			},

client/src/translations/fr/common.json

@@ -139,8 +139,8 @@
 		"documents": {
 			"errors": {
 				"deletes3": "Erreur lors de la suppression du document du stockage.",
-				"getpresignurl": "Erreur lors de l'obtention de l'URL présignée pour le document.",
+				"getpresignurl": "Erreur lors de l'obtention de l'URL présignée pour le document. {{message}}",
-				"insert": "Incapable de télécharger le fichier.",
+				"insert": "Incapable de télécharger le fichier. {{message}}",
 				"nodocuments": "Il n'y a pas de documents."
 			},
 			"labels": {
@@ -205,7 +205,6 @@
 				"loggingin": "Vous connecter ...",
 				"na": "N / A",
 				"out": "En dehors",
-				"save": "sauvegarder",
 				"search": "Chercher...",
 				"unknown": "Inconnu"
 			},

client/src/utils/DocHelpers.js

@@ -2,6 +2,7 @@ export const generateCdnThumb = key => {
   const imageRequest = JSON.stringify({
     bucket: process.env.REACT_APP_S3_BUCKET,
     key: key,
+    toFormat: 'png',
     edits: {
       resize: {
         height: 150,

client/yarn.lock

@@ -7931,7 +7931,7 @@ loader-utils@1.2.3:
     emojis-list "^2.0.0"
     json5 "^1.0.1"
 
-loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
+loader-utils@^1.0.0, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
   integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
@@ -7983,6 +7983,11 @@ lodash.clone@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.clone/-/lodash.clone-4.5.0.tgz#195870450f5a13192478df4bc3d23d2dea1907b6"
   integrity sha1-GVhwRQ9aExkkeN9Lw9I9LeoZB7Y=
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
+
 lodash.escape@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-4.0.1.tgz#c9044690c21e04294beaa517712fded1fa88de98"
@@ -8038,7 +8043,7 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
-lodash.once@^4.0.0:
+lodash.once@^4.0.0, lodash.once@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
   integrity sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=
@@ -8063,6 +8068,11 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "^3.0.0"
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -8140,6 +8150,11 @@ make-dir@^3.0.2:
   dependencies:
     semver "^6.0.0"
 
+make-event-props@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/make-event-props/-/make-event-props-1.2.0.tgz#96b87d88919533b8f8934b58b4c3d5679459a0cf"
+  integrity sha512-BmWFkm/jZzVH9A0tEBdkjAARUz/eha+5IRyfOndeSMKRadkgR5DawoBHoRwLxkYmjJOI5bHkXKpaZocxj+dKgg==
+
 makeerror@1.0.x:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.11.tgz#e01a5c9109f2af79660e4e8b9587790184f5a96c"
@@ -8246,6 +8261,11 @@ meow@^3.7.0:
     redent "^1.0.0"
     trim-newlines "^1.0.0"
 
+merge-class-names@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/merge-class-names/-/merge-class-names-1.3.0.tgz#c4cdc1a981a81dd9afc27aa4287e912a337c5dee"
+  integrity sha512-k0Qaj36VBpKgdc8c188LEZvo6v/zzry/FUufwopWbMSp6/knfVFU/KIB55/hJjeIpg18IH2WskXJCRnM/1BrdQ==
+
 merge-deep@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/merge-deep/-/merge-deep-3.0.2.tgz#f39fa100a4f1bd34ff29f7d2bf4508fbb8d83ad2"
@@ -8616,6 +8636,11 @@ no-case@^3.0.3:
     lower-case "^2.0.1"
     tslib "^1.10.0"
 
+node-ensure@^0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/node-ensure/-/node-ensure-0.0.0.tgz#ecae764150de99861ec5c810fd5d096b183932a7"
+  integrity sha1-7K52QVDemYYexcgQ/V0Jaxg5Mqc=
+
 node-fetch@^1.0.1:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
@@ -9392,6 +9417,14 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+pdfjs-dist@2.1.266:
+  version "2.1.266"
+  resolved "https://registry.yarnpkg.com/pdfjs-dist/-/pdfjs-dist-2.1.266.tgz#cded02268b389559e807f410d2a729db62160026"
+  integrity sha512-Jy7o1wE3NezPxozexSbq4ltuLT0Z21ew/qrEiAEeUZzHxMHGk4DUV1D7RuCXg5vJDvHmjX1YssN+we9QfRRgXQ==
+  dependencies:
+    node-ensure "^0.0.0"
+    worker-loader "^2.0.0"
+
 performance-now@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
@@ -10969,6 +11002,19 @@ react-image-file-resizer@^0.2.1:
   resolved "https://registry.yarnpkg.com/react-image-file-resizer/-/react-image-file-resizer-0.2.1.tgz#ee081bd41798ff960eea1a56b1a86ba317fecf11"
   integrity sha512-uvhNj2NKMUraVKIrsmPNZgWn34b7fjEcuWAyMXUrVb06gedNtOalOBxVwXYocd4KnZRFv2/ilmAE4KEzIkj4aA==
 
+react-image-gallery@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/react-image-gallery/-/react-image-gallery-1.0.6.tgz#cbbef85973e72bb01b5d331de68f884654f47b2f"
+  integrity sha512-RbbZypXY4JxwVCSBlUfPWnb4SVeDWsS1Bg2bxpVXO7wPbjpJaxolto19WUhNDmFur4GSnIvVj72F03opOj3zIA==
+  dependencies:
+    clsx "^1.0.4"
+    lodash.debounce "^4.0.8"
+    lodash.isequal "^4.5.0"
+    lodash.throttle "^4.1.1"
+    prop-types "^15.5.8"
+    react-swipeable "^5.2.0"
+    resize-observer-polyfill "^1.5.0"
+
 react-images@^0.5.16:
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/react-images/-/react-images-0.5.19.tgz#9339570029e065f9f28a19f03fdb5d9d5aa109d3"
@@ -11033,6 +11079,18 @@ react-overlays@^2.0.0-0:
     uncontrollable "^7.0.0"
     warning "^4.0.3"
 
+react-pdf@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/react-pdf/-/react-pdf-4.1.0.tgz#fcb874f28050fe9593c4e04652c7bff94bb1acf9"
+  integrity sha512-SYwkWc+vRQHfrpDls3DOgn4G+wT0mYGJRor20e28GPRW8VB+6o8WqZ4QZxsl50z+dKM7UscXFnK/02eN3NXi2g==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    lodash.once "^4.1.1"
+    make-event-props "^1.1.0"
+    merge-class-names "^1.1.1"
+    pdfjs-dist "2.1.266"
+    prop-types "^15.6.2"
+
 react-prop-toggle@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/react-prop-toggle/-/react-prop-toggle-1.0.2.tgz#8b0b7e74653606b1427cfcf6c4eaa9198330568e"
@@ -11154,6 +11212,13 @@ react-scrolllock@^2.0.1:
     exenv "^1.2.2"
     react-prop-toggle "^1.0.2"
 
+react-swipeable@^5.2.0:
+  version "5.5.1"
+  resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-5.5.1.tgz#48ae6182deaf62f21d4b87469b60281dbd7c4a76"
+  integrity sha512-EQObuU3Qg3JdX3WxOn5reZvOSCpU4fwpUAs+NlXSN3y+qtsO2r8VGkVnOQzmByt3BSYj9EWYdUOUfi7vaMdZZw==
+  dependencies:
+    prop-types "^15.6.2"
+
 react-test-renderer@^16.0.0-0:
   version "16.13.0"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.13.0.tgz#39ba3bf72cedc8210c3f81983f0bb061b14a3014"
@@ -11818,6 +11883,14 @@ scheduler@^0.19.0:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+schema-utils@^0.4.0:
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"
+  integrity sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==
+  dependencies:
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
+
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
@@ -13699,6 +13772,14 @@ worker-farm@^1.7.0:
   dependencies:
     errno "~0.1.7"
 
+worker-loader@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/worker-loader/-/worker-loader-2.0.0.tgz#45fda3ef76aca815771a89107399ee4119b430ac"
+  integrity sha512-tnvNp4K3KQOpfRnD20m8xltE3eWh89Ye+5oj7wXEEHKac1P4oZ6p9oTj8/8ExqoSBnk9nu5Pr4nKfQ1hn2APJw==
+  dependencies:
+    loader-utils "^1.0.0"
+    schema-utils "^0.4.0"
+
 worker-rpc@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/worker-rpc/-/worker-rpc-0.1.1.tgz#cb565bd6d7071a8f16660686051e969ad32f54d5"

hasura/migrations/1584473267942_alter_table_public_documents_add_column_vendorid/down.yaml

@@ -0,0 +1,5 @@
+- args:
+    cascade: false
+    read_only: false
+    sql: ALTER TABLE "public"."documents" DROP COLUMN "vendorid";
+  type: run_sql

hasura/migrations/1584473267942_alter_table_public_documents_add_column_vendorid/up.yaml

@@ -0,0 +1,5 @@
+- args:
+    cascade: false
+    read_only: false
+    sql: ALTER TABLE "public"."documents" ADD COLUMN "vendorid" uuid NULL;
+  type: run_sql

hasura/migrations/1584473287107_set_fk_public_documents_vendorid/down.yaml

@@ -0,0 +1,5 @@
+- args:
+    cascade: false
+    read_only: false
+    sql: alter table "public"."documents" drop constraint "documents_vendorid_fkey";
+  type: run_sql

hasura/migrations/1584473287107_set_fk_public_documents_vendorid/up.yaml

@@ -0,0 +1,10 @@
+- args:
+    cascade: false
+    read_only: false
+    sql: |-
+      alter table "public"."documents"
+                 add constraint "documents_vendorid_fkey"
+                 foreign key ("vendorid")
+                 references "public"."vendors"
+                 ("id") on update restrict on delete restrict;
+  type: run_sql

hasura/migrations/1584473300420_alter_table_public_documents_alter_column_vendorid/down.yaml

@@ -0,0 +1,5 @@
+- args:
+    cascade: false
+    read_only: false
+    sql: alter table "public"."documents" rename column "invoiceid" to "vendorid";
+  type: run_sql

hasura/migrations/1584473300420_alter_table_public_documents_alter_column_vendorid/up.yaml

@@ -0,0 +1,5 @@
+- args:
+    cascade: false
+    read_only: false
+    sql: alter table "public"."documents" rename column "vendorid" to "invoiceid";
+  type: run_sql

hasura/migrations/1584473314865_set_fk_public_documents_invoiceid/down.yaml

@@ -0,0 +1,12 @@
+- args:
+    cascade: false
+    read_only: false
+    sql: |-
+      alter table "public"."documents" drop constraint "documents_invoiceid_fkey",
+                add constraint "documents_vendorid_fkey"
+                foreign key ("invoiceid")
+                references "public"."vendors"
+                ("id")
+                on update restrict
+                on delete restrict;
+  type: run_sql

hasura/migrations/1584473314865_set_fk_public_documents_invoiceid/up.yaml

@@ -0,0 +1,10 @@
+- args:
+    cascade: false
+    read_only: false
+    sql: |-
+      alter table "public"."documents" drop constraint "documents_vendorid_fkey",
+                   add constraint "documents_invoiceid_fkey"
+                   foreign key ("invoiceid")
+                   references "public"."invoices"
+                   ("id") on update restrict on delete restrict;
+  type: run_sql

hasura/migrations/1584473335595_track_all_relationships/down.yaml

@@ -0,0 +1,12 @@
+- args:
+    relationship: invoice
+    table:
+      name: documents
+      schema: public
+  type: drop_relationship
+- args:
+    relationship: documents
+    table:
+      name: invoices
+      schema: public
+  type: drop_relationship

hasura/migrations/1584473335595_track_all_relationships/up.yaml

@@ -0,0 +1,20 @@
+- args:
+    name: invoice
+    table:
+      name: documents
+      schema: public
+    using:
+      foreign_key_constraint_on: invoiceid
+  type: create_object_relationship
+- args:
+    name: documents
+    table:
+      name: invoices
+      schema: public
+    using:
+      foreign_key_constraint_on:
+        column: invoiceid
+        table:
+          name: documents
+          schema: public
+  type: create_array_relationship