hange Role Function added Start

redaktions-app/src/App.tsx

@@ -1,5 +1,5 @@
-import "./App.css";
 import React from "react";
+import "./App.css";
 import Main from "./components/Main";
 import { Redirect, Route, RouteProps, Switch } from "react-router-dom";
 import SignIn from "./components/SignIn";

redaktions-app/src/backend/mutations/userRole.ts

@@ -0,0 +1,29 @@
+import { gql } from "@apollo/client";
+
+export const ChangeRole = gql`
+    mutation ChangeRole (
+        $firstName: String!
+        $lastName: String!
+        $role: String!
+    ){
+        __typename
+        changeRole(input: {newRole: CANDYMAT_EDITOR, personRowId: 3}) {
+            results {
+                firstName
+                lastName
+                role
+            }
+        }
+    }
+`;
+
+export interface ChangeRoleVariables {
+  email: string;
+  password: string;
+}
+
+export interface ChangeRoleResponse {
+  authenticate: {
+    jwtToken?: string;
+  };
+}

redaktions-app/src/components/ChangeRole.tsx

@@ -0,0 +1,66 @@
+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";
+import { UserRole, USER_ROLES } from "../jwt/jwt";
+
+interface ChangeRoleProps{
+  currentRole: UserRole
+}
+
+export default function ChangeRole(props:ChangeRoleProps): React.ReactElement {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const currentRoleString = props.currentRole.toLowerCase()
+  const otherRoles = USER_ROLES.filter(role => role != currentRoleString)
+  const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  function changeRoles() {
+    console.log("TEST", currentRoleString)
+  }
+
+  return (
+    <React.Fragment>
+      <IconButton
+        aria-label="role of current user"
+        aria-controls="change-role"
+        aria-haspopup="true"
+        onClick={handleMenu}
+        color="inherit"
+      >
+        <EditIcon />
+      </IconButton>
+      <Menu 
+        id="change-role"
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: "top",
+          horizontal: "right",
+        }}
+        keepMounted
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "right",
+        }}
+        open={open}
+        onClose={handleClose}
+      >
+
+        {otherRoles.map(role => 
+          <MenuItem onClick={function changeRole() {
+            console.log("Role Selected: ", role);
+            alert("Die Rolle wurde geändert in: " + role);
+            handleClose()
+          }} >{role}</MenuItem>
+        )}
+
+      </Menu>
+    </React.Fragment>
+  );
+}

redaktions-app/src/components/PersonCard.tsx

@@ -5,9 +5,13 @@ import {
   CardHeader,
   Paper,
   Typography,
+  IconButton,
 } from "@material-ui/core";
+import EditIcon from "@material-ui/icons/Edit";
 import React from "react";
 import { makeStyles } from "@material-ui/core/styles";
+import ChangeRole from './ChangeRole'
+import { UserRole } from "../jwt/jwt";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -22,17 +26,23 @@ const useStyles = makeStyles((theme) => ({
   },
   title: {
     marginLeft: theme.spacing(1),
+    width: '100%',
   },
+  editButton: {
+    margin: theme.spacing(1),
+  }
+
 }));
 
 interface PersonCardProps {
   firstName: string;
   lastName: string;
+  userRole: UserRole;
 }
 
 export default function PersonCard(props: PersonCardProps): React.ReactElement {
   const classes = useStyles();
-
+  const userRole = props.userRole;
   const getInitials = (): string => {
     const initials =
       (props.firstName.charAt(0) || "") + (props.lastName.charAt(0) || "");
@@ -40,13 +50,14 @@ export default function PersonCard(props: PersonCardProps): React.ReactElement {
   };
 
   const fullName = `${props.firstName} ${props.lastName}`.trim();
-
   return (
     <Paper className={classes.root}>
       <Avatar className={classes.avatar} aria-label={fullName}>
         {getInitials()}
       </Avatar>
       <Typography className={classes.title}>{fullName}</Typography>
+      <ChangeRole currentRole={userRole} />
+      
     </Paper>
   );
-}
+}

redaktions-app/src/components/UserManagement.tsx

@@ -31,6 +31,7 @@ export function UserManagement(): React.ReactElement {
         key={person.id}
         firstName={person.firstName || ""}
         lastName={person.lastName || ""}
+        userRole={person.role}
       />
     );
   };

redaktions-app/src/jwt/jwt.ts

@@ -16,7 +16,7 @@ export interface JwtPayload {
 }
 
 const CLAIMS: Claim[] = ["role", "person_row_id", "exp", "iat", "aud", "iss"];
-const USER_ROLES: UserRole[] = [
+export const USER_ROLES: UserRole[] = [
   "candymat_editor",
   "candymat_candidate",
   "candymat_person",