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 2022-08-04 16:23:21 -03:00
parent 832694a311
commit 564abdda19
3 changed files with 402 additions and 183 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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 (
<Can
role={user.profile}
@ -446,158 +444,19 @@ const Dashboard = () => {
</Grid>
</Paper>
</Grid>
<Grid item xs={12}>
<Paper className={classes.cardPaperFix} sx={12} variant="outlined">
<Grid container sx={12} justifyContent="space-between">
<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) => {
handleLogouOnlineUser(user.id);
}}
>
{"Deslogar"}
</Button>
)}
</CardActions>
</Card>
</Grid>
))}
</Grid>
</Paper>
</Grid>
{window.innerWidth <= 992 ? (
<CardUser
classes={classes}
usersOnlineInfo={usersOnlineInfo}
logout={handleLogouOnlineUser}
/>
) : (
<TableUser
classes={classes}
usersOnlineInfo={usersOnlineInfo}
logout={handleLogouOnlineUser}
/>
)}
</Grid>
</Paper>
</Grid>