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