Resolução de merge

pull/20/head
adriano 2022-08-09 16:54:39 -03:00
commit 8c2164c5a2
8 changed files with 911 additions and 625 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,208 @@
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());
};
console.log(usersOnlineInfo);
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",
}}
>
<Typography title="Cobrança">0</Typography>
<Typography>0</Typography>
<Typography>0</Typography>
<Typography>0</Typography>
<Typography>0</Typography>
</div>
</TableCell>
<TableCell>
<div
style={{
display: "flex",
flexWrap: "wrap",
alignItems: "center",
gap: "12px",
}}
>
<Typography title="Cobrança">0</Typography>
<Typography>0</Typography>
<Typography>0</Typography>
<Typography>0</Typography>
<Typography>0</Typography>
</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;

View File

@ -124,7 +124,7 @@ const TicketsManager = () => {
let searchTimeout; let searchTimeout;
const handleSearch = (e) => { const handleSearch = (e) => {
const searchedTerm = e.target.value.toLowerCase(); const searchedTerm = e.target.value.toLowerCase().trim();
clearTimeout(searchTimeout); clearTimeout(searchTimeout);
@ -274,7 +274,7 @@ const TicketsManager = () => {
</Tabs> </Tabs>
<Paper className={classes.ticketsWrapper}> <Paper className={classes.ticketsWrapper}>
<TicketsList <TicketsList
status="open" status={"open"}
showAll={showAllTickets} showAll={showAllTickets}
selectedQueueIds={selectedQueueIds} selectedQueueIds={selectedQueueIds}
updateCount={(val) => setOpenCount(val)} updateCount={(val) => setOpenCount(val)}
@ -285,7 +285,7 @@ const TicketsManager = () => {
selectedQueueIds={selectedQueueIds} selectedQueueIds={selectedQueueIds}
updateCount={(val) => setPendingCount(val)} updateCount={(val) => setPendingCount(val)}
style={applyPanelStyle("pending")} style={applyPanelStyle("pending")}
/> />
</Paper> </Paper>
</TabPanel> </TabPanel>
<TabPanel value={tab} name="closed" className={classes.ticketsWrapper}> <TabPanel value={tab} name="closed" className={classes.ticketsWrapper}>

View File

@ -9,8 +9,8 @@ import Divider from "@material-ui/core/Divider";
import { Badge } from "@material-ui/core"; import { Badge } from "@material-ui/core";
import DashboardOutlinedIcon from "@material-ui/icons/DashboardOutlined"; import DashboardOutlinedIcon from "@material-ui/icons/DashboardOutlined";
import ReportOutlinedIcon from "@material-ui/icons/ReportOutlined"; import ReportOutlinedIcon from "@material-ui/icons/ReportOutlined";
import SendOutlined from '@material-ui/icons/SendOutlined'; import SendOutlined from "@material-ui/icons/SendOutlined";
//import ReportOutlined from "@bit/mui-org.material-ui-icons.report-outlined"; //import ReportOutlined from "@bit/mui-org.material-ui-icons.report-outlined";
@ -32,10 +32,7 @@ function ListItemLink(props) {
const { icon, primary, to, className } = props; const { icon, primary, to, className } = props;
const renderLink = React.useMemo( const renderLink = React.useMemo(
() => () => React.forwardRef((itemProps, ref) => <RouterLink to={to} ref={ref} {...itemProps} />),
React.forwardRef((itemProps, ref) => (
<RouterLink to={to} ref={ref} {...itemProps} />
)),
[to] [to]
); );
@ -50,7 +47,7 @@ function ListItemLink(props) {
} }
const MainListItems = (props) => { const MainListItems = (props) => {
const { drawerClose } = props; const { drawerClose, setDrawerOpen, drawerOpen } = props;
const { whatsApps } = useContext(WhatsAppsContext); const { whatsApps } = useContext(WhatsAppsContext);
const { user } = useContext(AuthContext); const { user } = useContext(AuthContext);
const [connectionWarning, setConnectionWarning] = useState(false); const [connectionWarning, setConnectionWarning] = useState(false);
@ -78,9 +75,8 @@ const MainListItems = (props) => {
}, [whatsApps]); }, [whatsApps]);
return ( return (
<div onClick={drawerClose}> //Solicitado pelo Adriano: Click no LinkItem e fechar o menu!
<div onClick={() => setDrawerOpen(false)}>
<ListItemLink <ListItemLink
to="/tickets" to="/tickets"
primary={i18n.t("mainDrawer.listItems.tickets")} primary={i18n.t("mainDrawer.listItems.tickets")}
@ -92,11 +88,7 @@ const MainListItems = (props) => {
primary={i18n.t("mainDrawer.listItems.contacts")} primary={i18n.t("mainDrawer.listItems.contacts")}
icon={<ContactPhoneOutlinedIcon />} icon={<ContactPhoneOutlinedIcon />}
/> />
<ListItemLink <ListItemLink to="/schedulesReminder" primary="Lembretes" icon={<SendOutlined />} />
to="/schedulesReminder"
primary="Lembretes"
icon={<SendOutlined />}
/>
<ListItemLink <ListItemLink
to="/quickAnswers" to="/quickAnswers"
primary={i18n.t("mainDrawer.listItems.quickAnswers")} primary={i18n.t("mainDrawer.listItems.quickAnswers")}
@ -108,9 +100,7 @@ const MainListItems = (props) => {
yes={() => ( yes={() => (
<> <>
<Divider /> <Divider />
<ListSubheader inset> <ListSubheader inset>{i18n.t("mainDrawer.listItems.administration")}</ListSubheader>
{i18n.t("mainDrawer.listItems.administration")}
</ListSubheader>
<ListItemLink <ListItemLink
to="/users" to="/users"
primary={i18n.t("mainDrawer.listItems.users")} primary={i18n.t("mainDrawer.listItems.users")}
@ -132,32 +122,21 @@ const MainListItems = (props) => {
} }
/> />
<ListItemLink <ListItemLink to="/" primary="Dashboard" icon={<DashboardOutlinedIcon />} />
to="/"
primary="Dashboard"
icon={<DashboardOutlinedIcon />}
/>
<ListItemLink
to="/report"
primary="Relatório"
icon={<ReportOutlinedIcon />}
/>
<ListItemLink to="/report" primary="Relatório" icon={<ReportOutlinedIcon />} />
<Can <Can
role={user.profile} role={user.profile}
perform="settings-view:show" perform="settings-view:show"
yes={() => ( yes={() => (
<ListItemLink <ListItemLink
to="/settings" to="/settings"
primary={i18n.t("mainDrawer.listItems.settings")} primary={i18n.t("mainDrawer.listItems.settings")}
icon={<SettingsOutlinedIcon />} icon={<SettingsOutlinedIcon />}
/> />
)} )}
/> />
</> </>
)} )}
/> />

View File

@ -185,7 +185,7 @@ const LoggedInLayout = ({ children }) => {
</div> </div>
<Divider /> <Divider />
<List> <List>
<MainListItems drawerClose={drawerClose} /> <MainListItems drawerClose={drawerClose} setDrawerOpen={setDrawerOpen} drawerOpen={drawerOpen} />
</List> </List>
<Divider /> <Divider />
</Drawer> </Drawer>

View File

@ -1,10 +1,10 @@
import React from "react"; import React from "react";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
const Title = props => { const Title = ({children}) => {
return ( return (
<Typography component="h2" variant="h6" color="primary" gutterBottom> <Typography component="h2" variant="h6" color="primary" gutterBottom>
{props.children} {children}
</Typography> </Typography>
); );
}; };

File diff suppressed because it is too large Load Diff

View File

@ -20,13 +20,9 @@ import Queues from "../pages/Queues/";
import { AuthProvider } from "../context/Auth/AuthContext"; import { AuthProvider } from "../context/Auth/AuthContext";
import { WhatsAppsProvider } from "../context/WhatsApp/WhatsAppsContext"; import { WhatsAppsProvider } from "../context/WhatsApp/WhatsAppsContext";
import Route from "./Route"; import Route from "./Route";
//console.log('---AuthProvider: ',AuthProvider) //console.log('---AuthProvider: ',AuthProvider)
const Routes = () => { const Routes = () => {
return ( return (
<BrowserRouter> <BrowserRouter>
@ -37,41 +33,18 @@ const Routes = () => {
<WhatsAppsProvider> <WhatsAppsProvider>
<LoggedInLayout> <LoggedInLayout>
<Route exact path="/" component={Dashboard} isPrivate /> <Route exact path="/" component={Dashboard} isPrivate />
<Route <Route exact path="/tickets/:ticketId?" component={Tickets} isPrivate />
exact
path="/tickets/:ticketId?"
component={Tickets}
isPrivate
/>
<Route
exact
path="/connections"
component={Connections}
isPrivate
/>
<Route exact path="/connections" component={Connections} isPrivate />
<Route <Route exact path="/report" component={Report} isPrivate />
exact
path="/report"
component={Report}
isPrivate
/>
<Route exact path="/contacts" component={Contacts} isPrivate /> <Route exact path="/contacts" component={Contacts} isPrivate />
<Route exact path="/schedulesReminder" component={SchedulesReminder} isPrivate /> <Route exact path="/schedulesReminder" component={SchedulesReminder} isPrivate />
<Route exact path="/users" component={Users} isPrivate /> <Route exact path="/users" component={Users} isPrivate />
<Route <Route exact path="/quickAnswers" component={QuickAnswers} isPrivate />
exact
path="/quickAnswers"
component={QuickAnswers}
isPrivate
/>
<Route exact path="/Settings" component={Settings} isPrivate /> <Route exact path="/Settings" component={Settings} isPrivate />
<Route exact path="/Queues" component={Queues} isPrivate /> <Route exact path="/Queues" component={Queues} isPrivate />
</LoggedInLayout> </LoggedInLayout>