aswi20220x00-gitlab/webapp/components/annotation/TagPanel.tsx @ 8755ddb8

import { CategoryItem } from './CategoryItem';
import { SubTagInfo, TagCategoryInfo, TagInfo } from '../../api';
import { Button, Container, Stack } from 'react-bootstrap';
import { useEffect, useState } from 'react';
import { Input } from 'antd';
import { tagController } from '../../controllers';
import styles from '/styles/Annotation.module.scss';

const { Search } = Input;

/**
 * Creates a panel in the annotation screen that contains a list of tag.
 * @returns Panel with a list of tags.
 */
export function TagPanel() {
    const [data, setData] = useState<TagCategoryInfo[] | null>();

    useEffect(() => {
        tagController.tagsGet().then((tagTree) => {
            if (typeof tagTree.data.tagCategories != 'undefined') {
                setData(tagTree.data.tagCategories);
            }
        });
    }, []);

    const onSearch = (value: string) => {
        tagController.tagsGet().then((tagTree) => {
            if (typeof tagTree.data.tagCategories != 'undefined') {
                let tempData = tagTree.data.tagCategories;

                if (value) {
                    tempData =
                        tempData?.filter((category) => {
                            category.tags = category.tags?.filter((tag: TagInfo) => {
                                tag.subTags = tag.subTags?.filter((subTag: SubTagInfo) =>
                                    subTag.name
                                        ?.toLowerCase()
                                        .includes(value.toLowerCase())
                                );

                                return (
                                    (tag.subTags?.length !== undefined &&
                                        tag.subTags?.length > 0) ||
                                    tag.name?.toLowerCase().includes(value.toLowerCase())
                                );
                            });

                            return (
                                (category.tags?.length !== undefined &&
                                    category.tags?.length > 0) ||
                                category.name?.toLowerCase().includes(value.toLowerCase())
                            );
                        }) ?? null;
                }

                setData(tempData);
            }
        });
    };

    return (
        <div>
            <Stack gap={1}>
                <Search
                    placeholder="Vyhledat tag"
                    allowClear
                    onSearch={onSearch}
                    className={styles.fixHeight}
                />
                {data?.map((category, index) => (
                    <CategoryItem category={category} key={index} />
                ))}
            </Stack>
        </div>
    );
}