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

…de-projet#2507

src/components/Exploration/components/ActionMenu.tsx

@@ -0,0 +1,68 @@
+import React, { ReactNode, useState } from 'react'
+
+import { IconButton, Menu, MenuItem, Tooltip } from '@mui/material'
+import MoreVertIcon from '@mui/icons-material/MoreVert'
+
+type Action = {
+  icon: ReactNode
+  label: string
+  onclick: () => void
+  tooltipText?: string
+  disabled?: boolean
+}
+
+type ActionMenuProps = {
+  actions: Action[]
+}
+
+// TODO: à revoir je pense, pas adapté
+
+const ActionMenu: React.FC<ActionMenuProps> = ({ actions }) => {
+  const [anchorEl, setAnchorEl] = useState(null)
+
+  return (
+    <>
+      <IconButton
+        id="long-button"
+        onClick={(event) => {
+          event.stopPropagation()
+          // @ts-ignore
+          setAnchorEl(event.currentTarget)
+          //   setSelectedCohort(row)
+        }}
+      >
+        <MoreVertIcon />
+      </IconButton>
+      <Menu
+        anchorEl={anchorEl}
+        open={
+          !!anchorEl
+          // && row.uuid === selectedCohort?.uuid
+        }
+        onClose={() => setAnchorEl(null)}
+      >
+        {actions.map((action, index) => (
+          <Tooltip title={action.tooltipText} key={index}>
+            <span>
+              <MenuItem
+                //   className={classes.menuItem}
+                onClick={(event) => {
+                  event.stopPropagation()
+                  setAnchorEl(null)
+                  action.onclick()
+                }}
+                disabled={action.disabled}
+              >
+                <>
+                  {action.icon} {action.label}
+                </>
+              </MenuItem>
+            </span>
+          </Tooltip>
+        ))}
+      </Menu>
+    </>
+  )
+}
+
+export default ActionMenu

src/components/Exploration/components/CohortsList.tsx

@@ -1,65 +1,199 @@
-import React, { useState } from 'react'
-import {} from 'state'
+import React, { useContext, useState } from 'react'
+import { useAppSelector } from 'state'
 
-import { Grid, TableRow, Typography } from '@mui/material'
-import { useSearchParams } from 'react-router-dom'
+import { Box, Grid, IconButton, TableRow, Tooltip, Typography } from '@mui/material'
+import { useNavigate, useSearchParams } from 'react-router-dom'
 import ResearchesTable from './Table'
-import { Column } from 'types'
-import { cohorts } from 'views/MyResearches/data'
+import { Cohort, CohortJobStatus, Column } from 'types'
 import { TableCellWrapper } from 'components/ui/TableCell/styles'
 import Button from 'components/ui/Button'
 import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt'
