feat(us-2143): etq liste des actions

app/(connected)/(with-sidebar)/(without-chat)/mes-jeunes/[jeune_id]/actions/[action_id]/qualification/page.tsx

@@ -35,7 +35,6 @@ export default async function Qualification({
 
   const { action, jeune } = actionContent
   if (action.status !== StatutAction.Terminee) notFound()
-  if (action.qualification?.estQualifiee) notFound()
 
   const returnTo = `/mes-jeunes/${jeune.id}/actions/${action.id}`
   return (

components/action/ActionRow.tsx

@@ -21,10 +21,9 @@ export default function ActionRow({ action, jeuneId }: ActionRowProps) {
     : '/mes-jeunes'
 
   const actionEstEnRetard =
-    action.status !== StatutAction.Annulee &&
-    action.status !== StatutAction.Terminee &&
-    DateTime.fromISO(action.dateEcheance) < DateTime.now()
-  const creationDate = toShortDate(action.creationDate)
+    DateTime.fromISO(action.dateEcheance) < DateTime.now() &&
+    action.status === StatutAction.EnCours
+
   const dateEcheance = toShortDate(action.dateEcheance)
 
   return (
@@ -34,7 +33,7 @@ export default function ActionRow({ action, jeuneId }: ActionRowProps) {
     >
       <TD className='rounded-l-base'>
         <div className='flex items-center'>
-          {action.qualification?.estQualifiee &&
+          {action.status === StatutAction.Qualifiee &&
             action.qualification?.isSituationNonProfessionnelle && (
               <IconComponent
                 role='img'
@@ -50,11 +49,6 @@ export default function ActionRow({ action, jeuneId }: ActionRowProps) {
           </span>
         </div>
       </TD>
-      <TD>
-        <span className='flex items-center'>
-          <span>{creationDate}</span>
-        </span>
-      </TD>
       <TD>
         <span className='flex flex-row items-center'>
           <span
@@ -79,7 +73,10 @@ export default function ActionRow({ action, jeuneId }: ActionRowProps) {
       </TD>
       <TD className='rounded-r-base w-[160px]'>
         <span className='flex items-center justify-between'>
-          <TagStatutAction status={action.status} />
+          <TagStatutAction
+            status={action.status}
+            actionEstEnRetard={actionEstEnRetard}
+          />
           <IconComponent
             name={IconName.ChevronRight}
             focusable='false'

components/action/FiltresStatutsActions.tsx

@@ -25,10 +25,10 @@ export default function FiltresStatutsActions({
     return (
       <label key={id} htmlFor={id} className='flex pb-8'>
         <input
-          type='checkbox'
+          type='radio'
           value={statut}
           id={id}
-          className='h-5 w-5'
+          className='h-5 w-5 shrink-0'
           checked={statutsSelectionnes.includes(statut)}
           onChange={actionnerStatut}
         />
@@ -38,12 +38,9 @@ export default function FiltresStatutsActions({
   }
 
   function actionnerStatut(e: ChangeEvent<HTMLInputElement>) {
-    const statut = e.target.value as StatutAction
-    if (statutsSelectionnes.includes(statut)) {
-      setStatutsSelectionnes(statutsSelectionnes.filter((s) => s !== statut))
-    } else {
-      setStatutsSelectionnes(statutsSelectionnes.concat(statut))
-    }
+    const statut = e.target.value
+    if (statut === 'Tout sélectionner') setStatutsSelectionnes([])
+    else setStatutsSelectionnes([statut as StatutAction])
   }
 
   function filtrerActions(e: FormEvent) {
@@ -64,16 +61,15 @@ export default function FiltresStatutsActions({
         aria-expanded={afficherFiltresStatuts}
         onClick={() => setAfficherFiltresStatuts(!afficherFiltresStatuts)}
         aria-label='Statut - Filtrer les actions'
+        title='Filtrer les actions par statut'
         className='flex items-center p-4 w-full h-full'
       >
         Statut
         <IconComponent
-          name={
-            afficherFiltresStatuts ? IconName.ChevronUp : IconName.ChevronDown
-          }
+          name={IconName.Filter}
           aria-hidden={true}
           focusable={false}
-          className='h-4 w-4 ml-2 fill-primary'
+          className='h-6 w-6 ml-2 fill-primary'
         />
       </button>
 
@@ -87,6 +83,21 @@ export default function FiltresStatutsActions({
             <legend className='sr-only'>
               Choisir un ou plusieurs statuts à filtrer
             </legend>
+            <label
+              key='statut-tout-selectionner'
+              htmlFor='statut-tout-selectionner'
+              className='flex pb-8 text-base-bold'
+            >
+              <input
+                type='radio'
+                value='Tout sélectionner'
+                id='statut-tout-selectionner'
+                className='h-5 w-5 shrink-0'
+                checked={statutsSelectionnes.length === 0}
+                onChange={actionnerStatut}
+              />
+              <span className='pl-5'>Tout sélectionner</span>
+            </label>
             {Object.keys(StatutAction).map((statut) =>
               renderFiltresStatuts(statut as StatutAction)
             )}

components/action/OngletActions.tsx

@@ -11,7 +11,7 @@ import {
   EtatQualificationAction,
   StatutAction,
 } from 'interfaces/action'
-import { Conseiller, estMilo, estPoleEmploi } from 'interfaces/conseiller'
+import { Conseiller, estPoleEmploi } from 'interfaces/conseiller'
 import { BaseJeune } from 'interfaces/jeune'
 import { MetadonneesPagination } from 'types/pagination'
 
@@ -149,7 +149,6 @@ export default function OngletActions({
           {actionsInitiales.metadonnees.nombreTotal > 0 && (
             <>
               <TableauActionsJeune
-                afficherFiltresEtatsQualification={estMilo(conseiller)}
                 jeune={jeune}
                 actions={actionsAffichees}
                 isLoading={isLoading}

components/action/TableauActionsJeune.tsx

@@ -1,8 +1,7 @@
 import React, { useState } from 'react'
 
-import EmptyStateImage from 'assets/images/empty_state.svg'
+import EmptyStateImage from 'assets/images/illustration-search-grey.svg'
 import ActionRow from 'components/action/ActionRow'
-import FiltresEtatsQualificationActions from 'components/action/FiltresEtatsQualificationActions'
 import FiltresStatutsActions from 'components/action/FiltresStatutsActions'
 import { TRI } from 'components/action/OngletActions'
 import Button, { ButtonStyle } from 'components/ui/Button/Button'
@@ -21,7 +20,6 @@ import {
 import { BaseJeune } from 'interfaces/jeune'
 
 interface TableauActionsJeuneProps {
-  afficherFiltresEtatsQualification: boolean
   jeune: BaseJeune
   actions: Action[]
   isLoading: boolean
@@ -34,7 +32,6 @@ interface TableauActionsJeuneProps {
 }
 
 export default function TableauActionsJeune({
-  afficherFiltresEtatsQualification,
   jeune,
   actions,
   isLoading,
@@ -43,18 +40,10 @@ export default function TableauActionsJeune({
   tri,
 }: TableauActionsJeuneProps) {
   const [statutsValides, setStatutsValides] = useState<StatutAction[]>([])
-  const [etatsQualificationValides, setEtatsQualificationValides] = useState<
-    EtatQualificationAction[]
-  >([])
 
   function reinitialiserFiltres() {
     onFiltres({ statuts: [], etatsQualification: [] })
     setStatutsValides([])
-    setEtatsQualificationValides([])
-  }
-
-  function getIsSortedByCreationDate(): boolean {
-    return tri === TRI.dateCroissante || tri === TRI.dateDecroissante
   }
 
   function getIsSortedByDateEcheance(): boolean {
@@ -67,14 +56,6 @@ export default function TableauActionsJeune({
     return tri === TRI.dateEcheanceDecroissante || tri === TRI.dateDecroissante
   }
 
-  function trierParDateCreation() {
-    let nouveauTri: TRI = TRI.dateDecroissante
-    if (getIsSortedByCreationDate() && getIsSortedDesc()) {
-      nouveauTri = TRI.dateCroissante
-    }
-    onTri(nouveauTri)
-  }
-
   function trierParDateEcheance() {
     let nouveauTri: TRI = TRI.dateEcheanceDecroissante
     if (getIsSortedByDateEcheance() && getIsSortedDesc()) {
@@ -86,6 +67,12 @@ export default function TableauActionsJeune({
   const headerColumnWithButtonHover = 'rounded-base hover:bg-primary_lighten'
   const columnHeaderButtonStyle = 'flex items-center w-full h-full p-4'
 
+  function getOrdreTriParDate() {
+    return `Trier les actions ordre ${
+      getIsSortedDesc() ? 'antéchronologique' : 'chronologique'
+    }`
+  }
+
   function filtrerActionsParStatuts(statutsSelectionnes: StatutAction[]) {
     setStatutsValides(statutsSelectionnes)
     onFiltres({
@@ -94,29 +81,12 @@ export default function TableauActionsJeune({
     })
   }
 
-  function filtrerActionsParEtatsQualification(
-    etatsQualificationSelectionnes: EtatQualificationAction[]
-  ) {
-    setEtatsQualificationValides(etatsQualificationSelectionnes)
-    onFiltres({
-      etatsQualification: etatsQualificationSelectionnes,
-      statuts: [],
-    })
-  }
-
   return (
     <>
-      {afficherFiltresEtatsQualification && (
-        <FiltresEtatsQualificationActions
-          defaultValue={etatsQualificationValides}
-          onFiltres={filtrerActionsParEtatsQualification}
-        />
-      )}
-
       {isLoading && <SpinningLoader />}
 
       {actions.length === 0 && (
-        <>
+        <div className='flex flex-col justify-center'>
           <EmptyStateImage
             focusable='false'
             aria-hidden='true'
@@ -129,11 +99,11 @@ export default function TableauActionsJeune({
             type='button'
             style={ButtonStyle.PRIMARY}
             onClick={reinitialiserFiltres}
-            className='m-auto mt-8'
+            className='mx-auto mt-8'
           >
             Réinitialiser les filtres
           </Button>
-        </>
+        </div>
       )}
 
       {actions.length > 0 && (
@@ -145,27 +115,15 @@ export default function TableauActionsJeune({
         >
           <THead>
             <TR isHeader={true}>
-              <TH>Intitulé de l’action</TH>
-              <TH className={headerColumnWithButtonHover} estCliquable={true}>
-                <button
-                  onClick={trierParDateCreation}
-                  aria-label='Créée le - trier les actions'
-                  className={columnHeaderButtonStyle}
-                >
-                  Créée le
-                  <SortIcon
-                    isSorted={getIsSortedByCreationDate()}
-                    isDesc={getIsSortedDesc()}
-                  />
-                </button>
-              </TH>
+              <TH>Titre de l’action</TH>
               <TH className={headerColumnWithButtonHover} estCliquable={true}>
                 <button
                   onClick={trierParDateEcheance}
-                  aria-label='Échéance - trier les actions'
+                  aria-label={`Date de l’action - ${getOrdreTriParDate()}`}
+                  title={getOrdreTriParDate()}
                   className={columnHeaderButtonStyle}
                 >
-                  Échéance
+                  Date de l’action
                   <SortIcon
                     isSorted={getIsSortedByDateEcheance()}
                     isDesc={getIsSortedDesc()}

components/action/TagQualificationAction.tsx

@@ -9,7 +9,6 @@ interface Props {
   qualification?: {
     libelle: string
     isSituationNonProfessionnelle: boolean
-    estQualifiee: boolean
   }
 }
 
@@ -19,7 +18,7 @@ export default function TagQualificationAction({
 }: Props) {
   return (
     <>
-      {statut === StatutAction.Terminee && !qualification?.estQualifiee && (
+      {statut === StatutAction.Terminee && (
         <TagStatut
           label={'Action à qualifier'}
           color='accent_2'
@@ -28,8 +27,8 @@ export default function TagQualificationAction({
           className='mb-4 text-s-bold'
         />
       )}
-      {qualification?.estQualifiee &&
-        qualification.isSituationNonProfessionnelle && (
+      {statut === StatutAction.Qualifiee &&
+        qualification?.isSituationNonProfessionnelle && (
           <TagStatut
             label={qualification.libelle}
             color='additional_2'
@@ -38,10 +37,10 @@ export default function TagQualificationAction({
             className='mb-4 text-s-bold'
           />
         )}
-      {qualification?.estQualifiee &&
-        !qualification.isSituationNonProfessionnelle && (
+      {statut === StatutAction.Qualifiee &&
+        !qualification?.isSituationNonProfessionnelle && (
           <TagStatut
-            label={qualification.libelle}
+            label={qualification!.libelle}
             color='accent_4'
             backgroundColor='accent_4_lighten'
             className='mb-4 text-s-bold'

components/action/TagStatutAction.tsx

@@ -6,15 +6,31 @@ import { StatutAction } from 'interfaces/action'
 
 interface TagStatutActionProps {
   status: StatutAction
+  actionEstEnRetard: boolean
 }
 
-export default function TagStatutAction({ status }: TagStatutActionProps) {
-  const {
-    label,
-    color,
-    altColor: backgroundColor,
-  } = propsStatutsActions[status]
+export default function TagStatutAction({
+  status,
+  actionEstEnRetard,
+}: TagStatutActionProps) {
+  const { label, color, altColor: backgroundColor } = determineAttributs()
+
+  function determineAttributs() {
+    if (actionEstEnRetard)
+      return {
+        label: 'En retard',
+        color: 'warning',
+        altColor: 'warning_lighten',
+      }
+    return propsStatutsActions[status]
+  }
+
   return (
-    <TagStatut label={label} color={color} backgroundColor={backgroundColor} />
+    <TagStatut
+      label={label}
+      color={color}
+      backgroundColor={backgroundColor}
+      className='text-s-bold'
+    />
   )
 }