2021-05-09 19:10:44 +02:00
|
|
|
import React from "react";
|
|
|
|
import { IconButton, MenuItem } from "@material-ui/core";
|
|
|
|
import Menu from "@material-ui/core/Menu";
|
|
|
|
import EditIcon from "@material-ui/icons/Edit";
|
2021-06-13 11:54:16 +02:00
|
|
|
import { UPPERCASE_USER_ROLES, UppercaseUserRole } from "../jwt/jwt";
|
2021-05-29 17:19:11 +02:00
|
|
|
import { useMutation } from "@apollo/client";
|
|
|
|
import {
|
2021-06-13 11:54:16 +02:00
|
|
|
CHANGE_ROLE,
|
2021-05-29 17:19:11 +02:00
|
|
|
ChangeRoleResponse,
|
|
|
|
ChangeRoleVariables,
|
|
|
|
} from "../backend/mutations/userRole";
|
2021-06-13 11:54:16 +02:00
|
|
|
import { useSnackbar } from "notistack";
|
|
|
|
import { GET_PERSONS_SORTED_BY_ROLE } from "../backend/queries/person";
|
2021-05-09 19:10:44 +02:00
|
|
|
|
2021-06-13 12:17:44 +02:00
|
|
|
interface ChangeRoleMenuProps {
|
2021-05-09 20:54:53 +02:00
|
|
|
currentRole: UppercaseUserRole;
|
2021-05-29 17:19:11 +02:00
|
|
|
currentUserRowId: number;
|
2021-06-13 12:17:44 +02:00
|
|
|
disabled?: boolean;
|
2021-05-09 19:10:44 +02:00
|
|
|
}
|
2021-06-13 12:17:44 +02:00
|
|
|
|
|
|
|
export default function ChangeRoleMenu(
|
|
|
|
props: ChangeRoleMenuProps
|
|
|
|
): React.ReactElement {
|
|
|
|
const { enqueueSnackbar } = useSnackbar();
|
2021-05-09 19:10:44 +02:00
|
|
|
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
|
|
|
const open = Boolean(anchorEl);
|
2021-05-09 20:54:53 +02:00
|
|
|
const otherRoles = UPPERCASE_USER_ROLES.filter(
|
|
|
|
(role) => role != props.currentRole
|
|
|
|
);
|
2021-05-09 19:10:44 +02:00
|
|
|
const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
|
|
|
|
setAnchorEl(event.currentTarget);
|
|
|
|
};
|
|
|
|
const handleClose = () => {
|
|
|
|
setAnchorEl(null);
|
|
|
|
};
|
2021-05-29 17:19:11 +02:00
|
|
|
const [changeRole] = useMutation<ChangeRoleResponse, ChangeRoleVariables>(
|
|
|
|
CHANGE_ROLE,
|
|
|
|
{
|
|
|
|
onCompleted() {
|
2021-05-29 18:09:31 +02:00
|
|
|
handleClose();
|
2021-05-29 17:19:11 +02:00
|
|
|
},
|
|
|
|
onError(e) {
|
|
|
|
console.error(e);
|
|
|
|
handleClose();
|
2021-06-13 11:54:16 +02:00
|
|
|
enqueueSnackbar("Ein Fehler ist aufgetreten, versuche es erneut.", {
|
|
|
|
variant: "error",
|
|
|
|
});
|
2021-05-29 17:19:11 +02:00
|
|
|
},
|
2021-06-13 11:54:16 +02:00
|
|
|
refetchQueries: [{ query: GET_PERSONS_SORTED_BY_ROLE }],
|
2021-05-29 17:19:11 +02:00
|
|
|
}
|
|
|
|
);
|
2021-05-09 20:54:53 +02:00
|
|
|
const displayRole = (role: UppercaseUserRole) => {
|
|
|
|
switch (role) {
|
2022-02-02 13:13:34 +01:00
|
|
|
case "KANDIMAT_CANDIDATE":
|
2021-06-13 11:54:16 +02:00
|
|
|
return "zu Kandidat:in machen";
|
2022-02-02 13:13:34 +01:00
|
|
|
case "KANDIMAT_EDITOR":
|
2021-05-26 10:04:37 +02:00
|
|
|
return "zu RedakteurIn machen";
|
2022-02-02 13:13:34 +01:00
|
|
|
case "KANDIMAT_PERSON":
|
2021-05-09 20:54:53 +02:00
|
|
|
return "zu Standard User machen";
|
|
|
|
}
|
|
|
|
};
|
2021-05-09 19:10:44 +02:00
|
|
|
return (
|
|
|
|
<React.Fragment>
|
|
|
|
<IconButton
|
|
|
|
aria-label="role of current user"
|
|
|
|
aria-controls="change-role"
|
|
|
|
aria-haspopup="true"
|
|
|
|
onClick={handleMenu}
|
|
|
|
color="inherit"
|
2021-06-13 12:17:44 +02:00
|
|
|
disabled={props.disabled}
|
2021-05-09 19:10:44 +02:00
|
|
|
>
|
|
|
|
<EditIcon />
|
|
|
|
</IconButton>
|
2021-05-09 20:54:53 +02:00
|
|
|
<Menu
|
2021-05-09 19:10:44 +02:00
|
|
|
id="change-role"
|
|
|
|
anchorEl={anchorEl}
|
|
|
|
anchorOrigin={{
|
|
|
|
vertical: "top",
|
|
|
|
horizontal: "right",
|
|
|
|
}}
|
|
|
|
keepMounted
|
|
|
|
transformOrigin={{
|
|
|
|
vertical: "top",
|
|
|
|
horizontal: "right",
|
|
|
|
}}
|
|
|
|
open={open}
|
|
|
|
onClose={handleClose}
|
|
|
|
>
|
2021-05-09 20:54:53 +02:00
|
|
|
{otherRoles.map((role) => (
|
|
|
|
<MenuItem
|
|
|
|
key={role}
|
|
|
|
onClick={() => {
|
2021-05-29 17:19:11 +02:00
|
|
|
changeRole({
|
|
|
|
variables: {
|
|
|
|
personRowId: props.currentUserRowId,
|
|
|
|
newRole: role,
|
|
|
|
},
|
|
|
|
});
|
2021-05-09 20:54:53 +02:00
|
|
|
}}
|
|
|
|
>
|
|
|
|
{displayRole(role)}
|
|
|
|
</MenuItem>
|
|
|
|
))}
|
2021-05-09 19:10:44 +02:00
|
|
|
</Menu>
|
|
|
|
</React.Fragment>
|
|
|
|
);
|
2021-05-09 20:54:53 +02:00
|
|
|
}
|