List Storages

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

-import { Group } from '../../../types/graphqlSchema';
+import { Box, Typography } from '@material-ui/core';
+import { Group, Storage } from '../../../types/graphqlSchema';
+import { IListGroupStorages, listGroupStorages } from '../../../graphql/queries/group/listGroupStorages';
+
+import { CardTable } from '../../utils/CardTable';
 import React from 'react';
+import StorageIcon from '@material-ui/icons/Storage';
+import { convertResponseToTable } from '../../../utils/convertResponseToTable';
+import { useQuery } from '@apollo/client';
 
 interface TParams {
   group: Partial<Group> | undefined;
 }
-
 export const GroupStorages: React.FC<TParams> = ({ group }) => {
-  console.log(group?.id);
-  return <>storages</>;
+  const { loading: storagesIsLoading, data: storages } = useQuery<IListGroupStorages>(
+    listGroupStorages(`id, name, location`),
+    {
+      variables: { groupId: Number(group?.id) },
+    },
+  );
+
+  return (
+    <CardTable<Partial<Storage>>
+      columns={[
+        {
+          title: 'Név',
+          field: 'name',
+        },
+        {
+          title: 'Hely',
+          field: 'location',
+        },
+      ]}
+      data={convertResponseToTable<Storage>(storages?.group.storages)}
+      isLoading={storagesIsLoading}
+      title={
+        <Box display="flex" alignItems="center">
+          <StorageIcon />
+          <Typography variant="h5" style={{ marginLeft: '0.8rem' }}>
+            Leltárak
+          </Typography>
+        </Box>
+      }
+      options={{
+        search: true,
+        rowStyle: { fontFamily: 'Roboto' },
+        emptyRowsWhenPaging: false,
+      }}
+    />
+  );
 };

client/src/components/group/GroupsTable.tsx

@@ -46,7 +46,7 @@ export const GroupsTable: React.FC = () => {
           },
         },
       ]}
-      data={convertResponseToTable(groups?.groups)}
+      data={convertResponseToTable<Group>(groups?.groups)}
       isLoading={groupsIsLoading}
       title={
         <Box display="flex" alignItems="center">

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

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

client/src/utils/convertResponseToTable.tsx

-import { Group } from '../types/graphqlSchema';
-
-export const convertResponseToTable = (rows: Partial<Group>[] | undefined): Partial<Group>[] => {
+export const convertResponseToTable = <T,>(rows: Partial<T>[] | undefined): Partial<T>[] => {
   if (!rows) return [];
   return rows.map((o) => ({ ...o }));
 };