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

Restrição de operação de crud para criação e edição de filas. Apenas o master tem esse poder

pull/1/head
adriano 2022-06-15 20:36:21 -03:00
parent 755584a881
commit 9bb316a0cf
3 changed files with 279 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

408
frontend/src/pages/Connections/index.js
View File

@ -45,7 +45,7 @@ import toastError from "../../errors/toastError";
import { AuthContext } from "../../context/Auth/AuthContext"; import { AuthContext } from "../../context/Auth/AuthContext";
import { Can } from "../../components/Can"; import { Can } from "../../components/Can";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(theme => ({
mainPaper: { mainPaper: {
flex: 1, flex: 1,
@ -98,20 +98,20 @@ const CustomToolTip = ({ title, content, children }) => {
}; };
const Connections = () => { const Connections = () => {
//-------- //--------
const { user } = useContext(AuthContext); const { user } = useContext(AuthContext);
const classes = useStyles(); const classes = useStyles();
const { whatsApps, loading } = useContext(WhatsAppsContext); const { whatsApps, loading } = useContext(WhatsAppsContext);
const [whatsAppModalOpen, setWhatsAppModalOpen] = useState(false); const [whatsAppModalOpen, setWhatsAppModalOpen] = useState(false);
const [qrModalOpen, setQrModalOpen] = useState(false); const [qrModalOpen, setQrModalOpen] = useState(false);
const [selectedWhatsApp, setSelectedWhatsApp] = useState(null); const [selectedWhatsApp, setSelectedWhatsApp] = useState(null);
const [confirmModalOpen, setConfirmModalOpen] = useState(false); const [confirmModalOpen, setConfirmModalOpen] = useState(false);
const confirmationModalInitialState = { const confirmationModalInitialState = {
action: "", action: "",
title: "", title: "",
@ -124,7 +124,7 @@ const Connections = () => {
); );
const handleStartWhatsAppSession = async whatsAppId => { const handleStartWhatsAppSession = async whatsAppId => {
try { try {
await api.post(`/whatsappsession/${whatsAppId}`); await api.post(`/whatsappsession/${whatsAppId}`);
} catch (err) { } catch (err) {
toastError(err); toastError(err);
@ -207,69 +207,69 @@ const Connections = () => {
}; };
const renderActionButtons = whatsApp => { const renderActionButtons = whatsApp => {
return ( return (
<Can <Can
role={user.profile} role={user.profile}
perform="connection-button:show" perform="connection-button:show"
yes={() => ( yes={() => (
<> <>
{whatsApp.status === "qrcode" && ( {whatsApp.status === "qrcode" && (
<Button <Button
size="small" size="small"
variant="contained" variant="contained"
color="primary" color="primary"
onClick={() => handleOpenQrModal(whatsApp)} onClick={() => handleOpenQrModal(whatsApp)}
> >
{i18n.t("connections.buttons.qrcode")} {i18n.t("connections.buttons.qrcode")}
</Button> </Button>
)} )}
{whatsApp.status === "DISCONNECTED" && ( {whatsApp.status === "DISCONNECTED" && (
<> <>
<Button <Button
size="small" size="small"
variant="outlined" variant="outlined"
color="primary" color="primary"
onClick={() => handleStartWhatsAppSession(whatsApp.id)} onClick={() => handleStartWhatsAppSession(whatsApp.id)}
> >
{i18n.t("connections.buttons.tryAgain")} {i18n.t("connections.buttons.tryAgain")}
</Button>{" "} </Button>{" "}
<Button <Button
size="small" size="small"
variant="outlined" variant="outlined"
color="secondary" color="secondary"
onClick={() => handleRequestNewQrCode(whatsApp.id)} onClick={() => handleRequestNewQrCode(whatsApp.id)}
> >
{i18n.t("connections.buttons.newQr")} {i18n.t("connections.buttons.newQr")}
</Button> </Button>
</>
)}
{(whatsApp.status === "CONNECTED" ||
whatsApp.status === "PAIRING" ||
whatsApp.status === "TIMEOUT") && (
<Button
size="small"
variant="outlined"
color="secondary"
onClick={() => {
handleOpenConfirmationModal("disconnect", whatsApp.id);
}}
>
{i18n.t("connections.buttons.disconnect")}
</Button>
)}
{whatsApp.status === "OPENING" && (
<Button size="small" variant="outlined" disabled color="default">
{i18n.t("connections.buttons.connecting")}
</Button>
)}
</> </>
)} )}
{(whatsApp.status === "CONNECTED" || />
whatsApp.status === "PAIRING" ||
whatsApp.status === "TIMEOUT") && (
<Button
size="small"
variant="outlined"
color="secondary"
onClick={() => {
handleOpenConfirmationModal("disconnect", whatsApp.id);
}}
>
{i18n.t("connections.buttons.disconnect")}
</Button>
)}
{whatsApp.status === "OPENING" && (
<Button size="small" variant="outlined" disabled color="default">
{i18n.t("connections.buttons.connecting")}
</Button>
)}
</>
)}
/>
); );
}; };
@ -312,160 +312,166 @@ const Connections = () => {
); );
}; };
return ( return (
<Can <Can
role={user.profile} role={user.profile}
perform="connections-view:show" perform="connections-view:show"
yes={() => ( yes={() => (
<MainContainer> <MainContainer>
<ConfirmationModal <ConfirmationModal
title={confirmModalInfo.title} title={confirmModalInfo.title}
open={confirmModalOpen} open={confirmModalOpen}
onClose={setConfirmModalOpen} onClose={setConfirmModalOpen}
onConfirm={handleSubmitConfirmationModal} onConfirm={handleSubmitConfirmationModal}
> >
{confirmModalInfo.message} {confirmModalInfo.message}
</ConfirmationModal> </ConfirmationModal>
<QrcodeModal <QrcodeModal
open={qrModalOpen} open={qrModalOpen}
onClose={handleCloseQrModal} onClose={handleCloseQrModal}
whatsAppId={!whatsAppModalOpen && selectedWhatsApp?.id} whatsAppId={!whatsAppModalOpen && selectedWhatsApp?.id}
/> />
<WhatsAppModal <WhatsAppModal
open={whatsAppModalOpen} open={whatsAppModalOpen}
onClose={handleCloseWhatsAppModal} onClose={handleCloseWhatsAppModal}
whatsAppId={!qrModalOpen && selectedWhatsApp?.id} whatsAppId={!qrModalOpen && selectedWhatsApp?.id}
/> />
<MainHeader> <MainHeader>
<Title>{i18n.t("connections.title")}</Title> <Title>{i18n.t("connections.title")}</Title>
<MainHeaderButtonsWrapper> <MainHeaderButtonsWrapper>
<Can
role={user.profile}
perform="btn-add-whatsapp"
yes={() => (
<Button
variant="contained"
color="primary"
onClick={handleOpenWhatsAppModal}>
{i18n.t("connections.buttons.add")}
</Button>
)}
/>
</MainHeaderButtonsWrapper>
</MainHeader>
<Paper className={classes.mainPaper} variant="outlined">
<Table size="small">
<TableHead>
<TableRow>
<TableCell align="center">
{i18n.t("connections.table.name")}
</TableCell>
<TableCell align="center">
{i18n.t("connections.table.status")}
</TableCell>
<Can <Can
role={user.profile} role={user.profile}
perform="connection-button:show" perform="btn-add-whatsapp"
yes={() => ( yes={() => (
<TableCell align="center"> <Button
{i18n.t("connections.table.session")} variant="contained"
</TableCell> color="primary"
)} onClick={handleOpenWhatsAppModal}>
{i18n.t("connections.buttons.add")}
</Button>
)}
/> />
<TableCell align="center"> </MainHeaderButtonsWrapper>
{i18n.t("connections.table.lastUpdate")} </MainHeader>
</TableCell> <Paper className={classes.mainPaper} variant="outlined">
<TableCell align="center"> <Table size="small">
{i18n.t("connections.table.default")} <TableHead>
</TableCell> <TableRow>
<TableCell align="center"> <TableCell align="center">
{i18n.t("connections.table.actions")} {i18n.t("connections.table.name")}
</TableCell> </TableCell>
</TableRow> <TableCell align="center">
</TableHead> {i18n.t("connections.table.status")}
<TableBody> </TableCell>
{loading ? (
<TableRowSkeleton />
) : ( <Can
<> role={user.profile}
{whatsApps?.length > 0 && perform="connection-button:show"
whatsApps.map(whatsApp => ( yes={() => (
<TableRow key={whatsApp.id}>
<TableCell align="center">{whatsApp.name}</TableCell>
<TableCell align="center"> <TableCell align="center">
{renderStatusToolTips(whatsApp)} {i18n.t("connections.table.session")}
</TableCell> </TableCell>
)}
<Can />
role={user.profile}
perform="connection-button:show"
yes={() => (
<TableCell align="center">
{renderActionButtons(whatsApp)}
</TableCell>
)}
/>
<TableCell align="center">
{format(parseISO(whatsApp.updatedAt), "dd/MM/yy HH:mm")}
</TableCell>
<TableCell align="center">
{whatsApp.isDefault && (
<div className={classes.customTableCell}>
<CheckCircle style={{ color: green[500] }} />
</div>
)}
</TableCell>
<TableCell align="center">
<IconButton
size="small"
onClick={() => handleEditWhatsApp(whatsApp)}
>
<Edit />
</IconButton>
<Can <TableCell align="center">
{i18n.t("connections.table.lastUpdate")}
</TableCell>
<TableCell align="center">
{i18n.t("connections.table.default")}
</TableCell>
<TableCell align="center">
{i18n.t("connections.table.actions")}
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{loading ? (
<TableRowSkeleton />
) : (
<>
{whatsApps?.length > 0 &&
whatsApps.map(whatsApp => (
<TableRow key={whatsApp.id}>
<TableCell align="center">{whatsApp.name}</TableCell>
<TableCell align="center">
{renderStatusToolTips(whatsApp)}
</TableCell>
<Can
role={user.profile} role={user.profile}
perform="btn-remove-whatsapp" perform="connection-button:show"
yes={() => ( yes={() => (
<IconButton <TableCell align="center">
size="small" {renderActionButtons(whatsApp)}
onClick={e => { </TableCell>
handleOpenConfirmationModal("delete", whatsApp.id);
}}
>
<DeleteOutline />
</IconButton>
)} )}
/> />
</TableCell>
</TableRow>
))} <TableCell align="center">
</> {format(parseISO(whatsApp.updatedAt), "dd/MM/yy HH:mm")}
)} </TableCell>
</TableBody> <TableCell align="center">
</Table> {whatsApp.isDefault && (
</Paper> <div className={classes.customTableCell}>
</MainContainer> <CheckCircle style={{ color: green[500] }} />
)} </div>
/> )}
</TableCell>
<TableCell align="center">
<Can
role={user.profile}
perform="show-icon-edit-whatsapp"
yes={() => (
<IconButton
size="small"
onClick={() => handleEditWhatsApp(whatsApp)}
>
<Edit />
</IconButton>
)}
/>
<Can
role={user.profile}
perform="btn-remove-whatsapp"
yes={() => (
<IconButton
size="small"
onClick={e => {
handleOpenConfirmationModal("delete", whatsApp.id);
}}
>
<DeleteOutline />
</IconButton>
)}
/>
</TableCell>
</TableRow>
))}
</>
)}
</TableBody>
</Table>
</Paper>
</MainContainer>
)}
/>
); );
}; };

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

@ -91,7 +91,7 @@ const reducer = (state, action) => {
const Queues = () => { const Queues = () => {
const classes = useStyles(); const classes = useStyles();
const { user } = useContext(AuthContext); const { user } = useContext(AuthContext);
const [queues, dispatch] = useReducer(reducer, []); const [queues, dispatch] = useReducer(reducer, []);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@ -163,17 +163,16 @@ const Queues = () => {
setSelectedQueue(null); setSelectedQueue(null);
}; };
return ( return (
<Can <Can
role={user.profile} role={user.profile}
perform="queues-view:show" perform="queues-view:show"
yes={() => ( yes={() => (
<MainContainer> <MainContainer>
<ConfirmationModal <ConfirmationModal
title={ title={
selectedQueue && selectedQueue &&
`${i18n.t("queues.confirmationModal.deleteTitle")} ${ `${i18n.t("queues.confirmationModal.deleteTitle")} ${selectedQueue.name
selectedQueue.name
}?` }?`
} }
open={confirmModalOpen} open={confirmModalOpen}
@ -189,15 +188,25 @@ const Queues = () => {
/> />
<MainHeader> <MainHeader>
<Title>{i18n.t("queues.title")}</Title> <Title>{i18n.t("queues.title")}</Title>
<MainHeaderButtonsWrapper>
<Button
variant="contained" <Can
color="primary" role={user.profile}
onClick={handleOpenQueueModal} perform="show-icon-add-queue"
> yes={() => (
{i18n.t("queues.buttons.add")} <MainHeaderButtonsWrapper>
</Button> <Button
</MainHeaderButtonsWrapper> variant="contained"
color="primary"
onClick={handleOpenQueueModal}
>
{i18n.t("queues.buttons.add")}
</Button>
</MainHeaderButtonsWrapper>
)}
/>
</MainHeader> </MainHeader>
<Paper className={classes.mainPaper} variant="outlined"> <Paper className={classes.mainPaper} variant="outlined">
<Table size="small"> <Table size="small">
@ -245,23 +254,42 @@ const Queues = () => {
</Typography> </Typography>
</div> </div>
</TableCell> </TableCell>
<TableCell align="center"> <TableCell align="center">
<IconButton
size="small"
onClick={() => handleEditQueue(queue)} <Can
> role={user.profile}
<Edit /> perform="show-icon-edit-queue"
</IconButton> yes={() => (
<IconButton
<IconButton size="small"
size="small" onClick={() => handleEditQueue(queue)}
onClick={() => { >
setSelectedQueue(queue); <Edit />
setConfirmModalOpen(true); </IconButton>
}} )}
> />
<DeleteOutline />
</IconButton>
<Can
role={user.profile}
perform="show-icon-delete-queue"
yes={() => (
<IconButton
size="small"
onClick={() => {
setSelectedQueue(queue);
setConfirmModalOpen(true);
}}
>
<DeleteOutline />
</IconButton>
)}
/>
</TableCell> </TableCell>
</TableRow> </TableRow>
))} ))}
@ -271,8 +299,8 @@ const Queues = () => {
</Table> </Table>
</Paper> </Paper>
</MainContainer> </MainContainer>
)} )}
/> />
); );
}; };

9
frontend/src/rules.js
View File

@ -5,6 +5,8 @@ const rules = {
admin: { admin: {
static: [ static: [
"show-icon-edit-whatsapp",
"drawer-admin-items:view", "drawer-admin-items:view",
"tickets-manager:showall", "tickets-manager:showall",
"user-modal:editProfile", "user-modal:editProfile",
@ -22,6 +24,13 @@ const rules = {
master: { master: {
static: [ static: [
"show-icon-edit-whatsapp",
"show-icon-add-queue",
"show-icon-edit-queue",
"show-icon-delete-queue",
"drawer-admin-items:view", "drawer-admin-items:view",
"tickets-manager:showall", "tickets-manager:showall",
"user-modal:editProfile", "user-modal:editProfile",