commit 8755ddb810c19a97eee291e1b8f14f3925da17ca
Author: Dominik Poch <dpoch@email.cz>
Date:   Sun May 15 13:16:07 2022 +0200

    Search tags in annotation view
    
    Added search bar to tags panel in the annotation view

diff --git a/webapp/components/annotation/TagPanel.tsx b/webapp/components/annotation/TagPanel.tsx
index 7b7ac68..3c41303 100644
--- a/webapp/components/annotation/TagPanel.tsx
+++ b/webapp/components/annotation/TagPanel.tsx
@@ -1,20 +1,73 @@
 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>
diff --git a/webapp/pages/tags/index.tsx b/webapp/pages/tags/index.tsx
index 7f54b6d..6cbfc7e 100644
--- a/webapp/pages/tags/index.tsx
+++ b/webapp/pages/tags/index.tsx
@@ -462,6 +462,7 @@ function TagsPage() {
                                     onSearch={searchTag}
                                     style={{ width: 200 }}
                                     className="ms-auto"
+                                    allowClear
                                 />
                             </Stack>
                         )}
