237 lines
9.6 KiB
JavaScript
237 lines
9.6 KiB
JavaScript
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 Tooltip from "@mui/material/Tooltip";
|
|
import Zoom from "@mui/material/Zoom";
|
|
|
|
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 (
|
|
<Grid item xs={12}>
|
|
<Paper className={classes.cardPaperFix} sx={12} variant="outlined">
|
|
<Grid container sx={12} justifyContent="space-between" alignItems="baseline">
|
|
<Grid item sx={4}>
|
|
<Typography
|
|
component="h4"
|
|
variant="h6"
|
|
color="primary"
|
|
style={{ marginBottom: "16px" }}
|
|
>
|
|
Lista de Usuários
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item sx={8} width="100%">
|
|
<Box sx={{ marginBottom: 2, display: "flex", gap: "12px" }}>
|
|
<TextField
|
|
id="outlined-basic"
|
|
label="Usuário"
|
|
variant="standard"
|
|
value={search}
|
|
onChange={handlesearch}
|
|
/>
|
|
<FormControl fullWidth variant="standard">
|
|
<InputLabel id="status">Status</InputLabel>
|
|
<Select
|
|
labelId="status"
|
|
id="status"
|
|
value={filterStatus}
|
|
label="Status"
|
|
onChange={handleFilterChange}
|
|
>
|
|
<MenuItem value={null}>Todos</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} style={{ marginTop: "16px", marginBottom: "16px" }}>
|
|
<TableContainer component={Paper}>
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow className={classes.tableRowHead}>
|
|
<TableCell>Nome</TableCell>
|
|
<TableCell>Em Atendimento/Finalizado(s)</TableCell>
|
|
<TableCell>Por Fila abertos</TableCell>
|
|
<TableCell>Por Fila Fechados</TableCell>
|
|
<TableCell>Tempo Online</TableCell>
|
|
<TableCell>Ações</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
|
|
<TableBody>
|
|
{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) => (
|
|
<TableRow key={index} className={classes.tableRowBody}>
|
|
<TableCell>
|
|
<Typography
|
|
style={{ display: "flex", verticalAlign: "center", gap: "6px" }}
|
|
>
|
|
{user.statusOnline ? (
|
|
user.statusOnline.status === "online" ? (
|
|
<CheckCircleIcon style={{ color: "green" }} />
|
|
) : user.statusOnline.status === "offline" ? (
|
|
<CancelIcon style={{ color: "red" }} />
|
|
) : (
|
|
<ErrorIcon style={{ color: "gold" }} />
|
|
)
|
|
) : (
|
|
<RemoveCircleIcon style={{ color: "black" }} />
|
|
)}
|
|
{user.name}
|
|
</Typography>
|
|
</TableCell>
|
|
|
|
<TableCell>
|
|
<div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
|
|
<Typography className={classes.tableCounterOpen}>
|
|
{user.sumOpen ? user.sumOpen.count : "0"}
|
|
</Typography>
|
|
<Typography className={classes.tableCounterClosed}>
|
|
{user.sumClosed ? user.sumClosed.count : "0"}
|
|
</Typography>
|
|
</div>
|
|
</TableCell>
|
|
|
|
<TableCell>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
alignItems: "center",
|
|
gap: "12px",
|
|
}}
|
|
>
|
|
{!user.openClosedInQueue ? (
|
|
<Typography>Sem fila</Typography>
|
|
) : (
|
|
user.openClosedInQueue.map((queue) => (
|
|
<Typography
|
|
key={queue.queueId}
|
|
className={classes.tableQueues}
|
|
title={queue.name}
|
|
style={{ backgroundColor: queue.color }}
|
|
>
|
|
{queue.countOpen}
|
|
</Typography>
|
|
))
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
|
|
<TableCell>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
alignItems: "center",
|
|
gap: "12px",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
alignItems: "center",
|
|
gap: "12px",
|
|
}}
|
|
>
|
|
{!user.openClosedInQueue ? (
|
|
<Typography>Sem fila</Typography>
|
|
) : (
|
|
user.openClosedInQueue.map((queue) => (
|
|
<Typography
|
|
key={queue.queueId}
|
|
className={classes.tableQueues}
|
|
title={queue.name}
|
|
style={{ backgroundColor: queue.color }}
|
|
>
|
|
{queue.countClosed}
|
|
</Typography>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
{user.sumOnlineTime ? user.sumOnlineTime.sum : "Não entrou"}
|
|
</TableCell>
|
|
<TableCell>
|
|
{user.statusOnline && user.statusOnline.status === "online" ? (
|
|
<PowerSettingsNewIcon
|
|
style={{ color: "red", cursor: "pointer" }}
|
|
onClick={(e) => {
|
|
logout(user.id);
|
|
}}
|
|
/>
|
|
) : (
|
|
<PowerSettingsNewIcon
|
|
style={{ color: "grey", cursor: "not-allowed" }}
|
|
/>
|
|
)}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
</Grid>
|
|
</Paper>
|
|
</Grid>
|
|
);
|
|
};
|
|
|
|
export default TableUser;
|