From e89b4fe2a440ef160f77edd694b7c8dfb5751c2e Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Tue, 25 May 2021 16:30:29 -0700
Subject: [PATCH] IO-1137 Download zip files with appropriate name.

---
 ...bs-document-gallery.download.component.jsx | 75 +++++++++++++++++--
 .../jobs-documents-gallery.component.jsx      |  7 +-
 .../jobs-documents-gallery.container.jsx      |  1 +
 client/src/graphql/documents.queries.js       |  4 +
 4 files changed, 78 insertions(+), 9 deletions(-)

diff --git a/client/src/components/jobs-documents-gallery/jobs-document-gallery.download.component.jsx b/client/src/components/jobs-documents-gallery/jobs-document-gallery.download.component.jsx
index 50a8be4ca..b172e0806 100644
--- a/client/src/components/jobs-documents-gallery/jobs-document-gallery.download.component.jsx
+++ b/client/src/components/jobs-documents-gallery/jobs-document-gallery.download.component.jsx
@@ -1,11 +1,17 @@
-import { Button } from "antd";
+import { Button, Space } from "antd";
 import axios from "axios";
-import React from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
+import cleanAxios from "../../utils/CleanAxios";
+import formatBytes from "../../utils/formatbytes";
 
-export default function JobsDocumentsDownloadButton({ galleryImages }) {
+export default function JobsDocumentsDownloadButton({
+  galleryImages,
+  identifier,
+}) {
   const { t } = useTranslation();
+  const [download, setDownload] = useState(null);
   const imagesToDownload = [
     ...galleryImages.images.filter((image) => image.isSelected),
     ...galleryImages.other.filter((image) => image.isSelected),
@@ -18,13 +24,68 @@ export default function JobsDocumentsDownloadButton({ galleryImages }) {
         ids: imagesToDownload.map((_) => _.key),
       })
       .then((r) => {
-        window.open(r.data);
+        //     window.open(r.data);
+        downloadAs(
+          r.data,
+          `${identifier || "images"}.zip`,
+          (progressEvent) => {
+            const percentage = Math.round(
+              (progressEvent.loaded * 100) / progressEvent.total
+            );
+            console.log(progressEvent, percentage);
+            setDownload((currentDownloadState) => {
+              return {
+                downloaded: progressEvent.loaded || 0,
+                speed:
+                  (progressEvent.loaded || 0) -
+                  ((currentDownloadState && currentDownloadState.downloaded) ||
+                    0),
+              };
+            });
+          },
+          () => setDownload(null)
+        );
       });
   };
 
   return (
-    <Button disabled={imagesToDownload.length < 1} onClick={handleDownload}>
-      {t("documents.actions.download")}
-    </Button>
+    <>
+      <Button
+        loading={!!download}
+        disabled={imagesToDownload.length < 1}
+        onClick={handleDownload}
+      >
+        <Space>
+          <span>{t("documents.actions.download")}</span>
+          {download && (
+            <span>{`(${formatBytes(download.downloaded)} @ ${formatBytes(
+              download.speed
+            )} / second)`}</span>
+          )}
+        </Space>
+      </Button>
+    </>
   );
 }
+
+const downloadAs = (url, name, onDownloadProgress, onCompleted) => {
+  cleanAxios
+    .get(url, {
+      headers: {
+        "Content-Type": "application/octet-stream",
+      },
+      responseType: "blob",
+      onDownloadProgress: onDownloadProgress,
+    })
+    .then((response) => {
+      onCompleted && onCompleted();
+      const a = document.createElement("a");
+      const url = window.URL.createObjectURL(response.data);
+      a.href = url;
+      a.download = name;
+      a.click();
+    })
+    .catch((err) => {
+      console.log("error", err);
+    });
+};
diff --git a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
index 9a16a4de1..2c50c9672 100644
--- a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
+++ b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
@@ -17,7 +17,7 @@ function JobsDocumentsComponent({
   billId,
   billsCallback,
   totalSize,
-  bodyshop,
+  downloadIdentifier,
   ignoreSizeLimit,
 }) {
   const [galleryImages, setgalleryImages] = useState({ images: [], other: [] });
@@ -117,7 +117,10 @@ function JobsDocumentsComponent({
               galleryImages={galleryImages}
               setGalleryImages={setgalleryImages}
             />
-            <JobsDocumentsDownloadButton galleryImages={galleryImages} />
+            <JobsDocumentsDownloadButton
+              galleryImages={galleryImages}
+              identifier={downloadIdentifier}
+            />
             <JobsDocumentsDeleteButton
               galleryImages={galleryImages}
               deletionCallback={billsCallback || refetch}
diff --git a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.container.jsx b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.container.jsx
index 41ea08e29..37df28f1b 100644
--- a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.container.jsx
+++ b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.container.jsx
@@ -23,6 +23,7 @@ export default function JobsDocumentsContainer({
   return (
     <JobDocuments
       data={(data && data.documents) || documentsList || []}
+      downloadIdentifier={data && data.jobs_by_pk.ro_number}
       totalSize={data && data.documents_aggregate.aggregate.sum.size}
       billId={billId}
       jobId={jobId}
diff --git a/client/src/graphql/documents.queries.js b/client/src/graphql/documents.queries.js
index 6e490d1e5..8959e49a9 100644
--- a/client/src/graphql/documents.queries.js
+++ b/client/src/graphql/documents.queries.js
@@ -2,6 +2,10 @@ import { gql } from "@apollo/client";
 
 export const GET_DOCUMENTS_BY_JOB = gql`
   query GET_DOCUMENTS_BY_JOB($jobId: uuid!) {
+    jobs_by_pk(id: $jobId) {
+      id
+      ro_number
+    }
     documents_aggregate(where: { jobid: { _eq: $jobId } }) {
       aggregate {
         sum {