wip: progress with the style - Ref : gestion-de-projet#2507

aphp · Jan 16, 2025 · ce13264 · ce13264
1 parent a2b4443
commit ce13264
Show file tree

Hide file tree

Showing 16 changed files with 235 additions and 120 deletions.
diff --git a/src/assets/icones/color-picker.svg b/src/assets/icones/color-picker.svg
diff --git a/src/assets/icones/download.svg b/src/assets/icones/download.svg
diff --git a/src/components/Exploration/components/ActionMenu.tsx b/src/components/Exploration/components/ActionMenu.tsx
@@ -22,17 +22,20 @@ const ActionMenu: React.FC<ActionMenuProps> = ({ actions }) => {
 
   return (
     <>
-      <IconButton
-        id="long-button"
-        onClick={(event) => {
-          event.stopPropagation()
-          // @ts-ignore
-          setAnchorEl(event.currentTarget)
-          //   setSelectedCohort(row)
-        }}
-      >
-        <MoreVertIcon />
-      </IconButton>
+      <Tooltip title="Autres actions">
+        <IconButton
+          id="long-button"
+          style={{ color: '#000' }}
+          onClick={(event) => {
+            event.stopPropagation()
+            // @ts-ignore
+            setAnchorEl(event.currentTarget)
+            //   setSelectedCohort(row)
+          }}
+        >
+          <MoreVertIcon />
+        </IconButton>
+      </Tooltip>
       <Menu
         anchorEl={anchorEl}
         open={

diff --git a/src/components/Exploration/components/Breadcrumb.tsx b/src/components/Exploration/components/Breadcrumb.tsx
@@ -6,21 +6,23 @@ import { Link as RouterLink } from 'react-router-dom'
 const Breadcrumb = () => {
   const items = useBreadcrumb()
   return (
-    // TODO: style
-    <Breadcrumbs>
+    // TODO: style à extraire?
+    <Breadcrumbs separator=">">
       {items.map((item, index) => {
         // Si c'est le dernier item, pas de lien
         const isLast = index === items.length - 1
         if (isLast) {
-          return <Typography key={index}>{item.label}</Typography>
+          return (
+            <Typography style={{ color: '#000', fontSize: 14, fontWeight: 'bold' }} key={index}>
+              {item.label}
+            </Typography>
+          )
         }
 
-        return item.url ? (
-          <Link key={index} component={RouterLink} to={item.url}>
+        return (
+          <Link key={index} component={RouterLink} to={item.url} style={{ color: '#BFBABA', textUnderlineOffset: 2 }}>
             {item.label}
           </Link>
-        ) : (
-          <Typography key={index}>{item.label}</Typography>
         )
       })}
     </Breadcrumbs>

diff --git a/src/components/Exploration/components/CohortsList.tsx b/src/components/Exploration/components/CohortsList.tsx
@@ -10,19 +10,47 @@ 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 Download from 'assets/icones/download.svg?react'
+import Picker from 'assets/icones/color-picker.svg?react'
 import EditIcon from '@mui/icons-material/Edit'
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'
 import ActionMenu from './ActionMenu'
 import useRequest from '../hooks/useRequest'
+import useCohorts from '../hooks/useCohorts'
+import StatusChip from './StatusChip'
+import UpdateIcon from '@mui/icons-material/Update'
 
 // TODO: il y a un hook useCohortsList, à checker à la rentrée
 
+export const getCohortStatusChip = (status?: CohortJobStatus, jobFailMessage?: string) => {
+  if (jobFailMessage) {
+    return (
+      <Tooltip title={jobFailMessage}>
+        <StatusChip label="Erreur" status={'error'} />
+      </Tooltip>
+    )
+  }
+
+  switch (status) {
+    case CohortJobStatus.FINISHED:
+      return <StatusChip label="Terminé" status={'finished'} />
+    case CohortJobStatus.PENDING:
+    case CohortJobStatus.NEW:
+      return <StatusChip label="En cours" status={'in-progress'} />
+    case CohortJobStatus.LONG_PENDING:
+      return (
+        <Tooltip title="Cohorte volumineuse : sa création est plus complexe et nécessite d'être placée dans une file d'attente. Un mail vous sera envoyé quand celle-ci sera disponible.">
+          <StatusChip label="En cours" status={'in-progress'} icon={<UpdateIcon />} />
+        </Tooltip>
+      )
+    default:
+      return <StatusChip label="Erreur" status={'error'} />
+  }
+}
+
 const CohortsList = () => {
   const appConfig = useContext(AppConfig)
   const navigate = useNavigate()
@@ -112,7 +140,7 @@ const CohortsList = () => {
       {/* TODO: add circular progress */}
 
       <ResearchesTable columns={columns} page={page} setPage={handlePageChange} total={total}>
-        {cohortsList.map((cohort) => {
+        {cohortsList.map((cohort: Cohort) => {
           const isExportable = appConfig.features.export.enabled ? cohort?.rights?.export_csv_nomi : false
           const actions = [
             {
@@ -134,7 +162,6 @@ const CohortsList = () => {
           return (
             <TableRow
               key={cohort.name}
-              sx={{ borderBottom: '1px solid #000', borderRadius: 20 }}
               // onClick={() => onClickRow(cohort)}
             >
               <TableCellWrapper align="left" headCell>
@@ -145,72 +172,81 @@ const CohortsList = () => {
                     // setSelectedExportableCohort(row ?? undefined)
                   }}
                 >
-                  <FavStar favorite={cohort.favorite} />
+                  <FavStar favorite={cohort.favorite} height={20} />
                 </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>
+                <Grid container alignItems={'center'}>
+                  <Box display="flex" alignItems="center" maxWidth={'75%'}>
+                    {cohort.name}
+                  </Box>
+                  <Box display={'flex'} alignItems={'center'}>
+                    <Tooltip title={getExportTooltip(cohort, !!isExportable)}>
+                      <div>
+                        <IconButton
+                          style={{ color: '#000' }}
+                          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
+                          }
+                        >
+                          <Download />
+                        </IconButton>
+                      </div>
+                    </Tooltip>
+                    <Tooltip title={'Créer un échantillon à partir de la cohorte'}>
+                      <div>
+                        <IconButton
+                          size="small"
+                          onClick={(event) => {
+                            event.stopPropagation()
+                          }}
+                          disabled={maintenanceIsActive}
+                          style={{ color: '#000' }}
+                        >
+                          <Picker />
+                        </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>
+                    <ActionMenu actions={actions} />
+                  </Box>
+                </Grid>
               </TableCellWrapper>
               {!requestId && <TableCellWrapper>{cohort.request}</TableCellWrapper>}
-              <TableCellWrapper>{cohort.request_job_status}</TableCellWrapper>
+              <TableCellWrapper>
+                {getCohortStatusChip(cohort.request_job_status as CohortJobStatus, cohort.request_job_fail_msg)}
+              </TableCellWrapper>
               <TableCellWrapper>{displayDigit(cohort.result_size)}</TableCellWrapper>
               <TableCellWrapper>{getGlobalEstimation(cohort)}</TableCellWrapper>
               <TableCellWrapper>{formatDate(cohort.created_at, true)}</TableCellWrapper>
               <TableCellWrapper>
                 {/* TODO: rendre non cliquable si pas d'enfant dispo */}
                 <Button
-                  // endIcon={cohortTotal >= 1 && <ArrowRightAltIcon />}
+                  endIcon={<ArrowRightAltIcon />}
+                  clearVariant
                   onClick={() =>
                     // TODO: pourquoi le preventDefault ne fonctionne pas ?
                     {

diff --git a/src/components/Exploration/components/ProjectsList.tsx b/src/components/Exploration/components/ProjectsList.tsx
@@ -9,6 +9,7 @@ import Button from 'components/ui/Button'
 import useCreateProject from '../hooks/useCreateProject'
 import useEditProject from '../hooks/useEditProject'
 import useDeleteProject from '../hooks/useDeleteProject'
+import AddIcon from '@mui/icons-material/Add'
 
 const ProjectsList = () => {
   const navigate = useNavigate()
@@ -40,25 +41,33 @@ const ProjectsList = () => {
     deleteProjectMutation.mutate(project)
   }
   return (
-    <Grid container xs={11} gap="50px">
-      <Button onClick={handleAddProject}>Ajouter un projet</Button>
-      <Typography>{total} projets</Typography>
-
-      {loading ? (
-        <CircularProgress />
-      ) : (
-        projectsList.map((project: ProjectType) => (
-          <ProjectCard
-            key={project.uuid}
-            title={project.name}
-            creationDate={project.created_at}
-            requestNumber={project.requests?.length ?? 0}
-            onclick={() => navigate(`/researches/projects/${project.uuid}${location.search}`)}
-            onedit={() => handleEditProject(project)}
-            ondelete={() => handleDeleteProject(project)}
-          />
-        ))
-      )}
+    <Grid container style={{ padding: '20px 0' }} gap="20px">
+      <Grid container justifyContent={'space-between'} alignItems={'center'}>
+        <Typography>Tri par :</Typography>
+        <Typography fontWeight={'bold'} fontSize={14}>
+          {total} projets
+        </Typography>
+        <Button width="fit-content" onClick={handleAddProject} endIcon={<AddIcon />}>
+          Ajouter un projet
+        </Button>
+      </Grid>
+      <Grid container gap="50px">
+        {loading ? (
+          <CircularProgress /> /* TODO: regarder pour ajouter un Suspense? */
+        ) : (
+          projectsList.map((project: ProjectType) => (
+            <ProjectCard
+              key={project.uuid}
+              title={project.name}
+              creationDate={project.created_at}
+              requestNumber={project.requests?.length ?? 0}
+              onclick={() => navigate(`/researches/projects/${project.uuid}${location.search}`)}
+              onedit={() => handleEditProject(project)}
+              ondelete={() => handleDeleteProject(project)}
+            />
+          ))
+        )}
+      </Grid>
     </Grid>
   )
 }

diff --git a/src/components/Exploration/components/RequestsList.tsx b/src/components/Exploration/components/RequestsList.tsx
@@ -111,13 +111,13 @@ const RequestsList = () => {
             return (
               <TableRow
                 key={request.uuid}
-                sx={{ borderBottom: '1px solid #000', borderRadius: 20 }}
                 // onClick={() => navigate(`/cohort/new/${request.uuid}`)}
               >
                 <TableCellWrapper align="left" headCell>
                   {getRequestName(request)}
                   <Tooltip title="Partager la requête">
                     <IconButton
+                      style={{ color: '#000' }}
                       size="small"
                       onClick={() => onShareRequest(request.uuid)}
                       disabled={maintenanceIsActive}
@@ -130,8 +130,9 @@ const RequestsList = () => {
                 {!projectId && <TableCellWrapper>{request.parent_folder}</TableCellWrapper>}
                 <TableCellWrapper>{formatDate(request.created_at, true)}</TableCellWrapper>
                 <TableCellWrapper>
-                  {/* TODO: rendre non cliquable si pas d'enfant dispo */}
                   <Button
+                    clearVariant
+                    disabled={cohortTotal < 1}
                     endIcon={cohortTotal >= 1 && <ArrowRightAltIcon />}
                     onClick={() =>
                       // TODO: pourquoi le preventDefault ne fonctionne pas ?

diff --git a/src/components/Exploration/components/StatusChip/index.tsx b/src/components/Exploration/components/StatusChip/index.tsx
@@ -0,0 +1,18 @@
+import React, { ReactElement } from 'react'
+import { ChipWrapper } from './styles'
+
+export type StatusVariant = 'error' | 'in-progress' | 'finished'
+
+type StatusChipProps = {
+  label: string
+  status: StatusVariant
+  icon?: ReactElement
+}
+
+// TODO: à merge avec l'autre status chip? faire attention, il y a aussi un troisieme style qui traine
+
+const StatusChip = ({ label, status, icon }: StatusChipProps) => {
+  return <ChipWrapper label={label} status={status} icon={icon} />
+}
+
+export default StatusChip