Group Members list

client/src/components/admin/group/GroupMembers.tsx

-import { Group } from '../../../types/graphqlSchema';
+import { Box, IconButton, Tooltip, Typography } from '@material-ui/core';
+import { Group, Member } from '../../../types/graphqlSchema';
+import { IListGroupMembers, listGroupMembers } from '../../../graphql/queries/group/listGroupMembers';
+
+import { CardTable } from '../../utils/CardTable';
+import CreateIcon from '@material-ui/icons/Create';
+import PeopleIcon from '@material-ui/icons/People';
 import React from 'react';
+import { getMemberStateString } from '../../../utils/getMemberStateString';
+import { useQuery } from '@apollo/client';
+
+interface IGroupMembersTable extends Partial<Member> {
+  name: string;
+  membership: Partial<Member>;
+}
+
+const convertResponseToTable = (rows: Partial<Member>[] | undefined): Partial<IGroupMembersTable>[] => {
+  if (!rows) return [];
+  return rows.map((o) => ({
+    name: `${o.user?.familyName} ${o.user?.givenName}`,
+    membership: { groupRole: o.groupRole, memberState: o.memberState },
+  }));
+};
 
 interface TParams {
   group: Partial<Group> | undefined;
@@ -7,6 +28,76 @@ interface TParams {
 }
 
 export const GroupMembers: React.FC<TParams> = ({ group, filterBy }) => {
-  console.log(group?.id);
-  return <>filtered role = {filterBy || 'none'}</>;
+  console.log(filterBy);
+
+  const { loading: membersIsLoading, data: members } = useQuery<IListGroupMembers>(
+    listGroupMembers(`user { familyName, givenName }, memberState, groupRole`),
+    {
+      variables: { groupId: Number(group?.id) },
+    },
+  );
+
+  return (
+    <CardTable<Partial<IGroupMembersTable>>
+      columns={[
+        {
+          title: 'Név',
+          field: 'name',
+        },
+        {
+          title: 'Tagság',
+          field: 'membership',
+          align: 'right',
+          render: function renderMembership(rowData) {
+            if (!rowData.membership) {
+              return '';
+            }
+            return getMemberStateString(rowData.membership);
+          },
+          customSort: (rowData1, rowData2) => {
+            if (!rowData1.membership || !rowData2.membership) {
+              return 0;
+            }
+            const str1 = getMemberStateString(rowData1.membership);
+            const str2 = getMemberStateString(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>
+            );
+          },
+          width: '8px',
+        },
+      ]}
+      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,
+      }}
+    />
+  );
 };