From 9477e46c243fc88109ec4c044f90ddd06a4ab84d Mon Sep 17 00:00:00 2001 From: canove Date: Mon, 27 Jul 2020 16:51:54 -0300 Subject: [PATCH] Finished Contact Drawer styles and func --- backend/src/controllers/MessageController.js | 9 +- backend/src/controllers/TicketController.js | 2 + backend/src/models/Contact.js | 2 +- backend/src/models/Ticket.js | 3 +- backend/src/services/wbotMessageListener.js | 11 +- .../src/components/ContactDrawer/index.js | 133 +++++++++++++++++- .../components/ContactDrawerSkeleton/index.js | 40 ++++++ frontend/src/components/ContactModal/index.js | 2 +- frontend/src/components/MessagesList/index.js | 111 ++------------- frontend/src/components/TicketsList/index.js | 17 +-- frontend/src/pages/Contacts/index.js | 2 +- frontend/src/pages/Dashboard/index.js | 8 +- 12 files changed, 212 insertions(+), 128 deletions(-) create mode 100644 frontend/src/components/ContactDrawerSkeleton/index.js diff --git a/backend/src/controllers/MessageController.js b/backend/src/controllers/MessageController.js index 9e38974..81ad5cb 100644 --- a/backend/src/controllers/MessageController.js +++ b/backend/src/controllers/MessageController.js @@ -48,8 +48,9 @@ exports.index = async (req, res, next) => { include: [ { model: Contact, + as: "contact", include: "extraInfo", - attributes: ["name", "number", "profilePicUrl"], + attributes: ["id", "name", "number", "profilePicUrl"], }, ], }); @@ -81,7 +82,6 @@ exports.index = async (req, res, next) => { return res.json({ messages: serializedMessages.reverse(), ticket: ticket, - contact: ticket.Contact, }); }; @@ -98,6 +98,7 @@ exports.store = async (req, res, next) => { include: [ { model: Contact, + as: "contact", attributes: ["number"], }, ], @@ -113,12 +114,12 @@ exports.store = async (req, res, next) => { } sentMessage = await wbot.sendMessage( - `${ticket.Contact.number}@c.us`, + `${ticket.contact.number}@c.us`, newMedia ); } else { sentMessage = await wbot.sendMessage( - `${ticket.Contact.number}@c.us`, + `${ticket.contact.number}@c.us`, message.body ); } diff --git a/backend/src/controllers/TicketController.js b/backend/src/controllers/TicketController.js index 02e002e..cc14dea 100644 --- a/backend/src/controllers/TicketController.js +++ b/backend/src/controllers/TicketController.js @@ -22,6 +22,7 @@ exports.index = async (req, res) => { include: [ { model: Contact, + as: "contact", attributes: ["name", "number", "profilePicUrl"], }, ], @@ -60,6 +61,7 @@ exports.update = async (req, res) => { include: [ { model: Contact, + as: "contact", attributes: ["name", "number", "profilePicUrl"], }, ], diff --git a/backend/src/models/Contact.js b/backend/src/models/Contact.js index d4d77c8..ab900f9 100644 --- a/backend/src/models/Contact.js +++ b/backend/src/models/Contact.js @@ -18,7 +18,7 @@ class Contact extends Sequelize.Model { } static associate(models) { - this.hasMany(models.Ticket, { foreignKey: "contactId" }); + this.hasMany(models.Ticket, { foreignKey: "contactId", as: "contact" }); this.hasMany(models.ContactCustomField, { foreignKey: "contactId", as: "extraInfo", diff --git a/backend/src/models/Ticket.js b/backend/src/models/Ticket.js index 5056dfd..c489697 100644 --- a/backend/src/models/Ticket.js +++ b/backend/src/models/Ticket.js @@ -5,6 +5,7 @@ class Ticket extends Sequelize.Model { super.init( { status: { type: Sequelize.STRING, defaultValue: "pending" }, + userId: { type: Sequelize.INTEGER, defaultValue: null }, lastMessage: { type: Sequelize.STRING }, }, { @@ -16,7 +17,7 @@ class Ticket extends Sequelize.Model { } static associate(models) { - this.belongsTo(models.Contact, { foreignKey: "contactId" }); + this.belongsTo(models.Contact, { foreignKey: "contactId", as: "contact" }); this.belongsTo(models.User, { foreignKey: "userId" }); this.hasMany(models.Message, { foreignKey: "ticketId" }); } diff --git a/backend/src/services/wbotMessageListener.js b/backend/src/services/wbotMessageListener.js index 7e4fa44..3f96da9 100644 --- a/backend/src/services/wbotMessageListener.js +++ b/backend/src/services/wbotMessageListener.js @@ -28,22 +28,16 @@ const verifyContact = async (msgContact, profilePicUrl) => { }; const verifyTicket = async contact => { - let ticket = await Ticket.findOne({ + const [ticket, created] = await Ticket.findOrCreate({ where: { status: { [Op.or]: ["open", "pending"], }, contactId: contact.id, }, + defaults: { contactId: contact.id, status: "pending" }, }); - if (!ticket) { - ticket = await Ticket.create({ - contactId: contact.id, - status: "pending", - }); - } - return ticket; }; @@ -127,6 +121,7 @@ const wbotMessageListener = () => { ...ticket.dataValues, unreadMessages: 1, lastMessage: newMessage.body, + contact: contact, }; io.to(ticket.id).to("notification").emit("appMessage", { diff --git a/frontend/src/components/ContactDrawer/index.js b/frontend/src/components/ContactDrawer/index.js index 7e5bd90..e8006c9 100644 --- a/frontend/src/components/ContactDrawer/index.js +++ b/frontend/src/components/ContactDrawer/index.js @@ -1,10 +1,19 @@ -import React from "react"; +import React, { useState } 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"; +import Link from "@material-ui/core/Link"; +import InputLabel from "@material-ui/core/InputLabel"; +import Avatar from "@material-ui/core/Avatar"; +import Button from "@material-ui/core/Button"; +import Paper from "@material-ui/core/Paper"; + +import LinkifyWithTargetBlank from "../LinkifyWithTargetBlank"; +import ContactModal from "../ContactModal"; +import ContactDrawerSkeleton from "../ContactDrawerSkeleton"; const drawerWidth = 320; @@ -21,7 +30,7 @@ const useStyles = makeStyles(theme => ({ borderBottomRightRadius: 4, backgroundColor: "#eee", }, - drawerHeader: { + header: { display: "flex", borderBottom: "1px solid rgba(0, 0, 0, 0.12)", backgroundColor: "#eee", @@ -30,11 +39,75 @@ const useStyles = makeStyles(theme => ({ minHeight: "73px", justifyContent: "flex-start", }, + content: { + display: "flex", + flexDirection: "column", + padding: "8px 0px 8px 8px", + // backgroundColor: "red", + height: "100%", + overflow: "scroll", + "&::-webkit-scrollbar": { + width: "8px", + height: "8px", + }, + "&::-webkit-scrollbar-thumb": { + // borderRadius: "2px", + boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)", + backgroundColor: "#e8e8e8", + }, + }, + + contactAvatar: { + margin: 15, + width: 160, + height: 160, + }, + + contactHeader: { + display: "flex", + padding: 8, + flexDirection: "column", + alignItems: "center", + justifyContent: "center", + "& > *": { + margin: 4, + }, + }, + + contactDetails: { + marginTop: 8, + padding: 8, + display: "flex", + flexDirection: "column", + // overflowX: "scroll", + // flex: 1, + // "&::-webkit-scrollbar": { + // width: "8px", + // height: "8px", + // }, + // "&::-webkit-scrollbar-thumb": { + // // borderRadius: "2px", + // boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)", + // backgroundColor: "#e8e8e8", + // }, + }, + contactExtraInfo: { + marginTop: 4, + padding: 6, + }, })); -const ContactDrawer = ({ open, children, handleDrawerClose }) => { +const ContactDrawer = ({ + open, + children, + handleDrawerClose, + contact, + loading, +}) => { const classes = useStyles(); + const [modalOpen, setModalOpen] = useState(false); + return ( { paper: classes.drawerPaper, }} > -
+
@@ -59,7 +132,57 @@ const ContactDrawer = ({ open, children, handleDrawerClose }) => { Dados do contato
- {children} + {loading ? ( + + ) : ( +
+ + + + {contact.name} + + {contact.number} + + + + + setModalOpen(false)} + aria-labelledby="form-dialog-title" + contactId={contact.id} + > + Outras informações + {contact && + contact.extraInfo && + contact.extraInfo.map(info => ( + + {info.name} + + + {info.value} + + + + ))} + +
+ )} ); }; diff --git a/frontend/src/components/ContactDrawerSkeleton/index.js b/frontend/src/components/ContactDrawerSkeleton/index.js new file mode 100644 index 0000000..9fcb0c1 --- /dev/null +++ b/frontend/src/components/ContactDrawerSkeleton/index.js @@ -0,0 +1,40 @@ +import React from "react"; +import Skeleton from "@material-ui/lab/Skeleton"; +import Typography from "@material-ui/core/Typography"; +import Paper from "@material-ui/core/Paper"; + +const ContactDrawerSkeleton = ({ classes }) => { + return ( +
+ + + + + + + + Outras informações + + + + + + + + + + + + + +
+ ); +}; + +export default ContactDrawerSkeleton; diff --git a/frontend/src/components/ContactModal/index.js b/frontend/src/components/ContactModal/index.js index bd68aae..809650f 100644 --- a/frontend/src/components/ContactModal/index.js +++ b/frontend/src/components/ContactModal/index.js @@ -77,7 +77,7 @@ const ContactModal = ({ modalOpen, onClose, contactId }) => { }; fetchContact(); - }, [contactId]); + }, [contactId, modalOpen]); const handleClose = () => { onClose(); diff --git a/frontend/src/components/MessagesList/index.js b/frontend/src/components/MessagesList/index.js index 68a792a..d985a39 100644 --- a/frontend/src/components/MessagesList/index.js +++ b/frontend/src/components/MessagesList/index.js @@ -16,29 +16,15 @@ 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 Divider from "@material-ui/core/Divider"; 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 api from "../../services/api"; import ContactDrawer from "../ContactDrawer"; import whatsBackground from "../../assets/wa-background.png"; - import LinkifyWithTargetBlank from "../LinkifyWithTargetBlank"; -import api from "../../services/api"; - import MessageInput from "../MessageInput/"; const drawerWidth = 320; @@ -111,6 +97,7 @@ const useStyles = makeStyles(theme => ({ overflowY: "scroll", "&::-webkit-scrollbar": { width: "8px", + height: "8px", }, "&::-webkit-scrollbar-thumb": { // borderRadius: "2px", @@ -126,7 +113,6 @@ const useStyles = makeStyles(theme => ({ top: 0, left: "50%", marginTop: 12, - // marginLeft: -12, }, messageLeft: { @@ -226,44 +212,6 @@ const useStyles = makeStyles(theme => ({ verticalAlign: "middle", marginLeft: 4, }, - - drawerContent: { - display: "flex", - flexDirection: "column", - padding: 8, - // backgroundColor: "red", - height: "100%", - overflow: "hidden", - }, - - drawerAvatar: { - margin: 15, - width: 160, - height: 160, - }, - - drawerHeader: { - // margin: 8, - display: "flex", - flexDirection: "column", - alignItems: "center", - justifyContent: "center", - "& > *": { - margin: 4, - }, - }, - - drawerDetails: { - marginTop: 8, - padding: 8, - display: "flex", - flexDirection: "column", - // overflow: "hidden", - // whiteSpace: "nowrap", - // textOverflow: "ellipsis", - // overflow: "scroll", - flex: 1, - }, })); const MessagesList = () => { @@ -297,7 +245,7 @@ const MessagesList = () => { const res = await api.get("/messages/" + ticketId, { params: { searchParam, pageNumber }, }); - setContact(res.data.contact); + setContact(res.data.ticket.contact); setTicket(res.data.ticket); setMessagesList(prevMessages => { return [...res.data.messages, ...prevMessages]; @@ -331,6 +279,12 @@ const MessagesList = () => { } }); + socket.on("contact", data => { + if (data.action === "update") { + setContact(data.contact); + } + }); + return () => { socket.disconnect(); setSearchParam(""); @@ -531,8 +485,6 @@ const MessagesList = () => { setOpen(false); }; - console.log(contact); - return (
{ ) : null}
- -
-
- - {contact.name} - - {contact.number} - - -
- - Informações - - - - Nome - Valor - - - - {contact && - contact.extraInfo && - contact.extraInfo.map(info => ( - - {info.name} - {info.value} - - ))} - -
- -
- +
); }; diff --git a/frontend/src/components/TicketsList/index.js b/frontend/src/components/TicketsList/index.js index a0951a7..e05562b 100644 --- a/frontend/src/components/TicketsList/index.js +++ b/frontend/src/components/TicketsList/index.js @@ -1,7 +1,6 @@ import React, { useState, useEffect } from "react"; import { useHistory, useParams } from "react-router-dom"; import openSocket from "socket.io-client"; - import { parseISO, format } from "date-fns"; import { makeStyles } from "@material-ui/core/styles"; @@ -18,11 +17,11 @@ import Badge from "@material-ui/core/Badge"; import SearchIcon from "@material-ui/icons/Search"; import InputBase from "@material-ui/core/InputBase"; import Button from "@material-ui/core/Button"; - 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 TicketsSkeleton from "../TicketsSkeleton"; import api from "../../services/api"; @@ -55,6 +54,7 @@ const useStyles = makeStyles(theme => ({ overflowY: "scroll", "&::-webkit-scrollbar": { width: "8px", + height: "8px", }, "&::-webkit-scrollbar-thumb": { boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)", @@ -68,6 +68,7 @@ const useStyles = makeStyles(theme => ({ overflowY: "scroll", "&::-webkit-scrollbar": { width: "8px", + height: "8px", }, "&::-webkit-scrollbar-thumb": { boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)", @@ -194,6 +195,8 @@ const useStyles = makeStyles(theme => ({ const TicketsList = () => { const classes = useStyles(); + const history = useHistory(); + const token = localStorage.getItem("token"); const userId = +localStorage.getItem("userId"); const { ticketId } = useParams(); @@ -202,10 +205,6 @@ const TicketsList = () => { const [searchParam, setSearchParam] = useState(""); const [tab, setTab] = useState("open"); - // const [modalOpen, setModalOpen] = useState(false); - - const history = useHistory(); - useEffect(() => { if (!("Notification" in window)) { console.log("This browser doesn't support notifications"); @@ -301,8 +300,6 @@ const TicketsList = () => { }); }; - console.log(tickets); - const showDesktopNotification = data => { const options = { body: `${data.message.body} - ${format(new Date(), "HH:mm")}`, @@ -382,7 +379,7 @@ const TicketsList = () => { @@ -395,7 +392,7 @@ const TicketsList = () => { variant="body2" color="textPrimary" > - {ticket.Contact.name} + {ticket.contact.name} {ticket.lastMessage && ( ({ overflowY: "scroll", "&::-webkit-scrollbar": { width: "8px", + height: "8px", }, "&::-webkit-scrollbar-thumb": { // borderRadius: "2px", @@ -191,7 +192,6 @@ const Contacts = () => { diff --git a/frontend/src/pages/Dashboard/index.js b/frontend/src/pages/Dashboard/index.js index 033f34a..1d8f1d2 100644 --- a/frontend/src/pages/Dashboard/index.js +++ b/frontend/src/pages/Dashboard/index.js @@ -3,7 +3,13 @@ import React from "react"; const Dashboard = () => { return (
-

Todo Dashboard

+ + teste +
); };