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.

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-gallery/jobs-documents-gallery.styles.scss

@@ -0,0 +1,10 @@
+/* you can make up upload button and sample style by using stylesheets */
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}