From 32d434801c85b1b1ca342a0362daf1bc8e57e5c1 Mon Sep 17 00:00:00 2001
From: Robson Tenorio <robson.tenorio@gmail.com>
Date: Fri, 7 Oct 2022 11:53:34 -0300
Subject: [PATCH] Arrastar e soltar medias e enviar com ENTER

---
 frontend/src/components/MessageInput/index.js | 118 ++++++++++++++++--
 frontend/src/translate/languages/en.js        |   6 +
 frontend/src/translate/languages/es.js        |   6 +
 frontend/src/translate/languages/pt.js        |   6 +
 4 files changed, 126 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/MessageInput/index.js b/frontend/src/components/MessageInput/index.js
index 34e915d8..8fc48748 100644
--- a/frontend/src/components/MessageInput/index.js
+++ b/frontend/src/components/MessageInput/index.js
@@ -26,6 +26,13 @@ import {
   Menu,
   MenuItem,
   Switch,
+  Grid,
+  Typography,
+  List,
+  ListItem,
+  ListItemText,
+  ListItemAvatar,
+  Avatar
 } from "@material-ui/core";
 import ClickAwayListener from "@material-ui/core/ClickAwayListener";
 
@@ -53,6 +60,32 @@ const useStyles = makeStyles((theme) => ({
     },
   },
 
+  avatar: {
+    width: "50px",
+    height: "50px",
+    borderRadius:"25%"
+  },
+
+  dropInfo: {
+    background: "#eee",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    width: "100%",
+    padding: 15,
+    left: 0,
+    right: 0,
+  },
+
+  dropInfoOut: {
+    display: "none",
+  },
+
+  gridFiles: {
+    maxHeight: "100%",
+    overflow: "scroll",
+  },
+
   newMessageBox: {
     background: theme.palette.background.default,
     width: "100%",
@@ -86,6 +119,7 @@ const useStyles = makeStyles((theme) => ({
   },
 
   viewMediaInputWrapper: {
+    maxHeight: "80%",
     display: "flex",
     padding: "10px 13px",
     position: "relative",
@@ -213,9 +247,9 @@ const MessageInput = ({ ticketStatus }) => {
   const [quickAnswers, setQuickAnswer] = useState([]);
   const [typeBar, setTypeBar] = useState(false);
   const inputRef = useRef();
+  const [onDragEnter, setOnDragEnter] = useState(false);
   const [anchorEl, setAnchorEl] = useState(null);
-  const { setReplyingMessage, replyingMessage } =
-    useContext(ReplyMessageContext);
+  const { setReplyingMessage, replyingMessage } = useContext(ReplyMessageContext);
   const { user } = useContext(AuthContext);
 
   const [signMessage, setSignMessage] = useLocalStorage("signOption", true);
@@ -234,6 +268,12 @@ const MessageInput = ({ ticketStatus }) => {
     };
   }, [ticketId, setReplyingMessage]);
 
+  useEffect(() => {
+    setTimeout(() => {
+      setOnDragEnter(false);
+    }, 10000);
+  }, [onDragEnter === true]);
+
   const handleChangeInput = (e) => {
     setInputMessage(e.target.value);
     handleLoadQuickAnswer(e.target.value);
@@ -260,13 +300,24 @@ const MessageInput = ({ ticketStatus }) => {
 
   const handleInputPaste = (e) => {
     if (e.clipboardData.files[0]) {
-      setMedias([e.clipboardData.files[0]]);
+      const selectedMedias = Array.from(e.clipboardData.files);
+      setMedias(selectedMedias);
+    }
+  };
+
+  const handleInputDrop = (e) => {
+    e.preventDefault();
+    if (e.dataTransfer.files[0]) {
+      const selectedMedias = Array.from(e.dataTransfer.files);
+      setMedias(selectedMedias);
     }
   };
 
   const handleUploadMedia = async (e) => {
     setLoading(true);
-    e.preventDefault();
+    if (e) {
+      e.preventDefault();
+    }
 
     const formData = new FormData();
     formData.append("fromMe", true);
@@ -417,7 +468,13 @@ const MessageInput = ({ ticketStatus }) => {
 
   if (medias.length > 0)
     return (
-      <Paper elevation={0} square className={classes.viewMediaInputWrapper}>
+      <Paper 
+        elevation={0}
+        square
+        className={classes.viewMediaInputWrapper}
+        onDragEnter={() => setOnDragEnter(true)}
+        onDrop={(e) => handleInputDrop(e)}
+      >
         <IconButton
           aria-label="cancel-upload"
           component="span"
@@ -431,10 +488,41 @@ const MessageInput = ({ ticketStatus }) => {
             <CircularProgress className={classes.circleLoading} />
           </div>
         ) : (
-          <span>
-            {medias[0]?.name}
-            {/* <img src={media.preview} alt=""></img> */}
-          </span>
+          <Grid item className={classes.gridFiles}>
+            <Typography  variant="h6" component="div">
+              {i18n.t("uploads.titles.titleFileList")} ({medias.length})
+            </Typography>
+            <List>
+              {medias.map((value, index) => {
+                return (
+                  <ListItem key={index}>
+                    <ListItemAvatar>
+                      <Avatar className={classes.avatar} alt={value.name} src={URL.createObjectURL(value)}/>
+                    </ListItemAvatar>
+                    <ListItemText
+                      primary={`${value.name}`}
+                      secondary={`${parseInt(value.size / 1024)} kB`}
+                      // color="secondary"
+                    />
+                  </ListItem>
+                );
+              })}
+            </List>
+            <InputBase
+              style={{ width: "0", height: "0" }}
+              inputRef={function (input) {
+                if (input != null) {
+                  input.focus();
+                }
+              }}
+              onKeyPress={(e) => {
+                if (e.key === "Enter") {
+                  handleUploadMedia();
+                }
+              }}
+              defaultValue={medias[0].name}
+            />
+          </Grid>
         )}
         <IconButton
           aria-label="send-upload"
@@ -448,7 +536,16 @@ const MessageInput = ({ ticketStatus }) => {
     );
   else {
     return (
-      <Paper square elevation={0} className={classes.mainWrapper}>
+      <Paper 
+        square
+        elevation={0}
+        className={classes.mainWrapper}
+        onDragEnter={() => setOnDragEnter(true)}
+        onDrop={(e) => handleInputDrop(e)}  
+      >
+        <div className={ onDragEnter ? classes.dropInfo : classes.dropInfoOut}>
+          ⬇️ {i18n.t("uploads.titles.titleUploadMsgDragDrop")} ⬇️
+        </div>
         {replyingMessage && renderReplyingMessage(replyingMessage)}
         <div className={classes.newMessageBox}>
           <Hidden only={["sm", "xs"]}>
@@ -486,6 +583,7 @@ const MessageInput = ({ ticketStatus }) => {
                 aria-label="upload"
                 component="span"
                 disabled={loading || recording || ticketStatus !== "open"}
+                onMouseOver={() => setOnDragEnter(true)}
               >
                 <AttachFileIcon className={classes.sendMessageIcons} />
               </IconButton>
diff --git a/frontend/src/translate/languages/en.js b/frontend/src/translate/languages/en.js
index 04d3062f..105fb866 100644
--- a/frontend/src/translate/languages/en.js
+++ b/frontend/src/translate/languages/en.js
@@ -268,6 +268,12 @@ const messages = {
       chat: {
         noTicketMessage: "Select a ticket to start chatting.",
       },
+      uploads: {
+        titles: {
+          titleUploadMsgDragDrop: "DRAG AND DROP FILES INTO THE FIELD BELOW",
+          titleFileList: "List of file(s)"
+        },
+      },
       ticketsManager: {
         buttons: {
           newTicket: "New",
diff --git a/frontend/src/translate/languages/es.js b/frontend/src/translate/languages/es.js
index 48753da1..521bd9f8 100644
--- a/frontend/src/translate/languages/es.js
+++ b/frontend/src/translate/languages/es.js
@@ -268,6 +268,12 @@ const messages = {
       chat: {
         noTicketMessage: "Seleccione un ticket para comenzar a chatear.",
       },
+      uploads: {
+        titles: {
+          titleUploadMsgDragDrop: "ARRASTRA Y SUELTA LOS ARCHIVOS EN EL CAMPO DE ABAJO",
+          titleFileList: "Lista de archivos"
+        },
+      },
       ticketsManager: {
         buttons: {
           newTicket: "Nuevo",
diff --git a/frontend/src/translate/languages/pt.js b/frontend/src/translate/languages/pt.js
index d7ac22fa..ce0c07b6 100644
--- a/frontend/src/translate/languages/pt.js
+++ b/frontend/src/translate/languages/pt.js
@@ -268,6 +268,12 @@ const messages = {
       chat: {
         noTicketMessage: "Selecione um ticket para começar a conversar.",
       },
+      uploads: {
+        titles: {
+          titleUploadMsgDragDrop: "ARRASTE E SOLTE ARQUIVOS NO CAMPO ABAIXO",
+          titleFileList: "Lista de arquivo(s)"
+        },
+      },
       ticketsManager: {
         buttons: {
           newTicket: "Novo",