Revize 41e65564

Changed search of tags

Added copy of tags, used contains instead of startsWith and made search case insensitive

webapp/pages/tags/index.tsx

@@ -28 +28 @@
     const { logout, role } = useContext(LoggedUserContext);
     const router = useRouter();
 
+    const [tagData, setTagData] = useState<any[] | null>([]);
+
     /**
      * Data in a table.
      */
-    const [tagData, setTagData] = useState<any[] | undefined>([]);
+    const [shownData, setShownData] = useState<any[] | undefined>([]);
 
     // States that says if modal windows should be shown.
     const [showAddCategoryModal, setShowAddCategoryModal] = useState(false);
@@ -307 +309 @@
     const loadData = () => {
         tagController.tagsGet().then((tagTree) => {
             if (typeof tagTree.data.tagCategories != 'undefined') {
-                let data = tagTree.data.tagCategories?.map((catInfo) => {
-                    return {
-                        key: catInfo.id,
-                        name: catInfo.name,
-                        description: catInfo.description,
-                        color: catInfo.color,
-                        depth: 0,
-                        disabledForAnnotators: catInfo.disabledForAnnotators,
-                        ...(catInfo.tags?.length && {
-                            children: catInfo.tags?.map((tagInfo) => {
-                                return {
-                                    key: tagInfo.id,
-                                    name: tagInfo.name,
-                                    description: tagInfo.description,
-                                    color: tagInfo.color,
-                                    depth: 1,
-                                    ...(tagInfo.subTags?.length && {
-                                        children: tagInfo.subTags?.map((subInfo) => {
-                                            return {
-                                                key: subInfo.id,
-                                                name: subInfo.name,
-                                                description: subInfo.description,
-                                                depth: 2,
-                                            };
-                                        }),
-                                    }),
-                                };
-                            }),
-                        }),
-                    };
-                });
-
-                setTagData(data);
+                setTagData(tagTree.data.tagCategories);
+                setShownData(mapData(tagTree.data.tagCategories));
             }
         });
     };
 
+    const mapData = (data: any[] | null) => {
+        return data?.map((catInfo) => {
+            return {
+                key: catInfo.id,
+                name: catInfo.name,
+                description: catInfo.description,
+                color: catInfo.color,
+                depth: 0,
+                disabledForAnnotators: catInfo.disabledForAnnotators,
+                ...(catInfo.tags?.length && {
+                    children: catInfo.tags?.map((tagInfo: any) => {
+                        return {
+                            key: tagInfo.id,
+                            name: tagInfo.name,
+                            description: tagInfo.description,
+                            color: tagInfo.color,
+                            depth: 1,
+                            ...(tagInfo.subTags?.length && {
+                                children: tagInfo.subTags?.map((subInfo: any) => {
+                                    return {
+                                        key: subInfo.id,
+                                        name: subInfo.name,
+                                        description: subInfo.description,
+                                        depth: 2,
+                                    };
+                                }),
+                            }),
+                        };
+                    }),
+                }),
+            };
+        });
+    };
+
     /**
      * Searches given value in 'name' column in a table.
      * If the provided value is empty the method loads all data from a server.
      * @param value Value that is searched.
      */
     const searchTag = (value: string) => {
-        if (!value) loadData();
+        let data = mapData(tagData);
+
+        if (value) {
+            data = data?.filter((category) => {
+                category.children = category.children?.filter((tag: any) => {
+                    tag.children = tag.children?.filter((subTag: any) =>
+                        subTag.name.toLowerCase().includes(value.toLowerCase())
+                    );
+
+                    return (
+                        tag.children?.length > 0 ||
+                        tag.name.toLowerCase().includes(value.toLowerCase())
+                    );
+                });
 
-        let data = tagData?.filter((category) => {
-            category.children = category.children?.filter((tag: any) => {
-                tag.children = tag.children?.filter((subTag: any) =>
-                    subTag.name.startsWith(value)
+                return (
+                    category.children?.length > 0 ||
+                    category.name.toLowerCase().includes(value.toLowerCase())
                 );
-
-                return tag.children?.length > 0 || tag.name.startsWith(value);
             });
+        }
 
-            return category.children?.length > 0 || category.name.startsWith(value);
-        });
-
-        setTagData(data);
+        setShownData(data);
     };
 
     return redirecting || role !== 'ADMINISTRATOR' ? null : (
@@ -436 +449 @@
                 <Row>
                     <Table
                         columns={columns}
-                        dataSource={tagData}
+                        dataSource={shownData}
                         scroll={{ y: 'calc(100vh - 300px)' }}
                         size="small"
                         title={() => (