adriano.andrade
/
projeto-hit
mirror of https://github.com/AdrianoRobson/projeto-hit.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Criação de nova rule para que somente o administrador acesse as mensagens da fila(queues

pull/1/head
adriano 2022-01-10 20:06:15 -03:00
parent 790b2c11a9
commit 723f094e5e
2 changed files with 109 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

205
frontend/src/pages/Queues/index.js
View File

@ -1,4 +1,4 @@
import React, { useEffect, useReducer, useState } from "react"; import React, { useEffect, useReducer, useState, useContext } from "react";
import openSocket from "socket.io-client"; import openSocket from "socket.io-client";
@ -28,6 +28,9 @@ import QueueModal from "../../components/QueueModal";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import ConfirmationModal from "../../components/ConfirmationModal"; import ConfirmationModal from "../../components/ConfirmationModal";
import { AuthContext } from "../../context/Auth/AuthContext";
import { Can } from "../../components/Can";
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
mainPaper: { mainPaper: {
flex: 1, flex: 1,
@ -88,6 +91,8 @@ const reducer = (state, action) => {
const Queues = () => { const Queues = () => {
const classes = useStyles(); const classes = useStyles();
const { user } = useContext(AuthContext);
const [queues, dispatch] = useReducer(reducer, []); const [queues, dispatch] = useReducer(reducer, []);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@ -158,110 +163,116 @@ const Queues = () => {
setSelectedQueue(null); setSelectedQueue(null);
}; };
return ( return (
<MainContainer> <Can
<ConfirmationModal role={user.profile}
title={ perform="queues-view:show"
selectedQueue && yes={() => (
`${i18n.t("queues.confirmationModal.deleteTitle")} ${ <MainContainer>
selectedQueue.name <ConfirmationModal
}?` title={
} selectedQueue &&
open={confirmModalOpen} `${i18n.t("queues.confirmationModal.deleteTitle")} ${
onClose={handleCloseConfirmationModal} selectedQueue.name
onConfirm={() => handleDeleteQueue(selectedQueue.id)} }?`
> }
{i18n.t("queues.confirmationModal.deleteMessage")} open={confirmModalOpen}
</ConfirmationModal> onClose={handleCloseConfirmationModal}
<QueueModal onConfirm={() => handleDeleteQueue(selectedQueue.id)}
open={queueModalOpen}
onClose={handleCloseQueueModal}
queueId={selectedQueue?.id}
/>
<MainHeader>
<Title>{i18n.t("queues.title")}</Title>
<MainHeaderButtonsWrapper>
<Button
variant="contained"
color="primary"
onClick={handleOpenQueueModal}
> >
{i18n.t("queues.buttons.add")} {i18n.t("queues.confirmationModal.deleteMessage")}
</Button> </ConfirmationModal>
</MainHeaderButtonsWrapper> <QueueModal
</MainHeader> open={queueModalOpen}
<Paper className={classes.mainPaper} variant="outlined"> onClose={handleCloseQueueModal}
<Table size="small"> queueId={selectedQueue?.id}
<TableHead> />
<TableRow> <MainHeader>
<TableCell align="center"> <Title>{i18n.t("queues.title")}</Title>
{i18n.t("queues.table.name")} <MainHeaderButtonsWrapper>
</TableCell> <Button
<TableCell align="center"> variant="contained"
{i18n.t("queues.table.color")} color="primary"
</TableCell> onClick={handleOpenQueueModal}
<TableCell align="center"> >
{i18n.t("queues.table.greeting")} {i18n.t("queues.buttons.add")}
</TableCell> </Button>
<TableCell align="center"> </MainHeaderButtonsWrapper>
{i18n.t("queues.table.actions")} </MainHeader>
</TableCell> <Paper className={classes.mainPaper} variant="outlined">
</TableRow> <Table size="small">
</TableHead> <TableHead>
<TableBody> <TableRow>
<>
{queues.map((queue) => (
<TableRow key={queue.id}>
<TableCell align="center">{queue.name}</TableCell>
<TableCell align="center"> <TableCell align="center">
<div className={classes.customTableCell}> {i18n.t("queues.table.name")}
<span
style={{
backgroundColor: queue.color,
width: 60,
height: 20,
alignSelf: "center",
}}
/>
</div>
</TableCell> </TableCell>
<TableCell align="center"> <TableCell align="center">
<div className={classes.customTableCell}> {i18n.t("queues.table.color")}
<Typography
style={{ width: 300, align: "center" }}
noWrap
variant="body2"
>
{queue.greetingMessage}
</Typography>
</div>
</TableCell> </TableCell>
<TableCell align="center"> <TableCell align="center">
<IconButton {i18n.t("queues.table.greeting")}
size="small" </TableCell>
onClick={() => handleEditQueue(queue)} <TableCell align="center">
> {i18n.t("queues.table.actions")}
<Edit />
</IconButton>
<IconButton
size="small"
onClick={() => {
setSelectedQueue(queue);
setConfirmModalOpen(true);
}}
>
<DeleteOutline />
</IconButton>
</TableCell> </TableCell>
</TableRow> </TableRow>
))} </TableHead>
{loading && <TableRowSkeleton columns={4} />} <TableBody>
</> <>
</TableBody> {queues.map((queue) => (
</Table> <TableRow key={queue.id}>
</Paper> <TableCell align="center">{queue.name}</TableCell>
</MainContainer> <TableCell align="center">
<div className={classes.customTableCell}>
<span
style={{
backgroundColor: queue.color,
width: 60,
height: 20,
alignSelf: "center",
}}
/>
</div>
</TableCell>
<TableCell align="center">
<div className={classes.customTableCell}>
<Typography
style={{ width: 300, align: "center" }}
noWrap
variant="body2"
>
{queue.greetingMessage}
</Typography>
</div>
</TableCell>
<TableCell align="center">
<IconButton
size="small"
onClick={() => handleEditQueue(queue)}
>
<Edit />
</IconButton>
<IconButton
size="small"
onClick={() => {
setSelectedQueue(queue);
setConfirmModalOpen(true);
}}
>
<DeleteOutline />
</IconButton>
</TableCell>
</TableRow>
))}
{loading && <TableRowSkeleton columns={4} />}
</>
</TableBody>
</Table>
</Paper>
</MainContainer>
)}
/>
); );
}; };

1
frontend/src/rules.js
View File

@ -14,6 +14,7 @@ const rules = {
"connections-view:show", "connections-view:show",
"dashboard-view:show", "dashboard-view:show",
"queues-view:show",
], ],
}, },
}; };