Search tags

web/src/components/Filter/FilterSection.tsx

@@ -13,15 +13,17 @@ interface FilterSectionProps {
   children: React.ReactNode
   title: string
   active?: boolean
+  defaultIsOpen?: boolean
   onClear?: () => void
 }
 export const FilterSection = ({
   children,
   title,
   active,
   onClear,
+  defaultIsOpen = false,
 }: FilterSectionProps) => {
-  const disclosure = useDisclosure()
+  const disclosure = useDisclosure({ defaultIsOpen })
   return (
     <Box>
       <Flex

web/src/components/Filter/TagsList.tsx

@@ -1,5 +1,6 @@
 import {
   Box,
+  Center,
   Checkbox,
   Flex,
   Icon,
@@ -13,7 +14,8 @@ import { useMemo, useCallback } from 'react'
 import { ChevronDownIcon, ChevronRightIcon } from '@chakra-ui/icons'
 import { Menu, MenuButton, MenuList } from 'src/design-system'
 import { TagMenuItems, TagCategoryMenuItems } from 'src/components/Tag/TagItem'
-import { MdFolder, MdMoreVert } from 'react-icons/md'
+import { FaTags } from 'react-icons/fa'
+import { MdGroup, MdMoreVert } from 'react-icons/md'
 import * as React from 'react'
 
 const RowMenu = ({ children }) => (
@@ -77,6 +79,7 @@ const TagRow = ({ tag, tagCategory }) => {
           bg="white"
           mr={2}
         />
+
         <Text textStyle="small" flex={1}>
           {tag.name}
         </Text>
@@ -88,6 +91,14 @@ const TagRow = ({ tag, tagCategory }) => {
   )
 }
 
+const TagCategoryIcon = ({ tagCategory }) => {
+  if (tagCategory.type === 'PERSON') {
+    return <Icon as={MdGroup} />
+  } else {
+    return <Icon as={FaTags} />
+  }
+}
+
 const TagCategoryRow = ({ tagCategory }) => {
   const disclosure = useDisclosure({ defaultIsOpen: true })
 
@@ -123,8 +134,9 @@ const TagCategoryRow = ({ tagCategory }) => {
             <ChevronRightIcon color="gray.400" />
           )}
 
-          <Icon as={MdFolder} ml={1} />
-
+          <Center ml={1}>
+            <TagCategoryIcon tagCategory={tagCategory} />
+          </Center>
           <Text textStyle="small" ml={2} flex={1}>
             {tagCategory.name}
           </Text>
@@ -163,21 +175,25 @@ const TagCategoryRow = ({ tagCategory }) => {
   )
 }
 
-const TagsList = ({ tagCategorys }) => (
-  <Box
-    maxHeight="500px"
-    maxWidth="100%"
-    overflow="auto"
-    px={1}
-    borderWidth={1}
-    borderColor="gray.600"
-    bg="gray.600"
-    borderRadius="md"
-  >
-    {tagCategorys.map((tagCategory) => (
-      <TagCategoryRow tagCategory={tagCategory} key={tagCategory.id} />
-    ))}
-  </Box>
-)
+const TagsList = ({ tagCategorys }) => {
+  if (tagCategorys.length === 0) return <Center py={4}>No tags</Center>
+
+  return (
+    <Box
+      maxHeight="500px"
+      maxWidth="100%"
+      overflow="auto"
+      px={1}
+      borderWidth={1}
+      borderColor="gray.600"
+      bg="gray.600"
+      borderRadius="md"
+    >
+      {tagCategorys.map((tagCategory) => (
+        <TagCategoryRow tagCategory={tagCategory} key={tagCategory.id} />
+      ))}
+    </Box>
+  )
+}
 
 export { TagsList }

web/src/components/Filter/TagsPanel.tsx

@@ -1,10 +1,19 @@
 import { useFilterContext } from 'src/contexts/filter'
 import { useTagContext } from 'src/contexts/tags'
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { DefaultSpinner } from 'src/design-system'
 import { FilterSection } from 'src/components/Filter/FilterSection'
 import { APLUMode, useApluContext } from 'src/contexts/aplu'
 import { TagsList } from './TagsList'
+import {
+  Box,
+  Flex,
+  IconButton,
+  Input,
+  InputGroup,
+  InputRightElement,
+} from '@chakra-ui/react'
+import { MdClear, MdSearch } from 'react-icons/md'
 
 export const TagsPanel = () => {
   const { selectedTagIds, clearTags } = useFilterContext()
@@ -14,6 +23,7 @@ export const TagsPanel = () => {
       title="Tags"
       active={selectedTagIds.length > 0}
       onClear={clearTags}
+      defaultIsOpen={true}
     >
       <AvailableTagsPanel />
     </FilterSection>
@@ -24,32 +34,76 @@ const AvailableTagsPanel = () => {
   const { apluQuery, apluMode } = useApluContext()
   const { selectedTagIds } = useFilterContext()
 
+  const [searchText, setSearchText] = useState<string>('')
+
   const filteredTagCategorys = useMemo(() => {
     if (tagsQuery.loading) return []
-    if (apluMode === APLUMode.ALL) return tagsQuery.data.tagCategorys
+    if (apluMode === APLUMode.FILTER && apluQuery.loading) return []
+
+    function filterTag(tag) {
+      let keep = false
+
+      if (apluMode === APLUMode.ALL) {
+        keep = true
+      } else {
+        if (selectedTagIds.indexOf(tag.id) !== -1) keep = true
+        if (
+          apluQuery.data.attributesFromFilter.tags.findIndex(
+            (t) => t.id === tag.id
+          ) !== -1
+        )
+          keep = true
+      }
 
-    if (apluQuery.loading) return []
+      if (keep && searchText) {
+        if (!tag.name.toLowerCase().includes(searchText.toLowerCase()))
+          keep = false
+      }
+
+      return keep
+    }
 
     return tagsQuery.data.tagCategorys
       .map((tagCategory) => {
         return {
           ...tagCategory,
-          tags: tagCategory.tags.filter((tag) => {
-            return (
-              selectedTagIds.indexOf(tag.id) !== -1 ||
-              apluQuery.data.attributesFromFilter.tags.findIndex(
-                (t) => t.id === tag.id
-              ) !== -1
-            )
-          }),
+          tags: tagCategory.tags.filter(filterTag),
         }
       })
-      .filter((tagCategory) => tagCategory.tags.length > 0)
-  }, [selectedTagIds, apluQuery, tagsQuery])
+      .filter((tagCategory) => APLUMode.ALL || tagCategory.tags.length > 0)
+  }, [apluMode, selectedTagIds, apluQuery, tagsQuery, searchText])
 
   if (tagsQuery.loading) {
     return <DefaultSpinner />
   }
 
-  return <TagsList tagCategorys={filteredTagCategorys} />
+  return (
+    <Box>
+      <Flex px={2} mb={2}>
+        <InputGroup>
+          <Input
+            placeholder="Search tags ..."
+            type="text"
+            onKeyDown={(e) => e.code === 'Escape' && setSearchText('')}
+            onChange={(e) => setSearchText(e.target.value)}
+            value={searchText}
+          />
+          <InputRightElement>
+            {searchText.length > 0 ? (
+              <IconButton
+                aria-label="clear"
+                variant="ghost"
+                icon={<MdClear size={16} />}
+                size="sm"
+                onClick={() => setSearchText('')}
+              />
+            ) : (
+              <MdSearch />
+            )}
+          </InputRightElement>
+        </InputGroup>
+      </Flex>
+      <TagsList tagCategorys={filteredTagCategorys} />
+    </Box>
+  )
 }