Revize cd2f7b19

Basic table

Basic table that shows tags

webapp/pages/tags/index.tsx

@@ -1 +1 @@
 import 'antd/dist/antd.css';
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 
 import { useUnauthRedirect } from '../../hooks';
 import { useRouter } from 'next/router';
@@ -8 +8 @@
 import { faTags } from '@fortawesome/free-solid-svg-icons';
 import { LoggedUserContext } from '../../contexts/LoggedUserContext';
 import { MainLayout } from '../../layouts/MainLayout';
+import { Container, Row } from 'react-bootstrap';
+import { Table } from 'antd';
+import { tagController } from '../../controllers';
 
 function TagsPage() {
     const redirecting = useUnauthRedirect('/login');
     const { logout, role } = useContext(LoggedUserContext);
     const router = useRouter();
 
+    const [tagData, setTagData] = useState<any[] | undefined>([]);
+
     useEffect(() => {
         if (!redirecting && role === 'ADMINISTRATOR') {
-            // TODO load tags
+            tagController.tagsGet().then((tagTree) => {
+                if (typeof tagTree.data.tagCategories != 'undefined') {
+                    let data = tagTree.data.tagCategories?.map((catInfo) => {
+                        return {
+                            key: catInfo.id,
+                            name: catInfo.name,
+                            description: catInfo.description,
+                            color: catInfo.color,
+                            ...(catInfo.tags?.length && {
+                                children: catInfo.tags?.map((tagInfo) => {
+                                    return {
+                                        key: tagInfo.id,
+                                        name: tagInfo.name,
+                                        description: tagInfo.description,
+                                        color: tagInfo.color,
+                                        ...(tagInfo.subTags?.length && {
+                                            children: tagInfo.subTags?.map((subInfo) => {
+                                                return {
+                                                    key: subInfo.id,
+                                                    name: subInfo.name,
+                                                    description: subInfo.description,
+                                                };
+                                            }),
+                                        }),
+                                    };
+                                }),
+                            }),
+                        };
+                    });
+
+                    setTagData(data);
+                }
+            });
         }
     }, [logout, redirecting, role, router]);
 
+    const columns = [
+        { title: 'Název', dataIndex: 'name', key: 'name' },
+        { title: 'Barva', dataIndex: 'color', key: 'color' },
+        { title: 'Popis', dataIndex: 'description', key: 'description' },
+    ];
+
     return redirecting || role !== 'ADMINISTRATOR' ? null : (
         <MainLayout>
-            <Typography.Title level={2}>
-                <FontAwesomeIcon icon={faTags} /> Značky
-            </Typography.Title>
+            <Container>
+                <Row>
+                    <Typography.Title level={2}>
+                        <FontAwesomeIcon icon={faTags} /> Značky
+                    </Typography.Title>
+                </Row>
+                <Row>
+                    <Table
+                        columns={columns}
+                        dataSource={tagData}
+                        scroll={{ y: 'calc(100vh - 300px)' }}
+                    />
+                </Row>
+            </Container>
         </MainLayout>
     );
 }