wip: continued added details to new explorations page - Ref gestion-d…

…e-projet#2507

src/components/Exploration/components/Breadcrumb.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import useBreadcrumb from '../hooks/useBreadcrumb'
+import { Breadcrumbs, Link } from '@mui/material'
+
+const Breadcrumb = () => {
+  const items = useBreadcrumb()
+  return (
+    // TODO: style
+    <Breadcrumbs>
+      {items.map((item, index) => (
+        <Link key={index} href={item.url}>
+          {item.label}
+        </Link>
+      ))}
+    </Breadcrumbs>
+  )
+}
+
+export default Breadcrumb

src/components/Exploration/components/CohortsList.tsx

@@ -28,8 +28,7 @@ const CohortsList = () => {
     { label: 'requête parent', align: 'left' }, // TODO: conditionner à si onglet cohortes, cliquable ou pas?
     { label: 'statut' },
     { label: 'nb de patients' },
-    { label: 'estimation du nombre de patients ap-hp' }, // TODO: conditionner à si niveau cohortes
-    { label: 'pourcentage du total' }, // TODO: conditionner à si niveau échantillons
+    { label: 'estimation du nombre de patients ap-hp' },
     { label: 'date de création' },
     { label: 'échantillons' } // TODO: conditionner à si niveau cohortes
   ]
