changeRole implemented in UserManagement

candymat-user-app

@@ -1 +1 @@
-Subproject commit d414b95c1c664adcd5149aee8eac4436b40d7dfb
+Subproject commit 4e290449cb4b5821f5542d1ea6a9a629b99e6aa3

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

@@ -2,7 +2,7 @@ import { gql } from "@apollo/client";
 import { UppercaseUserRole } from "../../jwt/jwt";
 import { BasicPersonFragment, BasicPersonResponse } from "../queries/person";
 
-export const ChangeRole = gql`
+export const CHANGE_ROLE = gql`
   mutation ChangeRole($personRowId: Int!, $newRole: Role!) {
     changeRole(input: { personRowId: $personRowId, newRole: $newRole }) {
       person {

redaktions-app/src/components/ChangeRole.tsx

@@ -3,9 +3,16 @@ import { IconButton, MenuItem } from "@material-ui/core";
 import Menu from "@material-ui/core/Menu";
 import EditIcon from "@material-ui/icons/Edit";
 import { UppercaseUserRole, UPPERCASE_USER_ROLES } from "../jwt/jwt";
+import { useMutation } from "@apollo/client";
+import {
+  ChangeRoleResponse,
+  ChangeRoleVariables,
+  CHANGE_ROLE,
+} from "../backend/mutations/userRole";
 
 interface ChangeRoleProps {
   currentRole: UppercaseUserRole;
+  currentUserRowId: number;
 }
 
 export default function ChangeRole(props: ChangeRoleProps): React.ReactElement {
@@ -22,12 +29,18 @@ export default function ChangeRole(props: ChangeRoleProps): React.ReactElement {
   const handleClose = () => {
     setAnchorEl(null);
   };
-
-  function changeRole(role: UppercaseUserRole) {
-    console.log("Role Selected: ", role);
-    alert("Die Rolle wurde geändert in: " + role);
-    handleClose();
-  }
+  const [changeRole] = useMutation<ChangeRoleResponse, ChangeRoleVariables>(
+    CHANGE_ROLE,
+    {
+      onCompleted() {
+        console.log("Role changed");
+      },
+      onError(e) {
+        console.error(e);
+        handleClose();
+      },
+    }
+  );
 
   const displayRole = (role: UppercaseUserRole) => {
     switch (role) {
@@ -69,7 +82,12 @@ export default function ChangeRole(props: ChangeRoleProps): React.ReactElement {
           <MenuItem
             key={role}
             onClick={() => {
-              changeRole(role);
+              changeRole({
+                variables: {
+                  personRowId: props.currentUserRowId,
+                  newRole: role,
+                },
+              });
             }}
           >
             {displayRole(role)}

redaktions-app/src/components/PersonCard.tsx

@@ -1,5 +1,4 @@
 import { Avatar, Paper, 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";
@@ -29,11 +28,13 @@ interface PersonCardProps {
   firstName: string;
   lastName: string;
   userRole: UppercaseUserRole;
+  userRowId: number;
 }
 
 export default function PersonCard(props: PersonCardProps): React.ReactElement {
   const classes = useStyles();
   const userRole = props.userRole;
+  const currentUserRowId = props.userRowId;
   const getInitials = (): string => {
     const initials =
       (props.firstName.charAt(0) || "") + (props.lastName.charAt(0) || "");
@@ -47,7 +48,7 @@ export default function PersonCard(props: PersonCardProps): React.ReactElement {
         {getInitials()}
       </Avatar>
       <Typography className={classes.title}>{fullName}</Typography>
-      <ChangeRole currentRole={userRole} />
+      <ChangeRole currentUserRowId={currentUserRowId} currentRole={userRole} />
     </Paper>
   );
 }

redaktions-app/src/components/ProfileManagement.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { Paper, Typography } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+import PersonCard from "./PersonCard";
+import { useQuery } from "@apollo/client";
+import {
+  BasicPersonResponse,
+  GET_PERSONS_SORTED_BY_ROLE,
+  GetPersonsSortedByRoleResponse,
+} from "../backend/queries/person";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: "100%",
+    padding: theme.spacing(1),
+    marginBottom: theme.spacing(3),
+  },
+}));
+
+export function ProfileManagement(): React.ReactElement {
+  const classes = useStyles();
+  const persons = useQuery<GetPersonsSortedByRoleResponse>(
+    GET_PERSONS_SORTED_BY_ROLE
+  ).data;
+
+  const convertPersonNodeToPersonCard = (
+    person: BasicPersonResponse
+  ): JSX.Element => {
+    return (
+      <PersonCard
+        key={person.id}
+        firstName={person.firstName || ""}
+        lastName={person.lastName || ""}
+        userRole={person.role}
+        userRowId={person.rowId}
+      />
+    );
+  };
+
+  return (
+    <div>
+      <Paper className={classes.root}>
+        <Typography component={"h2"} variant="h6" color="primary" gutterBottom>
+          Ertellen Sie hier ihr Profil
+        </Typography>
+        {persons?.editors.nodes.map(convertPersonNodeToPersonCard)}
+      </Paper>
+      <Paper className={classes.root}>
+        <Typography component={"h2"} variant="h6" color="primary" gutterBottom>
+          KandidatInnen
+        </Typography>
+        {persons?.candidates.nodes.map(convertPersonNodeToPersonCard)}
+      </Paper>
+      <Paper className={classes.root}>
+        <Typography component={"h2"} variant="h6" color="primary" gutterBottom>
+          Andere registrierte Personen
+        </Typography>
+        {persons?.users.nodes.map(convertPersonNodeToPersonCard)}
+      </Paper>
+    </div>
+  );
+}

redaktions-app/src/components/UserManagement.tsx

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