splay Roles changed

redaktions-app/src/backend/queries/person.mock.ts

@@ -12,7 +12,7 @@ export const getPersonsByRoleAllFilledData: GetPersonsSortedByRoleResponse = {
         rowId: 1,
         firstName: "Erika",
         lastName: "Mustermann",
-        role: "candymat_editor",
+        role: "CANDYMAT_EDITOR",
         __typename: "Person",
       },
     ],
@@ -25,7 +25,7 @@ export const getPersonsByRoleAllFilledData: GetPersonsSortedByRoleResponse = {
         rowId: 2,
         firstName: "Max",
         lastName: "Mustermann",
-        role: "candymat_candidate",
+        role: "CANDYMAT_CANDIDATE",
         __typename: "Person",
       },
       {
@@ -33,7 +33,7 @@ export const getPersonsByRoleAllFilledData: GetPersonsSortedByRoleResponse = {
         rowId: 3,
         firstName: "Tricia",
         lastName: "McMillan",
-        role: "candymat_candidate",
+        role: "CANDYMAT_CANDIDATE",
         __typename: "Person",
       },
     ],
@@ -46,7 +46,7 @@ export const getPersonsByRoleAllFilledData: GetPersonsSortedByRoleResponse = {
         rowId: 4,
         firstName: "Happy",
         lastName: "User",
-        role: "candymat_person",
+        role: "CANDYMAT_PERSON",
         __typename: "Person",
       },
     ],
@@ -75,7 +75,7 @@ export const getPersonsByRoleNoCandidatesData: GetPersonsSortedByRoleResponse =
         rowId: 1,
         firstName: "Erika",
         lastName: "Mustermann",
-        role: "candymat_editor",
+        role: "CANDYMAT_EDITOR",
         __typename: "Person",
       },
     ],
@@ -92,7 +92,7 @@ export const getPersonsByRoleNoCandidatesData: GetPersonsSortedByRoleResponse =
         rowId: 2,
         firstName: "Max",
         lastName: "Mustermann",
-        role: "candymat_person",
+        role: "CANDYMAT_PERSON",
         __typename: "Person",
       },
       {
@@ -100,7 +100,7 @@ export const getPersonsByRoleNoCandidatesData: GetPersonsSortedByRoleResponse =
         rowId: 3,
         firstName: "Tricia",
         lastName: "McMillan",
-        role: "candymat_person",
+        role: "CANDYMAT_PERSON",
         __typename: "Person",
       },
       {
@@ -108,7 +108,7 @@ export const getPersonsByRoleNoCandidatesData: GetPersonsSortedByRoleResponse =
         rowId: 4,
         firstName: "Happy",
         lastName: "User",
-        role: "candymat_person",
+        role: "CANDYMAT_PERSON",
         __typename: "Person",
       },
     ],

redaktions-app/src/backend/queries/person.ts

@@ -1,5 +1,5 @@
 import { gql } from "@apollo/client";
