Card to List
create a table component request by Andre In idea was create a model where change to card under 992 width.pull/17/head
Renato Di Giacomo
parent
832694a311
commit
564abdda19
|
|
@ -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 (
|
||||||
|
<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}>
|
||||||
|
{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) => (
|
||||||
|
<Grid
|
||||||
|
item
|
||||||
|
xs={12}
|
||||||
|
sm={6}
|
||||||
|
md={6}
|
||||||
|
lg={3}
|
||||||
|
key={index}
|
||||||
|
style={{ position: "relative" }}
|
||||||
|
>
|
||||||
|
<Card variant="outlined">
|
||||||
|
<CardHeader
|
||||||
|
avatar={
|
||||||
|
<Avatar
|
||||||
|
style={{
|
||||||
|
backgroundColor: user.statusOnline
|
||||||
|
? user.statusOnline.status === "online"
|
||||||
|
? "green"
|
||||||
|
: user.statusOnline.status === "offline"
|
||||||
|
? "red"
|
||||||
|
: "black"
|
||||||
|
: "grey",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{user.statusOnline ? (
|
||||||
|
user.statusOnline.status === "online" ? (
|
||||||
|
<CheckCircleIcon style={{ color: "white" }} />
|
||||||
|
) : user.statusOnline.status === "offline" ? (
|
||||||
|
<CancelIcon style={{ color: "white" }} />
|
||||||
|
) : (
|
||||||
|
<ErrorIcon style={{ color: "yellow" }} />
|
||||||
|
)
|
||||||
|
) : (
|
||||||
|
<RemoveCircleIcon style={{ color: "black" }} />
|
||||||
|
)}
|
||||||
|
</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) => {
|
||||||
|
logout(user.id);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{"Deslogar"}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</CardActions>
|
||||||
|
</Card>
|
||||||
|
</Grid>
|
||||||
|
))}
|
||||||
|
</Grid>
|
||||||
|
</Paper>
|
||||||
|
</Grid>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CardUser;
|
||||||
|
|
@ -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 (
|
||||||
|
<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>Status</TableCell>
|
||||||
|
<TableCell>Nome</TableCell>
|
||||||
|
<TableCell>Em Atendimento</TableCell>
|
||||||
|
<TableCell>Finalizado(s)</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 title={user.statusOnline && user.statusOnline.status}>
|
||||||
|
{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" }} />
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>{user.name}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Typography className={classes.tableCounterOpen}>
|
||||||
|
{user.sumOpen ? user.sumOpen.count : "0"}
|
||||||
|
</Typography>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Typography className={classes.tableCounterClosed}>
|
||||||
|
{user.sumClosed ? user.sumClosed.count : "0"}
|
||||||
|
</Typography>
|
||||||
|
</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;
|
||||||
|
|
@ -5,25 +5,10 @@ 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 Tooltip from "@mui/material/Tooltip";
|
||||||
import Zoom from "@mui/material/Zoom";
|
import Zoom from "@mui/material/Zoom";
|
||||||
import IconButton from "@mui/material/IconButton";
|
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 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";
|
import useTickets from "../../hooks/useTickets";
|
||||||
|
|
||||||
|
|
@ -38,9 +23,8 @@ import openSocket from "socket.io-client";
|
||||||
import api from "../../services/api";
|
import api from "../../services/api";
|
||||||
|
|
||||||
import { Can } from "../../components/Can";
|
import { Can } from "../../components/Can";
|
||||||
|
import CardUser from "../../components/DashboardUser/CardUser";
|
||||||
import { Button } from "@material-ui/core";
|
import TableUser from "../../components/DashboardUser/TableUser";
|
||||||
import { id } from "date-fns/locale";
|
|
||||||
|
|
||||||
const useStyles = makeStyles((theme) => ({
|
const useStyles = makeStyles((theme) => ({
|
||||||
container: {
|
container: {
|
||||||
|
|
@ -78,10 +62,10 @@ const useStyles = makeStyles((theme) => ({
|
||||||
},
|
},
|
||||||
cardPaperFix: {
|
cardPaperFix: {
|
||||||
textTransform: "capitalize",
|
textTransform: "capitalize",
|
||||||
padding: theme.spacing(2),
|
paddingLeft: theme.spacing(4),
|
||||||
paddingBottom: theme.spacing(4),
|
paddingRight: theme.spacing(4),
|
||||||
height: "500px",
|
height: window.innerWidth <= 992 ? "500px" : "auto",
|
||||||
overflowY: "scroll",
|
overflowY: "hidden",
|
||||||
},
|
},
|
||||||
cardStyleFix: {
|
cardStyleFix: {
|
||||||
display: "flex",
|
display: "flex",
|
||||||
|
|
@ -96,6 +80,29 @@ const useStyles = makeStyles((theme) => ({
|
||||||
right: "21px",
|
right: "21px",
|
||||||
fontSize: "12px",
|
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) => {
|
const reducer = (state, action) => {
|
||||||
|
|
@ -193,8 +200,6 @@ const reducer = (state, action) => {
|
||||||
const Dashboard = () => {
|
const Dashboard = () => {
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
const [usersOnlineInfo, dispatch] = useReducer(reducer, []);
|
const [usersOnlineInfo, dispatch] = useReducer(reducer, []);
|
||||||
const [search, setSearch] = useState("");
|
|
||||||
const [filterStatus, setFilterStatus] = useState(null);
|
|
||||||
const { user } = useContext(AuthContext);
|
const { user } = useContext(AuthContext);
|
||||||
var userQueueIds = [];
|
var userQueueIds = [];
|
||||||
|
|
||||||
|
|
@ -277,13 +282,6 @@ const Dashboard = () => {
|
||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const handleFilterChange = (event) => {
|
|
||||||
setFilterStatus(event.target.value);
|
|
||||||
};
|
|
||||||
const handlesearch = (event) => {
|
|
||||||
setSearch(event.target.value.toLowerCase());
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Can
|
<Can
|
||||||
role={user.profile}
|
role={user.profile}
|
||||||
|
|
@ -446,158 +444,19 @@ const Dashboard = () => {
|
||||||
</Grid>
|
</Grid>
|
||||||
</Paper>
|
</Paper>
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={12}>
|
{window.innerWidth <= 992 ? (
|
||||||
<Paper className={classes.cardPaperFix} sx={12} variant="outlined">
|
<CardUser
|
||||||
<Grid container sx={12} justifyContent="space-between">
|
classes={classes}
|
||||||
<Grid item sx={4}>
|
usersOnlineInfo={usersOnlineInfo}
|
||||||
<Typography
|
logout={handleLogouOnlineUser}
|
||||||
component="h4"
|
/>
|
||||||
variant="h6"
|
) : (
|
||||||
color="primary"
|
<TableUser
|
||||||
style={{ marginBottom: "16px" }}
|
classes={classes}
|
||||||
>
|
usersOnlineInfo={usersOnlineInfo}
|
||||||
Lista de Usuários
|
logout={handleLogouOnlineUser}
|
||||||
</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}>
|
|
||||||
{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) => (
|
|
||||||
<Grid
|
|
||||||
item
|
|
||||||
xs={12}
|
|
||||||
sm={6}
|
|
||||||
md={6}
|
|
||||||
lg={3}
|
|
||||||
key={index}
|
|
||||||
style={{ position: "relative" }}
|
|
||||||
>
|
|
||||||
<Card variant="outlined">
|
|
||||||
<CardHeader
|
|
||||||
avatar={
|
|
||||||
<Avatar
|
|
||||||
style={{
|
|
||||||
backgroundColor: user.statusOnline
|
|
||||||
? user.statusOnline.status === "online"
|
|
||||||
? "green"
|
|
||||||
: user.statusOnline.status === "offline"
|
|
||||||
? "red"
|
|
||||||
: "black"
|
|
||||||
: "grey",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{user.statusOnline ? (
|
|
||||||
user.statusOnline.status === "online" ? (
|
|
||||||
<CheckCircleIcon style={{ color: "white" }} />
|
|
||||||
) : user.statusOnline.status === "offline" ? (
|
|
||||||
<CancelIcon style={{ color: "white" }} />
|
|
||||||
) : (
|
|
||||||
<ErrorIcon style={{ color: "yellow" }} />
|
|
||||||
)
|
|
||||||
) : (
|
|
||||||
<RemoveCircleIcon style={{ color: "black" }} />
|
|
||||||
)}
|
|
||||||
</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>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
</Grid>
|
||||||
</Paper>
|
</Paper>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue