Merge pull request #1543 from SocialGouv/feat/us-3078-ajouter-le-tri-…

…date-dactivites-page-portefeuille Feat/us 3078 ajouter le tri date dactivites page portefeuille
SocialGouv · Dec 11, 2024 · 0dec851 · 0dec851
2 parents 864f103 + 2bd2bed
commit 0dec851
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 6 deletions.
diff --git a/components/jeune/TableauBeneficiaires.tsx b/components/jeune/TableauBeneficiaires.tsx
@@ -2,6 +2,8 @@ import { DateTime } from 'luxon'
 import dynamic from 'next/dynamic'
 import React, { ForwardedRef, forwardRef, useEffect, useState } from 'react'
 
+import SortIcon from '../ui/SortIcon'
+
 import EmptyState from 'components/EmptyState'
 import { IllustrationName } from 'components/ui/IllustrationComponent'
 import Pagination from 'components/ui/Table/Pagination'
@@ -36,14 +38,38 @@ function TableauBeneficiaires(
 
   const DEBUT_PERIODE = DateTime.now().startOf('week')
   const FIN_PERIODE = DateTime.now().endOf('week')
+  const [triDerniereActiviter, setTriDerniereActiviter] = useState(true)
+  const [beneficiairesTrier, setBeneficiairesTrier] =
+    useState(beneficiairesFiltres)
+
+  const trierParDerniereActivite = (
+    beneficiaires: BeneficiaireAvecInfosComplementaires[],
+    ordre: boolean
+  ): BeneficiaireAvecInfosComplementaires[] => {
+    return [...beneficiaires].sort((a, b) => {
+      if (!a.isActivated && !b.isActivated) return 0
+      if (!a.isActivated) return 1
+      if (!b.isActivated) return -1
+
+      const dateA = DateTime.fromISO(a.lastActivity!)
+      const dateB = DateTime.fromISO(b.lastActivity!)
+      return ordre ? dateB.diff(dateA).toMillis() : dateA.diff(dateB).toMillis()
+    })
+  }
 
   useEffect(() => {
     setPage(1)
   }, [beneficiairesFiltres])
 
+  useEffect(() => {
+    setBeneficiairesTrier(
+      trierParDerniereActivite(beneficiairesFiltres, triDerniereActiviter)
+    )
+  }, [beneficiairesFiltres, triDerniereActiviter])
+
   return (
     <>
-      {beneficiairesFiltres.length === 0 && (
+      {beneficiairesTrier.length === 0 && (
         <EmptyState
           shouldFocus={true}
           illustrationName={IllustrationName.People}
@@ -52,32 +78,53 @@ function TableauBeneficiaires(
         />
       )}
 
-      {beneficiairesFiltres.length > 0 && (
+      {beneficiairesTrier.length > 0 && (
         <>
           <h2 className='text-m-bold mb-2 text-center text-grey_800'>
             Semaine du {toShortDate(DEBUT_PERIODE)} au{' '}
             {toShortDate(FIN_PERIODE)}
           </h2>
 
+          <button
+            onClick={() => {
+              setTriDerniereActiviter(!triDerniereActiviter)
+            }}
+            className='flex float-right mt-8 mb-8 text-m-regular text-right text-grey_800'
+            title={
+              triDerniereActiviter
+                ? 'Trier par dernière activité ordre antichronologique'
+                : 'Trier par dernière activité ordre chronologique'
+            }
+            aria-label={
+              triDerniereActiviter
+                ? 'Trier par dernière activité ordre antichronologique'
+                : 'Trier par dernière activité ordre chronologique'
+            }
+            type='button'
+          >
+            Trier par dernière activité
+            <SortIcon isDesc={triDerniereActiviter} />
+          </button>
+
           <Table
             ref={ref}
             caption={{
               text: 'Liste des bénéficiaires',
-              count: total === beneficiairesFiltres.length ? total : undefined,
+              count: total === beneficiairesTrier.length ? total : undefined,
               visible: true,
             }}
           >
             {estMilo(conseiller) && (
               <TableauBeneficiairesMilo
-                beneficiairesFiltres={beneficiairesFiltres}
+                beneficiairesFiltres={beneficiairesTrier}
                 page={page}
                 total={total}
               />
             )}
 
             {!estMilo(conseiller) && (
               <TableauBeneficiairesPasMilo
-                beneficiairesFiltres={beneficiairesFiltres}
+                beneficiairesFiltres={beneficiairesTrier}
                 page={page}
                 total={total}
               />

diff --git a/tests/pages/PortefeuillePage.test.tsx b/tests/pages/PortefeuillePage.test.tsx
@@ -1,4 +1,4 @@
-import { act, screen, within } from '@testing-library/react'
+import { act, fireEvent, screen, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { AxeResults } from 'axe-core'
 import { axe } from 'jest-axe'
@@ -255,6 +255,26 @@ describe('PortefeuillePage client side', () => {
         screen.getByText(`Semaine du ${DEBUT_PERIODE} au ${FIN_PERIODE}`)
       ).toBeInTheDocument()
     })
+    it('parmet de trier bénéficiaire par dernière activité ', async () => {
+      //when
+      const button = screen.getByRole('button', {
+        name: /Trier par dernière activité/i,
+      })
+
+      //then
+
+      expect(button).toHaveAttribute(
+        'title',
+        'Trier par dernière activité ordre antichronologique'
+      )
+
+      await userEvent.click(button)
+
+      expect(button).toHaveAttribute(
+        'title',
+        'Trier par dernière activité ordre chronologique'
+      )
+    })
 
     it("affiche la colonne nombre d'actions des bénéficiaires", () => {
       // Then