-import { UserRole } from "../../jwt/jwt";
+import { UppercaseUserRole } from "../../jwt/jwt";
 
 const BasicPersonFragment = gql`
   fragment BasicPersonFragment on Person {
@@ -16,7 +16,7 @@ export interface BasicPersonResponse {
   rowId: number;
   firstName: string | null;
   lastName: string | null;
-  role: UserRole;
+  role: UppercaseUserRole;
   __typename: "Person";
 }
 

redaktions-app/src/components/ChangeRole.tsx

@@ -2,17 +2,19 @@ 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";
+import { UppercaseUserRole, UPPERCASE_USER_ROLES } from "../jwt/jwt";
 
-interface ChangeRoleProps{
-  currentRole: UserRole
+interface ChangeRoleProps {
+  currentRole: UppercaseUserRole;
 }
 
-export default function ChangeRole(props:ChangeRoleProps): React.ReactElement {
+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 otherRoles = UPPERCASE_USER_ROLES.filter(
+    (role) => role != props.currentRole
+  );
   const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
@@ -21,10 +23,22 @@ export default function ChangeRole(props:ChangeRoleProps): React.ReactElement {
     setAnchorEl(null);
   };
 
-  function changeRoles() {
-    console.log("TEST", currentRoleString)
+  function changeRole(role: UppercaseUserRole) {
+    console.log("Role Selected: ", role);
+    alert("Die Rolle wurde geändert in: " + role);
+    handleClose();
   }
 
+  const displayRole = (role: UppercaseUserRole) => {
+    switch (role) {
+      case "CANDYMAT_CANDIDATE":
+        return "zu Kandidat:in machen";
+      case "CANDYMAT_EDITOR":
+        return "zu Redakteur:in machen";
+      case "CANDYMAT_PERSON":
+        return "zu Standard User machen";
+    }
+  };
   return (
     <React.Fragment>
       <IconButton
@@ -36,7 +50,7 @@ export default function ChangeRole(props:ChangeRoleProps): React.ReactElement {
       >
         <EditIcon />
       </IconButton>
-      <Menu 
+      <Menu
         id="change-role"
         anchorEl={anchorEl}
         anchorOrigin={{
@@ -51,16 +65,17 @@ export default function ChangeRole(props:ChangeRoleProps): React.ReactElement {
         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>
-        )}
-
+        {otherRoles.map((role) => (
+          <MenuItem
+            key={role}
+            onClick={() => {
+              changeRole(role);
+            }}
+          >
+            {displayRole(role)}
+          </MenuItem>
+        ))}
       </Menu>
     </React.Fragment>
   );
-}
+}

redaktions-app/src/components/MainMenu.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useState } from "react";
+import React, { ReactElement } from "react";
 import { createStyles, IconButton } from "@material-ui/core";
 import { makeStyles, Theme } from "@material-ui/core/styles";
 import Drawer from "@material-ui/core/Drawer";

redaktions-app/src/components/PersonCard.tsx

@@ -1,17 +1,13 @@
 import {
   Avatar,
-  Card,
-  CardActionArea,
-  CardHeader,
   Paper,
-  Typography,
-  IconButton,
+  Typography
 } 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";
+import ChangeRole from "./ChangeRole";
+import { UppercaseUserRole } from "../jwt/jwt";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -26,18 +22,17 @@ const useStyles = makeStyles((theme) => ({
   },
   title: {
     marginLeft: theme.spacing(1),
-    width: '100%',
+    width: "100%",
   },
   editButton: {
     margin: theme.spacing(1),
-  }
-
+  },
 }));
 
 interface PersonCardProps {
   firstName: string;
   lastName: string;
-  userRole: UserRole;
+  userRole: UppercaseUserRole;
 }
 
 export default function PersonCard(props: PersonCardProps): React.ReactElement {
@@ -57,7 +52,6 @@ export default function PersonCard(props: PersonCardProps): React.ReactElement {
       </Avatar>
       <Typography className={classes.title}>{fullName}</Typography>
       <ChangeRole currentRole={userRole} />
-      
     </Paper>
   );
-}
+}

redaktions-app/src/jwt/jwt.ts

@@ -1,6 +1,12 @@
 import { client } from "../backend/helper";
 
 type Claim = "role" | "person_row_id" | "exp" | "iat" | "aud" | "iss";
+
+export type UppercaseUserRole =
+  | "CANDYMAT_PERSON"
+  | "CANDYMAT_EDITOR"
+  | "CANDYMAT_CANDIDATE";
+
 export type UserRole =
   | "candymat_editor"
   | "candymat_candidate"
@@ -16,6 +22,13 @@ export interface JwtPayload {
 }
 
 const CLAIMS: Claim[] = ["role", "person_row_id", "exp", "iat", "aud", "iss"];
+
+export const UPPERCASE_USER_ROLES: UppercaseUserRole[] = [
+  "CANDYMAT_PERSON",
+  "CANDYMAT_EDITOR",
+  "CANDYMAT_CANDIDATE",
+];
+
 export const USER_ROLES: UserRole[] = [
   "candymat_editor",
   "candymat_candidate",