From b4edc7f99a816bdb4182a9a4889a448955b80b65 Mon Sep 17 00:00:00 2001 From: Renato Di Giacomo Date: Fri, 29 Jul 2022 15:44:08 -0300 Subject: [PATCH 1/2] 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 2/2] 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;