aswi20220x00-gitlab/webapp/pages/tags/index.tsx @ d0ed1dbf

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

import { useUnauthRedirect } from '../../hooks';
import { useRouter } from 'next/router';
import { Button, Checkbox, Popconfirm, Tooltip, 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, Stack } from 'react-bootstrap';
import { Table } from 'antd';
import { tagController } from '../../controllers';
import Search from 'antd/lib/input/Search';
import { DeleteOutlined, PlusOutlined, EditOutlined } from '@ant-design/icons';
import CategoryModal, {
    CategoryModalValues,
} from '../../components/modals/CategoryModal';
import TagModal, { TagModalValues } from '../../components/modals/TagModal';
import SubTagModal, { SubTagModalValues } from '../../components/modals/SubTagModal';

/**
 * Creates a tag management page.
 * @returns The tag management page.
 */
function TagsPage() {
    const redirecting = useUnauthRedirect('/login');
    const { logout, role } = useContext(LoggedUserContext);
    const router = useRouter();

    const [tagData, setTagData] = useState<any[] | null>([]);

    /**
     * Data in a table.
     */
    const [shownData, setShownData] = useState<any[] | undefined>([]);

    // States that says if modal windows should be shown.
    const [showAddCategoryModal, setShowAddCategoryModal] = useState(false);
    const [showEditCategoryModal, setShowEditCategoryModal] = useState(false);
    const [showAddTagModal, setShowAddTagModal] = useState(false);
    const [showEditTagModal, setShowEditTagModal] = useState(false);
    const [showAddSubTagModal, setShowAddSubTagModal] = useState(false);
    const [showEditSubTagModal, setShowEditSubTagModal] = useState(false);

    /**
     * Currently selected record in a table.
     */
    const [selectedRecord, setSelectedRecord] = useState({
        key: '',
        name: '',
        description: '',
        color: '',
        disabledForAnnotators: false,
    });

    /**
     * Loads data on start.
     */
    useEffect(() => {
        if (!redirecting && role === 'ADMINISTRATOR') {
            loadData();
        }
    }, [logout, redirecting, role, router]);

    /**
     * Definition of columns of a table.
     */
    const columns = [
        { title: 'Název', dataIndex: 'name', key: 'name' },
        {
            title: 'Barva',
            dataIndex: 'color',
            key: 'color',
            width: 75,
            render: (
                columnData: string | null | undefined,
                record: any,
                index: number
            ) => {
                if (columnData) return <input type="color" value={columnData} disabled />;
            },
        },
        {
            title: 'Skrýt pro anotátory',
            dataIndex: 'disabledForAnnotators',
            key: 'disabledForAnnotators',
            width: 150,
            render: (columnData: boolean | undefined, record: any, index: number) =>
                columnData !== undefined && <Checkbox checked={columnData} disabled />,
        },
        { title: 'Popis', dataIndex: 'description', key: 'description' },
        {
            title: '',
            dataIndex: 'operations',
            key: 'operations',
            width: 200,
            render: (text: any, record: any, index: number) => (
                <Stack direction="horizontal">
                    {record.depth < 2 && (
                        <Tooltip title="Přidat potomka">
                            <Button type="primary" onClick={addChild(record)}>
                                <PlusOutlined />
                            </Button>
                        </Tooltip>
                    )}
                    <Tooltip title="Upravit">
                        <Button type="text" onClick={editRecord(record)}>
                            <EditOutlined />
                        </Button>
                    </Tooltip>
                    <Popconfirm
                        title="Opravdu chcete smazat?"
                        onConfirm={deleteRecord(record)}
                    >
                        <Tooltip title="Odstranit">
                            <Button type="primary" danger>
                                <DeleteOutlined />
                            </Button>
                        </Tooltip>
                    </Popconfirm>
                </Stack>
            ),
        },
    ];

    // ------------------------------------ ADD CATEGORY MODAL -------------------------------------

    const openAddCategoryModal = () => {
        setShowAddCategoryModal(true);
    };

    const submitAddCategoryModal = (val: CategoryModalValues) => {
        tagController
            .categoriesPost({
                name: val.name,
                description: val.description,
                color: val.color,
                disabledForAnnotators: val.disabledForAnnotators,
            })
            .then(
                () => loadData(),
                (reason) => console.log(reason)
            );

        setShowAddCategoryModal(false);
    };

    const cancelAddCategoryModal = () => {
        setShowAddCategoryModal(false);
    };

    // --------------------------------------------------------------------------------------------

    // ------------------------------------ EDIT CATEGORY MODAL -----------------------------------

    const openEditCategoryModal = () => {
        setShowEditCategoryModal(true);
    };

    const submitEditCategoryModel = (val: CategoryModalValues) => {
        tagController
            .categoryCategoryIdPut(selectedRecord.key, {
                name: val.name,
                description: val.description,
                color: val.color,
                disabledForAnnotators: val.disabledForAnnotators,
            })
            .then(() => loadData());

        setShowEditCategoryModal(false);
    };

    const cancelEditCategoryModal = () => {
        setShowEditCategoryModal(false);
    };

    // --------------------------------------------------------------------------------------------

    // ------------------------------------ ADD TAG MODAL -------------------------------------

    const openAddTagModal = () => {
        setShowAddTagModal(true);
    };

    const submitAddTagModal = (val: TagModalValues) => {
        tagController
            .tagsPost({
                categoryId: selectedRecord.key,
                name: val.name,
                description: val.description,
                color: val.color,
            })
            .then(() => loadData());

        setShowAddTagModal(false);
    };

    const cancelAddTagModal = () => {
        setShowAddTagModal(false);
    };

    // --------------------------------------------------------------------------------------------

    // ------------------------------------ EDIT TAG MODAL -------------------------------------

    const openEditTagModal = () => {
        setShowEditTagModal(true);
    };

    const submitEditTagModal = (val: TagModalValues) => {
        tagController
            .tagTagIdPut(selectedRecord.key, {
                name: val.name,
                description: val.description,
                color: val.color,
            })
            .then(() => loadData());

        setShowEditTagModal(false);
    };

    const cancelEditTagModal = () => {
        setShowEditTagModal(false);
    };

    // --------------------------------------------------------------------------------------------

    // ------------------------------------ ADD SUB TAG MODAL -------------------------------------

    const openAddSubTagModal = () => {
        setShowAddSubTagModal(true);
    };

    const submitAddSubTagModal = (val: SubTagModalValues) => {
        tagController
            .subtagsPost({
                tagId: selectedRecord.key,
                name: val.name,
                description: val.description,
            })
            .then(() => loadData());

        setShowAddSubTagModal(false);
    };

    const cancelAddSubTagModal = () => {
        setShowAddSubTagModal(false);
    };

    // --------------------------------------------------------------------------------------------

    // ------------------------------------ EDIT SUB TAG MODAL -------------------------------------

    const openEditSubTagModal = () => {
        setShowEditSubTagModal(true);
    };

    const submitEditSubTagModal = (val: SubTagModalValues) => {
        tagController
            .subtagSubtagIdPut(selectedRecord.key, {
                name: val.name,
                description: val.description,
            })
            .then(() => loadData());

        setShowEditSubTagModal(false);
    };

    const cancelEditSubTagModal = () => {
        setShowEditSubTagModal(false);
    };

    // --------------------------------------------------------------------------------------------

    // ------------------------------------ RECORD OPERATIONS -------------------------------------

    const addChild = (record: any) => (e: any) => {
        setSelectedRecord(record);

        if (record.depth === 0) {
            openAddTagModal();
        } else if (record.depth === 1) {
            openAddSubTagModal();
        }
    };

    const editRecord = (record: any) => (e: any) => {
        setSelectedRecord(record);

        if (record.depth === 0) {
            openEditCategoryModal();
        } else if (record.depth === 1) {
            openEditTagModal();
        } else if (record.depth === 2) {
            openEditSubTagModal();
        }
    };

    const deleteRecord = (record: any) => (e: any) => {
        if (record.depth === 0) {
            tagController.categoryCategoryIdDelete(record.key).then(() => loadData());
        } else if (record.depth === 1) {
            tagController.tagTagIdDelete(record.key).then(() => loadData());
        } else if (record.depth === 2) {
            tagController.subtagSubtagIdDelete(record.key).then(() => loadData());
        }
    };

    // --------------------------------------------------------------------------------------------

    /**
     * Loads data from a server.
     */
    const loadData = () => {
        tagController.tagsGet().then((tagTree) => {
            if (typeof tagTree.data.tagCategories != 'undefined') {
                setTagData(tagTree.data.tagCategories);
                setShownData(mapData(tagTree.data.tagCategories));
            }
        });
    };

    const mapData = (data: any[] | null) => {
        return data?.map((catInfo) => {
            return {
                key: catInfo.id,
                name: catInfo.name,
                description: catInfo.description,
                color: catInfo.color,
                depth: 0,
                disabledForAnnotators: catInfo.disabledForAnnotators,
                ...(catInfo.tags?.length && {
                    children: catInfo.tags?.map((tagInfo: any) => {
                        return {
                            key: tagInfo.id,
                            name: tagInfo.name,
                            description: tagInfo.description,
                            color: tagInfo.color,
                            depth: 1,
                            ...(tagInfo.subTags?.length && {
                                children: tagInfo.subTags?.map((subInfo: any) => {
                                    return {
                                        key: subInfo.id,
                                        name: subInfo.name,
                                        description: subInfo.description,
                                        depth: 2,
                                    };
                                }),
                            }),
                        };
                    }),
                }),
            };
        });
    };

    /**
     * Searches given value in 'name' column in a table.
     * If the provided value is empty the method loads all data from a server.
     * @param value Value that is searched.
     */
    const searchTag = (value: string) => {
        let data = mapData(tagData);

        if (value) {
            data = data?.filter((category) => {
                category.children = category.children?.filter((tag: any) => {
                    tag.children = tag.children?.filter((subTag: any) =>
                        subTag.name.toLowerCase().includes(value.toLowerCase())
                    );

                    return (
                        tag.children?.length > 0 ||
                        tag.name.toLowerCase().includes(value.toLowerCase())
                    );
                });

                return (
                    category.children?.length > 0 ||
                    category.name.toLowerCase().includes(value.toLowerCase())
                );
            });
        }

        setShownData(data);
    };

    return redirecting || role !== 'ADMINISTRATOR' ? null : (
        <MainLayout>
            {showAddCategoryModal && (
                <CategoryModal
                    title="Vytvořit kategorii"
                    submitText="Přidat"
                    onCancel={cancelAddCategoryModal}
                    onSubmit={submitAddCategoryModal}
                />
            )}

            {showEditCategoryModal && (
                <CategoryModal
                    title="Editovat kategorii"
                    submitText="Změnit"
                    onCancel={cancelEditCategoryModal}
                    onSubmit={submitEditCategoryModel}
                    defaultValues={selectedRecord}
                />
            )}

            {showAddTagModal && (
                <TagModal
                    title="Vytvořit tag"
                    submitText="Přidat"
                    onCancel={cancelAddTagModal}
                    onSubmit={submitAddTagModal}
                    defaultValues={{ color: selectedRecord.color }}
                />
            )}

            {showEditTagModal && (
                <TagModal
                    title="Editovat tag"
                    submitText="Změnit"
                    onCancel={cancelEditTagModal}
                    onSubmit={submitEditTagModal}
                    defaultValues={selectedRecord}
                />
            )}

            {showAddSubTagModal && (
                <SubTagModal
                    title="Vytvořit sub tag"
                    submitText="Přidat"
                    onCancel={cancelAddSubTagModal}
                    onSubmit={submitAddSubTagModal}
                />
            )}

            {showEditSubTagModal && (
                <SubTagModal
                    title="Editovat sub tag"
                    submitText="Změnit"
                    onCancel={cancelEditSubTagModal}
                    onSubmit={submitEditSubTagModal}
                    defaultValues={selectedRecord}
                />
            )}

            <Container>
                <Row>
                    <Typography.Title level={2}>
                        <FontAwesomeIcon icon={faTags} /> Značky
                    </Typography.Title>
                </Row>
                <Row>
                    <Table
                        columns={columns}
                        dataSource={shownData}
                        scroll={{ y: 'calc(100vh - 300px)' }}
                        size="small"
                        title={() => (
                            <Stack direction="horizontal" gap={3}>
                                <Button type="primary" onClick={openAddCategoryModal}>
                                    Přidat kategorii
                                </Button>
                                <Search
                                    placeholder="Vyhledání tagu"
                                    onSearch={searchTag}
                                    style={{ width: 200 }}
                                    className="ms-auto"
                                />
                            </Stack>
                        )}
                    />
                </Row>
            </Container>
        </MainLayout>
    );
}

export default TagsPage;