Função copiar dados do contato

rtenorioh · Oct 24, 2022 · a4f72cf · a4f72cf
1 parent 9b91d41
commit a4f72cf
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 5 deletions.
diff --git a/frontend/src/components/ContactDrawer/index.js b/frontend/src/components/ContactDrawer/index.js
@@ -18,6 +18,7 @@ import ContactDrawerSkeleton from "../ContactDrawerSkeleton";
 import MarkdownWrapper from "../MarkdownWrapper";
 import { TagsContainer } from "../TagsContainer";
 import ModalImageContatc from "./ModalImage";
+import CopyToClipboard from "../CopyToClipboard";
 
 const drawerWidth = 320;
 
@@ -120,14 +121,19 @@ const ContactDrawer = ({ open, handleDrawerClose, contact, loading }) => {
 			) : (
 				<div className={classes.content}>
 					<Paper square variant="outlined" className={classes.contactHeader}>
-						<ModalImageContatc imageUrl={contact.profilePicUrl}/>							
-						<Typography>{contact.name}</Typography>
+						<ModalImageContatc imageUrl={contact.profilePicUrl} />
+						<Typography>
+							{contact.name}
+							<CopyToClipboard content={contact.name} color="secondary" />
+							</Typography>
 						<Typography>
 							<Link href={`tel:${contact.number}`}>{contact.number}</Link>
+							<CopyToClipboard content={contact.number} color="secondary" />
 						</Typography>
 						{contact.email && (
 							<Typography>
 								<Link href={`mailto:${contact.email}`}>{contact.email}</Link>
+								<CopyToClipboard content={contact.email} color="secondary" />
 							</Typography>
 						)}
 						<Button
@@ -138,7 +144,7 @@ const ContactDrawer = ({ open, handleDrawerClose, contact, loading }) => {
 							{i18n.t("contactDrawer.buttons.edit")}
 						</Button>
 					</Paper>
-					<TagsContainer contact={contact} className={classes.contactTags}/>
+					<TagsContainer contact={contact} className={classes.contactTags} />
 					<Paper square variant="outlined" className={classes.contactDetails}>
 						<ContactModal
 							open={modalOpen}
@@ -155,7 +161,10 @@ const ContactDrawer = ({ open, handleDrawerClose, contact, loading }) => {
 								variant="outlined"
 								className={classes.contactExtraInfo}
 							>
-								<InputLabel>{info.name}</InputLabel>
+								<InputLabel>
+									{info.name}
+									<CopyToClipboard content={info.value} color="secondary" />
+								</InputLabel>
 								<Typography component="div" noWrap style={{ paddingTop: 2 }}>
 									<MarkdownWrapper>{info.value}</MarkdownWrapper>
 								</Typography>

diff --git a/frontend/src/components/CopyToClipboard/index.js b/frontend/src/components/CopyToClipboard/index.js
@@ -0,0 +1,37 @@
+import React, { useState } from "react";
+import { 
+  IconButton, 
+  Tooltip 
+} from "@material-ui/core";
+import { FileCopyOutlined } from "@material-ui/icons";
+import { i18n } from "../../translate/i18n";
+
+const CopyToClipboard = ({ content, color }) => {
+  const [tooltipMessage, setTooltipMessage] = useState(
+    i18n.t("copyToClipboard.copy")
+  );
+
+  const handleCopyToClipboard = () => {
+    navigator.clipboard.writeText(content);
+    setTooltipMessage(i18n.t("copyToClipboard.copied"));
+  };
+
+  const handleCloseTooltip = () => {
+    setTooltipMessage(i18n.t("copyToClipboard.copy"));
+  };
+
+  return (
+    <Tooltip
+      arrow
+      onClose={handleCloseTooltip}
+      placement="top"
+      title={tooltipMessage}
+    >
+      <IconButton size="small" onClick={handleCopyToClipboard}>
+        <FileCopyOutlined fontSize="small" color={color} />
+      </IconButton>
+    </Tooltip>
+  );
+};
+
+export default CopyToClipboard;
diff --git a/frontend/src/translate/languages/en.js b/frontend/src/translate/languages/en.js
@@ -545,6 +545,10 @@ const messages = {
         },
         extraInfo: "Other information",
       },
+      copyToClipboard: {
+        copy:"Copy",
+        copied: "Copied"
+      },
       ticketOptionsMenu: {
         delete: "Delete",
         transfer: "Transfer",

diff --git a/frontend/src/translate/languages/es.js b/frontend/src/translate/languages/es.js
@@ -545,6 +545,10 @@ const messages = {
         },
         extraInfo: "Otra información",
       },
+      copyToClipboard: {
+        copy:"Copiar",
+        copied: "Copiado"
+      },
       ticketOptionsMenu: {
         delete: "Eliminar",
         transfer: "Transferir",

diff --git a/frontend/src/translate/languages/pt.js b/frontend/src/translate/languages/pt.js
@@ -528,7 +528,7 @@ const messages = {
           buttons: {
             return: "Retornar",
             resolve: "Resolver",
-            reopen: "Reabrir",
+            reopen: "Reabrir", 
             accept: "Aceitar",
           },
         },
@@ -545,6 +545,10 @@ const messages = {
         },
         extraInfo: "Outras informações",
       },
+      copyToClipboard: {
+        copy:"Copiar",
+        copied: "Copiado"
+      },
       ticketOptionsMenu: {
         delete: "Deletar",
         transfer: "Transferir",