115 lines
4.6 KiB
Markdown
115 lines
4.6 KiB
Markdown
# Amélioration de la Pagination - Page Salariés
|
|
|
|
## Date
|
|
13 octobre 2025
|
|
|
|
## Résumé
|
|
Amélioration de la pagination de la page `/salaries` pour offrir une meilleure expérience utilisateur avec :
|
|
- Pagination affichée en haut ET en bas du tableau
|
|
- Affichage du nombre total de salariés (pas seulement le nombre affiché)
|
|
- Affichage du nombre total de pages
|
|
- Possibilité de choisir le nombre d'éléments par page (10, 50, 100)
|
|
- Suppression de l'ancienne pagination dans la barre d'en-tête
|
|
|
|
## Modifications apportées
|
|
|
|
### 1. API Backend (`app/api/salaries/route.ts`)
|
|
- ✅ Ajout de `totalPages` dans le type `SalariesResponse`
|
|
- ✅ Calcul de `totalPages` : `Math.ceil(total / limit)`
|
|
- ✅ Ajout de `totalPages` dans la réponse JSON
|
|
|
|
### 2. Frontend (`app/(app)/salaries/page.tsx`)
|
|
|
|
#### a) Type de données
|
|
- ✅ Mise à jour du type `SalariesResponse` pour inclure `totalPages?: number`
|
|
- ✅ Extraction des valeurs : `const total = data?.total ?? 0;` et `const totalPages = data?.totalPages ?? 0;`
|
|
- ✅ Mise à jour des données démo pour inclure `totalPages`
|
|
|
|
#### b) Nouveau composant Pagination
|
|
Création d'un composant réutilisable identique à celui de la page contrats avec :
|
|
```typescript
|
|
type PaginationProps = {
|
|
page: number;
|
|
totalPages: number;
|
|
total: number;
|
|
limit: number;
|
|
onPageChange: (page: number) => void;
|
|
onLimitChange: (limit: number) => void;
|
|
isFetching?: boolean;
|
|
itemsCount: number;
|
|
position?: 'top' | 'bottom';
|
|
};
|
|
```
|
|
|
|
**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 salariés et du nombre affiché
|
|
- Support des positions 'top' et 'bottom' pour contrôler l'affichage de la bordure
|
|
|
|
#### c) Changement de limite
|
|
- ✅ Modification de `const [limit] = useState(25)` vers `const [limit, setLimit] = useState(10)`
|
|
- ✅ Possibilité de changer dynamiquement entre 10, 50 et 100 salariés par page
|
|
|
|
#### d) Refactoring de la structure
|
|
- ✅ Suppression du code `headerRight` (pagination dans la barre de titre)
|
|
- ✅ Remplacement du composant `Section` par une structure `<section>` directe pour mieux contrôler le layout
|
|
- ✅ Ajout de la pagination supérieure avant le tableau (uniquement si des résultats sont affichés)
|
|
- ✅ Ajout de la pagination inférieure dans la section du 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 (intégrée dans la section du tableau)
|
|
- Format responsive adapté mobile/desktop
|
|
|
|
### Informations affichées
|
|
```
|
|
Page 1 sur 5 | Afficher : [10 ▼] | 47 salariés 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 salariés par page
|
|
- Par défaut : 10 salariés (au lieu de 25 précédemment)
|
|
|
|
### 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 la page contrats
|
|
- Bordures et espacements harmonieux
|
|
- Icônes Lucide React
|
|
- Pas de bordure supérieure pour la pagination du haut (grâce à `position="top"`)
|
|
|
|
## Améliorations par rapport à l'ancienne version
|
|
1. ✅ Suppression de la pagination dans la barre d'en-tête (encombrait l'interface)
|
|
2. ✅ Pagination cohérente en haut et en bas du tableau
|
|
3. ✅ Information claire sur le nombre total de salariés
|
|
4. ✅ Possibilité de changer le nombre d'éléments affichés
|
|
5. ✅ Affichage du nombre de pages pour mieux se repérer
|
|
|
|
## Tests recommandés
|
|
1. ✅ Vérifier l'affichage avec différents nombres de salariés (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 avec les filtres (recherche, organisation pour staff)
|
|
6. ✅ Vérifier le responsive mobile
|
|
7. ✅ Tester en mode démo
|
|
|
|
## Fichiers modifiés
|
|
- `/Users/renaud/Projet Nouvel Espace Paie/app/api/salaries/route.ts`
|
|
- `/Users/renaud/Projet Nouvel Espace Paie/app/(app)/salaries/page.tsx`
|
|
|
|
## Cohérence avec la page Contrats
|
|
Les deux pages (contrats et salariés) ont maintenant exactement la même pagination :
|
|
- Même composant `Pagination` avec les mêmes props
|
|
- Même comportement et mêmes fonctionnalités
|
|
- Même design et même expérience utilisateur
|
|
- Code réutilisable et maintenable
|