From 101a638a1e0be7f492adc30e2d9b9724dd64296f Mon Sep 17 00:00:00 2001 From: Renato Di Giacomo Date: Wed, 3 Aug 2022 11:10:08 -0300 Subject: [PATCH 1/4] =?UTF-8?q?Criado=20uma=20sepera=C3=A7=C3=A3o=20por=20?= =?UTF-8?q?contexto=20dos=20dados?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/Dashboard/index.js | 549 ++++++++++++++------------ 1 file changed, 305 insertions(+), 244 deletions(-) diff --git a/frontend/src/pages/Dashboard/index.js b/frontend/src/pages/Dashboard/index.js index 7644f45..e84af02 100644 --- a/frontend/src/pages/Dashboard/index.js +++ b/frontend/src/pages/Dashboard/index.js @@ -68,6 +68,13 @@ const useStyles = makeStyles((theme) => ({ flexDirection: "column", height: "100%", }, + containerPaperFix: { + textTransform: "capitalize", + padding: theme.spacing(2), + paddingBottom: theme.spacing(4), + height: "auto", + overflowY: "hidden", + }, cardPaperFix: { textTransform: "capitalize", padding: theme.spacing(2), @@ -281,257 +288,311 @@ const Dashboard = () => { role={user.profile} perform="dashboard-view:show" yes={() => ( -
- - - - - - {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")} - - - - - - - - - - - - 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 - } - - - - - - - - - - - + + + + + tickets + - 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 && ( - - )} - - - - ))} + + + + {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 2/4] 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 3/4] 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 4/4] 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 ? ( + + ) : ( + + )}