Started contact deails drawer

backend/src/controllers/MessageController.js

@@ -1,5 +1,6 @@
 const Message = require("../models/Message");
 const Contact = require("../models/Contact");
+
 const Ticket = require("../models/Ticket");
 const { getIO } = require("../libs/socket");
 const { getWbot } = require("../libs/wbot");
@@ -47,6 +48,7 @@ exports.index = async (req, res, next) => {
 		include: [
 			{
 				model: Contact,
+				include: "extraInfo",
 				attributes: ["name", "number", "profilePicUrl"],
 			},
 		],

frontend/src/components/ContactDrawer/index.js

@@ -0,0 +1,67 @@
+import React from "react";
+
+import { makeStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+import IconButton from "@material-ui/core/IconButton";
+import CloseIcon from "@material-ui/icons/Close";
+import Drawer from "@material-ui/core/Drawer";
+
+const drawerWidth = 320;
+
+const useStyles = makeStyles(theme => ({
+	drawer: {
+		width: drawerWidth,
+		flexShrink: 0,
+	},
+	drawerPaper: {
+		width: drawerWidth,
+		display: "flex",
+		borderTop: "1px solid rgba(0, 0, 0, 0.12)",
+		borderTopRightRadius: 4,
+		borderBottomRightRadius: 4,
+		backgroundColor: "#eee",
+	},
+	drawerHeader: {
+		display: "flex",
+		borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
+		backgroundColor: "#eee",
+		alignItems: "center",
+		padding: theme.spacing(0, 1),
+		minHeight: "73px",
+		justifyContent: "flex-start",
+	},
+}));
+
+const ContactDrawer = ({ open, children, handleDrawerClose }) => {
+	const classes = useStyles();
+
+	return (
+		<Drawer
+			className={classes.drawer}
+			variant="persistent"
+			anchor="right"
+			open={open}
+			PaperProps={{ style: { position: "absolute" } }}
+			BackdropProps={{ style: { position: "absolute" } }}
+			ModalProps={{
+				container: document.getElementById("drawer-container"),
+				style: { position: "absolute" },
+			}}
+			classes={{
+				paper: classes.drawerPaper,
+			}}
+		>
+			<div className={classes.drawerHeader}>
+				<IconButton onClick={handleDrawerClose}>
+					<CloseIcon />
+				</IconButton>
+				<Typography style={{ justifySelf: "center" }}>
+					Dados do contato
+				</Typography>
+			</div>
+			{children}
+		</Drawer>
+	);
+};
+
+export default ContactDrawer;

frontend/src/components/MessagesList/index.js

@@ -16,17 +16,24 @@ import Card from "@material-ui/core/Card";
 import CardHeader from "@material-ui/core/CardHeader";
 import ReplayIcon from "@material-ui/icons/Replay";
 import Avatar from "@material-ui/core/Avatar";
-import Button from "@material-ui/core/Button";
-import IconButton from "@material-ui/core/IconButton";
-import CloseIcon from "@material-ui/icons/Close";
 import Divider from "@material-ui/core/Divider";
-import Paper from "@material-ui/core/Paper";
+import Button from "@material-ui/core/Button";
 import Typography from "@material-ui/core/Typography";
+import Link from "@material-ui/core/Link";
+
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+
+import Paper from "@material-ui/core/Paper";
 import { green } from "@material-ui/core/colors";
 import Skeleton from "@material-ui/lab/Skeleton";
 
-import Drawer from "@material-ui/core/Drawer";
+// import Drawer from "@material-ui/core/Drawer";
 
+import ContactDrawer from "../ContactDrawer";
 import whatsBackground from "../../assets/wa-background.png";
 
 import LinkifyWithTargetBlank from "../LinkifyWithTargetBlank";
@@ -220,25 +227,42 @@ const useStyles = makeStyles(theme => ({
 		marginLeft: 4,
 	},
 
-	drawer: {
-		width: drawerWidth,
-		flexShrink: 0,
-	},
-	drawerPaper: {
-		width: drawerWidth,
-		borderTop: "1px solid rgba(0, 0, 0, 0.12)",
-		borderTopRightRadius: 4,
-		borderBottomRightRadius: 4,
-	},
-	drawerHeader: {
+	drawerContent: {
 		display: "flex",
-		borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
+		flexDirection: "column",
+		padding: 8,
+		// backgroundColor: "red",
+		height: "100%",
+		overflow: "hidden",
+	},
 
-		backgroundColor: "#eee",
+	drawerAvatar: {
+		margin: 15,
+		width: 160,
+		height: 160,
+	},
+
+	drawerHeader: {
+		// margin: 8,
+		display: "flex",
+		flexDirection: "column",
 		alignItems: "center",
-		padding: theme.spacing(0, 1),
-		minHeight: "73px",
-		justifyContent: "flex-start",
+		justifyContent: "center",
+		"& > *": {
+			margin: 4,
+		},
+	},
+
+	drawerDetails: {
+		marginTop: 8,
+		padding: 8,
+		display: "flex",
+		flexDirection: "column",
+		// overflow: "hidden",
+		// whiteSpace: "nowrap",
+		// textOverflow: "ellipsis",
+		// overflow: "scroll",
+		flex: 1,
 	},
 }));
 
@@ -507,6 +531,8 @@ const MessagesList = () => {
 		setOpen(false);
 	};
 
+	console.log(contact);
+
 	return (
 		<div className={classes.root} id="drawer-container">
 			<Paper
@@ -601,33 +627,46 @@ const MessagesList = () => {
 					) : null}
 				</div>
 			</Paper>
-			<Drawer
-				className={classes.drawer}
-				variant="persistent"
-				anchor="right"
-				open={open}
-				PaperProps={{ style: { position: "absolute" } }}
-				BackdropProps={{ style: { position: "absolute" } }}
-				ModalProps={{
-					container: document.getElementById("drawer-container"),
-					style: { position: "absolute" },
-				}}
-				classes={{
-					paper: classes.drawerPaper,
-				}}
-			>
-				<div className={classes.drawerHeader}>
-					<IconButton onClick={handleDrawerClose}>
-						<CloseIcon />
-					</IconButton>
-					<Typography style={{ justifySelf: "center" }}>
-						Dados do contato
-					</Typography>
+			<ContactDrawer open={open} handleDrawerClose={handleDrawerClose}>
+				<div className={classes.drawerContent}>
+					<div className={classes.drawerHeader}>
+						<Avatar
+							alt={contact.name}
+							src={contact.profilePicUrl}
+							className={classes.drawerAvatar}
+						></Avatar>
+
+						<Typography>{contact.name}</Typography>
+						<Typography>
+							<Link href={`tel:${contact.number}`}>{contact.number}</Link>
+						</Typography>
+						<Button variant="outlined" color="primary">
+							Editar contato
+						</Button>
+					</div>
+					<Paper className={classes.drawerDetails}>
+						<Typography variant="subtitle1">Informações</Typography>
+						<Table size="small">
+							<TableHead>
+								<TableRow>
+									<TableCell>Nome</TableCell>
+									<TableCell>Valor</TableCell>
+								</TableRow>
+							</TableHead>
+							<TableBody>
+								{contact &&
+									contact.extraInfo &&
+									contact.extraInfo.map(info => (
+										<TableRow key={info.id}>
+											<TableCell>{info.name}</TableCell>
+											<TableCell>{info.value}</TableCell>
+										</TableRow>
+									))}
+							</TableBody>
+						</Table>
+					</Paper>
 				</div>
-				<a href="https://economicros.ddns.com.br:4043/?viewmode=11&gotonode=j@fJRRDC0rsF1pdypERaF4eQbcwntph@aNQrtLIXhES3Q4AZX678gnn4qbPG619C">
-					Value
-				</a>
-			</Drawer>
+			</ContactDrawer>
 		</div>
 	);
 };

