Arrastar e soltar medias e enviar com ENTER

rtenorioh · Oct 7, 2022 · 32d4348 · 32d4348
1 parent d8039fc
commit 32d4348
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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",