91 lines
3.3 KiB
Markdown
91 lines
3.3 KiB
Markdown
# Amélioration de la Pagination - Page Contrats
|
|
|
|
## Date
|
|
13 octobre 2025
|
|
|
|
## Résumé
|
|
Amélioration de la pagination de la page `/contrats` pour offrir une meilleure expérience utilisateur avec :
|
|
- Pagination affichée en haut ET en bas du tableau
|
|
- Affichage du nombre total de contrats (pas seulement le nombre affiché)
|
|
- Affichage du nombre total de pages
|
|
- Possibilité de choisir le nombre d'éléments par page (10, 50, 100)
|
|
|
|
## Modifications apportées
|
|
|
|
### 1. API Backend (`app/api/contrats/route.ts`)
|
|
- ✅ Ajout de `total` et `totalPages` dans la réponse JSON
|
|
- ✅ Calcul correct : `total: filtered.length` et `totalPages: Math.ceil(filtered.length / limit)`
|
|
- ✅ Mise à jour pour le mode démo également
|
|
|
|
### 2. Frontend (`app/(app)/contrats/page.tsx`)
|
|
|
|
#### a) Type de données
|
|
- ✅ Mise à jour du type de retour de l'API pour inclure `total?: number` et `totalPages?: number`
|
|
- ✅ Extraction des valeurs : `const total = data?.total ?? 0;` et `const totalPages = data?.totalPages ?? 0;`
|
|
|
|
#### b) Nouveau composant Pagination
|
|
Création d'un composant réutilisable avec :
|
|
```typescript
|
|
type PaginationProps = {
|
|
page: number;
|
|
totalPages: number;
|
|
total: number;
|
|
limit: number;
|
|
onPageChange: (page: number) => void;
|
|
onLimitChange: (limit: number) => void;
|
|
isFetching?: boolean;
|
|
itemsCount: number;
|
|
};
|
|
```
|
|
|
|
**Fonctionnalités :**
|
|
- Navigation avec boutons Précédent/Suivant (désactivés aux extrémités)
|
|
- Affichage "Page X sur Y"
|
|
- Sélecteur pour changer le nombre d'éléments affichés (10, 50, 100)
|
|
- Indicateur de chargement pendant les requêtes
|
|
- Affichage du nombre total de contrats et du nombre affiché
|
|
|
|
#### c) Intégration
|
|
- ✅ **Pagination supérieure** : Ajoutée avant le tableau (uniquement si des contrats sont affichés)
|
|
- ✅ **Pagination inférieure** : Remplace l'ancienne pagination simple sous le tableau
|
|
|
|
## Comportement
|
|
|
|
### Affichage
|
|
- La pagination apparaît en haut du tableau uniquement s'il y a des résultats
|
|
- La pagination en bas est toujours présente (même sans résultats)
|
|
- Format responsive adapté mobile/desktop
|
|
|
|
### Informations affichées
|
|
```
|
|
Page 1 sur 5 | Afficher : [10 ▼] | 47 contrats au total • 10 affichés
|
|
```
|
|
|
|
### Changement de limite
|
|
- Quand l'utilisateur change le nombre d'éléments par page, la page est automatiquement réinitialisée à 1
|
|
- Les options disponibles : 10, 50, 100 contrats par page
|
|
|
|
### Navigation
|
|
- Boutons Précédent/Suivant avec icônes chevron
|
|
- Désactivation automatique aux extrémités (page 1 ou dernière page)
|
|
- Effet hover sur les boutons actifs
|
|
|
|
## Styles
|
|
- Design cohérent avec le reste de l'application
|
|
- Support du mode sombre (dark mode)
|
|
- Bordures et espacements harmonieux
|
|
- Icônes Lucide React
|
|
|
|
## Tests recommandés
|
|
1. ✅ Vérifier l'affichage avec différents nombres de contrats (0, 1-10, 11-50, 50+)
|
|
2. ✅ Tester la navigation entre les pages
|
|
3. ✅ Tester le changement de limite (10/50/100)
|
|
4. ✅ Vérifier que le total affiché est correct
|
|
5. ✅ Tester en mode CDDU et Régime Général
|
|
6. ✅ Tester avec les filtres (recherche, période, organisation pour staff)
|
|
7. ✅ Vérifier le responsive mobile
|
|
8. ✅ Tester en mode démo
|
|
|
|
## Fichiers modifiés
|
|
- `/Users/renaud/Projet Nouvel Espace Paie/app/api/contrats/route.ts`
|
|
- `/Users/renaud/Projet Nouvel Espace Paie/app/(app)/contrats/page.tsx`
|