Merge pull request #1920 from awarn/issue-1767/person-hover-card-tag-…

…cap-2 Cap tag list of person hover cards
zetkin · May 16, 2024 · a916fa2 · a916fa2
2 parents 3b9b0ed + 689f6cb
commit a916fa2
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 26 deletions.
diff --git a/src/features/tags/components/TagManager/components/TagsList.tsx b/src/features/tags/components/TagManager/components/TagsList.tsx
@@ -1,42 +1,100 @@
-import { Box, Typography } from '@mui/material';
-
-import { ZetkinTag } from 'utils/types/zetkin';
+import { makeStyles } from '@mui/styles';
+import NextLink from 'next/link';
+import { Box, Theme, Typography } from '@mui/material';
 
 import { groupTags } from '../utils';
-import TagChip from './TagChip';
-
 import messageIds from '../../../l10n/messageIds';
+import TagChip from './TagChip';
 import { useMessages } from 'core/i18n';
+import { ZetkinTag } from 'utils/types/zetkin';
+
+interface StyleProps {
+  clickable: boolean;
+}
+
+const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
+  chip: {
+    borderColor: theme.palette.grey[500],
+    borderRadius: '1em',
+    borderWidth: '1px',
+    color: theme.palette.text.secondary,
+    cursor: ({ clickable }) => (clickable ? 'pointer' : 'default'),
+    display: 'flex',
+    lineHeight: 'normal',
+    marginRight: '0.1em',
+    overflow: 'hidden',
+    padding: '0.2em 0.7em',
+    textOverflow: 'ellipsis',
+  },
+}));
+
+const PersonLink: React.FunctionComponent<{
+  capOverflowHref?: string;
+  children: React.ReactNode;
+}> = ({ children, capOverflowHref }) => {
+  if (capOverflowHref) {
+    return (
+      <NextLink href={capOverflowHref} legacyBehavior passHref>
+        {children}
+      </NextLink>
+    );
+  }
+  return children as React.ReactElement;
+};
 
 const TagsList: React.FunctionComponent<{
+  cap?: number;
+  capOverflowHref?: string;
   isGrouped: boolean;
   onUnassignTag?: (tag: ZetkinTag) => void;
   tags: ZetkinTag[];
-}> = ({ tags, isGrouped, onUnassignTag }) => {
+}> = ({ cap = Infinity, capOverflowHref, isGrouped, onUnassignTag, tags }) => {
+  const classes = useStyles({
+    clickable: !!capOverflowHref,
+  });
   const messages = useMessages(messageIds);
 
+  const renderCappedTags = (tags: ZetkinTag[], capOverflowHref?: string) => {
+    const cappedTags = tags.slice(0, cap);
+    const hiddenTags = tags.slice(cap);
+    const isCapped = tags.length > cappedTags.length;
+
+    return (
+      <>
+        {cappedTags.map((tag) => {
+          return <TagChip key={tag.id} onDelete={onUnassignTag} tag={tag} />;
+        })}
+        {isCapped ? (
+          <PersonLink capOverflowHref={capOverflowHref}>
+            <Box border={2} className={classes.chip}>
+              {`+${hiddenTags.length}`}
+            </Box>
+          </PersonLink>
+        ) : null}
+      </>
+    );
+  };
+
   if (isGrouped) {
     const groupedTags = groupTags(tags, messages.manager.ungroupedHeader());
 
     return (
       <>
-        {groupedTags.map((group, i) => (
-          <Box key={i} mb={1}>
-            <Typography variant="overline">{group.title}</Typography>
-            <Box
-              data-testid={`TagManager-groupedTags-${group.id}`}
-              display="flex"
-              flexWrap="wrap"
-              style={{ gap: 4 }}
-            >
-              {group.tags.map((tag) => {
-                return (
-                  <TagChip key={tag.id} onDelete={onUnassignTag} tag={tag} />
-                );
-              })}
+        {groupedTags.map((group, i) => {
+          return (
+            <Box key={i} mb={1}>
+              <Typography variant="overline">{group.title}</Typography>
+              <Box
+                data-testid={`TagManager-groupedTags-${group.id}`}
+                display="flex"
+                flexWrap="wrap"
+                style={{ gap: 4 }}
+              >
+                {renderCappedTags(group.tags, capOverflowHref)}
+              </Box>
             </Box>
-          </Box>
-        ))}
+          );
+        })}
       </>
     );
   }
@@ -48,9 +106,7 @@ const TagsList: React.FunctionComponent<{
 
   return (
     <Box display="flex" flexWrap="wrap" style={{ gap: 4 }}>
-      {sortedTags.map((tag) => {
-        return <TagChip key={tag.id} onDelete={onUnassignTag} tag={tag} />;
-      })}
+      {renderCappedTags(sortedTags, capOverflowHref)}
     </Box>
   );
 };

diff --git a/src/zui/ZUIPersonHoverCard.tsx b/src/zui/ZUIPersonHoverCard.tsx
@@ -110,7 +110,12 @@ const ZUIPersonHoverCard: React.FunctionComponent<{
                 </Grid>
                 {tags && (
                   <Grid item>
-                    <TagsList isGrouped={false} tags={tags} />
+                    <TagsList
+                      cap={10}
+                      capOverflowHref={`/organize/${orgId}/people/${person?.id}`}
+                      isGrouped={false}
+                      tags={tags}
+                    />
                   </Grid>
                 )}
                 {(['phone', 'alt_phone', 'email'] as Array<keyof ZetkinPerson>)