frontend/src/components/TicketsList/index.js

@@ -23,7 +23,7 @@ import Tabs from "@material-ui/core/Tabs";
 import Tab from "@material-ui/core/Tab";
 import MoveToInboxIcon from "@material-ui/icons/MoveToInbox";
 import CheckCircleOutlineIcon from "@material-ui/icons/CheckCircleOutline";
-import TicketSkeleton from "./TicketSkeleton";
+import TicketsSkeleton from "../TicketsSkeleton";
 
 import api from "../../services/api";
 
@@ -449,7 +449,7 @@ const TicketsList = () => {
 		});
 
 		if (loading) {
-			return <TicketSkeleton />;
+			return <TicketsSkeleton />;
 		} else if (countTickets(status, userId) === "" && status !== "closed") {
 			return (
 				<div className={classes.noTicketsDiv}>

frontend/src/components/TicketsSkeleton/index.js

@@ -6,7 +6,7 @@ import ListItemAvatar from "@material-ui/core/ListItemAvatar";
 import Divider from "@material-ui/core/Divider";
 import Skeleton from "@material-ui/lab/Skeleton";
 
-const TicketSkeleton = () => {
+const TicketsSkeleton = () => {
 	return (
 		<>
 			<ListItem dense>
@@ -43,4 +43,4 @@ const TicketSkeleton = () => {
 	);
 };
 
-export default TicketSkeleton;
+export default TicketsSkeleton;