1 |
ed01528f
|
Dominik Poch
|
import { CategoryItem } from './CategoryItem';
|
2 |
8755ddb8
|
Dominik Poch
|
import { SubTagInfo, TagCategoryInfo, TagInfo } from '../../api';
|
3 |
|
|
import { Button, Container, Stack } from 'react-bootstrap';
|
4 |
|
|
import { useEffect, useState } from 'react';
|
5 |
|
|
import { Input } from 'antd';
|
6 |
|
|
import { tagController } from '../../controllers';
|
7 |
|
|
import styles from '/styles/Annotation.module.scss';
|
8 |
|
|
|
9 |
|
|
const { Search } = Input;
|
10 |
ed01528f
|
Dominik Poch
|
|
11 |
ac59aec1
|
Dominik Poch
|
/**
|
12 |
|
|
* Creates a panel in the annotation screen that contains a list of tag.
|
13 |
|
|
* @returns Panel with a list of tags.
|
14 |
|
|
*/
|
15 |
6d10fe14
|
Dominik Poch
|
export function TagPanel() {
|
16 |
8755ddb8
|
Dominik Poch
|
const [data, setData] = useState<TagCategoryInfo[] | null>();
|
17 |
|
|
|
18 |
|
|
useEffect(() => {
|
19 |
|
|
tagController.tagsGet().then((tagTree) => {
|
20 |
|
|
if (typeof tagTree.data.tagCategories != 'undefined') {
|
21 |
|
|
setData(tagTree.data.tagCategories);
|
22 |
|
|
}
|
23 |
|
|
});
|
24 |
|
|
}, []);
|
25 |
|
|
|
26 |
|
|
const onSearch = (value: string) => {
|
27 |
|
|
tagController.tagsGet().then((tagTree) => {
|
28 |
|
|
if (typeof tagTree.data.tagCategories != 'undefined') {
|
29 |
|
|
let tempData = tagTree.data.tagCategories;
|
30 |
|
|
|
31 |
|
|
if (value) {
|
32 |
|
|
tempData =
|
33 |
|
|
tempData?.filter((category) => {
|
34 |
|
|
category.tags = category.tags?.filter((tag: TagInfo) => {
|
35 |
|
|
tag.subTags = tag.subTags?.filter((subTag: SubTagInfo) =>
|
36 |
|
|
subTag.name
|
37 |
|
|
?.toLowerCase()
|
38 |
|
|
.includes(value.toLowerCase())
|
39 |
|
|
);
|
40 |
|
|
|
41 |
|
|
return (
|
42 |
|
|
(tag.subTags?.length !== undefined &&
|
43 |
|
|
tag.subTags?.length > 0) ||
|
44 |
|
|
tag.name?.toLowerCase().includes(value.toLowerCase())
|
45 |
|
|
);
|
46 |
|
|
});
|
47 |
|
|
|
48 |
|
|
return (
|
49 |
|
|
(category.tags?.length !== undefined &&
|
50 |
|
|
category.tags?.length > 0) ||
|
51 |
|
|
category.name?.toLowerCase().includes(value.toLowerCase())
|
52 |
|
|
);
|
53 |
|
|
}) ?? null;
|
54 |
|
|
}
|
55 |
|
|
|
56 |
|
|
setData(tempData);
|
57 |
|
|
}
|
58 |
|
|
});
|
59 |
|
|
};
|
60 |
ed01528f
|
Dominik Poch
|
|
61 |
ac59aec1
|
Dominik Poch
|
return (
|
62 |
|
|
<div>
|
63 |
2c9bdf18
|
Dominik Poch
|
<Stack gap={1}>
|
64 |
8755ddb8
|
Dominik Poch
|
<Search
|
65 |
|
|
placeholder="Vyhledat tag"
|
66 |
|
|
allowClear
|
67 |
|
|
onSearch={onSearch}
|
68 |
|
|
className={styles.fixHeight}
|
69 |
|
|
/>
|
70 |
|
|
{data?.map((category, index) => (
|
71 |
ed01528f
|
Dominik Poch
|
<CategoryItem category={category} key={index} />
|
72 |
|
|
))}
|
73 |
|
|
</Stack>
|
74 |
ac59aec1
|
Dominik Poch
|
</div>
|
75 |
|
|
);
|
76 |
|
|
}
|