diff --git a/src/content/organizations/ListView.tsx b/src/content/organizations/ListView.tsx index a8e20dc7b..c9078570d 100644 --- a/src/content/organizations/ListView.tsx +++ b/src/content/organizations/ListView.tsx @@ -161,6 +161,12 @@ const StyledTablePagination = styled(TablePagination)<{ component: React.Element background: "#F5F7F8", }); +const StyledStudyCount = styled(Typography)<{ component: ElementType }>(({ theme }) => ({ + textDecoration: "underline", + cursor: "pointer", + color: theme.palette.primary.main, +})); + const columns: Column[] = [ { label: "Name", @@ -174,33 +180,34 @@ const columns: Column[] = [ }, { label: "Studies", - value: ({ _id, studies }) => ( - - - {studies?.slice(0, 2).map((s) => s.studyAbbreviation).join(", ")} - {studies?.length > 2 && ", ..."} - - {studies?.length > 0 && ( - - {studies.map(({ studyName, studyAbbreviation }) => ( - - {studyName} - {" ("} - {studyAbbreviation} - {") "} -
-
- ))} - - )} - placement="top" - arrow - /> - )} -
- ), + value: ({ _id, studies }) => { + if (!studies || studies?.length < 1) { + return ""; + } + + return ( + <> + {studies[0].studyAbbreviation} + {studies.length > 1 && " and "} + {studies.length > 1 && ( + } + placement="top" + open={undefined} + onBlur={undefined} + disableHoverListener={false} + arrow + > + + other + {" "} + {studies.length - 1} + + + )} + + ); + }, }, { label: "Status", @@ -219,6 +226,20 @@ const columns: Column[] = [ }, ]; +const StudyContent: FC<{ _id: Organization["_id"], studies: Organization["studies"] }> = ({ _id, studies }) => ( + + {studies?.map(({ studyName, studyAbbreviation }) => ( + + {studyName} + {" ("} + {studyAbbreviation} + {") "} +
+
+ ))} +
+); + /** * View for List of Organizations *