Client web/7012 add search input in subspaces list view (#7251)

* replace title in subspaces list view with search, replace list item icon with subspace card banner, remove ther search in the main subspaces area Signed-off-by: reactoholic <[email protected]> * resolve rabbit comments Signed-off-by: reactoholic <[email protected]> --------- Signed-off-by: reactoholic <[email protected]>
alkem-io · Nov 25, 2024 · 80f95d0 · 80f95d0
1 parent 14c64ed
commit 80f95d0
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 48 deletions.
diff --git a/src/core/i18n/en/translation.en.json b/src/core/i18n/en/translation.en.json
@@ -1787,7 +1787,8 @@
           "description": "Here you can explore the hosted **{{entities}}**. Filter by key words to show just the topics you care about.",
           "list": "List view",
           "empty": "No {{entities}} found.",
-          "empty-list": "There are no {{entities}} yet."
+          "empty-list": "There are no {{entities}} yet.",
+          "searchPlaceholder": "Find Subspaces..."
         },
         "recommendations": {
           "title": "Recommended by the Host"

diff --git a/src/core/ui/list/LinksList.tsx b/src/core/ui/list/LinksList.tsx
@@ -1,18 +1,12 @@
 import { ReactNode, useState } from 'react';
 import { styled } from '@mui/styles';
-import {
-  Box,
-  Collapse,
-  List as MuiList,
-  ListItem as MuiListItem,
-  ListItemIcon as MuiListItemIcon,
-  Skeleton,
-} from '@mui/material';
+import { Box, Collapse, List as MuiList, ListItem as MuiListItem, Skeleton } from '@mui/material';
 import { BlockSectionTitle, CaptionSmall } from '../typography';
 import RouterLink from '../link/RouterLink';
 import { gutters } from '../grid/utils';
 import { times } from 'lodash';
 import CardExpandButton from '../card/CardExpandButton';
+import Avatar from '@/core/ui/avatar/Avatar';
 
 const List = styled(MuiList)(() => ({ padding: 0 }));
 
@@ -23,16 +17,12 @@ const ListItem = styled(MuiListItem)(({ theme }) => ({
   alignItems: 'center',
 })) as typeof MuiListItem;
 
-const ListItemIcon = styled(MuiListItemIcon)({
-  minWidth: 'auto',
-  color: 'inherit',
-});
-
 interface Item {
   id: string;
   title: ReactNode;
   icon: ReactNode;
   uri: string;
+  cardBanner?: string;
 }
 
 export interface LinksListProps {
@@ -57,8 +47,9 @@ const LinksList = ({ items = [], emptyListCaption, loading = false }: LinksListP
       {!loading &&
         items.length > 0 &&
         items.slice(0, COLLAPSED_LIST_ITEM_LIMIT).map(item => (
-          <ListItem key={item.id} component={RouterLink} to={item.uri}>
-            <ListItemIcon>{item.icon}</ListItemIcon>
+          <ListItem key={item.id} component={RouterLink} to={item.uri} sx={{ marginTop: gutters(0.5) }}>
+            <Avatar variant="rounded" alt="subspace avatar" src={item.cardBanner} aria-label="Subspace avatar" />
+
             <BlockSectionTitle minWidth={0} noWrap>
               {item.title}
             </BlockSectionTitle>
@@ -68,7 +59,8 @@ const LinksList = ({ items = [], emptyListCaption, loading = false }: LinksListP
         <Collapse in={isExpanded}>
           {items.slice(COLLAPSED_LIST_ITEM_LIMIT).map(item => (
             <ListItem key={item.id} component={RouterLink} to={item.uri}>
-              <ListItemIcon>{item.icon}</ListItemIcon>
+              <Avatar variant="rounded" alt="subspace avatar" src={item.cardBanner} aria-label="Subspace avatar" />
+
               <BlockSectionTitle minWidth={0} noWrap>
                 {item.title}
               </BlockSectionTitle>

diff --git a/src/domain/journey/common/JourneyFilter/JourneyFilter.tsx b/src/domain/journey/common/JourneyFilter/JourneyFilter.tsx
@@ -1,7 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import { SearchTagsInputProps } from '@/domain/shared/components/SearchTagsInput/SearchTagsInput';
 import { Identifiable } from '@/core/utils/Identifiable';
-import MultipleSelect from '@/core/ui/search/MultipleSelect';
 import filterFn, { MatchInformation, ValueType, getAllValues } from '@/core/utils/filtering/filterFn';
 import { Box } from '@mui/material';
 import { BlockTitle } from '@/core/ui/typography';
@@ -45,10 +44,6 @@ const JourneyFilter = <T extends Identifiable>({
     [data, terms, valueGetter]
   );
 
-  const handleChange = (value: string[]) => {
-    setTerms(value);
-  };
-
   if (!data.length) {
     return <>{children([])}</>;
   }
@@ -61,13 +56,6 @@ const JourneyFilter = <T extends Identifiable>({
     <>
       <Box display="flex" justifyContent="space-between" flexWrap="wrap" gap={gutters(0.5)}>
         <BlockTitle>{title}</BlockTitle>
-        <MultipleSelect
-          onChange={handleChange}
-          value={terms}
-          minLength={2}
-          size="xsmall"
-          containerProps={{ marginLeft: 'auto', maxWidth: '100%', overflow: 'hidden' }}
-        />
       </Box>
       {allValues && (
         <TagsComponent

diff --git a/src/domain/journey/common/tabs/Subentities/ChildJourneyView.tsx b/src/domain/journey/common/tabs/Subentities/ChildJourneyView.tsx
@@ -1,5 +1,5 @@
 import { ApolloError } from '@apollo/client';
-import { ReactElement, ReactNode, cloneElement } from 'react';
+import { useMemo, useState, ReactElement, ReactNode, cloneElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import AddOutlinedIcon from '@mui/icons-material/AddOutlined';
 import { Button, IconButton } from '@mui/material';
@@ -9,7 +9,6 @@ import ErrorBlock from '@/core/ui/error/ErrorBlock';
 import getJourneyChildrenTranslation from '@/domain/journey/subspace/getJourneyChildrenTranslation';
 import PageContent from '@/core/ui/content/PageContent';
 import PageContentBlock from '@/core/ui/content/PageContentBlock';
-import PageContentBlockHeader from '@/core/ui/content/PageContentBlockHeader';
 import LinksList from '@/core/ui/list/LinksList';
 import { Caption } from '@/core/ui/typography';
 import MembershipBackdrop from '@/domain/shared/components/Backdrops/MembershipBackdrop';
@@ -25,6 +24,8 @@ import RoundedIcon from '@/core/ui/icon/RoundedIcon';
 import { useSpace } from '@/domain/journey/space/SpaceContext/useSpace';
 import InfoColumn from '@/core/ui/content/InfoColumn';
 import ContentColumn from '@/core/ui/content/ContentColumn';
+import SearchField from '@/core/ui/search/SearchField';
+import defaultSubspaceAvatar from '@/domain/journey/defaultVisuals/Card.jpg';
 
 export interface JourneySubentitiesState {
   loading: boolean;
@@ -35,6 +36,9 @@ interface BaseChildEntity extends Identifiable {
   profile: {
     displayName: string;
     url: string;
+    cardBanner?: {
+      uri: string;
+    };
   };
 }
 
@@ -69,9 +73,25 @@ const ChildJourneyView = <ChildEntity extends BaseChildEntity>({
   children,
   onClickCreate,
 }: ChildJourneyViewProps<ChildEntity>) => {
+  const [filter, setFilter] = useState('');
+
   const { t } = useTranslation();
   const { permissions } = useSpace();
 
+  const filteredItems = useMemo(
+    () =>
+      childEntities
+        .map(entity => ({
+          id: entity.id,
+          title: entity.profile.displayName,
+          icon: childEntitiesIcon,
+          uri: entity.profile.url,
+          cardBanner: entity.profile?.cardBanner?.uri || defaultSubspaceAvatar,
+        }))
+        .filter(ss => ss.title.toLowerCase().includes(filter.toLowerCase())),
+    [childEntities, filter, childEntitiesIcon]
+  );
+
   return (
     <MembershipBackdrop show={!childEntityReadAccess} blockName={getJourneyChildrenTranslation(t, journeyTypeName)}>
       <PageContent>
@@ -81,25 +101,19 @@ const ChildJourneyView = <ChildEntity extends BaseChildEntity>({
             canCreateSubentity={childEntityCreateAccess}
             onCreateSubentity={childEntityOnCreate}
           />
+
           {createSubentityDialog}
+
           <PageContentBlock>
-            <PageContentBlockHeader
-              title={t('pages.generic.sections.subentities.list', {
-                entities: getJourneyChildrenTranslation(t, journeyTypeName),
-              })}
-            />
-            <LinksList
-              items={childEntities.map(entity => ({
-                id: entity.id,
-                title: entity.profile.displayName,
-                icon: childEntitiesIcon,
-                uri: entity.profile.url,
-              }))}
-              emptyListCaption={t('pages.generic.sections.subentities.empty-list', {
-                entities: getJourneyChildrenTranslation(t, journeyTypeName),
-                parentEntity: t(`common.${journeyTypeName}` as const),
-              })}
-            />
+            {childEntities.length > 3 && (
+              <SearchField
+                value={filter}
+                placeholder={t('pages.generic.sections.subentities.searchPlaceholder')}
+                onChange={event => setFilter(event.target.value)}
+              />
+            )}
+
+            <LinksList items={filteredItems} />
           </PageContentBlock>
         </InfoColumn>
         <ContentColumn>