diff --git a/src/components/Exploration/components/Breadcrumb.tsx b/src/components/Exploration/components/Breadcrumb.tsx index 85059af09..d297f1f12 100644 --- a/src/components/Exploration/components/Breadcrumb.tsx +++ b/src/components/Exploration/components/Breadcrumb.tsx @@ -1,17 +1,28 @@ import React from 'react' import useBreadcrumb from '../hooks/useBreadcrumb' -import { Breadcrumbs, Link } from '@mui/material' +import { Breadcrumbs, Link, Typography } from '@mui/material' +import { Link as RouterLink } from 'react-router-dom' const Breadcrumb = () => { const items = useBreadcrumb() return ( // TODO: style - {items.map((item, index) => ( - - {item.label} - - ))} + {items.map((item, index) => { + // Si c'est le dernier item, pas de lien + const isLast = index === items.length - 1 + if (isLast) { + return {item.label} + } + + return item.url ? ( + + {item.label} + + ) : ( + {item.label} + ) + })} ) } diff --git a/src/components/Exploration/components/CohortsList.tsx b/src/components/Exploration/components/CohortsList.tsx index 3e13d6478..2364a7a50 100644 --- a/src/components/Exploration/components/CohortsList.tsx +++ b/src/components/Exploration/components/CohortsList.tsx @@ -2,7 +2,7 @@ import React, { useContext, useState } from 'react' import { useAppSelector } from 'state' import { Box, Grid, IconButton, TableRow, Tooltip, Typography } from '@mui/material' -import { useNavigate, useSearchParams } from 'react-router-dom' +import { useNavigate, useParams, useSearchParams } from 'react-router-dom' import ResearchesTable from './Table' import { Cohort, CohortJobStatus, Column } from 'types' import { TableCellWrapper } from 'components/ui/TableCell/styles' @@ -19,12 +19,14 @@ import ColorizeIcon from '@mui/icons-material/Colorize' import EditIcon from '@mui/icons-material/Edit' import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline' import ActionMenu from './ActionMenu' +import useRequest from '../hooks/useRequest' // TODO: il y a un hook useCohortsList, à checker à la rentrée const CohortsList = () => { const appConfig = useContext(AppConfig) const navigate = useNavigate() + const { projectId, requestId } = useParams() const [searchParams, setSearchParams] = useSearchParams() const searchInput = searchParams.get('searchInput') ?? '' const startDate = searchParams.get('startDate') ?? undefined @@ -32,7 +34,8 @@ const CohortsList = () => { const page = parseInt(searchParams.get('page') ?? '1', 10) const maintenanceIsActive = useAppSelector((state) => state?.me?.maintenance?.active ?? false) - const { cohortsList, total, loading } = useCohorts('', searchInput, startDate, endDate) + const { request: parentRequest, requestLoading, requestIsError } = useRequest(requestId) + const { cohortsList, total, loading } = useCohorts(requestId ?? '', searchInput, startDate, endDate) // TODO: add les params pour les filtres exclusifs aux cohortes + bien penser à les suppr en changeant d'onglet // TODO: ne pas oublier les websockets @@ -40,7 +43,7 @@ const CohortsList = () => { const columns: Column[] = [ { label: '', align: 'left' }, { label: 'nom de la cohorte', align: 'left' }, - { label: 'requête parent' }, // TODO: conditionner à si onglet cohortes, cliquable ou pas? + ...(!requestId ? [{ label: 'requête parent' }] : []), //TODO: cliquable ou pas? { label: 'statut' }, { label: 'nb de patients' }, { label: 'estimation du nombre de patients ap-hp' }, @@ -90,9 +93,22 @@ const CohortsList = () => { } return ( - - CohortsList - + + {requestId && ( + + + {parentRequest?.name} + + {parentRequest?.description} + {/* TODO: ajouter les actions sur projet parent */} + + + + + + + + )} {/* TODO: add circular progress */} @@ -119,7 +135,7 @@ const CohortsList = () => { onClickRow(cohort)} + // onClick={() => onClickRow(cohort)} > { - {cohort.request} + {!requestId && {cohort.request}} {cohort.request_job_status} {displayDigit(cohort.result_size)} {getGlobalEstimation(cohort)} {formatDate(cohort.created_at, true)} - diff --git a/src/components/Exploration/components/RequestsList.tsx b/src/components/Exploration/components/RequestsList.tsx index 6057fb391..a6507fc77 100644 --- a/src/components/Exploration/components/RequestsList.tsx +++ b/src/components/Exploration/components/RequestsList.tsx @@ -9,7 +9,6 @@ import Button from 'components/ui/Button' import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt' import useRequests from '../hooks/useRequests' import { formatDate } from 'utils/formatDate' -import { Delete, Edit } from '@mui/icons-material' import ActionMenu from './ActionMenu' import EditIcon from '@mui/icons-material/Edit' import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline' @@ -31,7 +30,6 @@ const RequestsList = () => { const page = parseInt(searchParams.get('page') ?? '1', 10) const maintenanceIsActive = useAppSelector((state) => state?.me?.maintenance?.active ?? false) - console.log('test useProject(projectId)', useProject(projectId)) const { project: parentProject, projectLoading, projectIsError } = useProject(projectId) const { requestsList, total, loading } = useRequests(projectId, searchInput, startDate, endDate, page) @@ -40,11 +38,9 @@ const RequestsList = () => { setSearchParams(searchParams) } - console.log('test parentProject', parentProject) - const columns: Column[] = [ { label: 'nom de la requête', align: 'left' }, - { label: 'projet' }, // TODO: conditionner à si onglet requêtes + réfléchir si cliquable ou pas? + ...(!projectId ? [{ label: 'projet' }] : []), // TODO: réfléchir si cliquable ou pas? { label: 'date de modification' }, { label: 'nb de cohortes' } ] @@ -97,10 +93,10 @@ const RequestsList = () => { {parentProject?.description} {/* TODO: ajouter les actions sur projet parent */} - + - + )} @@ -116,7 +112,7 @@ const RequestsList = () => { navigate(`/cohort/new/${request.uuid}`)} + // onClick={() => navigate(`/cohort/new/${request.uuid}`)} > {getRequestName(request)} @@ -131,16 +127,21 @@ const RequestsList = () => { - {request.parent_folder} + {!projectId && {request.parent_folder}} {formatDate(request.created_at, true)} {/* TODO: rendre non cliquable si pas d'enfant dispo */}