aswi20220x00-gitlab/webapp/pages/tags/index.tsx @ 3da573e6

import 'antd/dist/antd.css';
import React, { useContext, useEffect, useState } from 'react';

import { useUnauthRedirect } from '../../hooks';
import { useRouter } from 'next/router';
import { Typography } from 'antd';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
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') {
            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>
            <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>
    );
}

export default TagsPage;