Revize ed01528f

Implemented tag panel

Implemented tag panel and all its items

webapp/components/annotation/CategoryItem.tsx

@@ +1 @@
+import { Col, Container, Row, Stack } from 'react-bootstrap';
+import { Button } from 'antd';
+import { DownOutlined, TagOutlined } from '@ant-design/icons';
+import { TagCategoryInfo } from '../../api';
+import { useState } from 'react';
+import { TagItem } from './TagItem';
+
+/**
+ * Creates a single item for a category in a tag panel.
+ * @param props Properties should contain a category.
+ * @returns Item that represents the category.
+ */
+export function CategoryItem(props: { category: TagCategoryInfo }) {
+    /**
+     * Should tags in this category be visible?
+     */
+    const [visibleTags, setVisibleTags] = useState(false);
+
+    /**
+     * Changes visibility of tags.
+     */
+    const changeTagsVisibility = () => {
+        setVisibleTags(!visibleTags);
+    };
+
+    return (
+        <Container>
+            <Row>
+                <Col>
+                    <Button
+                        type="text"
+                        icon={<DownOutlined />}
+                        onClick={changeTagsVisibility}
+                        className="w-100 text-start"
+                    >
+                        {props.category.name}
+                    </Button>
+                </Col>
+                <Col md="auto">
+                    <TagOutlined style={{ color: props.category.color ?? 'black' }} />
+                </Col>
+            </Row>
+            {visibleTags && (
+                <Stack>
+                    {props.category.tags?.map((tag, index) => (
+                        <TagItem tag={tag} key={index} />
+                    ))}
+                </Stack>
+            )}
+        </Container>
+    );
+}

webapp/components/annotation/SubTagItem.tsx

@@ +1 @@
+import { SubTagInfo } from '../../api';
+import { Container, Row } from 'react-bootstrap';
+import { Button } from 'antd';
+
+/**
+ * Creates a single tag item in a tag panel.
+ * @param props Properties should contain the tag.
+ * @returns The item that represents the tag.
+ */
+export function SubTagItem(props: { subTag: SubTagInfo }) {
+    /**
+     * Selects the sub tag.
+     */
+    const selectSubTag = () => {};
+
+    return (
+        <Container>
+            <Row>
+                <Button type="text" onClick={selectSubTag} className="w-100 text-start">
+                    {props.subTag.name}
+                </Button>
+            </Row>
+        </Container>
+    );
+}

webapp/components/annotation/TagItem.tsx

@@ +1 @@
+import { Col, Container, Row, Stack } from 'react-bootstrap';
+import { TagInfo } from '../../api';
+import { Button } from 'antd';
+import { DownOutlined, TagOutlined } from '@ant-design/icons';
+import { useState } from 'react';
+import { SubTagItem } from './SubTagItem';
+
+/**
+ * Creates a single tag item in a tag panel.
+ * @param props Properties should contain the tag.
+ * @returns The item that represents the tag.
+ */
+export function TagItem(props: { tag: TagInfo }) {
+    /**
+     * Should sub tags be visible?
+     */
+    const [visibleSubTags, setVisibleSubTags] = useState(false);
+
+    /**
+     * Changes visibility of sub tags.
+     */
+    const changeSubTagsVisibility = () => {
+        setVisibleSubTags(!visibleSubTags);
+    };
+
+    /**
+     * Selects the tag.
+     */
+    const selectTag = () => {};
+
+    return (
+        <Container>
+            <Row>
+                <Col>
+                    {props.tag.subTags && (
+                        <Button
+                            type="text"
+                            icon={<DownOutlined />}
+                            onClick={changeSubTagsVisibility}
+                            className="w-100 text-start"
+                        >
+                            {props.tag.name}
+                        </Button>
+                    )}
+                    {!props.tag.subTags && (
+                        <Button
+                            type="text"
+                            onClick={selectTag}
+                            className="w-100 text-start"
+                        >
+                            {props.tag.name}
+                        </Button>
+                    )}
+                </Col>
+                <Col sm="auto">
+                    <TagOutlined style={{ color: props.tag.color ?? 'black' }} />
+                </Col>
+            </Row>
+            {props.tag.subTags && visibleSubTags && (
+                <Stack>
+                    {props.tag.subTags?.map((subTag, index) => (
+                        <SubTagItem subTag={subTag} key={index} />
+                    ))}
+                </Stack>
+            )}
+        </Container>
+    );
+}

webapp/components/annotation/TagPanel.tsx

@@ +1 @@
+import { CategoryItem } from './CategoryItem';
+import { TagCategoryInfo } from '../../api';
+import { Stack } from 'react-bootstrap';
+
 /**
  * Creates a panel in the annotation screen that contains a list of tag.
  * @returns Panel with a list of tags.
  */
 export function TagPanel() {
+    const tags: TagCategoryInfo[] = [
+        {
+            name: 'kategorie 1',
+            color: '#FF0000',
+            tags: [
+                {
+                    name: 'tag 1',
+                    color: '#CD5C5C',
+                    subTags: [{ name: 'subTag 1' }, { name: 'subTag 2' }],
+                },
+                { name: 'tag 2', color: '#F08080' },
+            ],
+        },
+        {
+            name: 'kategorie 2',
+            color: '#0000FF',
+            tags: [{ name: 'tag 3', color: '#3498DB' }],
+        },
+    ];
+
     return (
         <div>
-            <p>Panel with a list of tags</p>
+            <Stack>
+                {tags.map((category, index) => (
+                    <CategoryItem category={category} key={index} />
+                ))}
+            </Stack>
         </div>
     );
 }