diff --git a/src/__tests__/utilsFunction/tabsUtils.test.ts b/src/__tests__/utilsFunction/tabsUtils.test.ts new file mode 100644 index 000000000..5efbf3099 --- /dev/null +++ b/src/__tests__/utilsFunction/tabsUtils.test.ts @@ -0,0 +1,51 @@ +import { PMSILabel } from 'types/patient' +import { MedicationLabel, ResourceType } from 'types/requestCriterias' +import { getMedicationTab, getPMSITab } from 'utils/tabsUtils' + +const pmsiDefaultTab = { label: PMSILabel.DIAGNOSTIC, id: ResourceType.CONDITION } + +describe('test of getPMSITab', () => { + it('should return default tabId is empty', () => { + const tabId = '' + expect(getPMSITab(tabId)).toStrictEqual(pmsiDefaultTab) + }) + it('should return default tabId doesnt exist in PMSITabs', () => { + const tabId = 'whatever' + expect(getPMSITab(tabId)).toStrictEqual(pmsiDefaultTab) + }) + it('should return the tab matching to the id given', () => { + const tabId = ResourceType.PROCEDURE + expect(getPMSITab(tabId)).toStrictEqual({ label: PMSILabel.CCAM, id: ResourceType.PROCEDURE }) + }) + it('should return the tab matching to the id given even if the casing is wrong', () => { + const tabId = ResourceType.PROCEDURE.toLocaleUpperCase() + expect(getPMSITab(tabId)).toStrictEqual({ label: PMSILabel.CCAM, id: ResourceType.PROCEDURE }) + }) +}) + +const medicationDefaultTab = { label: MedicationLabel.PRESCRIPTION, id: ResourceType.MEDICATION_REQUEST } + +describe('test of getMedicationTab', () => { + it('should return default tabId is empty', () => { + const tabId = '' + expect(getMedicationTab(tabId)).toStrictEqual(medicationDefaultTab) + }) + it('should return default tabId doesnt exist in MedicationTabs', () => { + const tabId = 'test' + expect(getMedicationTab(tabId)).toStrictEqual(medicationDefaultTab) + }) + it('should return the tab matching to the id given', () => { + const tabId = ResourceType.MEDICATION_ADMINISTRATION + expect(getMedicationTab(tabId)).toStrictEqual({ + label: MedicationLabel.ADMINISTRATION, + id: ResourceType.MEDICATION_ADMINISTRATION + }) + }) + it('should return the tab matching to the id given even if the casing is wrong', () => { + const tabId = ResourceType.MEDICATION_ADMINISTRATION.toLocaleUpperCase() + expect(getMedicationTab(tabId)).toStrictEqual({ + label: MedicationLabel.ADMINISTRATION, + id: ResourceType.MEDICATION_ADMINISTRATION + }) + }) +}) diff --git a/src/components/CohortsTable/index.tsx b/src/components/CohortsTable/index.tsx index 4630f0d81..916084d19 100644 --- a/src/components/CohortsTable/index.tsx +++ b/src/components/CohortsTable/index.tsx @@ -106,7 +106,12 @@ const ResearchTable: React.FC = ({ row.request_job_status === CohortJobStatus.FAILED ) return - navigate(`/cohort/${row.group_id}`) + + const searchParams = new URLSearchParams() + if (row.group_id) { + searchParams.set('groupId', row.group_id) + } + navigate(`/cohort?${searchParams.toString()}`) } const handleClickOpenDialog = () => { diff --git a/src/components/Dashboard/BiologyList/index.tsx b/src/components/Dashboard/BiologyList/index.tsx index 5e73af3ed..bc15c6e55 100644 --- a/src/components/Dashboard/BiologyList/index.tsx +++ b/src/components/Dashboard/BiologyList/index.tsx @@ -39,16 +39,16 @@ import { import { checkIfPageAvailable, handlePageError } from 'utils/paginationUtils' type BiologyListProps = { - groupId?: string deidentified?: boolean } -const BiologyList = ({ groupId, deidentified }: BiologyListProps) => { +const BiologyList = ({ deidentified }: BiologyListProps) => { const theme = useTheme() const isMd = useMediaQuery(theme.breakpoints.down('lg')) const dispatch = useAppDispatch() const [searchParams, setSearchParams] = useSearchParams() const getPageParam = searchParams.get('page') + const groupId = searchParams.get('groupId') ?? undefined const [toggleFilterByModal, setToggleFilterByModal] = useState(false) const [toggleSaveFiltersModal, setToggleSaveFiltersModal] = useState(false) @@ -203,7 +203,9 @@ const BiologyList = ({ groupId, deidentified }: BiologyListProps) => { ]) useEffect(() => { - setSearchParams({ page: page.toString() }) + const existingParams = Object.fromEntries(searchParams.entries()) + setSearchParams({ ...existingParams, page: page.toString() }) + handlePageError(page, setPage, dispatch, setLoadingStatus) }, [page]) diff --git a/src/components/Dashboard/Documents/Documents.tsx b/src/components/Dashboard/Documents/Documents.tsx index 4a6c2366a..52b174a3e 100644 --- a/src/components/Dashboard/Documents/Documents.tsx +++ b/src/components/Dashboard/Documents/Documents.tsx @@ -48,14 +48,14 @@ import { CanceledError } from 'axios' import { DocumentReference } from 'fhir/r4' type DocumentsProps = { - groupId?: string deidentified: boolean } -const Documents: React.FC = ({ groupId, deidentified }) => { +const Documents: React.FC = ({ deidentified }) => { const dispatch = useAppDispatch() const [searchParams, setSearchParams] = useSearchParams() const getPageParam = searchParams.get('page') + const groupId = searchParams.get('groupId') ?? undefined const [toggleFilterByModal, setToggleFilterByModal] = useState(false) const [toggleSaveFiltersModal, setToggleSaveFiltersModal] = useState(false) @@ -234,7 +234,8 @@ const Documents: React.FC = ({ groupId, deidentified }) => { ]) useEffect(() => { - setSearchParams({ page: page.toString() }) + const existingParams = Object.fromEntries(searchParams.entries()) + setSearchParams({ ...existingParams, page: page.toString() }) handlePageError(page, setPage, dispatch, setLoadingStatus) }, [page]) diff --git a/src/components/Dashboard/FormsList/index.tsx b/src/components/Dashboard/FormsList/index.tsx index d84171b7e..51955ad98 100644 --- a/src/components/Dashboard/FormsList/index.tsx +++ b/src/components/Dashboard/FormsList/index.tsx @@ -25,16 +25,15 @@ import { useSearchParams } from 'react-router-dom' import { checkIfPageAvailable, handlePageError } from 'utils/paginationUtils' import Chip from 'components/ui/Chip' -type FormsListProps = { - groupId?: string -} - -const FormsList = ({ groupId }: FormsListProps) => { +const FormsList = () => { const theme = useTheme() const isSm = useMediaQuery(theme.breakpoints.down('md')) const dispatch = useAppDispatch() const [searchParams, setSearchParams] = useSearchParams() const pageParam = searchParams.get('page') + const groupId = searchParams.get('groupId') ?? undefined + const existingParams = Object.fromEntries(searchParams.entries()) + const [toggleFilterByModal, setToggleFilterByModal] = useState(false) const [encounterStatusList, setEncounterStatusList] = useState[]>([]) const [questionnaires, setQuestionnaires] = useState([]) @@ -142,7 +141,7 @@ const FormsList = ({ groupId }: FormsListProps) => { }, [orderBy, formName, startDate, endDate, executiveUnits, encounterStatus, ipp, groupId]) useEffect(() => { - setSearchParams({ page: page.toString() }) + setSearchParams({ ...existingParams, page: page.toString() }) handlePageError(page, setPage, dispatch, setLoadingStatus) }, [page]) diff --git a/src/components/Dashboard/ImagingList/index.tsx b/src/components/Dashboard/ImagingList/index.tsx index 642fb597f..dd4b037d1 100644 --- a/src/components/Dashboard/ImagingList/index.tsx +++ b/src/components/Dashboard/ImagingList/index.tsx @@ -39,15 +39,15 @@ import { useSearchParams } from 'react-router-dom' import { checkIfPageAvailable, handlePageError } from 'utils/paginationUtils' type ImagingListProps = { - groupId?: string deidentified?: boolean } -const ImagingList = ({ groupId, deidentified }: ImagingListProps) => { +const ImagingList = ({ deidentified }: ImagingListProps) => { const appConfig = useContext(AppConfig) const dispatch = useAppDispatch() const [searchParams, setSearchParams] = useSearchParams() const getPageParam = searchParams.get('page') + const groupId = searchParams.get('groupId') ?? undefined const [searchResults, setSearchResults] = useState({ nb: 0, total: 0, label: 'résultats' }) const [patientsResult, setPatientsResult] = useState({ nb: 0, total: 0, label: 'patient(s)' }) @@ -184,7 +184,8 @@ const ImagingList = ({ groupId, deidentified }: ImagingListProps) => { }, [ipp, nda, startDate, endDate, orderBy, searchInput, executiveUnits, modality, groupId, encounterStatus]) useEffect(() => { - setSearchParams({ page: page.toString() }) + const existingParams = Object.fromEntries(searchParams.entries()) + setSearchParams({ ...existingParams, page: page.toString() }) handlePageError(page, setPage, dispatch, setLoadingStatus) }, [page]) diff --git a/src/components/Dashboard/MedicationList/index.tsx b/src/components/Dashboard/MedicationList/index.tsx index 611002641..7e04bda34 100644 --- a/src/components/Dashboard/MedicationList/index.tsx +++ b/src/components/Dashboard/MedicationList/index.tsx @@ -36,13 +36,13 @@ import { selectFiltersAsArray } from 'utils/filters' import { mapToLabel } from 'mappers/pmsi' import { useSearchParams } from 'react-router-dom' import { checkIfPageAvailable, handlePageError } from 'utils/paginationUtils' +import { getMedicationTab } from 'utils/tabsUtils' type MedicationListProps = { - groupId?: string deidentified?: boolean } -const MedicationList = ({ groupId, deidentified }: MedicationListProps) => { +const MedicationList = ({ deidentified }: MedicationListProps) => { const theme = useTheme() const isSm = useMediaQuery(theme.breakpoints.down('md')) const [toggleFilterByModal, setToggleFilterByModal] = useState(false) @@ -55,11 +55,11 @@ const MedicationList = ({ groupId, deidentified }: MedicationListProps) => { const dispatch = useAppDispatch() const [searchParams, setSearchParams] = useSearchParams() const getPageParam = searchParams.get('page') + const groupId = searchParams.get('groupId') ?? undefined + const tabId = searchParams.get('tabId') ?? undefined + const existingParams = Object.fromEntries(searchParams.entries()) - const [selectedTab, setSelectedTab] = useState({ - id: ResourceType.MEDICATION_REQUEST, - label: MedicationLabel.PRESCRIPTION - }) + const [selectedTab, setSelectedTab] = useState(getMedicationTab(tabId)) const [page, setPage] = useState(getPageParam ? parseInt(getPageParam, 10) : 1) const { @@ -228,11 +228,9 @@ const MedicationList = ({ groupId, deidentified }: MedicationListProps) => { ]) useEffect(() => { - handlePageError(page, setPage, dispatch, setLoadingStatus) + setSearchParams({ ...existingParams, page: page.toString(), tabId: selectedTab.id }) - const updatedSearchParams = new URLSearchParams(searchParams) - updatedSearchParams.set('page', page.toString()) - setSearchParams(updatedSearchParams) + handlePageError(page, setPage, dispatch, setLoadingStatus) }, [page]) useEffect(() => { @@ -300,6 +298,7 @@ const MedicationList = ({ groupId, deidentified }: MedicationListProps) => { value: TabType ) => { setSelectedTab(value) + setSearchParams({ ...existingParams, tabId: value.id }) }} /> diff --git a/src/components/Dashboard/PMSIList/index.tsx b/src/components/Dashboard/PMSIList/index.tsx index b03004e16..7f2d90519 100644 --- a/src/components/Dashboard/PMSIList/index.tsx +++ b/src/components/Dashboard/PMSIList/index.tsx @@ -40,13 +40,13 @@ import { selectFiltersAsArray } from 'utils/filters' import { mapToLabel, mapToSourceType } from 'mappers/pmsi' import { useSearchParams } from 'react-router-dom' import { checkIfPageAvailable, handlePageError } from 'utils/paginationUtils' +import { getPMSITab } from 'utils/tabsUtils' type PMSIListProps = { - groupId?: string deidentified?: boolean } -const PMSIList = ({ groupId, deidentified }: PMSIListProps) => { +const PMSIList = ({ deidentified }: PMSIListProps) => { const [toggleFilterByModal, setToggleFilterByModal] = useState(false) const [toggleSaveFiltersModal, setToggleSaveFiltersModal] = useState(false) const [toggleSavedFiltersModal, setToggleSavedFiltersModal] = useState(false) @@ -57,11 +57,11 @@ const PMSIList = ({ groupId, deidentified }: PMSIListProps) => { const dispatch = useAppDispatch() const [searchParams, setSearchParams] = useSearchParams() const getPageParam = searchParams.get('page') + const groupId = searchParams.get('groupId') ?? undefined + const tabId = searchParams.get('tabId') ?? undefined + const existingParams = Object.fromEntries(searchParams.entries()) - const [selectedTab, setSelectedTab] = useState({ - id: ResourceType.CONDITION, - label: PMSILabel.DIAGNOSTIC - }) + const [selectedTab, setSelectedTab] = useState(getPMSITab(tabId)) const sourceType = mapToSourceType(selectedTab.id) const [page, setPage] = useState(getPageParam ? parseInt(getPageParam, 10) : 1) @@ -215,9 +215,7 @@ const PMSIList = ({ groupId, deidentified }: PMSIListProps) => { ]) useEffect(() => { - const updatedSearchParams = new URLSearchParams(searchParams) - updatedSearchParams.set('page', page.toString()) - setSearchParams(updatedSearchParams) + setSearchParams({ ...existingParams, page: page.toString(), tabId: selectedTab.id }) handlePageError(page, setPage, dispatch, setLoadingStatus) }, [page]) @@ -308,6 +306,7 @@ const PMSIList = ({ groupId, deidentified }: PMSIListProps) => { active={selectedTab} onchange={(value: PmsiTab) => { setSelectedTab(value) + setSearchParams({ ...existingParams, tabId: value.id }) }} /> diff --git a/src/components/Dashboard/PatientList/PatientList.tsx b/src/components/Dashboard/PatientList/PatientList.tsx index 5a38c174c..ce1e6fecd 100644 --- a/src/components/Dashboard/PatientList/PatientList.tsx +++ b/src/components/Dashboard/PatientList/PatientList.tsx @@ -53,14 +53,14 @@ import { checkIfPageAvailable, handlePageError } from 'utils/paginationUtils' type PatientListProps = { total: number - groupId?: string deidentified?: boolean | null } -const PatientList = ({ groupId, total, deidentified }: PatientListProps) => { +const PatientList = ({ total, deidentified }: PatientListProps) => { const dispatch = useAppDispatch() const [searchParams, setSearchParams] = useSearchParams() const getPageParam = searchParams.get('page') + const groupId = searchParams.get('groupId') ?? undefined const [toggleFilterByModal, setToggleFilterByModal] = useState(false) const [toggleSaveFiltersModal, setToggleSaveFiltersModal] = useState(false) @@ -165,7 +165,8 @@ const PatientList = ({ groupId, total, deidentified }: PatientListProps) => { }, [genders, vitalStatuses, birthdatesRanges, orderBy, searchBy, searchInput, groupId]) useEffect(() => { - setSearchParams({ page: page.toString() }) + const existingParams = Object.fromEntries(searchParams.entries()) + setSearchParams({ ...existingParams, page: page.toString() }) handlePageError(page, setPage, dispatch, setLoadingStatus) }, [page]) diff --git a/src/components/Patient/PatientMedication/PatientMedication.tsx b/src/components/Patient/PatientMedication/PatientMedication.tsx index bcd95438e..7aaf13de7 100644 --- a/src/components/Patient/PatientMedication/PatientMedication.tsx +++ b/src/components/Patient/PatientMedication/PatientMedication.tsx @@ -42,6 +42,7 @@ import { SourceType } from 'types/scope' import { Hierarchy } from 'types/hierarchy' import { useSearchParams } from 'react-router-dom' import { checkIfPageAvailable, handlePageError } from 'utils/paginationUtils' +import { getMedicationTab } from 'utils/tabsUtils' type PatientMedicationProps = { groupId?: string @@ -64,6 +65,8 @@ const PatientMedication = ({ groupId }: PatientMedicationProps) => { const { classes } = useStyles() const [searchParams, setSearchParams] = useSearchParams() const getPageParam = searchParams.get('page') + const tabId = searchParams.get('tabId') ?? undefined + const existingParams = Object.fromEntries(searchParams.entries()) const theme = useTheme() const isSm = useMediaQuery(theme.breakpoints.down('md')) const [toggleFilterByModal, setToggleFilterByModal] = useState(false) @@ -81,10 +84,7 @@ const PatientMedication = ({ groupId }: PatientMedicationProps) => { const [page, setPage] = useState(getPageParam ? parseInt(getPageParam, 10) : 1) const [selectedTab, setSelectedTab] = useState< TabType - >({ - id: ResourceType.MEDICATION_REQUEST, - label: MedicationLabel.PRESCRIPTION - }) + >(getMedicationTab(tabId)) const [oldTabs, setOldTabs] = useState(null) const { @@ -215,10 +215,7 @@ const PatientMedication = ({ groupId }: PatientMedicationProps) => { useEffect(() => { setOldTabs(selectedTab) - - const updatedSearchParams = new URLSearchParams(searchParams) - updatedSearchParams.set('page', page.toString()) - setSearchParams(updatedSearchParams) + setSearchParams({ ...existingParams, page: page.toString(), tabId: selectedTab.id }) handlePageError(page, setPage, dispatch, setLoadingStatus) }, [page]) @@ -301,6 +298,7 @@ const PatientMedication = ({ groupId }: PatientMedicationProps) => { ) => { setOldTabs(selectedTab) setSelectedTab(value) + setSearchParams({ ...existingParams, tabId: value.id }) }} /> diff --git a/src/components/Patient/PatientPMSI/PatientPMSI.tsx b/src/components/Patient/PatientPMSI/PatientPMSI.tsx index 727872813..148fa8a3f 100644 --- a/src/components/Patient/PatientPMSI/PatientPMSI.tsx +++ b/src/components/Patient/PatientPMSI/PatientPMSI.tsx @@ -8,7 +8,7 @@ import DataTablePmsi from 'components/DataTable/DataTablePmsi' import { useAppSelector, useAppDispatch } from 'state' import { fetchPmsi } from 'state/patient' -import { CohortPMSI, LoadingStatus, PmsiTab, PmsiTabs } from 'types' +import { CohortPMSI, LoadingStatus, PmsiTab } from 'types' import useStyles from './styles' import { cancelPendingRequest } from 'utils/abortController' import { CanceledError } from 'axios' @@ -42,6 +42,7 @@ import { AlertWrapper } from 'components/ui/Alert' import { Hierarchy } from 'types/hierarchy' import { useSearchParams } from 'react-router-dom' import { checkIfPageAvailable, handlePageError } from 'utils/paginationUtils' +import { getPMSITab } from 'utils/tabsUtils' type PatientPMSIProps = { groupId?: string @@ -55,7 +56,7 @@ type PmsiSearchResults = { label: PMSILabel } -export const PMSITabs: PmsiTabs = [ +export const PMSITabs: PmsiTab[] = [ { label: PMSILabel.DIAGNOSTIC, id: ResourceType.CONDITION }, { label: PMSILabel.CCAM, id: ResourceType.PROCEDURE }, { label: PMSILabel.GHM, id: ResourceType.CLAIM } @@ -65,6 +66,8 @@ const PatientPMSI = ({ groupId }: PatientPMSIProps) => { const { classes } = useStyles() const [searchParams, setSearchParams] = useSearchParams() const getPageParam = searchParams.get('page') + const tabId = searchParams.get('tabId') ?? undefined + const existingParams = Object.fromEntries(searchParams.entries()) const [toggleFilterByModal, setToggleFilterByModal] = useState(false) const [toggleSaveFiltersModal, setToggleSaveFiltersModal] = useState(false) @@ -75,10 +78,7 @@ const PatientPMSI = ({ groupId }: PatientPMSIProps) => { const [encounterStatusList, setEncounterStatusList] = useState[]>([]) const dispatch = useAppDispatch() - const [selectedTab, setSelectedTab] = useState({ - id: ResourceType.CONDITION, - label: PMSILabel.DIAGNOSTIC - }) + const [selectedTab, setSelectedTab] = useState(getPMSITab(tabId)) const [oldTabs, setOldTabs] = useState(null) const sourceType = mapToSourceType(selectedTab.id) @@ -193,9 +193,7 @@ const PatientPMSI = ({ groupId }: PatientPMSIProps) => { useEffect(() => { setOldTabs(selectedTab) - const updatedSearchParams = new URLSearchParams(searchParams) - updatedSearchParams.set('page', page.toString()) - setSearchParams(updatedSearchParams) + setSearchParams({ ...existingParams, page: page.toString(), tabId: selectedTab.id }) handlePageError(page, setPage, dispatch, setLoadingStatus) }, [page]) @@ -298,6 +296,7 @@ const PatientPMSI = ({ groupId }: PatientPMSIProps) => { onchange={(value: PmsiTab) => { setOldTabs(selectedTab) setSelectedTab(value) + setSearchParams({ ...existingParams, tabId: value.id }) }} /> diff --git a/src/components/Requests/ProjectsTable/VersionRow/index.tsx b/src/components/Requests/ProjectsTable/VersionRow/index.tsx index c866b6251..a873a7079 100644 --- a/src/components/Requests/ProjectsTable/VersionRow/index.tsx +++ b/src/components/Requests/ProjectsTable/VersionRow/index.tsx @@ -95,7 +95,16 @@ const VersionRow: React.FC<{ requestId: string; cohortsList: Cohort[] }> = ({ re {cohort.group_id ? ( - navigate(`/cohort/${cohort.group_id}`)} underline="hover"> + { + const searchParams = new URLSearchParams() + if (cohort.group_id) { + searchParams.set('groupId', cohort.group_id) + } + navigate(`/cohort?${searchParams.toString()}`) + }} + underline="hover" + > {cohort.name} ) : ( diff --git a/src/components/Routes/AppNavigation/config.tsx b/src/components/Routes/AppNavigation/config.tsx index 24fd76cb2..8b8358826 100644 --- a/src/components/Routes/AppNavigation/config.tsx +++ b/src/components/Routes/AppNavigation/config.tsx @@ -147,16 +147,16 @@ const configRoutes: configRoute[] = [ { exact: true, displaySideBar: true, - path: '/cohort/:cohortId/:tabName', - name: 'cohort/:cohortId/:tabName', + path: '/cohort/:tabName', + name: 'cohort/:tabName', isPrivate: true, element: }, { exact: true, displaySideBar: true, - path: '/cohort/:cohortId', - name: 'cohort/:cohortId', + path: '/cohort', + name: 'cohort', isPrivate: true, element: }, diff --git a/src/types.ts b/src/types.ts index 42d5befe2..5b15b1ad7 100644 --- a/src/types.ts +++ b/src/types.ts @@ -709,8 +709,6 @@ export type TabType = { export type PmsiTab = TabType -export type PmsiTabs = PmsiTab[] - export type MedicationTab = TabType< ResourceType.MEDICATION_ADMINISTRATION | ResourceType.MEDICATION_REQUEST, MedicationLabel diff --git a/src/utils/tabsUtils.ts b/src/utils/tabsUtils.ts new file mode 100644 index 000000000..13eb15db3 --- /dev/null +++ b/src/utils/tabsUtils.ts @@ -0,0 +1,22 @@ +import { medicationTabs } from 'components/Patient/PatientMedication/PatientMedication' +import { PMSITabs } from 'components/Patient/PatientPMSI/PatientPMSI' +import { PMSILabel } from 'types/patient' +import { MedicationLabel, ResourceType } from 'types/requestCriterias' + +export const getPMSITab = (tabId?: string) => { + return ( + PMSITabs.find((tab) => tab.id.toLocaleLowerCase() === tabId?.toLocaleLowerCase()) ?? { + id: ResourceType.CONDITION, + label: PMSILabel.DIAGNOSTIC + } + ) +} + +export const getMedicationTab = (tabId?: string) => { + return ( + medicationTabs.find((tab) => tab.id.toLocaleLowerCase() === tabId?.toLocaleLowerCase()) ?? { + id: ResourceType.MEDICATION_REQUEST, + label: MedicationLabel.PRESCRIPTION + } + ) +} diff --git a/src/views/Dashboard/Dashboard.tsx b/src/views/Dashboard/Dashboard.tsx index d7925e771..07b3226d3 100644 --- a/src/views/Dashboard/Dashboard.tsx +++ b/src/views/Dashboard/Dashboard.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect, useContext } from 'react' -import { Link, useParams, useLocation } from 'react-router-dom' +import { Link, useLocation, useParams, useSearchParams } from 'react-router-dom' import { Grid, Tabs, Tab } from '@mui/material' import CohortPreview from 'components/Dashboard/Preview/Preview' @@ -23,14 +23,13 @@ import MedicationList from 'components/Dashboard/MedicationList' import BiologyList from 'components/Dashboard/BiologyList' import FormsList from 'components/Dashboard/FormsList' -type Tabs = { label: string; value: string; to: string; disabled: boolean | undefined } | undefined +type Tabs = { label: string; value: string; to: string; disabled?: boolean } | undefined const Dashboard: React.FC<{ context: 'patients' | 'cohort' | 'perimeters' | 'new_cohort' }> = ({ context }) => { - const { cohortId, tabName } = useParams<{ - cohortId?: string | undefined - tabName?: string | undefined + const { tabName } = useParams<{ + tabName?: string }>() const dispatch = useAppDispatch() @@ -40,9 +39,11 @@ const Dashboard: React.FC<{ const ODD_IMAGING = appConfig.features.imaging.enabled const ODD_QUESTIONNAIRES = appConfig.features.questionnaires.enabled - const perimetreIds = location.search.substr(1) + const [searchParams] = useSearchParams() - const [selectedTab, selectTab] = useState(tabName || 'preview') + const groupIds = searchParams.get('groupId') ?? undefined + + const [selectedTab, setSelectedTab] = useState(tabName ?? 'preview') const [tabs, setTabs] = useState([]) const open = useAppSelector((state) => state.drawer) @@ -54,17 +55,15 @@ const Dashboard: React.FC<{ case 'patients': setTabs([ // { label: 'Création cohorte', value: 'creation', to: `/cohort/new`, disabled: true }, - { label: 'Aperçu', value: 'preview', to: '/my-patients/preview', disabled: false }, - { label: 'Patients', value: 'patients', to: '/my-patients/patients', disabled: false }, - { label: 'Documents', value: 'documents', to: '/my-patients/documents', disabled: false }, - { label: 'PMSI', value: 'pmsi', to: '/my-patients/pmsi', disabled: false }, - { label: 'Médicaments', value: 'medication', to: '/my-patients/medication', disabled: false }, - { label: 'Biologie', value: 'biology', to: '/my-patients/biology', disabled: false }, - ...(ODD_IMAGING - ? [{ label: 'Imagerie', value: 'imaging', to: '/my-patients/imaging', disabled: false }] - : []), + { label: 'Aperçu', value: 'preview', to: '/my-patients/preview' }, + { label: 'Patients', value: 'patients', to: '/my-patients/patients' }, + { label: 'Documents', value: 'documents', to: '/my-patients/documents' }, + { label: 'PMSI', value: 'pmsi', to: '/my-patients/pmsi' }, + { label: 'Médicaments', value: 'medication', to: '/my-patients/medication' }, + { label: 'Biologie', value: 'biology', to: '/my-patients/biology' }, + ...(ODD_IMAGING ? [{ label: 'Imagerie', value: 'imaging', to: '/my-patients/imaging' }] : []), ...(ODD_QUESTIONNAIRES && !dashboard.deidentifiedBoolean - ? [{ label: 'Formulaires', value: 'forms', to: `/my-patients/forms`, disabled: false }] + ? [{ label: 'Formulaires', value: 'forms', to: `/my-patients/forms` }] : []) ]) break @@ -73,20 +72,21 @@ const Dashboard: React.FC<{ { label: 'Modifier la requête', value: 'creation', - to: `/cohort/new/${dashboard.requestId}/${dashboard.snapshotId}`, - disabled: false + to: `/cohort/new/${dashboard.requestId}/${dashboard.snapshotId}` }, - { label: 'Aperçu cohorte', value: 'preview', to: `/cohort/${cohortId}/preview`, disabled: false }, - { label: 'Données patient', value: 'patients', to: `/cohort/${cohortId}/patients`, disabled: false }, - { label: 'Documents cliniques', value: 'documents', to: `/cohort/${cohortId}/documents`, disabled: false }, - { label: 'PMSI', value: 'pmsi', to: `/cohort/${cohortId}/pmsi`, disabled: false }, - { label: 'Médicaments', value: 'medication', to: `/cohort/${cohortId}/medication`, disabled: false }, - { label: 'Biologie', value: 'biology', to: `/cohort/${cohortId}/biology`, disabled: false }, - ...(ODD_IMAGING - ? [{ label: 'Imagerie', value: 'imaging', to: `/cohort/${cohortId}/imaging`, disabled: false }] - : []), + { label: 'Aperçu cohorte', value: 'preview', to: `/cohort/preview${location.search}` }, + { label: 'Données patient', value: 'patients', to: `/cohort/patients${location.search}` }, + { + label: 'Documents cliniques', + value: 'documents', + to: `/cohort/documents${location.search}` + }, + { label: 'PMSI', value: 'pmsi', to: `/cohort/pmsi${location.search}` }, + { label: 'Médicaments', value: 'medication', to: `/cohort/medication${location.search}` }, + { label: 'Biologie', value: 'biology', to: `/cohort/biology${location.search}` }, + ...(ODD_IMAGING ? [{ label: 'Imagerie', value: 'imaging', to: `/cohort/imaging${location.search}` }] : []), ...(ODD_QUESTIONNAIRES && !dashboard.deidentifiedBoolean - ? [{ label: 'Formulaires', value: 'forms', to: `/cohort/${cohortId}/forms`, disabled: false }] + ? [{ label: 'Formulaires', value: 'forms', to: `/cohort/forms${location.search}` }] : []) ]) break @@ -96,66 +96,69 @@ const Dashboard: React.FC<{ { label: 'Aperçu cohorte', value: 'preview', to: `/cohort/new/preview`, disabled: true }, { label: 'Données patient', value: 'patients', to: `/cohort/new/patients`, disabled: true }, { label: 'Documents cliniques', value: 'documents', to: `/cohort/new/documents`, disabled: true }, - { label: 'PMSI', value: 'pmsi', to: `/cohort/new/pmsi`, disabled: false }, - { label: 'Médicaments', value: 'medication', to: `/cohort/new/medication`, disabled: false }, - { label: 'Biologie', value: 'biology', to: `/cohort/new/biology`, disabled: false }, + { label: 'PMSI', value: 'pmsi', to: `/cohort/new/pmsi` }, + { label: 'Médicaments', value: 'medication', to: `/cohort/new/medication` }, + { label: 'Biologie', value: 'biology', to: `/cohort/new/biology` }, ...(ODD_IMAGING ? [{ label: 'Imagerie', value: 'imaging', to: `/cohort/new/imaging`, disabled: true }] : []), ...(ODD_QUESTIONNAIRES && !dashboard.deidentifiedBoolean - ? [{ label: 'Formulaires', value: 'forms', to: `/cohort/new/forms`, disabled: false }] + ? [{ label: 'Formulaires', value: 'forms', to: `/cohort/new/forms` }] : []) ]) break - case 'perimeters': + case 'perimeters': { setTabs([ // { label: 'Création cohorte', value: 'creation', to: `/cohort/new`, disabled: true }, - { label: 'Aperçu', value: 'preview', to: `/perimeters/preview${location.search}`, disabled: false }, + { label: 'Aperçu', value: 'preview', to: `/perimeters/preview${location.search}` }, { label: 'Données patient', value: 'patients', - to: `/perimeters/patients${location.search}`, - disabled: false + to: `/perimeters/patients${location.search}` }, { label: 'Documents cliniques', value: 'documents', - to: `/perimeters/documents${location.search}`, - disabled: false + to: `/perimeters/documents${location.search}` }, - { label: 'PMSI', value: 'pmsi', to: `/perimeters/pmsi${location.search}`, disabled: false }, - { label: 'Médicaments', value: 'medication', to: `/perimeters/new/medication`, disabled: false }, - { label: 'Biologie', value: 'biology', to: `/perimeters/biology${location.search}`, disabled: false }, + { label: 'PMSI', value: 'pmsi', to: `/perimeters/pmsi${location.search}` }, + { + label: 'Médicaments', + value: 'medication', + to: `/perimeters/medication${location.search}` + }, + { label: 'Biologie', value: 'biology', to: `/perimeters/biology${location.search}` }, ...(ODD_IMAGING - ? [{ label: 'Imagerie', value: 'imaging', to: `/perimeters/imaging${location.search}`, disabled: false }] + ? [{ label: 'Imagerie', value: 'imaging', to: `/perimeters/imaging${location.search}` }] : []), ...(ODD_QUESTIONNAIRES && !dashboard.deidentifiedBoolean - ? [{ label: 'Formulaires', value: 'forms', to: `/perimeters/forms${location.search}`, disabled: false }] + ? [{ label: 'Formulaires', value: 'forms', to: `/perimeters/forms${location.search}` }] : []) ]) break + } default: break } } useEffect(() => { - const id = context === 'cohort' ? cohortId : context === 'perimeters' ? perimetreIds : undefined + const id = groupIds ?? undefined if (context !== 'new_cohort') { dispatch(fetchExploredCohort({ context, id })) } - }, [context, cohortId]) // eslint-disable-line + }, [context, groupIds]) // eslint-disable-line useEffect(() => { onChangeTabs() }, [dashboard]) const forceReload = () => { - const id = context === 'cohort' ? cohortId : context === 'perimeters' ? perimetreIds : undefined + const id = groupIds ?? undefined dispatch(fetchExploredCohort({ context, id, forceReload: true })) } const handleChangeTabs = (event: React.SyntheticEvent, newTab: string) => { - selectTab(newTab) + setSelectedTab(newTab) } if (context === 'new_cohort') { @@ -168,8 +171,6 @@ const Dashboard: React.FC<{ return } - const groupId = context !== 'patients' ? cohortId ?? perimetreIds : undefined - return ( - {tabs && - tabs.map( - (tab) => - tab && ( - - ) - )} + {tabs.map( + (tab) => + tab && ( + + ) + )} @@ -217,10 +217,8 @@ const Dashboard: React.FC<{ {selectedTab === 'preview' && ( )} {selectedTab === 'patients' && ( - - )} - {selectedTab === 'documents' && ( - - )} - {selectedTab === 'pmsi' && } - {selectedTab === 'medication' && ( - - )} - {selectedTab === 'biology' && ( - - )} - {selectedTab === 'imaging' && ( - - )} - {ODD_QUESTIONNAIRES && !dashboard.deidentifiedBoolean && selectedTab === 'forms' && ( - + )} + + {selectedTab === 'documents' && } + {selectedTab === 'pmsi' && } + {selectedTab === 'medication' && } + {selectedTab === 'biology' && } + {selectedTab === 'imaging' && } + {ODD_QUESTIONNAIRES && !dashboard.deidentifiedBoolean && selectedTab === 'forms' && } ) diff --git a/src/views/Scope/CareSiteView.tsx b/src/views/Scope/CareSiteView.tsx index ca1e167d4..984c2d1e8 100644 --- a/src/views/Scope/CareSiteView.tsx +++ b/src/views/Scope/CareSiteView.tsx @@ -19,8 +19,9 @@ const CareSiteView = () => { const open = useAppSelector((state) => state.drawer) const handleNavigation = () => { - const perimetresIds = selectedCodes.map((code) => code.cohort_id ?? null) - navigate(`/perimeters?${perimetresIds}`) + const perimetresIds = selectedCodes.map((code) => code.cohort_id ?? null).filter(Boolean) + const searchParams = new URLSearchParams({ groupId: perimetresIds.join(',') }).toString() + navigate(`/perimeters?${searchParams}`) } useEffect(() => {