WIP Download Images + Invoice Tables

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

@@ -1,16 +1,17 @@
-import { Modal, notification, Upload } from "antd";
 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 {
-  INSERT_NEW_DOCUMENT,
-  DELETE_DOCUMENT
+  DELETE_DOCUMENT,
+  INSERT_NEW_DOCUMENT
 } from "../../graphql/documents.queries";
-import "./jobs-documents.styles.scss";
 import { generateCdnThumb } from "../../utils/DocHelpers";
+import "./jobs-documents.styles.scss";
 
 function getBase64(file) {
   return new Promise((resolve, reject) => {
@@ -45,6 +46,19 @@ function JobsDocumentsComponent({ shopId, jobId, loading, data, currentUser }) {
     }, [])
   );
 
+  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,
@@ -246,6 +260,29 @@ function JobsDocumentsComponent({ shopId, jobId, loading, data, currentUser }) {
       <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>
   );
 }