From 12609d54ca40ae90e3a53a520c622a47485c7388 Mon Sep 17 00:00:00 2001
From: Patrick Fic <snaptsoft@gmail.com>
Date: Tue, 13 Apr 2021 08:32:38 -0700
Subject: [PATCH] IO-889 Document Upload notification and file list clear

---
 .../documents-upload.component.jsx              | 17 +++++++++++++++--
 .../jobs-documents-gallery.delete.component.jsx |  5 ++++-
 client/src/translations/en_us/common.json       |  2 +-
 client/src/utils/RenderTemplate.js              |  1 -
 4 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/client/src/components/documents-upload/documents-upload.component.jsx b/client/src/components/documents-upload/documents-upload.component.jsx
index 1fc105127..65d0315ab 100644
--- a/client/src/components/documents-upload/documents-upload.component.jsx
+++ b/client/src/components/documents-upload/documents-upload.component.jsx
@@ -1,6 +1,6 @@
 import { UploadOutlined } from "@ant-design/icons";
 import { notification, Progress, Result, Space, Upload } from "antd";
-import React, { useMemo } from "react";
+import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -27,6 +27,7 @@ export function DocumentsUploadComponent({
   ignoreSizeLimit = false,
 }) {
   const { t } = useTranslation();
+  const [fileList, setFileList] = useState([]);
 
   const pct = useMemo(() => {
     return parseInt(
@@ -40,12 +41,24 @@ export function DocumentsUploadComponent({
         status="error"
         title={t("documents.labels.storageexceeded_title")}
         subTitle={t("documents.labels.storageexceeded")}
-      ></Result>
+      />
     );
 
+  const handleDone = (uid) => {
+    setTimeout(() => {
+      setFileList((fileList) => fileList.filter((x) => x.uid !== uid));
+    }, 2000);
+  };
+
   return (
     <Upload.Dragger
       multiple={true}
+      fileList={fileList}
+      onChange={(f) => {
+        console.log(`f`, f);
+        if (f.event && f.event.percent === 100) handleDone(f.file.uid);
+        setFileList(f.fileList);
+      }}
       beforeUpload={(file, fileList) => {
         if (ignoreSizeLimit) return true;
         const newFiles = fileList.reduce((acc, val) => acc + val.size, 0);
diff --git a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.delete.component.jsx b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.delete.component.jsx
index 57af3317f..bbde76390 100644
--- a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.delete.component.jsx
+++ b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.delete.component.jsx
@@ -56,9 +56,12 @@ export default function JobsDocumentsDeleteButton({
             .then((response) => {
               deleteDocument({ variables: { id: image.id } })
                 .then((r) => {
-                  notification["success"]({
+                  notification.open({
+                    key: "docdeletedsuccesfully",
+                    type: "success",
                     message: t("documents.successes.delete"),
                   });
+
                   if (deletionCallback) deletionCallback();
                 })
                 .catch((error) => {
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index ec0dd8cb7..9ce7156d9 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -679,7 +679,7 @@
 				"usage": "of job storage used.  ({{used}} / {{total}})"
 			},
 			"successes": {
-				"delete": "Document deleted successfully.",
+				"delete": "Document(s) deleted successfully.",
 				"insert": "Uploaded document successfully. ",
 				"updated": "Document updated successfully. "
 			}
diff --git a/client/src/utils/RenderTemplate.js b/client/src/utils/RenderTemplate.js
index b7766c221..6cdc4dbef 100644
--- a/client/src/utils/RenderTemplate.js
+++ b/client/src/utils/RenderTemplate.js
@@ -8,7 +8,6 @@ import { setEmailOptions } from "../redux/email/email.actions";
 import { store } from "../redux/store";
 import client from "../utils/GraphQLClient";
 import { TemplateList } from "./TemplateConstants";
-import _ from "lodash";
 const server = process.env.REACT_APP_REPORTS_SERVER_URL;
 jsreport.serverUrl = server;