Revize 8755ddb8

Search tags in annotation view

Added search bar to tags panel in the annotation view

webapp/components/annotation/TagPanel.tsx

@@ -1 +1 @@
 import { CategoryItem } from './CategoryItem';
-import { TagCategoryInfo } from '../../api';
-import { Stack } from 'react-bootstrap';
-import { useContext } from 'react';
-import { TagCategoryContext } from '../../contexts/TagCategoryContext';
+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 { tagCategories } = useContext(TagCategoryContext);
+    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}>
-                {tagCategories?.map((category, index) => (
+                <Search
+                    placeholder="Vyhledat tag"
+                    allowClear
+                    onSearch={onSearch}
+                    className={styles.fixHeight}
+                />
+                {data?.map((category, index) => (
                     <CategoryItem category={category} key={index} />
                 ))}
             </Stack>