From 772259f4950b8a0e88004017c2fb5833d82b2ec0 Mon Sep 17 00:00:00 2001
From: Patrick Fic <snaptsoft@gmail.com>
Date: Wed, 3 Feb 2021 14:12:59 -0800
Subject: [PATCH] Updated document upload component IO-526

---
 .../documents-upload.component.jsx            |  29 ++++-
 .../jobs-documents-gallery.component.jsx      | 122 ++++++++++--------
 2 files changed, 89 insertions(+), 62 deletions(-)

diff --git a/client/src/components/documents-upload/documents-upload.component.jsx b/client/src/components/documents-upload/documents-upload.component.jsx
index f78ee80da..953f72fc3 100644
--- a/client/src/components/documents-upload/documents-upload.component.jsx
+++ b/client/src/components/documents-upload/documents-upload.component.jsx
@@ -15,6 +15,7 @@ const mapStateToProps = createStructuredSelector({
 });
 
 export function DocumentsUploadComponent({
+  children,
   currentUser,
   bodyshop,
   jobId,
@@ -23,7 +24,7 @@ export function DocumentsUploadComponent({
   callbackAfterUpload,
 }) {
   return (
-    <Upload
+    <Upload.Dragger
       multiple={true}
       customRequest={(ev) =>
         handleUpload(ev, {
@@ -36,12 +37,28 @@ export function DocumentsUploadComponent({
         })
       }
       accept="audio/*, video/*, image/*, .pdf, .doc, .docx, .xls, .xlsx"
-      showUploadList={false}
+      // showUploadList={false}
     >
-      <Button type="primary">
-        <UploadOutlined />
-      </Button>
-    </Upload>
+      {
+        // <Button type="primary">
+        //       <UploadOutlined />
+        //     </Button>
+      }
+      {children || (
+        <>
+          <p className="ant-upload-drag-icon">
+            <UploadOutlined />
+          </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>
   );
 }
 export default connect(mapStateToProps, null)(DocumentsUploadComponent);
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 76d1ed424..174e92b36 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
@@ -66,67 +66,77 @@ function JobsDocumentsComponent({
 
   return (
     <div className="clearfix">
-      <DocumentsUploadComponent
-        jobId={jobId}
-        billId={billId}
-        callbackAfterUpload={billsCallback || refetch}
-        tagsArray={["test"]}
-      />
-      <Space>
-        <JobsDocumentsGallerySelectAllComponent
-          galleryImages={galleryImages}
-          setGalleryImages={setgalleryImages}
-        />
-        <JobsDocumentsDownloadButton galleryImages={galleryImages} />
-        <JobsDocumentsDeleteButton
-          galleryImages={galleryImages}
-          deletionCallback={billsCallback || refetch}
-        />
-      </Space>
+      <div>
+        <Space>
+          <JobsDocumentsGallerySelectAllComponent
+            galleryImages={galleryImages}
+            setGalleryImages={setgalleryImages}
+          />
+          <JobsDocumentsDownloadButton galleryImages={galleryImages} />
+          <JobsDocumentsDeleteButton
+            galleryImages={galleryImages}
+            deletionCallback={billsCallback || refetch}
+          />
+        </Space>
+      </div>
       <div style={{ marginTop: "2rem" }}>
         <Card title={t("jobs.labels.documents-images")}>
-          <Gallery
-            images={galleryImages.images}
-            backdropClosesModal={true}
-            onClickImage={(props) => {
-              window.open(
-                props.target.src,
-                "_blank",
-                "toolbar=0,location=0,menubar=0"
-              );
-            }}
-            onSelectImage={(index, image) => {
-              setgalleryImages({
-                ...galleryImages,
-                images: galleryImages.images.map((g, idx) =>
-                  index === idx ? { ...g, isSelected: !g.isSelected } : g
-                ),
-              });
-            }}
-          />
+          <DocumentsUploadComponent
+            jobId={jobId}
+            billId={billId}
+            callbackAfterUpload={billsCallback || refetch}
+            tagsArray={["test"]}
+          >
+            <Gallery
+              images={galleryImages.images}
+              backdropClosesModal={true}
+              onClickImage={(props) => {
+                window.open(
+                  props.target.src,
+                  "_blank",
+                  "toolbar=0,location=0,menubar=0"
+                );
+              }}
+              onSelectImage={(index, image) => {
+                setgalleryImages({
+                  ...galleryImages,
+                  images: galleryImages.images.map((g, idx) =>
+                    index === idx ? { ...g, isSelected: !g.isSelected } : g
+                  ),
+                });
+              }}
+            />
+          </DocumentsUploadComponent>
         </Card>
 
         <Card title={t("jobs.labels.documents-other")}>
-          <Gallery
-            images={galleryImages.other}
-            backdropClosesModal={true}
-            enableLightbox={false}
-            onClickThumbnail={(index) => {
-              window.open(
-                galleryImages.other[index].src,
-                "_blank",
-                "toolbar=0,location=0,menubar=0"
-              );
-            }}
-            onSelectImage={(index) => {
-              setgalleryImages({
-                ...galleryImages,
-                other: galleryImages.other.map((g, idx) =>
-                  index === idx ? { ...g, isSelected: !g.isSelected } : g
-                ),
-              });
-            }}
-          />
+          <DocumentsUploadComponent
+            jobId={jobId}
+            billId={billId}
+            callbackAfterUpload={billsCallback || refetch}
+            tagsArray={["test"]}
+          >
+            <Gallery
+              images={galleryImages.other}
+              backdropClosesModal={true}
+              enableLightbox={false}
+              onClickThumbnail={(index) => {
+                window.open(
+                  galleryImages.other[index].src,
+                  "_blank",
+                  "toolbar=0,location=0,menubar=0"
+                );
+              }}
+              onSelectImage={(index) => {
+                setgalleryImages({
+                  ...galleryImages,
+                  other: galleryImages.other.map((g, idx) =>
+                    index === idx ? { ...g, isSelected: !g.isSelected } : g
+                  ),
+                });
+              }}
+            />
+          </DocumentsUploadComponent>
         </Card>
       </div>
     </div>