List items

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

-import { Group } from '../../../types/graphqlSchema';
+import { Box, Typography } from '@material-ui/core';
+import { Group, Item } from '../../../types/graphqlSchema';
+import { IListGroupItems, listGroupItems } from '../../../graphql/queries/group/listGroupItems';
+
+import { CardTable } from '../../utils/CardTable';
+import ListAltIcon from '@material-ui/icons/ListAlt';
 import React from 'react';
+import { useQuery } from '@apollo/client';
+
+interface IGroupItemsTable extends Partial<Item> {
+  containerName: string;
+  isLostString: string;
+}
+
+const convertResponseToTable = (rows: Partial<Item>[] | undefined): Partial<IGroupItemsTable>[] => {
+  if (!rows) return [];
+  return rows.map((o) => ({
+    ...o,
+    containerName: o.container?.name,
+    isLostString: o.isLost ? 'Igen' : 'Nem',
+  }));
+};
 
 interface TParams {
   group: Partial<Group> | undefined;
 }
 
 export const GroupItems: React.FC<TParams> = ({ group }) => {
-  console.log(group?.id);
-  return <>items</>;
+  const { loading: itemsIsLoading, data: items } = useQuery<IListGroupItems>(
+    listGroupItems(`id, name, container { name }, isLost`),
+    {
+      variables: { groupId: Number(group?.id) },
+    },
+  );
+
+  return (
+    <CardTable<Partial<IGroupItemsTable>>
+      columns={[
+        {
+          title: 'Név',
+          field: 'name',
+        },
+        {
+          title: 'Raktár',
+          field: 'containerName',
+        },
+        {
+          title: 'Elveszett?',
+          field: 'isLostString',
+          width: '8px',
+        },
+      ]}
+      data={convertResponseToTable(items?.group.items)}
+      isLoading={itemsIsLoading}
+      title={
+        <Box display="flex" alignItems="center">
+          <ListAltIcon />
+          <Typography variant="h5" style={{ marginLeft: '0.8rem' }}>
+            Tárgyak
+          </Typography>
+        </Box>
+      }
+      options={{
+        search: true,
+        rowStyle: { fontFamily: 'Roboto' },
+        emptyRowsWhenPaging: false,
+      }}
+    />
+  );
 };

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

@@ -52,7 +52,6 @@ export const GroupMembers: React.FC<TParams> = ({ group, filterBy }) => {
   );
 
   const handleDialogOpen = (member: Partial<Member>) => {
-    console.log(member);
     setEditedUser(member);
     setopenDialog(true);
   };

client/src/graphql/queries/group/listGroupItems.tsx

+import { DocumentNode } from 'graphql';
+import { Item } from '../../../types/graphqlSchema';
+import gql from 'graphql-tag';
+
+// Query
+export const listGroupItems = (fields: string): DocumentNode => {
+  return gql`
+    query listGroupMembers($groupId: Int!) {
+      group(id: $groupId) {
+        items {
+          ${fields}
+        }
+      }
+    }
+  `;
+};
+
+// Returned data
+export interface IListGroupItems {
+  group: {
+    items: Partial<Item>[];
+  };
+}