From 66a1dc5fd2a5ae122cdb69331ea9f83a25d28fdc Mon Sep 17 00:00:00 2001 From: canove Date: Sat, 25 Jul 2020 14:22:11 -0300 Subject: [PATCH] Started contact deails drawer --- backend/src/controllers/MessageController.js | 2 + .../src/components/ContactDrawer/index.js | 67 +++++++++ frontend/src/components/MessagesList/index.js | 133 +++++++++++------- frontend/src/components/TicketsList/index.js | 4 +- .../index.js} | 4 +- 5 files changed, 159 insertions(+), 51 deletions(-) create mode 100644 frontend/src/components/ContactDrawer/index.js rename frontend/src/components/{TicketsList/TicketSkeleton.js => TicketsSkeleton/index.js} (95%) diff --git a/backend/src/controllers/MessageController.js b/backend/src/controllers/MessageController.js index e6053a7..9e38974 100644 --- a/backend/src/controllers/MessageController.js +++ b/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"], }, ], diff --git a/frontend/src/components/ContactDrawer/index.js b/frontend/src/components/ContactDrawer/index.js new file mode 100644 index 0000000..7e5bd90 --- /dev/null +++ b/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 ( + +
+ + + + + Dados do contato + +
+ {children} + + ); +}; + +export default ContactDrawer; diff --git a/frontend/src/components/MessagesList/index.js b/frontend/src/components/MessagesList/index.js index 60209e1..68a792a 100644 --- a/frontend/src/components/MessagesList/index.js +++ b/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 (
{ ) : null}
- -
- - - - - Dados do contato - + +
+
+ + + {contact.name} + + {contact.number} + + +
+ + Informações + + + + Nome + Valor + + + + {contact && + contact.extraInfo && + contact.extraInfo.map(info => ( + + {info.name} + {info.value} + + ))} + +
+
- - Value - - +
); }; diff --git a/frontend/src/components/TicketsList/index.js b/frontend/src/components/TicketsList/index.js index 964d947..a0951a7 100644 --- a/frontend/src/components/TicketsList/index.js +++ b/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 ; + return ; } else if (countTickets(status, userId) === "" && status !== "closed") { return (
diff --git a/frontend/src/components/TicketsList/TicketSkeleton.js b/frontend/src/components/TicketsSkeleton/index.js similarity index 95% rename from frontend/src/components/TicketsList/TicketSkeleton.js rename to frontend/src/components/TicketsSkeleton/index.js index a56d7e9..4648e5f 100644 --- a/frontend/src/components/TicketsList/TicketSkeleton.js +++ b/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 ( <> @@ -43,4 +43,4 @@ const TicketSkeleton = () => { ); }; -export default TicketSkeleton; +export default TicketsSkeleton;