changeRole implemented in UserManagement
This commit is contained in:
parent
4a2ba8406d
commit
1779be2b39
|
@ -1 +1 @@
|
||||||
Subproject commit d414b95c1c664adcd5149aee8eac4436b40d7dfb
|
Subproject commit 4e290449cb4b5821f5542d1ea6a9a629b99e6aa3
|
|
@ -2,7 +2,7 @@ import { gql } from "@apollo/client";
|
||||||
import { UppercaseUserRole } from "../../jwt/jwt";
|
import { UppercaseUserRole } from "../../jwt/jwt";
|
||||||
import { BasicPersonFragment, BasicPersonResponse } from "../queries/person";
|
import { BasicPersonFragment, BasicPersonResponse } from "../queries/person";
|
||||||
|
|
||||||
export const ChangeRole = gql`
|
export const CHANGE_ROLE = gql`
|
||||||
mutation ChangeRole($personRowId: Int!, $newRole: Role!) {
|
mutation ChangeRole($personRowId: Int!, $newRole: Role!) {
|
||||||
changeRole(input: { personRowId: $personRowId, newRole: $newRole }) {
|
changeRole(input: { personRowId: $personRowId, newRole: $newRole }) {
|
||||||
person {
|
person {
|
||||||
|
|
|
@ -3,9 +3,16 @@ import { IconButton, MenuItem } from "@material-ui/core";
|
||||||
import Menu from "@material-ui/core/Menu";
|
import Menu from "@material-ui/core/Menu";
|
||||||
import EditIcon from "@material-ui/icons/Edit";
|
import EditIcon from "@material-ui/icons/Edit";
|
||||||
import { UppercaseUserRole, UPPERCASE_USER_ROLES } from "../jwt/jwt";
|
import { UppercaseUserRole, UPPERCASE_USER_ROLES } from "../jwt/jwt";
|
||||||
|
import { useMutation } from "@apollo/client";
|
||||||
|
import {
|
||||||
|
ChangeRoleResponse,
|
||||||
|
ChangeRoleVariables,
|
||||||
|
CHANGE_ROLE,
|
||||||
|
} from "../backend/mutations/userRole";
|
||||||
|
|
||||||
interface ChangeRoleProps {
|
interface ChangeRoleProps {
|
||||||
currentRole: UppercaseUserRole;
|
currentRole: UppercaseUserRole;
|
||||||
|
currentUserRowId: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function ChangeRole(props: ChangeRoleProps): React.ReactElement {
|
export default function ChangeRole(props: ChangeRoleProps): React.ReactElement {
|
||||||
|
@ -22,12 +29,18 @@ export default function ChangeRole(props: ChangeRoleProps): React.ReactElement {
|
||||||
const handleClose = () => {
|
const handleClose = () => {
|
||||||
setAnchorEl(null);
|
setAnchorEl(null);
|
||||||
};
|
};
|
||||||
|
const [changeRole] = useMutation<ChangeRoleResponse, ChangeRoleVariables>(
|
||||||
function changeRole(role: UppercaseUserRole) {
|
CHANGE_ROLE,
|
||||||
console.log("Role Selected: ", role);
|
{
|
||||||
alert("Die Rolle wurde geändert in: " + role);
|
onCompleted() {
|
||||||
handleClose();
|
console.log("Role changed");
|
||||||
}
|
},
|
||||||
|
onError(e) {
|
||||||
|
console.error(e);
|
||||||
|
handleClose();
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
const displayRole = (role: UppercaseUserRole) => {
|
const displayRole = (role: UppercaseUserRole) => {
|
||||||
switch (role) {
|
switch (role) {
|
||||||
|
@ -69,7 +82,12 @@ export default function ChangeRole(props: ChangeRoleProps): React.ReactElement {
|
||||||
<MenuItem
|
<MenuItem
|
||||||
key={role}
|
key={role}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
changeRole(role);
|
changeRole({
|
||||||
|
variables: {
|
||||||
|
personRowId: props.currentUserRowId,
|
||||||
|
newRole: role,
|
||||||
|
},
|
||||||
|
});
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{displayRole(role)}
|
{displayRole(role)}
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import { Avatar, Paper, Typography } from "@material-ui/core";
|
import { Avatar, Paper, Typography } from "@material-ui/core";
|
||||||
import EditIcon from "@material-ui/icons/Edit";
|
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { makeStyles } from "@material-ui/core/styles";
|
import { makeStyles } from "@material-ui/core/styles";
|
||||||
import ChangeRole from "./ChangeRole";
|
import ChangeRole from "./ChangeRole";
|
||||||
|
@ -29,11 +28,13 @@ interface PersonCardProps {
|
||||||
firstName: string;
|
firstName: string;
|
||||||
lastName: string;
|
lastName: string;
|
||||||
userRole: UppercaseUserRole;
|
userRole: UppercaseUserRole;
|
||||||
|
userRowId: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function PersonCard(props: PersonCardProps): React.ReactElement {
|
export default function PersonCard(props: PersonCardProps): React.ReactElement {
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
const userRole = props.userRole;
|
const userRole = props.userRole;
|
||||||
|
const currentUserRowId = props.userRowId;
|
||||||
const getInitials = (): string => {
|
const getInitials = (): string => {
|
||||||
const initials =
|
const initials =
|
||||||
(props.firstName.charAt(0) || "") + (props.lastName.charAt(0) || "");
|
(props.firstName.charAt(0) || "") + (props.lastName.charAt(0) || "");
|
||||||
|
@ -47,7 +48,7 @@ export default function PersonCard(props: PersonCardProps): React.ReactElement {
|
||||||
{getInitials()}
|
{getInitials()}
|
||||||
</Avatar>
|
</Avatar>
|
||||||
<Typography className={classes.title}>{fullName}</Typography>
|
<Typography className={classes.title}>{fullName}</Typography>
|
||||||
<ChangeRole currentRole={userRole} />
|
<ChangeRole currentUserRowId={currentUserRowId} currentRole={userRole} />
|
||||||
</Paper>
|
</Paper>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
62
redaktions-app/src/components/ProfileManagement.tsx
Normal file
62
redaktions-app/src/components/ProfileManagement.tsx
Normal file
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
|
@ -32,6 +32,7 @@ export function UserManagement(): React.ReactElement {
|
||||||
firstName={person.firstName || ""}
|
firstName={person.firstName || ""}
|
||||||
lastName={person.lastName || ""}
|
lastName={person.lastName || ""}
|
||||||
userRole={person.role}
|
userRole={person.role}
|
||||||
|
userRowId={person.rowId}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue