From 109a1947e0ca8d099de8a5ccaa1faf69c2962d75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafael=20L=C3=A1szl=C3=B3?= <rlacko99@gmail.com> Date: Mon, 30 Nov 2020 19:12:16 +0100 Subject: [PATCH] display admins in group details --- client/src/components/group/GroupInfo.tsx | 81 +++++++++++++++-------- 1 file changed, 54 insertions(+), 27 deletions(-) diff --git a/client/src/components/group/GroupInfo.tsx b/client/src/components/group/GroupInfo.tsx index ac63a12..3f9c380 100644 --- a/client/src/components/group/GroupInfo.tsx +++ b/client/src/components/group/GroupInfo.tsx @@ -2,6 +2,7 @@ import { Box, Card, CardContent, + Grid, Table, TableBody, TableCell, @@ -12,12 +13,17 @@ import { } from '@material-ui/core'; import { IgetGroupById, getGroupById } from '../../graphql/queries/group/getGroupById'; +import { CardTable } from '../utils/CardTable'; import { Loading } from '../utils/Loading'; import React from 'react'; import { RouteComponentProps } from 'react-router-dom'; import { StyledLink } from '../utils/StyledLink'; import { useQuery } from '@apollo/client'; +interface ITableRow { + name: string; +} + const TableRowWithData: React.FC<{ field: string; value?: string | number }> = ({ field, value = '-' }) => { return ( <TableRow> @@ -61,33 +67,54 @@ export const GroupInfo: React.FC<RouteComponentProps<TParams>> = ({ match }) => {groupData?.group.name} Csoport </Typography> </Box> - <Card> - <CardContent style={{ padding: 0 }}> - <Loading isLoading={groupDataIsLoading}> - <Table aria-label="simple table"> - <TableHead> - <TableRow> - <TableCell> - <Box display="flex" justifyContent="space-between" alignItems="center"> - <Typography variant="h6">Adatok</Typography> - {/* TODO: Apply */} - <StyledLink to={`/group/${match.params.id}/admin`} style={{ color: theme.palette.primary.dark }}> - Adminisztráció - </StyledLink> - </Box> - </TableCell> - </TableRow> - </TableHead> - <TableBody> - <TableRowWithData field="Leírás" value={groupData?.group.description} /> - <TableRowWithData field="Tagok" value={groupData?.group.memberNum + ' fő'} /> - <TableRowWithData field="Leltárak" value={groupData?.group.storageNum + ' db'} /> - <TableRowWithData field="Tárgyak" value={groupData?.group.itemNum + ' db'} /> - </TableBody> - </Table> - </Loading> - </CardContent> - </Card> + <Grid container spacing={1}> + <Grid item xs={12} md={6}> + <Card> + <CardContent style={{ padding: 0 }}> + <Loading isLoading={groupDataIsLoading}> + <Table aria-label="simple table"> + <TableHead> + <TableRow> + <TableCell> + <Box display="flex" justifyContent="space-between" alignItems="center" pl="8px"> + <Typography variant="h6">Adatok</Typography> + {/* TODO: Apply */} + <StyledLink + to={`/group/${match.params.id}/admin`} + style={{ color: theme.palette.primary.dark }} + > + Adminisztráció + </StyledLink> + </Box> + </TableCell> + </TableRow> + </TableHead> + <TableBody> + <TableRowWithData field="Leírás" value={groupData?.group.description} /> + <TableRowWithData field="Tagok" value={groupData?.group.memberNum + ' fő'} /> + <TableRowWithData field="Leltárak" value={groupData?.group.storageNum + ' db'} /> + <TableRowWithData field="Tárgyak" value={groupData?.group.itemNum + ' db'} /> + </TableBody> + </Table> + </Loading> + </CardContent> + </Card> + </Grid> + {/* TODO get Admins */} + <Grid item xs={12} md={6}> + <CardTable<ITableRow> + columns={[ + { + title: 'Név', + field: 'name', + }, + ]} + data={[{ name: 'Admin guy' }]} + isLoading={false} + title={<Typography variant="h6">Adminok</Typography>} + /> + </Grid> + </Grid> </> ); }; -- GitLab