+import { formatDate } from 'utils/formatDate'
+import FavStar from 'components/ui/FavStar'
+import useCohorts from '../hooks/useCohorts'
+import displayDigit from 'utils/displayDigit'
+import { AppConfig } from 'config'
+import ExportIcon from '@mui/icons-material/GetApp'
+import RequestTree from 'assets/icones/schema.svg?react'
+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'
 
 // TODO: il y a un hook useCohortsList, à checker à la rentrée
 
 const CohortsList = () => {
+  const appConfig = useContext(AppConfig)
+  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 page = parseInt(searchParams.get('page') ?? '1', 10)
+  const maintenanceIsActive = useAppSelector((state) => state?.me?.maintenance?.active ?? false)
+
+  const { cohortsList, total, loading } = useCohorts('', 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
 
   const columns: Column[] = [
     { label: '', align: 'left' },
     { label: 'nom de la cohorte', align: 'left' },
-    { label: 'requête parent', align: 'left' }, // TODO: conditionner à si onglet cohortes, cliquable ou pas?
+    { label: 'requête parent' }, // TODO: conditionner à si onglet cohortes, cliquable ou pas?
     { label: 'statut' },
     { label: 'nb de patients' },
     { label: 'estimation du nombre de patients ap-hp' },
     { label: 'date de création' },
-    { label: 'échantillons' } // TODO: conditionner à si niveau cohortes
+    { label: 'échantillons' }
   ]
 
+  const onClickRow = (cohort: Cohort) => {
+    const searchParams = new URLSearchParams()
+    if (cohort.group_id) {
+      searchParams.set('groupId', cohort.group_id)
+    }
+    navigate(`/cohort?${searchParams.toString()}`)
+  }
+
+  const getExportTooltip = (cohort: Cohort, isExportable: boolean) => {
+    if (!cohort.exportable) {
+      return 'Cette cohorte ne peut pas être exportée car elle dépasse le seuil de nombre de patients maximum autorisé'
+    } else if (!isExportable && cohort.request_job_status === CohortJobStatus.FINISHED) {
+      return "Vous n'avez pas les droits suffisants pour exporter cette cohorte"
+    } else if (cohort.request_job_status === CohortJobStatus.FAILED) {
+      return 'Cette cohorte ne peut pas être exportée car elle a échoué lors de sa création'
+    } else if (cohort.request_job_status === CohortJobStatus.PENDING) {
+      return 'Cette cohorte ne peut pas être exportée car elle est en cours de création'
+    } else {
+      return 'Exporter la cohorte'
+    }
+  }
+
+  const getGlobalEstimation = (cohort: Cohort) => {
+    if (cohort.dated_measure_global) {
+      if (cohort.dated_measure_global?.measure_min === null || cohort.dated_measure_global?.measure_max === null) {
+        return 'N/A'
+      } else {
+        return `${displayDigit(cohort.dated_measure_global?.measure_min)} - ${displayDigit(
+          cohort.dated_measure_global?.measure_max
+        )}`
+      }
+    } else {
+      return 'N/A'
+    }
+  }
+
   return (
-    <Grid container xs={11} gap="50px">
+    <Grid container gap="50px">
       <Typography>CohortsList</Typography>
 
       {/* TODO: add circular progress */}
 
       <ResearchesTable columns={columns}>
-        {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.totalPatients}</TableCellWrapper>
-            <TableCellWrapper>{cohort.aphpEstimation}</TableCellWrapper>
-            <TableCellWrapper>{cohort.creationDate}</TableCellWrapper>
-            <TableCellWrapper>
-              <Button endIcon={<ArrowRightAltIcon />} onClick={() => console.log('hey coucou')}>
-                {cohort.samples} échantillons
-              </Button>
-            </TableCellWrapper>
-          </TableRow>
-        ))}
+        {cohortsList.map((cohort) => {
+          const isExportable = appConfig.features.export.enabled ? cohort?.rights?.export_csv_nomi : false
+          const actions = [
+            {
+              icon: <EditIcon />,
+              label: 'Éditer',
+              onclick: () => console.log('edit'),
+              tooltip: '',
+              disabled: false
+            },
+            {
+              icon: <DeleteOutlineIcon />,
+              label: 'Supprimer',
+              onclick: () => console.log('delete'),
+              tooltip: '',
+              disabled: false
+            }
+          ]
+
+          return (
+            <TableRow
+              key={cohort.name}
+              sx={{ borderBottom: '1px solid #000', borderRadius: 20 }}
+              onClick={() => onClickRow(cohort)}
+            >
+              <TableCellWrapper align="left" headCell>
+                <IconButton
+                  onClick={(event) => {
+                    event.stopPropagation()
+                    console.log('favorite')
+                    // setSelectedExportableCohort(row ?? undefined)
+                  }}
+                >
+                  <FavStar favorite={cohort.favorite} />
+                </IconButton>
+              </TableCellWrapper>
+              <TableCellWrapper align="left" headCell>
+                {cohort.name}
+                <Box display="flex">
+                  <Tooltip title={getExportTooltip(cohort, !!isExportable)}>
+                    <div>
+                      <IconButton
+                        size="small"
+                        onClick={(event) => {
+                          event.stopPropagation()
+                          // setSelectedExportableCohort(row ?? undefined)
+                        }}
+                        disabled={
+                          !isExportable ||
+                          !cohort.exportable ||
+                          maintenanceIsActive ||
+                          cohort.request_job_status === CohortJobStatus.LONG_PENDING ||
+                          cohort.request_job_status === CohortJobStatus.FAILED ||
+                          cohort.request_job_status === CohortJobStatus.PENDING
+                        }
+                      >
+                        <ExportIcon />
+                      </IconButton>
+                    </div>
+                  </Tooltip>
+                  <Tooltip title={'Accéder à la version de la requête ayant créé la cohorte'}>
+                    <div>
+                      <IconButton
+                        size="small"
+                        onClick={(event) => {
+                          event.stopPropagation()
+                          navigate(`/cohort/new/${cohort.request}/${cohort.request_query_snapshot}`)
+                        }}
+                        disabled={maintenanceIsActive}
+                      >
+                        <RequestTree />
+                      </IconButton>
+                    </div>
+                  </Tooltip>
+                  <Tooltip title={'Créer un échantillon à partir de la cohorte'}>
+                    <div>
+                      <IconButton
+                        size="small"
+                        onClick={(event) => {
+                          event.stopPropagation()
+                        }}
+                        disabled={maintenanceIsActive}
+                      >
+                        <ColorizeIcon />
+                      </IconButton>
+                    </div>
+                  </Tooltip>
+                  <ActionMenu actions={actions} />
+                </Box>
+              </TableCellWrapper>
+              <TableCellWrapper>{cohort.request}</TableCellWrapper>
+              <TableCellWrapper>{cohort.request_job_status}</TableCellWrapper>
+              <TableCellWrapper>{displayDigit(cohort.result_size)}</TableCellWrapper>
+              <TableCellWrapper>{getGlobalEstimation(cohort)}</TableCellWrapper>
+              <TableCellWrapper>{formatDate(cohort.created_at, true)}</TableCellWrapper>
+              <TableCellWrapper>
+                <Button endIcon={<ArrowRightAltIcon />} onClick={() => console.log('hey coucou')}>
+                  {/* {cohort.samples} échantillons */}
+                </Button>
+              </TableCellWrapper>
+            </TableRow>
+          )
+        })}
       </ResearchesTable>
     </Grid>
   )