From 36348aa5749e699b4153bef94a55bcd3ab67288a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafael=20L=C3=A1szl=C3=B3?= <rlacko99@gmail.com>
Date: Sun, 13 Dec 2020 20:20:52 +0100
Subject: [PATCH] initial member edit dialog
---
.../components/admin/GroupAdminContent.tsx | 2 +
.../components/admin/group/GroupMembers.tsx | 153 +++++++++++-------
server/src/entity/User.ts | 1 -
3 files changed, 100 insertions(+), 56 deletions(-)
diff --git a/client/src/components/admin/GroupAdminContent.tsx b/client/src/components/admin/GroupAdminContent.tsx
index 5afbc64..adf84d7 100644
--- a/client/src/components/admin/GroupAdminContent.tsx
+++ b/client/src/components/admin/GroupAdminContent.tsx
@@ -53,6 +53,8 @@ export const GroupAdminContent: React.FC<RouteComponentProps<TParams>> = ({ matc
if (groupDataIsLoading) return <Loader />;
+ if (!groupData) return <>There was an error</>;
+
return (
<Switch>
<Route path={`${match.url}/members`}>
diff --git a/client/src/components/admin/group/GroupMembers.tsx b/client/src/components/admin/group/GroupMembers.tsx
index 4aa5408..3df9053 100644
--- a/client/src/components/admin/group/GroupMembers.tsx
+++ b/client/src/components/admin/group/GroupMembers.tsx
@@ -1,4 +1,14 @@
-import { Box, IconButton, Tooltip, Typography } from '@material-ui/core';
+import {
+ Box,
+ Button,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ IconButton,
+ Tooltip,
+ Typography,
+} from '@material-ui/core';
import { Group, Member } from '../../../types/graphqlSchema';
import { IListGroupMembers, listGroupMembers } from '../../../graphql/queries/group/listGroupMembers';
@@ -12,13 +22,16 @@ import { useQuery } from '@apollo/client';
interface IGroupMembersTable extends Partial<Member> {
name: string;
membership: string;
+ userId: number;
}
const convertResponseToTable = (rows: Partial<Member>[] | undefined): Partial<IGroupMembersTable>[] => {
if (!rows) return [];
return rows.map((o) => ({
+ ...o,
name: `${o.user?.familyName} ${o.user?.givenName}`,
membership: getMemberStateString({ memberState: o.memberState, groupRole: o.groupRole }),
+ userId: Number(o.user?.id),
}));
};
@@ -28,71 +41,101 @@ interface TParams {
}
export const GroupMembers: React.FC<TParams> = ({ group, filterBy }) => {
- console.log(filterBy);
+ const [openDialog, setopenDialog] = React.useState(false);
+ const [editedUser, setEditedUser] = React.useState<Partial<Member>>();
const { loading: membersIsLoading, data: members } = useQuery<IListGroupMembers>(
- listGroupMembers(`user { familyName, givenName }, memberState, groupRole`),
+ listGroupMembers(`user { familyName, givenName, id }, memberState, groupRole`),
{
variables: { groupId: Number(group?.id) },
},
);
+ const handleDialogOpen = (member: Partial<Member>) => {
+ console.log(member);
+ setEditedUser(member);
+ setopenDialog(true);
+ };
+
+ const handleDialogClose = () => {
+ setopenDialog(false);
+ };
+
return (
- <CardTable<Partial<IGroupMembersTable>>
- columns={[
- {
- title: 'Név',
- field: 'name',
- },
- {
- title: 'Tagság',
- field: 'membership',
- align: 'right',
- customSort: (rowData1, rowData2) => {
- if (!rowData1.membership || !rowData2.membership) {
+ <div>
+ <CardTable<Partial<IGroupMembersTable>>
+ columns={[
+ {
+ title: 'Név',
+ field: 'name',
+ },
+ {
+ title: 'Tagság',
+ field: 'membership',
+ align: 'right',
+ customSort: (rowData1, rowData2) => {
+ if (!rowData1.membership || !rowData2.membership) {
+ return 0;
+ }
+ const str1 = rowData1.membership;
+ const str2 = rowData2.membership;
+ if (str1 < str2) return -1;
+ if (str1 > str2) return 1;
return 0;
- }
- const str1 = rowData1.membership;
- const str2 = rowData2.membership;
- if (str1 < str2) return -1;
- if (str1 > str2) return 1;
- return 0;
+ },
},
- },
- {
- align: 'left',
- render: function renderEditIcon(rowData) {
- return (
- <Tooltip title="Szerkesztés" aria-label="group-administration">
- <IconButton
- onClick={() => alert('Not implemented ' + rowData.name)}
- color="secondary"
- style={{ padding: '8px' }}
- >
- <CreateIcon />
- </IconButton>
- </Tooltip>
- );
+ {
+ align: 'left',
+ render: function renderEditIcon(rowData) {
+ return (
+ <Tooltip title="Szerkesztés" aria-label="group-administration">
+ <IconButton onClick={() => handleDialogOpen(rowData)} color="secondary" style={{ padding: '8px' }}>
+ <CreateIcon />
+ </IconButton>
+ </Tooltip>
+ );
+ },
+ width: '8px',
},
- width: '8px',
- },
- ]}
- data={convertResponseToTable(members?.group.members)}
- isLoading={membersIsLoading}
- title={
- <Box display="flex" alignItems="center">
- <PeopleIcon />
- <Typography variant="h5" style={{ marginLeft: '0.8rem' }}>
- Tagok
+ ]}
+ data={convertResponseToTable(members?.group.members)}
+ isLoading={membersIsLoading}
+ title={
+ <Box display="flex" alignItems="center">
+ <PeopleIcon />
+ <Typography variant="h5" style={{ marginLeft: '0.8rem' }}>
+ Tagok
+ </Typography>
+ </Box>
+ }
+ options={{
+ search: true,
+ rowStyle: { fontFamily: 'Roboto' },
+ emptyRowsWhenPaging: false,
+ searchText: filterBy || '',
+ }}
+ />
+ <Dialog
+ open={openDialog}
+ onClose={handleDialogClose}
+ aria-labelledby="edit-user"
+ aria-describedby="modal-to-edit-user"
+ >
+ <DialogTitle id="edit-user-dialog-title">Felhasználó szerkesztése</DialogTitle>
+ <DialogContent>
+ <Typography>
+ Neve: {editedUser?.user?.familyName} {editedUser?.user?.givenName}
</Typography>
- </Box>
- }
- options={{
- search: true,
- rowStyle: { fontFamily: 'Roboto' },
- emptyRowsWhenPaging: false,
- searchText: filterBy || '',
- }}
- />
+ </DialogContent>
+ <DialogActions>
+ <Button onClick={handleDialogClose} color="primary">
+ Mentés
+ </Button>
+ <Button onClick={handleDialogClose} color="primary">
+ Mégse
+ </Button>
+ </DialogActions>
+ </Dialog>
+ </div>
);
};
diff --git a/server/src/entity/User.ts b/server/src/entity/User.ts
index 6b5fc41..330c8d0 100644
--- a/server/src/entity/User.ts
+++ b/server/src/entity/User.ts
@@ -24,7 +24,6 @@ import { MemberState } from "./MemberState";
@Entity({ name: "users" })
export class User extends BaseEntity {
@Authorized()
- @UseMiddleware(isOwnUserField)
@Field((returns) => ID)
@PrimaryGeneratedColumn()
id!: number;
--
GitLab