@@ -51,13 +50,12 @@ const CohortsList = () => {
             </TableCellWrapper>
             <TableCellWrapper>{cohort.parentRequest}</TableCellWrapper>
             <TableCellWrapper>{cohort.status}</TableCellWrapper>
-            <TableCellWrapper>{cohort.creationDate}</TableCellWrapper>
             <TableCellWrapper>{cohort.totalPatients}</TableCellWrapper>
             <TableCellWrapper>{cohort.aphpEstimation}</TableCellWrapper>
             <TableCellWrapper>{cohort.creationDate}</TableCellWrapper>
             <TableCellWrapper>
               <Button endIcon={<ArrowRightAltIcon />} onClick={() => console.log('hey coucou')}>
-                {cohort.samples} cohortes
+                {cohort.samples} échantillons
               </Button>
             </TableCellWrapper>
           </TableRow>

src/components/Exploration/components/ProjectsList.tsx

@@ -1,22 +1,30 @@
 import React from 'react'
-import {} from 'state'
 
-import { Grid, Typography } from '@mui/material'
+import { Grid } from '@mui/material'
 import ProjectCard from 'components/ui/ProjectCard'
-import { projects } from 'views/MyResearches/data'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+import useProjects from '../hooks/useProjects'
 
 const ProjectsList = () => {
+  const navigate = useNavigate()
+  const [searchParams, setSearchParams] = useSearchParams()
+  const searchInput = searchParams.get('searchInput') ?? ''
+  const startDate = searchParams.get('startDate') ?? undefined
+  const endDate = searchParams.get('endDate') ?? undefined
+
+  const { projectsList, total, loading } = useProjects(searchInput, startDate, endDate)
+
   return (
     <Grid container xs={11} gap="50px">
-      <Typography>projectsList</Typography>
+      {/* TODO: add circular progress */}
 
-      {projects.map((project) => (
+      {projectsList.map((project) => (
         <ProjectCard
-          key={project.creationDate} // TODO: mettre autre chose comme key
-          title={project.title}
-          creationDate={project.creationDate}
-          requestNumber={project.requestNumber}
-          onclick={() => console.log('hey coucou')}
+          key={project.created_at} // TODO: mettre autre chose comme key
+          title={project.name}
+          creationDate={project.created_at}
+          requestNumber={project.requests.length}
+          onclick={() => navigate(`/researches/projects/${project.uuid}${location.search}`)}
         />
       ))}
     </Grid>

src/components/Exploration/components/RequestsList.tsx

@@ -1,21 +1,24 @@
 import React, { useState } from 'react'
 
-import { Grid, TableRow, Typography } from '@mui/material'
-import { useSearchParams } from 'react-router-dom'
+import { CircularProgress, Grid, TableRow, Typography } from '@mui/material'
+import { useParams, useSearchParams } from 'react-router-dom'
 import { Column } from 'types'
 import ResearchesTable from './Table'
-import { requests } from 'views/MyResearches/data'
 import { TableCellWrapper } from 'components/ui/TableCell/styles'
 import Button from 'components/ui/Button'
 import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt'
+import useRequests from '../hooks/useRequests'
 
 const RequestsList = () => {
+  const { projectId } = useParams()
   const [searchParams, setSearchParams] = useSearchParams()
   const searchInput = searchParams.get('searchInput') ?? ''
   const startDate = searchParams.get('startDate') ?? undefined
   const endDate = searchParams.get('endDate') ?? undefined
   const page = parseInt(searchParams.get('page') ?? '1', 10)
 
+  const { requestsList, total, loading } = useRequests(projectId, searchInput, startDate, endDate, page)
+
   const handlePageChange = (newPage: number) => {
     searchParams.set('page', String(newPage))
     setSearchParams(searchParams)
@@ -28,28 +31,41 @@ const RequestsList = () => {
     { label: 'nb de cohortes' }
   ]
 
+  const getCohortTotal = (requestSnapshots: any[]) => {
+    const snapshotsWithLinkedCohorts = requestSnapshots.filter((snapshot) => snapshot.has_linked_cohorts === true)
+    return snapshotsWithLinkedCohorts.length
+  }
+
   return (
     <Grid container xs={11} gap="50px">
       <Typography>RequestsList</Typography>
 
       {/* TODO: add circular progress */}
+      {loading ? (
+        <CircularProgress />
+      ) : (
+        <ResearchesTable columns={columns} page={page} setPage={handlePageChange} total={total}>
+          {requestsList.map((request) => {
+            const cohortTotal = getCohortTotal(request.query_snapshots)
 
-      <ResearchesTable columns={columns}>
-        {requests.map((request) => (
-          <TableRow key={request.name} sx={{ borderBottom: '1px solid #000', borderRadius: 20 }}>
-            <TableCellWrapper align="left" headCell>
-              {request.name} *icônes action*
-            </TableCellWrapper>
-            <TableCellWrapper>{request.parentProject}</TableCellWrapper>
-            <TableCellWrapper>{request.modificationDate}</TableCellWrapper>
-            <TableCellWrapper>
-              <Button endIcon={<ArrowRightAltIcon />} onClick={() => console.log('hey coucou')}>
-                {request.cohortTotal} cohortes
-              </Button>
-            </TableCellWrapper>
-          </TableRow>
-        ))}
-      </ResearchesTable>
+            return (
+              <TableRow key={request.uuid} sx={{ borderBottom: '1px solid #000', borderRadius: 20 }}>
+                <TableCellWrapper align="left" headCell>
+                  {request.name} *icônes action*
+                </TableCellWrapper>
+                <TableCellWrapper>{request.parent_folder}</TableCellWrapper>
+                <TableCellWrapper>{request.created_at}</TableCellWrapper>
+                <TableCellWrapper>
+                  {/* TODO: rendre non cliquable si pas d'enfant dispo */}
+                  <Button endIcon={cohortTotal >= 1 && <ArrowRightAltIcon />} onClick={() => console.log('hey coucou')}>
+                    {cohortTotal} cohorte{cohortTotal > 1 && 's'}
+                  </Button>
+                </TableCellWrapper>
+              </TableRow>
+            )
+          })}
+        </ResearchesTable>
+      )}
     </Grid>
   )
 }

src/components/Exploration/components/SamplesList.tsx

@@ -1,34 +1,55 @@
 import React, { useState } from 'react'
 import {} from 'state'
 
-import { Box, Grid, TableRow, Typography } from '@mui/material'
+import { Grid, TableRow, Typography } from '@mui/material'
+import ResearchesTable from './Table'
+import { TableCellWrapper } from 'components/ui/TableCell/styles'
+import { useSearchParams } from 'react-router-dom'
+import { Column } from 'types'
+import { samples } from 'views/MyResearches/data'
 
 const SamplesList = () => {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const searchInput = searchParams.get('searchInput') ?? ''
+  const startDate = searchParams.get('startDate') ?? undefined
+  const endDate = searchParams.get('endDate') ?? undefined
+  const page = parseInt(searchParams.get('page') ?? '1', 10)
+
+  // TODO: add les params pour les filtres exclusifs aux cohortes + bien penser à les suppr en changeant d'onglet
+  // TODO: ne pas oublier les websockets
+
+  const columns: Column[] = [
+    { label: '', align: 'left' },
+    { label: "nom de l'échantillon *icones d'action*", align: 'left' },
+    { label: 'cohorte parent' }, // TODO: conditionner à si onglet échantillons, cliquable ou pas?
+    { label: 'statut' },
+    { label: 'nb de patients' },
+    { label: 'pourcentage du total' }, // TODO: conditionner à si niveau échantillons
+    { label: 'date de création' }
+  ]
+
   return (
-    <Typography>SamplesList</Typography>
+    <Grid container xs={11} gap="50px">
+      <Typography>SamplesList</Typography>
 
-    /* <Grid container xs={11} gap="50px">
-          <DataTable columns={cohortColumns}>
-            {cohorts.map((cohort) => (
-              <TableRow key={cohort.name} sx={{ borderBottom: '1px solid #000', borderRadius: 20 }}>
-                <TableCellWrapper align="left" headCell>
-                  *favicon*
-                </TableCellWrapper>
-                <TableCellWrapper align="left" headCell>
-                  {cohort.name} *icônes action*
-                </TableCellWrapper>
-                <TableCellWrapper>{cohort.parentRequest}</TableCellWrapper>
-                <TableCellWrapper>{cohort.status}</TableCellWrapper>
-                <TableCellWrapper>{cohort.creationDate}</TableCellWrapper>
-                <TableCellWrapper>{cohort.totalPatients}</TableCellWrapper>
-                <TableCellWrapper>{cohort.aphpEstimation}</TableCellWrapper>
-                <TableCellWrapper>{cohort.creationDate}</TableCellWrapper>
-                <TableCellWrapper>
-                  <Button endIcon={<ArrowRightAltIcon />}>{cohort.samples} cohortes</Button>
-                </TableCellWrapper>
-              </TableRow>
-            ))}
-        </Grid> */
+      <ResearchesTable columns={columns}>
+        {samples.map((cohort) => (
+          <TableRow key={cohort.name} sx={{ borderBottom: '1px solid #000', borderRadius: 20 }}>
+            <TableCellWrapper align="left" headCell>
+              *favicon*
+            </TableCellWrapper>
+            <TableCellWrapper align="left" headCell>
+              {cohort.name} *icônes action*
+            </TableCellWrapper>
+            <TableCellWrapper>{cohort.parentCohort}</TableCellWrapper>
+            <TableCellWrapper>{cohort.status}</TableCellWrapper>
+            <TableCellWrapper>{cohort.totalPatients}</TableCellWrapper>
+            <TableCellWrapper>{cohort.percentage}</TableCellWrapper>
+            <TableCellWrapper>{cohort.creationDate}</TableCellWrapper>
+          </TableRow>
+        ))}
+      </ResearchesTable>
+    </Grid>
   )
 }
 

src/components/Exploration/hooks/useBreadcrumb.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { useLocation } from 'react-router'
+
+const useBreadCrumb = () => {
+  const location = useLocation()
+  const pathParts = location.pathname.split('/').filter(Boolean)
+  console.log('test pathParts', pathParts)
+
+  const items = []
+
+  // TODO: clean et externaliser
+  // TODO: faire une fonction plus jolie pour trouver où je suis et récup les noms
+  if (pathParts[1] === 'projects') {
+    items.push({ label: 'Mes projets', url: 'researches/projects' })
+  } else if (pathParts[1] === 'requests') {
+    items.push({ label: 'Mes requêtes', url: 'researches/requests' })
+  } else if (pathParts[1] === 'cohorts') {
+    items.push({ label: 'Mes cohortes', url: 'researches/cohorts' })
+  } else if (pathParts[1] === 'samples') {
+    items.push({ label: 'Mes échantillons', url: 'researches/samples' })
+  }
+
+  return items
+}
+
+export default useBreadCrumb

src/components/Exploration/hooks/useProjects.tsx

@@ -0,0 +1,26 @@
+import React, { useEffect, useState } from 'react'
+import services from 'services/aphp'
+
+const useProjects = (searchTerm: string, startDate?: string, endDate?: string) => {
+  const [projectsList, setProjectsList] = useState<any[]>([])
+  const [total, setTotal] = useState(0)
+  const [loading, setLoading] = useState(false)
+
+  // TODO: à externaliser
+  const fetchProjectsList = async () => {
+    // TODO: modifier le service de sorte à ajouter les filtres + try/catch
+    const projectsList = await services.projects.fetchProjectsList()
+    console.log('test projectsList', projectsList)
+    setProjectsList(projectsList.results)
+    setTotal(projectsList.count)
+  }
+
+  useEffect(() => {
+    // setLoading(true)
+    console.log('test fetchPRoejctsList()', fetchProjectsList())
+  }, [searchTerm, startDate, endDate])
+
+  return { projectsList, total, loading }
+}
+
+export default useProjects

src/components/Exploration/hooks/useRequests.tsx

@@ -0,0 +1,28 @@
+import React, { useEffect, useState } from 'react'
+import services from 'services/aphp'
+
+const useRequests = (projectId: string, searchTerm: string, startDate?: string, endDate?: string, page = 1) => {
+  const [requestsList, setRequestsList] = useState<any[]>([])
+  const [total, setTotal] = useState(0)
+  const [loading, setLoading] = useState(false)
+
+  // TODO: à externaliser
+  const fetchRequestsList = async () => {
+    // TODO: modifier le service de sorte à ajouter les filtres + try/catch
+    const rowsPerPage = 20
+    const offset = (page - 1) * rowsPerPage
+    const requestsList = await services.projects.fetchRequestsList(rowsPerPage, offset)
+    console.log('test requestsList', requestsList)
+    setRequestsList(requestsList.results)
+    setTotal(requestsList.count)
+  }
+
+  useEffect(() => {
+    // setLoading(true)
+    console.log('test fetchRequestsList()', fetchRequestsList())
+  }, [projectId, searchTerm, startDate, endDate, page])
+
+  return { requestsList, total, loading }
+}
+
+export default useRequests

src/components/Routes/AppNavigation/config.tsx

@@ -134,14 +134,38 @@ const configRoutes: configRoute[] = [
         path: 'projects',
         element: <ProjectsList />
       },
+      {
+        path: 'projects/:projectId',
+        element: <RequestsList />
+      },
+      {
+        path: 'projects/:projectId/:requestId',
+        element: <CohortsList />
+      },
+      {
+        path: 'projects/:projectId/:requestId/:cohortId',
+        element: <SamplesList />
+      },
+
       {
         path: 'requests',
         element: <RequestsList />
       },
+      {
+        path: 'requests/:requestId',
+        element: <CohortsList />
+      },
+      {
+        path: 'requests/:requestId/:cohortId',
+        element: <SamplesList />
+      },
+
       {
         path: 'cohorts',
         element: <CohortsList />
       },
+      { path: 'cohorts/:cohortId', element: <SamplesList /> },
+
       {
         path: 'samples',
         element: <SamplesList />