diff --git a/src/components/Organizations/StudyTooltip.tsx b/src/components/Organizations/StudyTooltip.tsx new file mode 100644 index 000000000..90bdd4341 --- /dev/null +++ b/src/components/Organizations/StudyTooltip.tsx @@ -0,0 +1,51 @@ +import React, { ElementType, FC } from 'react'; +import { Typography, styled } from '@mui/material'; +import Tooltip from '../Tooltip'; +import { formatFullStudyName } from '../../utils'; + +type Props = { + _id: Organization["_id"]; + studies: Organization["studies"]; +}; + +const StyledStudyCount = styled(Typography)<{ component: ElementType }>(({ theme }) => ({ + textDecoration: "underline", + cursor: "pointer", + color: theme.palette.primary.main, +})); + +const TooltipBody: FC = ({ _id, studies }) => ( + + {studies?.map(({ studyName, studyAbbreviation }) => ( + + {formatFullStudyName(studyName, studyAbbreviation)} +
+
+ ))} +
+); + +/** + * Organization list view tooltip for studies + * + * @param Props + * @returns {React.FC} + */ +const StudyTooltip: FC = ({ _id, studies }) => ( + } + placement="top" + open={undefined} + onBlur={undefined} + disableHoverListener={false} + arrow + > + + other + {" "} + {studies.length - 1} + + +); + +export default StudyTooltip; diff --git a/src/content/organizations/ListView.tsx b/src/content/organizations/ListView.tsx index 8ef712304..2075a47a2 100644 --- a/src/content/organizations/ListView.tsx +++ b/src/content/organizations/ListView.tsx @@ -9,10 +9,10 @@ import { import { Link, LinkProps, useLocation } from "react-router-dom"; import { Controller, useForm } from 'react-hook-form'; import PageBanner from "../../components/PageBanner"; -import Tooltip from '../../components/Tooltip'; import { useOrganizationListContext, Status } from '../../components/Contexts/OrganizationListContext'; import SuspenseLoader from '../../components/SuspenseLoader'; import usePageTitle from '../../hooks/usePageTitle'; +import StudyTooltip from '../../components/Organizations/StudyTooltip'; type T = Partial; @@ -162,12 +162,6 @@ 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", @@ -188,24 +182,9 @@ const columns: Column[] = [ return ( <> - {studies[0].studyAbbreviation} + {studies[0].studyAbbreviation || studies[0].studyName} {studies.length > 1 && " and "} - {studies.length > 1 && ( - } - placement="top" - open={undefined} - onBlur={undefined} - disableHoverListener={false} - arrow - > - - other - {" "} - {studies.length - 1} - - - )} + {studies.length > 1 && ()} ); }, @@ -227,20 +206,6 @@ 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 * diff --git a/src/utils/formUtils.test.ts b/src/utils/formUtils.test.ts index f453f255d..3f47adfb5 100644 --- a/src/utils/formUtils.test.ts +++ b/src/utils/formUtils.test.ts @@ -189,3 +189,37 @@ describe("programToSelectOption cases", () => { expect(selectOption.value).toEqual(""); }); }); + +describe('formatFullStudyName cases', () => { + it('should return the study name with abbreviation if abbreviation is provided', () => { + const studyName = 'Study Name'; + const studyAbbreviation = 'SN'; + const result = utils.formatFullStudyName(studyName, studyAbbreviation); + expect(result).toBe('Study Name (SN)'); + }); + + it('should return the study name without abbreviation if abbreviation is not provided', () => { + const studyName = 'Study Name'; + const result = utils.formatFullStudyName(studyName, ''); + expect(result).toBe('Study Name'); + }); + + it('should return the study name without abbreviation if abbreviation is undefined', () => { + const studyName = 'Study Name'; + const result = utils.formatFullStudyName(studyName, undefined); + expect(result).toBe('Study Name'); + }); + + it('should remove extra spaces from the study name', () => { + const studyName = ' Study Name '; + const result = utils.formatFullStudyName(studyName, ''); + expect(result).toBe('Study Name'); + }); + + it('should remove extra spaces from the study abbreviation', () => { + const studyName = 'Study Name'; + const studyAbbreviation = ' SN '; + const result = utils.formatFullStudyName(studyName, studyAbbreviation); + expect(result).toBe('Study Name (SN)'); + }); +}); diff --git a/src/utils/formUtils.ts b/src/utils/formUtils.ts index ccc3e8142..394b313ca 100644 --- a/src/utils/formUtils.ts +++ b/src/utils/formUtils.ts @@ -110,3 +110,21 @@ export const programToSelectOption = (program: ProgramOption): SelectOption => ( label: `${program.name || ""}${program.abbreviation ? ` (${program.abbreviation})` : ""}`?.trim(), value: program.name || "" }); + +/** + * Formats an Approved Study Name and Abbreviation into a single string. + * If the abbreviation is provided, it will be enclosed in parentheses. + * + * @example Alphabetic Study (AS) + * @example Alphabetic Study + * @param studyName The full name of the study + * @param studyAbbreviation The abbreviation of the study + * @returns The formatted study name + */ +export const formatFullStudyName = (studyName: string, studyAbbreviation: string): string => { + if (studyAbbreviation && studyAbbreviation.length > 0) { + return `${studyName.trim()} (${studyAbbreviation.trim()})`; + } + + return studyName.trim(); +};