Add card to every user, with status and count time

added Filter to online, offline and not present
pull/16/head
Renato Di Giacomo 2022-08-01 16:33:24 -03:00
parent b4edc7f99a
commit debffebb1a
3 changed files with 442 additions and 115 deletions

View File

@ -124,7 +124,8 @@ const TicketsManager = () => {
let searchTimeout; let searchTimeout;
const handleSearch = (e) => { const handleSearch = (e) => {
const searchedTerm = e.target.value.toLowerCase(); const searchedTerm = e.target.value.toLowerCase().trim();
console.log(searchedTerm)
clearTimeout(searchTimeout); clearTimeout(searchTimeout);
@ -274,7 +275,7 @@ const TicketsManager = () => {
</Tabs> </Tabs>
<Paper className={classes.ticketsWrapper}> <Paper className={classes.ticketsWrapper}>
<TicketsList <TicketsList
status="open" status={"open"}
showAll={showAllTickets} showAll={showAllTickets}
selectedQueueIds={selectedQueueIds} selectedQueueIds={selectedQueueIds}
updateCount={(val) => setOpenCount(val)} updateCount={(val) => setOpenCount(val)}
@ -285,7 +286,7 @@ const TicketsManager = () => {
selectedQueueIds={selectedQueueIds} selectedQueueIds={selectedQueueIds}
updateCount={(val) => setPendingCount(val)} updateCount={(val) => setPendingCount(val)}
style={applyPanelStyle("pending")} style={applyPanelStyle("pending")}
/> />
</Paper> </Paper>
</TabPanel> </TabPanel>
<TabPanel value={tab} name="closed" className={classes.ticketsWrapper}> <TabPanel value={tab} name="closed" className={classes.ticketsWrapper}>

View File

@ -1,10 +1,10 @@
import React from "react"; import React from "react";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
const Title = props => { const Title = ({children}) => {
return ( return (
<Typography component="h2" variant="h6" color="primary" gutterBottom> <Typography component="h2" variant="h6" color="primary" gutterBottom>
{props.children} {children}
</Typography> </Typography>
); );
}; };

View File

@ -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 Paper from "@material-ui/core/Paper";
import Container from "@material-ui/core/Container" import Container from "@material-ui/core/Container";
import Grid from "@material-ui/core/Grid" import Grid from "@material-ui/core/Grid";
import { makeStyles } from "@material-ui/core/styles" import { makeStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography"; 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 { AuthContext } from "../../context/Auth/AuthContext";
import { i18n } from "../../translate/i18n"; 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"; import { Can } from "../../components/Can";
const useStyles = makeStyles(theme => ({ import { Button } from "@material-ui/core";
container: {
paddingTop: theme.spacing(4), const useStyles = makeStyles((theme) => ({
paddingBottom: theme.spacing(4), container: {
}, paddingTop: theme.spacing(4),
fixedHeightPaper: { paddingBottom: theme.spacing(4),
padding: theme.spacing(2), },
display: "flex", fixedHeightPaper: {
overflow: "auto", padding: theme.spacing(2),
flexDirection: "column", display: "flex",
height: 240, overflow: "auto",
}, flexDirection: "column",
customFixedHeightPaper: { height: 240,
padding: theme.spacing(2), },
display: "flex", customFixedHeightPaper: {
overflow: "auto", padding: theme.spacing(2),
flexDirection: "column", display: "flex",
height: 120, overflow: "auto",
}, flexDirection: "column",
customFixedHeightPaperLg: { height: 120,
padding: theme.spacing(2), },
display: "flex", customFixedHeightPaperLg: {
overflow: "auto", padding: theme.spacing(2),
flexDirection: "column", display: "flex",
height: "100%", 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 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); if (user.queues && user.queues.length > 0) {
var userQueueIds = []; userQueueIds = user.queues.map((q) => q.id);
}
if (user.queues && user.queues.length > 0) { const GetTickets = (status, showAll, withUnreadMessages, unlimited) => {
userQueueIds = user.queues.map(q => q.id); 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({ const handleLogouOnlineUser = async (userId) => {
status: status, try {
showAll: showAll, await api.get(`/users/logout/${userId}`);
withUnreadMessages: withUnreadMessages, //toast.success(("Desloged!"));
queueIds: JSON.stringify(userQueueIds), //handleDeleteRows(scheduleId)
unlimited: unlimited } catch (err) {
}); // toastError(err);
return tickets.length; }
} };
return ( useEffect(() => {
//setLoading(true);
<Can const delayDebounceFn = setTimeout(() => {
role={user.profile} // setLoading(true);
perform="dashboard-view:show" const fetchQueries = async () => {
yes={() => ( try {
<div> let date = new Date().toLocaleDateString("pt-BR").split("/");
<Container maxWidth="lg" className={classes.container}> let dateToday = `${date[2]}-${date[1]}-${date[0]}`;
<Grid container spacing={3}>
<Grid item xs={4}>
<Paper className={classes.customFixedHeightPaper} style={{ overflow: "hidden" }}>
<Typography component="h3" variant="h6" color="primary" paragraph>
{i18n.t("dashboard.messages.inAttendance.title")}
</Typography>
<Grid item>
<Typography component="h1" variant="h4">
{GetTickets("open", "true", "false", "true")}
</Typography>
</Grid>
</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={classes.customFixedHeightPaper} style={{ overflow: "hidden" }}>
<Typography component="h3" variant="h6" color="primary" paragraph>
{i18n.t("dashboard.messages.waiting.title")}
</Typography>
<Grid item>
<Typography component="h1" variant="h4">
{GetTickets("pending", "true", "false", "true")}
</Typography>
</Grid>
</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={classes.customFixedHeightPaper} style={{ overflow: "hidden" }}>
<Typography component="h3" variant="h6" color="primary" paragraph>
{i18n.t("dashboard.messages.closed.title")}
</Typography>
<Grid item>
<Typography component="h1" variant="h4">
{GetTickets("closed", "true", "false", "true")}
</Typography>
</Grid>
</Paper>
</Grid>
<Grid item xs={12}>
<Paper className={classes.fixedHeightPaper}>
<Chart />
</Paper>
</Grid>
</Grid>
</Container>
</div>
)}
/>
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 (
<Can
role={user.profile}
perform="dashboard-view:show"
yes={() => (
<div>
<Container maxWidth="lg" className={classes.container}>
<Grid container spacing={3}>
<Grid item xs={12} sm={6} md={6} lg={4}>
<Paper className={classes.customFixedHeightPaper} style={{ overflow: "hidden" }}>
<Typography component="h3" variant="h6" color="primary" paragraph>
{i18n.t("dashboard.messages.inAttendance.title")}
</Typography>
<Grid item>
<Typography component="h1" variant="h4">
{GetTickets("open", "true", "false", "true")}
</Typography>
</Grid>
</Paper>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={4}>
<Paper className={classes.customFixedHeightPaper} style={{ overflow: "hidden" }}>
<Typography component="h3" variant="h6" color="primary" paragraph>
{i18n.t("dashboard.messages.waiting.title")}
</Typography>
<Grid item>
<Typography component="h1" variant="h4">
{GetTickets("pending", "true", "false", "true")}
</Typography>
</Grid>
</Paper>
</Grid>
<Grid item xs={12} sm={6} md={6} lg={4}>
<Paper className={classes.customFixedHeightPaper} style={{ overflow: "hidden" }}>
<Typography component="h3" variant="h6" color="primary" paragraph>
{i18n.t("dashboard.messages.closed.title")}
</Typography>
<Grid item>
<Typography component="h1" variant="h4">
{GetTickets("closed", "true", "false", "true")}
</Typography>
</Grid>
</Paper>
</Grid>
</Grid>
</Container>
<Container maxWidth="lg" className={classes.container}>
<Paper className={classes.cardPaperFix}>
<Grid container justifyContent="space-between">
<Grid item>
<Typography
component="h3"
variant="h6"
color="primary"
style={{ marginBottom: "16px" }}
>
Usuários
<Tooltip
title={`Os dados informados abaixo é baseado na data: ${new Date().toLocaleDateString()}`}
color="primary"
TransitionComponent={Zoom}
>
<IconButton>
<Info />
</IconButton>
</Tooltip>
</Typography>
</Grid>
<Grid item>
<Box sx={{ minWidth: 120, marginBottom: 2 }}>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Status</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={filterStatus}
label="Status"
onChange={handleFilterChange}
>
<MenuItem value={null}>-Online/Offline-</MenuItem>
<MenuItem value={"online"}>Online</MenuItem>
<MenuItem value={"offline"}>Offline</MenuItem>
<MenuItem value={"not"}>Não entrou</MenuItem>
</Select>
</FormControl>
</Box>
</Grid>
</Grid>
<Grid container spacing={3}>
{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) => (
<Grid
item
xs={12}
sm={6}
md={6}
lg={3}
key={index}
style={{ position: "relative" }}
>
<Card variant="outlined">
<CardHeader
avatar={
<Avatar
sx={
user.statusOnline && user.statusOnline.status === "online"
? { backgroundColor: "green" }
: { backgroundColor: "red" }
}
aria-label="recipe"
>
{user.name[0].toUpperCase()}
</Avatar>
}
title={
<Typography variant="h5" component="div">
{user.name}
</Typography>
}
/>
<CardContent>
<Typography variant="h6" component="h1" color="textPrimary">
Em atendimento:
<Typography component="p" color="textPrimary" paragraph>
{user.sumOpen && user.sumOpen.count ? user.sumOpen.count : 0}
</Typography>
</Typography>
<Typography variant="h6" component="h1" color="textPrimary">
Finalizado:
<Typography component="p" color="textPrimary" paragraph>
{user.sumClosed && user.sumClosed.count ? user.sumClosed.count : 0}
</Typography>
</Typography>
<Typography variant="h6" component="h1" color="textPrimary">
Tempo online:
<Typography component="p" color="textPrimary" paragraph>
{user.sumOnlineTime && user.sumOnlineTime.sum
? user.sumOnlineTime.sum
: "Não entrou Hoje"}
</Typography>
</Typography>
</CardContent>
<CardActions>
{user.statusOnline &&
user.statusOnline.status === "online" &&
user.statusOnline && (
<Button
className={classes.logginBtn}
variant="contained"
color="primary"
onClick={(e) => {
handleLogouOnlineUser(user.id);
}}
>
{"Deslogar"}
</Button>
)}
</CardActions>
</Card>
</Grid>
))}
</Grid>
</Paper>
</Container>
<Container maxWidth="lg" className={classes.container}>
<Grid container className={classes.cardStyleFix}>
<Grid item xs={12}>
<Paper className={classes.fixedHeightPaper}>
<Chart />
</Paper>
</Grid>
</Grid>
</Container>
</div>
)}
/>
/**/
);
};
export default Dashboard;