projeto-hit/frontend/src/components/DashboardUser/TableUser.jsx

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;