From b4edc7f99a816bdb4182a9a4889a448955b80b65 Mon Sep 17 00:00:00 2001 From: Renato Di Giacomo Date: Fri, 29 Jul 2022 15:44:08 -0300 Subject: [PATCH 01/10] Added click link menu and shrink it --- frontend/src/layout/MainListItems.js | 59 +++++++++------------------- frontend/src/layout/index.js | 2 +- 2 files changed, 20 insertions(+), 41 deletions(-) diff --git a/frontend/src/layout/MainListItems.js b/frontend/src/layout/MainListItems.js index c524b76..6f505d4 100644 --- a/frontend/src/layout/MainListItems.js +++ b/frontend/src/layout/MainListItems.js @@ -9,8 +9,8 @@ import Divider from "@material-ui/core/Divider"; import { Badge } from "@material-ui/core"; import DashboardOutlinedIcon from "@material-ui/icons/DashboardOutlined"; -import ReportOutlinedIcon from "@material-ui/icons/ReportOutlined"; -import SendOutlined from '@material-ui/icons/SendOutlined'; +import ReportOutlinedIcon from "@material-ui/icons/ReportOutlined"; +import SendOutlined from "@material-ui/icons/SendOutlined"; //import ReportOutlined from "@bit/mui-org.material-ui-icons.report-outlined"; @@ -32,10 +32,7 @@ function ListItemLink(props) { const { icon, primary, to, className } = props; const renderLink = React.useMemo( - () => - React.forwardRef((itemProps, ref) => ( - - )), + () => React.forwardRef((itemProps, ref) => ), [to] ); @@ -50,7 +47,7 @@ function ListItemLink(props) { } const MainListItems = (props) => { - const { drawerClose } = props; + const { drawerClose, setDrawerOpen, drawerOpen } = props; const { whatsApps } = useContext(WhatsAppsContext); const { user } = useContext(AuthContext); const [connectionWarning, setConnectionWarning] = useState(false); @@ -78,9 +75,8 @@ const MainListItems = (props) => { }, [whatsApps]); return ( -
- - + //Solicitado pelo Adriano: Click no LinkItem e fechar o menu! +
setDrawerOpen(false)}> { primary={i18n.t("mainDrawer.listItems.contacts")} icon={} /> - } - /> + } /> { yes={() => ( <> - - {i18n.t("mainDrawer.listItems.administration")} - + {i18n.t("mainDrawer.listItems.administration")} { } /> - } - /> - - } - /> + } /> + } /> ( - } - /> - )} + role={user.profile} + perform="settings-view:show" + yes={() => ( + } + /> + )} /> - - )} /> diff --git a/frontend/src/layout/index.js b/frontend/src/layout/index.js index ce410d0..dc9dccb 100644 --- a/frontend/src/layout/index.js +++ b/frontend/src/layout/index.js @@ -185,7 +185,7 @@ const LoggedInLayout = ({ children }) => {
- + From debffebb1aeec33548afcaaedd44cbe33ee3b676 Mon Sep 17 00:00:00 2001 From: Renato Di Giacomo Date: Mon, 1 Aug 2022 16:33:24 -0300 Subject: [PATCH 02/10] Add card to every user, with status and count time added Filter to online, offline and not present --- .../src/components/TicketsManager/index.js | 7 +- frontend/src/pages/Dashboard/Title.js | 4 +- frontend/src/pages/Dashboard/index.js | 546 ++++++++++++++---- 3 files changed, 442 insertions(+), 115 deletions(-) diff --git a/frontend/src/components/TicketsManager/index.js b/frontend/src/components/TicketsManager/index.js index 88e6ea0..cc8a8aa 100644 --- a/frontend/src/components/TicketsManager/index.js +++ b/frontend/src/components/TicketsManager/index.js @@ -124,7 +124,8 @@ const TicketsManager = () => { let searchTimeout; const handleSearch = (e) => { - const searchedTerm = e.target.value.toLowerCase(); + const searchedTerm = e.target.value.toLowerCase().trim(); + console.log(searchedTerm) clearTimeout(searchTimeout); @@ -274,7 +275,7 @@ const TicketsManager = () => { setOpenCount(val)} @@ -285,7 +286,7 @@ const TicketsManager = () => { selectedQueueIds={selectedQueueIds} updateCount={(val) => setPendingCount(val)} style={applyPanelStyle("pending")} - /> + /> diff --git a/frontend/src/pages/Dashboard/Title.js b/frontend/src/pages/Dashboard/Title.js index 8fa5dad..9dbb8b8 100644 --- a/frontend/src/pages/Dashboard/Title.js +++ b/frontend/src/pages/Dashboard/Title.js @@ -1,10 +1,10 @@ import React from "react"; import Typography from "@material-ui/core/Typography"; -const Title = props => { +const Title = ({children}) => { return ( - {props.children} + {children} ); }; diff --git a/frontend/src/pages/Dashboard/index.js b/frontend/src/pages/Dashboard/index.js index 7ca5e15..5c56b77 100644 --- a/frontend/src/pages/Dashboard/index.js +++ b/frontend/src/pages/Dashboard/index.js @@ -1,134 +1,460 @@ -import React, { useContext } from "react" +import React, { useContext, useReducer, useEffect, useState } from "react"; -import Paper from "@material-ui/core/Paper" -import Container from "@material-ui/core/Container" -import Grid from "@material-ui/core/Grid" -import { makeStyles } from "@material-ui/core/styles" +import Paper from "@material-ui/core/Paper"; +import Container from "@material-ui/core/Container"; +import Grid from "@material-ui/core/Grid"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; +import Card from "@mui/material/Card"; +import CardHeader from "@mui/material/CardHeader"; +import CardContent from "@mui/material/CardContent"; +import CardActions from "@mui/material/CardActions"; +import Avatar from "@mui/material/Avatar"; +import Tooltip from "@mui/material/Tooltip"; +import Zoom from "@mui/material/Zoom"; +import IconButton from "@mui/material/IconButton"; +import Info from "@material-ui/icons/Info"; +import Box from "@mui/material/Box"; +import InputLabel from "@mui/material/InputLabel"; +import MenuItem from "@mui/material/MenuItem"; +import FormControl from "@mui/material/FormControl"; +import Select from "@mui/material/Select"; -import useTickets from "../../hooks/useTickets" +import useTickets from "../../hooks/useTickets"; import { AuthContext } from "../../context/Auth/AuthContext"; import { i18n } from "../../translate/i18n"; -import Chart from "./Chart" +import Chart from "./Chart"; + +import openSocket from "socket.io-client"; + +import api from "../../services/api"; import { Can } from "../../components/Can"; -const useStyles = makeStyles(theme => ({ - container: { - paddingTop: theme.spacing(4), - paddingBottom: theme.spacing(4), - }, - fixedHeightPaper: { - padding: theme.spacing(2), - display: "flex", - overflow: "auto", - flexDirection: "column", - height: 240, - }, - customFixedHeightPaper: { - padding: theme.spacing(2), - display: "flex", - overflow: "auto", - flexDirection: "column", - height: 120, - }, - customFixedHeightPaperLg: { - padding: theme.spacing(2), - display: "flex", - overflow: "auto", - flexDirection: "column", - height: "100%", - }, -})) +import { Button } from "@material-ui/core"; + +const useStyles = makeStyles((theme) => ({ + container: { + paddingTop: theme.spacing(4), + paddingBottom: theme.spacing(4), + }, + fixedHeightPaper: { + padding: theme.spacing(2), + display: "flex", + overflow: "auto", + flexDirection: "column", + height: 240, + }, + customFixedHeightPaper: { + padding: theme.spacing(2), + display: "flex", + overflow: "auto", + flexDirection: "column", + height: 120, + }, + customFixedHeightPaperLg: { + padding: theme.spacing(2), + display: "flex", + overflow: "auto", + flexDirection: "column", + height: "100%", + }, + cardPaperFix: { + textTransform: "capitalize", + padding: theme.spacing(2), + paddingBottom: theme.spacing(4), + height: "500px", + overflowY: "scroll", + }, + cardStyleFix: { + display: "flex", + flexDirection: "row", + justifyContent: "left", + alignItems: "center", + gap: "32px", + }, + logginBtn: { + position: "absolute", + bottom: "21px", + right: "21px", + fontSize: "12px", + }, +})); + +const reducer = (state, action) => { + if (action.type === "DELETE_USER_STATUS") { + const userId = action.payload; + + const userIndex = state.findIndex((u) => `${u.id}` === `${userId}`); + + if (userIndex !== -1) { + state.splice(userIndex, 1); + } + + return [...state]; + } + + if (action.type === "LOAD_QUERY") { + const queries = action.payload; + const newQueries = []; + + queries.forEach((query) => { + const queryIndex = state.findIndex((q) => q.id === query.id); + + if (queryIndex !== -1) { + state[queryIndex] = query; + } else { + newQueries.push(query); + } + }); + + return [...state, ...newQueries]; + } + + if (action.type === "UPDATE_STATUS_ONLINE") { + let onlineUser = action.payload; + let index = -1; + + let onlySumOpenClosed = false; + + if (onlineUser.sumOpen || onlineUser.sumClosed) { + index = state.findIndex( + (e) => + (onlineUser.sumOpen && e.id === onlineUser.sumOpen.userId) || + (onlineUser.sumClosed && e.id === onlineUser.sumClosed.userId) + ); + + onlySumOpenClosed = true; + } else { + index = state.findIndex((e) => `${e.id}` === `${onlineUser.userId}`); + } + + if (index !== -1) { + if (!onlySumOpenClosed) { + if (!("statusOnline" in state[index])) { + state[index].statusOnline = onlineUser; + } else if ("statusOnline" in state[index]) { + state[index].statusOnline["status"] = onlineUser.status; + } + } + + if ("onlineTime" in onlineUser) { + if ("sumOnlineTime" in state[index]) { + state[index].sumOnlineTime["sum"] = onlineUser.onlineTime.split(" ")[1]; + } else if (!("sumOnlineTime" in state[index])) { + state[index].sumOnlineTime = { + userId: onlineUser.userId, + sum: onlineUser.onlineTime.split(" ")[1], + }; + } + } + + if (onlineUser.sumOpen) { + if ("sumOpen" in state[index]) { + state[index].sumOpen["count"] = onlineUser.sumOpen.count; + } else if (!("sumOpen" in state[index])) { + state[index].sumOpen = onlineUser.sumOpen; + } + } + + if (onlineUser.sumClosed) { + if ("sumClosed" in state[index]) { + state[index].sumClosed["count"] = onlineUser.sumClosed.count; + } else if (!("sumClosed" in state[index])) { + state[index].sumClosed = onlineUser.sumClosed; + } + } + } + return [...state]; + } + + if (action.type === "RESET") { + return []; + } +}; const Dashboard = () => { - const classes = useStyles() + const classes = useStyles(); + const [usersOnlineInfo, dispatch] = useReducer(reducer, []); + const [filterStatus, setFilterStatus] = useState(null); + const { user } = useContext(AuthContext); + var userQueueIds = []; - const { user } = useContext(AuthContext); - var userQueueIds = []; + if (user.queues && user.queues.length > 0) { + userQueueIds = user.queues.map((q) => q.id); + } - if (user.queues && user.queues.length > 0) { - userQueueIds = user.queues.map(q => q.id); - } + const GetTickets = (status, showAll, withUnreadMessages, unlimited) => { + const { tickets } = useTickets({ + status: status, + showAll: showAll, + withUnreadMessages: withUnreadMessages, + queueIds: JSON.stringify(userQueueIds), + unlimited: unlimited, + }); + return tickets.length; + }; - const GetTickets = (status, showAll, withUnreadMessages, unlimited) => { + useEffect(() => { + dispatch({ type: "RESET" }); + }, []); - const { tickets } = useTickets({ - status: status, - showAll: showAll, - withUnreadMessages: withUnreadMessages, - queueIds: JSON.stringify(userQueueIds), - unlimited: unlimited - }); - return tickets.length; - } + const handleLogouOnlineUser = async (userId) => { + try { + await api.get(`/users/logout/${userId}`); + //toast.success(("Desloged!")); + //handleDeleteRows(scheduleId) + } catch (err) { + // toastError(err); + } + }; - return ( + useEffect(() => { + //setLoading(true); - ( -
- - - - - - {i18n.t("dashboard.messages.inAttendance.title")} - - - - {GetTickets("open", "true", "false", "true")} - - - - - - - - {i18n.t("dashboard.messages.waiting.title")} - - - - {GetTickets("pending", "true", "false", "true")} - - - - - - - - {i18n.t("dashboard.messages.closed.title")} - - - - {GetTickets("closed", "true", "false", "true")} - - - - - - - - - - - -
- )} - /> - - + const delayDebounceFn = setTimeout(() => { + // setLoading(true); + const fetchQueries = async () => { + try { + let date = new Date().toLocaleDateString("pt-BR").split("/"); + let dateToday = `${date[2]}-${date[1]}-${date[0]}`; + const dataQuery = await api.get("/reports/user/services", { + params: { userId: null, startDate: dateToday, endDate: dateToday }, + }); + dispatch({ type: "RESET" }); + dispatch({ type: "LOAD_QUERY", payload: dataQuery.data }); + //console.log() + } catch (err) { + console.log(err); + } + }; + fetchQueries(); + }, 500); + return () => clearTimeout(delayDebounceFn); + }, []); - /**/ - ) -} + useEffect(() => { + const socket = openSocket(process.env.REACT_APP_BACKEND_URL); -export default Dashboard + socket.on("onlineStatus", (data) => { + if (data.action === "logout" || data.action === "update") { + dispatch({ type: "UPDATE_STATUS_ONLINE", payload: data.userOnlineTime }); + } else if (data.action === "delete") { + dispatch({ type: "DELETE_USER_STATUS", payload: data.userOnlineTime }); + } + }); + + socket.on("user", (data) => { + if (data.action === "delete") { + // console.log(' entrou no delete user: ', data) + dispatch({ type: "DELETE_USER", payload: +data.userId }); + } + }); + + return () => { + socket.disconnect(); + }; + }, []); + + const handleFilterChange = (event) => { + setFilterStatus(event.target.value); + }; + + return ( + ( +
+ + + + + + {i18n.t("dashboard.messages.inAttendance.title")} + + + + {GetTickets("open", "true", "false", "true")} + + + + + + + + {i18n.t("dashboard.messages.waiting.title")} + + + + {GetTickets("pending", "true", "false", "true")} + + + + + + + + {i18n.t("dashboard.messages.closed.title")} + + + + {GetTickets("closed", "true", "false", "true")} + + + + + + + + + + + + Usuários + + + + + + + + + + + Status + + + + + + + + {usersOnlineInfo && + usersOnlineInfo + .filter((e) => { + if (filterStatus === null) return e; + if (filterStatus === "not") return !e.statusOnline; + return e.statusOnline && e.statusOnline.status === filterStatus; + }) + .map((user, index) => ( + + + + {user.name[0].toUpperCase()} + + } + title={ + + {user.name} + + } + /> + + + + Em atendimento: + + {user.sumOpen && user.sumOpen.count ? user.sumOpen.count : 0} + + + + + Finalizado: + + {user.sumClosed && user.sumClosed.count ? user.sumClosed.count : 0} + + + + + Tempo online: + + {user.sumOnlineTime && user.sumOnlineTime.sum + ? user.sumOnlineTime.sum + : "Não entrou Hoje"} + + + + + {user.statusOnline && + user.statusOnline.status === "online" && + user.statusOnline && ( + + )} + + + + ))} + + + + + + + + + + + + +
+ )} + /> + + /**/ + ); +}; + +export default Dashboard; From a5ac5373732809524d6bf777caf01c32aeb0fc8a Mon Sep 17 00:00:00 2001 From: Renato Di Giacomo Date: Tue, 2 Aug 2022 18:07:19 -0300 Subject: [PATCH 03/10] New concept dashboard. users card modify and create a new camp grid to online offline --- frontend/src/pages/Dashboard/index.js | 118 ++++++++++++++++++++++---- 1 file changed, 101 insertions(+), 17 deletions(-) diff --git a/frontend/src/pages/Dashboard/index.js b/frontend/src/pages/Dashboard/index.js index 5c56b77..ffb32a1 100644 --- a/frontend/src/pages/Dashboard/index.js +++ b/frontend/src/pages/Dashboard/index.js @@ -13,12 +13,17 @@ import Avatar from "@mui/material/Avatar"; import Tooltip from "@mui/material/Tooltip"; import Zoom from "@mui/material/Zoom"; import IconButton from "@mui/material/IconButton"; -import Info from "@material-ui/icons/Info"; import Box from "@mui/material/Box"; import InputLabel from "@mui/material/InputLabel"; import MenuItem from "@mui/material/MenuItem"; import FormControl from "@mui/material/FormControl"; import Select from "@mui/material/Select"; +import TextField from "@mui/material/TextField"; +import Info from "@material-ui/icons/Info"; +import CancelIcon from "@material-ui/icons/Cancel"; +import CheckCircleIcon from "@material-ui/icons/CheckCircle"; +import ErrorIcon from "@material-ui/icons/Error"; +import RemoveCircleIcon from "@material-ui/icons/RemoveCircle"; import useTickets from "../../hooks/useTickets"; @@ -35,6 +40,8 @@ import api from "../../services/api"; import { Can } from "../../components/Can"; import { Button } from "@material-ui/core"; +import { id } from "date-fns/locale"; + const useStyles = makeStyles((theme) => ({ container: { @@ -179,6 +186,7 @@ const reducer = (state, action) => { const Dashboard = () => { const classes = useStyles(); const [usersOnlineInfo, dispatch] = useReducer(reducer, []); + const [search, setSearch] = useState(""); const [filterStatus, setFilterStatus] = useState(null); const { user } = useContext(AuthContext); var userQueueIds = []; @@ -265,6 +273,9 @@ const Dashboard = () => { const handleFilterChange = (event) => { setFilterStatus(event.target.value); }; + const handlesearch = (event) => { + setSearch(event.target.value.toLowerCase()); + }; return ( { + + + + + + Total de Agentes + + + + {usersOnlineInfo.length} + + + + + + + + Online + + + + { + usersOnlineInfo.filter( + (status) => status.statusOnline && status.statusOnline.status === "online" + ).length + } + + + + + + + + Offline + + + + { + usersOnlineInfo.filter( + (status) => + status.statusOnline && + (status.statusOnline.status === "offline" || status.statusOnline) + ).length + } + + + + + + - - + + { - - - - Status + + + + + Status - Todos - Online - Offline - Não entrou - - - - + + + + + - - {usersOnlineInfo && - usersOnlineInfo - .filter((e) => { - if (filterStatus === null) return e; - if (filterStatus === "not") return !e.statusOnline; - return e.statusOnline && e.statusOnline.status === filterStatus; - }) - .filter((e) => { - return e.name.toLowerCase().includes(search); - }) - .map((user, index) => ( - - - - {user.statusOnline ? ( - user.statusOnline.status === "online" ? ( - - ) : user.statusOnline.status === "offline" ? ( - - ) : ( - - ) - ) : ( - - )} - - } - title={ - - {user.name} - - } - /> - - - - Em atendimento: - - {user.sumOpen && user.sumOpen.count ? user.sumOpen.count : 0} - - - - - Finalizado: - - {user.sumClosed && user.sumClosed.count ? user.sumClosed.count : 0} - - - - - Tempo online: - - {user.sumOnlineTime && user.sumOnlineTime.sum - ? user.sumOnlineTime.sum - : "Não entrou Hoje"} - - - - - {user.statusOnline && - user.statusOnline.status === "online" && - user.statusOnline && ( - - )} - - - - ))} + + + + {i18n.t("dashboard.messages.inAttendance.title")} + + + + {GetTickets("open", "true", "false", "true")} + + + + + + + + {i18n.t("dashboard.messages.waiting.title")} + + + + {GetTickets("pending", "true", "false", "true")} + + + + + + + + {i18n.t("dashboard.messages.closed.title")} + + + + {GetTickets("closed", "true", "false", "true")} + + + + + + + + + - - - - - - - + + + + Usuários + + + + + + - - -
+ + + + + Total de Agentes + + + + {usersOnlineInfo.length} + + + + + + + + Online + + + + { + usersOnlineInfo.filter( + (status) => + status.statusOnline && status.statusOnline.status === "online" + ).length + } + + + + + + + + Offline + + + + { + usersOnlineInfo.filter( + (status) => + !status.statusOnline || status.statusOnline.status === "offline" + ).length + } + + + + + + + + + + Lista de Usuários + + + + + + + Status + + + + + + + + {usersOnlineInfo && + usersOnlineInfo + .filter((e) => { + if (filterStatus === null) return e; + if (filterStatus === "not") return !e.statusOnline; + return e.statusOnline && e.statusOnline.status === filterStatus; + }) + .filter((e) => { + return e.name.toLowerCase().includes(search); + }) + .map((user, index) => ( + + + + {user.statusOnline ? ( + user.statusOnline.status === "online" ? ( + + ) : user.statusOnline.status === "offline" ? ( + + ) : ( + + ) + ) : ( + + )} + + } + title={ + + {user.name} + + } + /> + + + + Em atendimento: + + {user.sumOpen && user.sumOpen.count ? user.sumOpen.count : 0} + + + + + Finalizado: + + {user.sumClosed && user.sumClosed.count + ? user.sumClosed.count + : 0} + + + + + Tempo online: + + {user.sumOnlineTime && user.sumOnlineTime.sum + ? user.sumOnlineTime.sum + : "Não entrou Hoje"} + + + + + {user.statusOnline && + user.statusOnline.status === "online" && + user.statusOnline && ( + + )} + + + + ))} + + + + + + + )} /> From f2724330192f3ce9d2dcc0ab87a08ca0e5a8c80f Mon Sep 17 00:00:00 2001 From: Renato Di Giacomo Date: Wed, 3 Aug 2022 14:11:40 -0300 Subject: [PATCH 06/10] update user list --- frontend/src/pages/Dashboard/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/pages/Dashboard/index.js b/frontend/src/pages/Dashboard/index.js index e84af02..6f9c9cf 100644 --- a/frontend/src/pages/Dashboard/index.js +++ b/frontend/src/pages/Dashboard/index.js @@ -69,6 +69,7 @@ const useStyles = makeStyles((theme) => ({ height: "100%", }, containerPaperFix: { + width: "100%", textTransform: "capitalize", padding: theme.spacing(2), paddingBottom: theme.spacing(4), @@ -366,7 +367,7 @@ const Dashboard = () => { - + Date: Wed, 3 Aug 2022 14:33:08 -0300 Subject: [PATCH 07/10] update dashboard created a sort by online status --- frontend/src/pages/Dashboard/index.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/frontend/src/pages/Dashboard/index.js b/frontend/src/pages/Dashboard/index.js index 6f9c9cf..b931f5e 100644 --- a/frontend/src/pages/Dashboard/index.js +++ b/frontend/src/pages/Dashboard/index.js @@ -497,7 +497,15 @@ const Dashboard = () => { }) .filter((e) => { return e.name.toLowerCase().includes(search); - }) + }).sort((a) => { + if (a.statusOnline) { + if (a.statusOnline.status === "online") { + return -1; + } + return 0; + } + return 0; + }) .map((user, index) => ( Date: Thu, 4 Aug 2022 16:23:21 -0300 Subject: [PATCH 08/10] Card to List create a table component request by Andre In idea was create a model where change to card under 992 width. --- .../src/components/DashboardUser/CardUser.jsx | 193 +++++++++++++++ .../components/DashboardUser/TableUser.jsx | 167 +++++++++++++ frontend/src/pages/Dashboard/index.js | 225 ++++-------------- 3 files changed, 402 insertions(+), 183 deletions(-) create mode 100644 frontend/src/components/DashboardUser/CardUser.jsx create mode 100644 frontend/src/components/DashboardUser/TableUser.jsx diff --git a/frontend/src/components/DashboardUser/CardUser.jsx b/frontend/src/components/DashboardUser/CardUser.jsx new file mode 100644 index 0000000..eea89d1 --- /dev/null +++ b/frontend/src/components/DashboardUser/CardUser.jsx @@ -0,0 +1,193 @@ +import React from "react"; + +import Paper from "@material-ui/core/Paper"; +import Grid from "@material-ui/core/Grid"; +import Typography from "@material-ui/core/Typography"; + +import Avatar from "@mui/material/Avatar"; +import Card from "@mui/material/Card"; +import CardHeader from "@mui/material/CardHeader"; +import CardContent from "@mui/material/CardContent"; +import CardActions from "@mui/material/CardActions"; + +import { Button } from "@material-ui/core"; +import Box from "@mui/material/Box"; +import InputLabel from "@mui/material/InputLabel"; +import MenuItem from "@mui/material/MenuItem"; +import FormControl from "@mui/material/FormControl"; +import Select from "@mui/material/Select"; +import TextField from "@mui/material/TextField"; + +import CancelIcon from "@material-ui/icons/Cancel"; +import CheckCircleIcon from "@material-ui/icons/CheckCircle"; +import ErrorIcon from "@material-ui/icons/Error"; +import RemoveCircleIcon from "@material-ui/icons/RemoveCircle"; + +const CardUser = ({ classes, usersOnlineInfo, logout }) => { + const [search, setSearch] = React.useState(""); + + const [filterStatus, setFilterStatus] = React.useState(null); + + const handleFilterChange = (event) => { + setFilterStatus(event.target.value); + }; + const handlesearch = (event) => { + setSearch(event.target.value.toLowerCase()); + }; + + return ( + + + + + + Lista de Usuários + + + + + + + Status + + + + + + + + {usersOnlineInfo && + usersOnlineInfo + .filter((e) => { + if (filterStatus === null) return e; + if (filterStatus === "not") return !e.statusOnline; + return e.statusOnline && e.statusOnline.status === filterStatus; + }) + .filter((e) => { + return e.name.toLowerCase().includes(search); + }) + .sort((a) => { + if (a.statusOnline) { + if (a.statusOnline.status === "online") { + return -1; + } + return 0; + } + return 0; + }) + .map((user, index) => ( + + + + {user.statusOnline ? ( + user.statusOnline.status === "online" ? ( + + ) : user.statusOnline.status === "offline" ? ( + + ) : ( + + ) + ) : ( + + )} + + } + title={ + + {user.name} + + } + /> + + + + Em atendimento: + + {user.sumOpen && user.sumOpen.count ? user.sumOpen.count : 0} + + + + + Finalizado: + + {user.sumClosed && user.sumClosed.count ? user.sumClosed.count : 0} + + + + + Tempo online: + + {user.sumOnlineTime && user.sumOnlineTime.sum + ? user.sumOnlineTime.sum + : "Não entrou Hoje"} + + + + + {user.statusOnline && + user.statusOnline.status === "online" && + user.statusOnline && ( + + )} + + + + ))} + + + + ); +}; + +export default CardUser; diff --git a/frontend/src/components/DashboardUser/TableUser.jsx b/frontend/src/components/DashboardUser/TableUser.jsx new file mode 100644 index 0000000..3229925 --- /dev/null +++ b/frontend/src/components/DashboardUser/TableUser.jsx @@ -0,0 +1,167 @@ +import React from "react"; + +import Select from "@mui/material/Select"; +import TextField from "@mui/material/TextField"; +import Typography from "@material-ui/core/Typography"; +import Grid from "@material-ui/core/Grid"; + +import Table from "@material-ui/core/Table"; +import TableBody from "@material-ui/core/TableBody"; +import TableCell from "@material-ui/core/TableCell"; +import TableContainer from "@material-ui/core/TableContainer"; +import TableHead from "@material-ui/core/TableHead"; +import TableRow from "@material-ui/core/TableRow"; +import Paper from "@material-ui/core/Paper"; +import Box from "@mui/material/Box"; +import InputLabel from "@mui/material/InputLabel"; +import MenuItem from "@mui/material/MenuItem"; +import FormControl from "@mui/material/FormControl"; + +import CancelIcon from "@material-ui/icons/Cancel"; +import CheckCircleIcon from "@material-ui/icons/CheckCircle"; +import ErrorIcon from "@material-ui/icons/Error"; +import RemoveCircleIcon from "@material-ui/icons/RemoveCircle"; +import PowerSettingsNewIcon from "@material-ui/icons/PowerSettingsNew"; + +const TableUser = ({ classes, usersOnlineInfo, logout }) => { + const [search, setSearch] = React.useState(""); + const [filterStatus, setFilterStatus] = React.useState(null); + + const handleFilterChange = (event) => { + setFilterStatus(event.target.value); + }; + const handlesearch = (event) => { + setSearch(event.target.value.toLowerCase()); + }; + + return ( + + + + + + Lista de Usuários + + + + + + + Status + + + + + + + + + + + + Status + Nome + Em Atendimento + Finalizado(s) + Tempo Online + Ações + + + + + {usersOnlineInfo && + usersOnlineInfo + .filter((e) => { + if (filterStatus === null) return e; + if (filterStatus === "not") return !e.statusOnline; + return e.statusOnline && e.statusOnline.status === filterStatus; + }) + .filter((e) => { + return e.name.toLowerCase().includes(search); + }) + .sort((a) => { + if (a.statusOnline) { + if (a.statusOnline.status === "online") { + return -1; + } + return 0; + } + return 0; + }) + .map((user, index) => ( + + + {user.statusOnline ? ( + user.statusOnline.status === "online" ? ( + + ) : user.statusOnline.status === "offline" ? ( + + ) : ( + + ) + ) : ( + + )} + + {user.name} + + + {user.sumOpen ? user.sumOpen.count : "0"} + + + + + {user.sumClosed ? user.sumClosed.count : "0"} + + + + {user.sumOnlineTime ? user.sumOnlineTime.sum : "Não entrou"} + + + {user.statusOnline && user.statusOnline.status === "online" ? ( + { + logout(user.id); + }} + /> + ) : ( + + )} + + + ))} + +
+ + + + + ); +}; + +export default TableUser; diff --git a/frontend/src/pages/Dashboard/index.js b/frontend/src/pages/Dashboard/index.js index b931f5e..f13183e 100644 --- a/frontend/src/pages/Dashboard/index.js +++ b/frontend/src/pages/Dashboard/index.js @@ -5,25 +5,10 @@ import Container from "@material-ui/core/Container"; import Grid from "@material-ui/core/Grid"; import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; -import Card from "@mui/material/Card"; -import CardHeader from "@mui/material/CardHeader"; -import CardContent from "@mui/material/CardContent"; -import CardActions from "@mui/material/CardActions"; -import Avatar from "@mui/material/Avatar"; import Tooltip from "@mui/material/Tooltip"; import Zoom from "@mui/material/Zoom"; import IconButton from "@mui/material/IconButton"; -import Box from "@mui/material/Box"; -import InputLabel from "@mui/material/InputLabel"; -import MenuItem from "@mui/material/MenuItem"; -import FormControl from "@mui/material/FormControl"; -import Select from "@mui/material/Select"; -import TextField from "@mui/material/TextField"; import Info from "@material-ui/icons/Info"; -import CancelIcon from "@material-ui/icons/Cancel"; -import CheckCircleIcon from "@material-ui/icons/CheckCircle"; -import ErrorIcon from "@material-ui/icons/Error"; -import RemoveCircleIcon from "@material-ui/icons/RemoveCircle"; import useTickets from "../../hooks/useTickets"; @@ -38,9 +23,8 @@ import openSocket from "socket.io-client"; import api from "../../services/api"; import { Can } from "../../components/Can"; - -import { Button } from "@material-ui/core"; -import { id } from "date-fns/locale"; +import CardUser from "../../components/DashboardUser/CardUser"; +import TableUser from "../../components/DashboardUser/TableUser"; const useStyles = makeStyles((theme) => ({ container: { @@ -78,10 +62,10 @@ const useStyles = makeStyles((theme) => ({ }, cardPaperFix: { textTransform: "capitalize", - padding: theme.spacing(2), - paddingBottom: theme.spacing(4), - height: "500px", - overflowY: "scroll", + paddingLeft: theme.spacing(4), + paddingRight: theme.spacing(4), + height: window.innerWidth <= 992 ? "500px" : "auto", + overflowY: "hidden", }, cardStyleFix: { display: "flex", @@ -96,6 +80,29 @@ const useStyles = makeStyles((theme) => ({ right: "21px", fontSize: "12px", }, + tableRowHead: { + backgroundColor: "lightgrey", + }, + tableRowBody: { + textAlign: "center", + " &:nth-child(even)": { + backgroundColor: "#f7f7f7", + }, + }, + tableCounterOpen: { + color: "white", + backgroundColor: "green", + width: "25px", + textAlign: "center", + borderRadius: "5px", + }, + tableCounterClosed: { + color: "white", + backgroundColor: "red", + width: "25px", + textAlign: "center", + borderRadius: "5px", + }, })); const reducer = (state, action) => { @@ -193,8 +200,6 @@ const reducer = (state, action) => { const Dashboard = () => { const classes = useStyles(); const [usersOnlineInfo, dispatch] = useReducer(reducer, []); - const [search, setSearch] = useState(""); - const [filterStatus, setFilterStatus] = useState(null); const { user } = useContext(AuthContext); var userQueueIds = []; @@ -277,13 +282,6 @@ const Dashboard = () => { }; }, []); - const handleFilterChange = (event) => { - setFilterStatus(event.target.value); - }; - const handlesearch = (event) => { - setSearch(event.target.value.toLowerCase()); - }; - return ( { - - - - - - Lista de Usuários - - - - - - - Status - - - - - - - - {usersOnlineInfo && - usersOnlineInfo - .filter((e) => { - if (filterStatus === null) return e; - if (filterStatus === "not") return !e.statusOnline; - return e.statusOnline && e.statusOnline.status === filterStatus; - }) - .filter((e) => { - return e.name.toLowerCase().includes(search); - }).sort((a) => { - if (a.statusOnline) { - if (a.statusOnline.status === "online") { - return -1; - } - return 0; - } - return 0; - }) - .map((user, index) => ( - - - - {user.statusOnline ? ( - user.statusOnline.status === "online" ? ( - - ) : user.statusOnline.status === "offline" ? ( - - ) : ( - - ) - ) : ( - - )} - - } - title={ - - {user.name} - - } - /> - - - - Em atendimento: - - {user.sumOpen && user.sumOpen.count ? user.sumOpen.count : 0} - - - - - Finalizado: - - {user.sumClosed && user.sumClosed.count - ? user.sumClosed.count - : 0} - - - - - Tempo online: - - {user.sumOnlineTime && user.sumOnlineTime.sum - ? user.sumOnlineTime.sum - : "Não entrou Hoje"} - - - - - {user.statusOnline && - user.statusOnline.status === "online" && - user.statusOnline && ( - - )} - - - - ))} - - - + {window.innerWidth <= 992 ? ( + + ) : ( + + )} From 16bfcdce1e3d21d3df02a90bd31f149ac6e846a0 Mon Sep 17 00:00:00 2001 From: Renato Di Giacomo Date: Mon, 8 Aug 2022 17:13:02 -0300 Subject: [PATCH 09/10] fixed marge problems --- frontend/src/pages/Dashboard/index.js | 96 --------------------------- 1 file changed, 96 deletions(-) diff --git a/frontend/src/pages/Dashboard/index.js b/frontend/src/pages/Dashboard/index.js index 866be85..b69fa9f 100644 --- a/frontend/src/pages/Dashboard/index.js +++ b/frontend/src/pages/Dashboard/index.js @@ -22,10 +22,6 @@ import openSocket from "socket.io-client"; import api from "../../services/api"; -import openSocket from "socket.io-client"; - -import api from "../../services/api"; - import { Can } from "../../components/Can"; import CardUser from "../../components/DashboardUser/CardUser"; import TableUser from "../../components/DashboardUser/TableUser"; @@ -109,98 +105,6 @@ const useStyles = makeStyles((theme) => ({ }, })); -const reducer = (state, action) => { - if (action.type === "DELETE_USER_STATUS") { - const userId = action.payload; - - const userIndex = state.findIndex((u) => `${u.id}` === `${userId}`); - - if (userIndex !== -1) { - state.splice(userIndex, 1); - } - - return [...state]; - } - - if (action.type === "LOAD_QUERY") { - const queries = action.payload; - const newQueries = []; - - queries.forEach((query) => { - const queryIndex = state.findIndex((q) => q.id === query.id); - - if (queryIndex !== -1) { - state[queryIndex] = query; - } else { - newQueries.push(query); - } - }); - - return [...state, ...newQueries]; - } - - if (action.type === "UPDATE_STATUS_ONLINE") { - let onlineUser = action.payload; - let index = -1; - - let onlySumOpenClosed = false; - - if (onlineUser.sumOpen || onlineUser.sumClosed) { - index = state.findIndex( - (e) => - (onlineUser.sumOpen && e.id === onlineUser.sumOpen.userId) || - (onlineUser.sumClosed && e.id === onlineUser.sumClosed.userId) - ); - - onlySumOpenClosed = true; - } else { - index = state.findIndex((e) => `${e.id}` === `${onlineUser.userId}`); - } - - if (index !== -1) { - if (!onlySumOpenClosed) { - if (!("statusOnline" in state[index])) { - state[index].statusOnline = onlineUser; - } else if ("statusOnline" in state[index]) { - state[index].statusOnline["status"] = onlineUser.status; - } - } - - if ("onlineTime" in onlineUser) { - if ("sumOnlineTime" in state[index]) { - state[index].sumOnlineTime["sum"] = onlineUser.onlineTime.split(" ")[1]; - } else if (!("sumOnlineTime" in state[index])) { - state[index].sumOnlineTime = { - userId: onlineUser.userId, - sum: onlineUser.onlineTime.split(" ")[1], - }; - } - } - - if (onlineUser.sumOpen) { - if ("sumOpen" in state[index]) { - state[index].sumOpen["count"] = onlineUser.sumOpen.count; - } else if (!("sumOpen" in state[index])) { - state[index].sumOpen = onlineUser.sumOpen; - } - } - - if (onlineUser.sumClosed) { - if ("sumClosed" in state[index]) { - state[index].sumClosed["count"] = onlineUser.sumClosed.count; - } else if (!("sumClosed" in state[index])) { - state[index].sumClosed = onlineUser.sumClosed; - } - } - } - return [...state]; - } - - if (action.type === "RESET") { - return []; - } -}; - const reducer = (state, action) => { From 6cec68516ffa5b0664f5481295dcdbe4f586bf08 Mon Sep 17 00:00:00 2001 From: Renato Di Giacomo Date: Mon, 8 Aug 2022 18:06:48 -0300 Subject: [PATCH 10/10] fix some erros --- .../components/DashboardUser/TableUser.jsx | 85 +++++-- frontend/src/pages/Dashboard/index.js | 224 ++++++++---------- 2 files changed, 160 insertions(+), 149 deletions(-) diff --git a/frontend/src/components/DashboardUser/TableUser.jsx b/frontend/src/components/DashboardUser/TableUser.jsx index 3229925..1624748 100644 --- a/frontend/src/components/DashboardUser/TableUser.jsx +++ b/frontend/src/components/DashboardUser/TableUser.jsx @@ -34,6 +34,8 @@ const TableUser = ({ classes, usersOnlineInfo, logout }) => { setSearch(event.target.value.toLowerCase()); }; + console.log(usersOnlineInfo); + return ( @@ -81,10 +83,10 @@ const TableUser = ({ classes, usersOnlineInfo, logout }) => { - Status Nome - Em Atendimento - Finalizado(s) + Em Atendimento/Finalizado(s) + Por Fila abertos + Por Fila Fechados Tempo Online Ações @@ -112,29 +114,68 @@ const TableUser = ({ classes, usersOnlineInfo, logout }) => { }) .map((user, index) => ( - - {user.statusOnline ? ( - user.statusOnline.status === "online" ? ( - - ) : user.statusOnline.status === "offline" ? ( - + + + {user.statusOnline ? ( + user.statusOnline.status === "online" ? ( + + ) : user.statusOnline.status === "offline" ? ( + + ) : ( + + ) ) : ( - - ) - ) : ( - - )} - - {user.name} - - - {user.sumOpen ? user.sumOpen.count : "0"} + + )} + {user.name} + - - {user.sumClosed ? user.sumClosed.count : "0"} - +
+ + {user.sumOpen ? user.sumOpen.count : "0"} + + + {user.sumClosed ? user.sumClosed.count : "0"} + +
+ + + +
+ 0 + 0 + 0 + 0 + 0 +
+ + + +
+ 0 + 0 + 0 + 0 + 0 +
{user.sumOnlineTime ? user.sumOnlineTime.sum : "Não entrou"} diff --git a/frontend/src/pages/Dashboard/index.js b/frontend/src/pages/Dashboard/index.js index b69fa9f..fad4815 100644 --- a/frontend/src/pages/Dashboard/index.js +++ b/frontend/src/pages/Dashboard/index.js @@ -1,4 +1,4 @@ -import React, { useContext, useReducer, useEffect, useState } from "react"; +import React, { useContext, useReducer, useEffect } from "react"; import Paper from "@material-ui/core/Paper"; import Container from "@material-ui/core/Container"; @@ -105,151 +105,121 @@ const useStyles = makeStyles((theme) => ({ }, })); - const reducer = (state, action) => { + if (action.type === "DELETE_USER_STATUS") { + const userId = action.payload; - if (action.type === "DELETE_USER_STATUS") { + const userIndex = state.findIndex((u) => `${u.id}` === `${userId}`); - const userId = action.payload; + if (userIndex !== -1) { + state.splice(userIndex, 1); + } - const userIndex = state.findIndex((u) => `${u.id}` === `${userId}`); + return [...state]; + } - if (userIndex !== -1) { - state.splice(userIndex, 1); - } + if (action.type === "LOAD_QUERY") { + const queries = action.payload; + const newQueries = []; - return [...state]; - } + queries.forEach((query) => { + const queryIndex = state.findIndex((q) => q.id === query.id); + if (queryIndex !== -1) { + state[queryIndex] = query; + } else { + newQueries.push(query); + } + }); + return [...state, ...newQueries]; + } - if (action.type === 'LOAD_QUERY') { + if (action.type === "UPDATE_STATUS_ONLINE") { + let onlineUser = action.payload; + let index = -1; - const queries = action.payload - const newQueries = [] + let onlySumOpenClosed = false; - queries.forEach((query) => { + if (onlineUser.sumOpen || onlineUser.sumClosed) { + index = state.findIndex( + (e) => + (onlineUser.sumOpen && e.id === onlineUser.sumOpen.userId) || + (onlineUser.sumClosed && e.id === onlineUser.sumClosed.userId) + ); - const queryIndex = state.findIndex((q) => q.id === query.id) + onlySumOpenClosed = true; + } else { + index = state.findIndex((e) => `${e.id}` === `${onlineUser.userId}`); + } - if (queryIndex !== -1) { - state[queryIndex] = query - } - else { - newQueries.push(query) - } + if (index !== -1) { + if (!onlySumOpenClosed) { + if (!("statusOnline" in state[index])) { + state[index].statusOnline = onlineUser; + } else if ("statusOnline" in state[index]) { + state[index].statusOnline["status"] = onlineUser.status; + } + } - }) + if ("onlineTime" in onlineUser) { + if ("sumOnlineTime" in state[index]) { + state[index].sumOnlineTime["sum"] = onlineUser.onlineTime.split(" ")[1]; + } else if (!("sumOnlineTime" in state[index])) { + state[index].sumOnlineTime = { + userId: onlineUser.userId, + sum: onlineUser.onlineTime.split(" ")[1], + }; + } + } - return [...state, ...newQueries] - } + if (onlineUser.sumOpen) { + if ("sumOpen" in state[index]) { + // console.log(' >>>>>>>>>>>>>>>>>> sumOpen 1 | state[index].sumOpen["count"]: ', state[index].sumOpen['count'], ' | onlineUser.sumOpen.count: ', onlineUser.sumOpen.count) + state[index].sumOpen["count"] = onlineUser.sumOpen.count; + } else if (!("sumOpen" in state[index])) { + // console.log(' >>>>>>>>>>>>>>>>>> sumOpen 1') + state[index].sumOpen = onlineUser.sumOpen; + } + } - if (action.type === "UPDATE_STATUS_ONLINE") { + if (onlineUser.sumClosed) { + if ("sumClosed" in state[index]) { + // console.log(' >>>>>>>>>>>>>>>>>> sumClosed 1 | state[index].sumClosed["count"]: ', state[index].sumClosed['count'], ' | onlineUser.sumClosed.count: ', onlineUser.sumClosed.count) + state[index].sumClosed["count"] = onlineUser.sumClosed.count; + } else if (!("sumClosed" in state[index])) { + // console.log(' >>>>>>>>>>>>>>>>>> sumOpen 1') + state[index].sumClosed = onlineUser.sumClosed; + } + } - let onlineUser = action.payload - let index = -1 - - let onlySumOpenClosed = false - - if (onlineUser.sumOpen || onlineUser.sumClosed) { - index = state.findIndex((e) => ((onlineUser.sumOpen && e.id === onlineUser.sumOpen.userId) || (onlineUser.sumClosed && e.id === onlineUser.sumClosed.userId))) - - onlySumOpenClosed = true - } - else { - index = state.findIndex((e) => `${e.id}` === `${onlineUser.userId}`) - } - - - if (index !== -1) { - - if (!onlySumOpenClosed) { - - if (!("statusOnline" in state[index])) { - - state[index].statusOnline = onlineUser - - } - else if ("statusOnline" in state[index]) { - - state[index].statusOnline['status'] = onlineUser.status - - } - - } - - - if ("onlineTime" in onlineUser) { - - if ("sumOnlineTime" in state[index]) { - state[index].sumOnlineTime['sum'] = (onlineUser.onlineTime).split(" ")[1] - } - else if (!("sumOnlineTime" in state[index])) { - state[index].sumOnlineTime = { userId: onlineUser.userId, sum: (onlineUser.onlineTime).split(" ")[1] } - } - } - - - if (onlineUser.sumOpen) { - - if ("sumOpen" in state[index]) { - // console.log(' >>>>>>>>>>>>>>>>>> sumOpen 1 | state[index].sumOpen["count"]: ', state[index].sumOpen['count'], ' | onlineUser.sumOpen.count: ', onlineUser.sumOpen.count) - state[index].sumOpen['count'] = onlineUser.sumOpen.count - } else if (!("sumOpen" in state[index])) { - // console.log(' >>>>>>>>>>>>>>>>>> sumOpen 1') - state[index].sumOpen = onlineUser.sumOpen - } - - } - - if (onlineUser.sumClosed) { - - if ("sumClosed" in state[index]) { - // console.log(' >>>>>>>>>>>>>>>>>> sumClosed 1 | state[index].sumClosed["count"]: ', state[index].sumClosed['count'], ' | onlineUser.sumClosed.count: ', onlineUser.sumClosed.count) - state[index].sumClosed['count'] = onlineUser.sumClosed.count - } else if (!("sumClosed" in state[index])) { - // console.log(' >>>>>>>>>>>>>>>>>> sumOpen 1') - state[index].sumClosed = onlineUser.sumClosed - } - - } - - - - if(onlineUser.openClosedInQueue){ - state[index].openClosedInQueue = onlineUser.openClosedInQueue - } - if(onlineUser.openClosedOutQueue){ - state[index].openClosedOutQueue = onlineUser.openClosedOutQueue - } - - - - // if(onlineUser.closedTicketByUserIn){ - // state[index].closedTicketByUserIn = onlineUser.closedTicketByUserIn - // } - // if(onlineUser.closedTicketByUserOut){ - // state[index].closedTicketByUserOut = onlineUser.closedTicketByUserOut - // } - // if(onlineUser.openTicketByUserIn){ - // state[index].openTicketByUserIn = onlineUser.openTicketByUserIn - // } - // if(onlineUser.openTicketByUserOut){ - // state[index].openTicketByUserOut = onlineUser.openTicketByUserOut - // } - - } - return [...state] - - } - - if (action.type === "RESET") { - return []; - } - -} + if (onlineUser.openClosedInQueue) { + state[index].openClosedInQueue = onlineUser.openClosedInQueue; + } + if (onlineUser.openClosedOutQueue) { + state[index].openClosedOutQueue = onlineUser.openClosedOutQueue; + } + // if(onlineUser.closedTicketByUserIn){ + // state[index].closedTicketByUserIn = onlineUser.closedTicketByUserIn + // } + // if(onlineUser.closedTicketByUserOut){ + // state[index].closedTicketByUserOut = onlineUser.closedTicketByUserOut + // } + // if(onlineUser.openTicketByUserIn){ + // state[index].openTicketByUserIn = onlineUser.openTicketByUserIn + // } + // if(onlineUser.openTicketByUserOut){ + // state[index].openTicketByUserOut = onlineUser.openTicketByUserOut + // } + } + return [...state]; + } + if (action.type === "RESET") { + return []; + } +}; const Dashboard = () => { const classes = useStyles();