From 564abdda19d39f7b5a0887e9e59a558037541e87 Mon Sep 17 00:00:00 2001
From: Renato Di Giacomo <renato_di_giacomo@hotmail.com>
Date: Thu, 4 Aug 2022 16:23:21 -0300
Subject: [PATCH] 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 (
+    <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;
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 (
+    <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;
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 (
     <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>