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