90 lines
3.1 KiB
Markdown
90 lines
3.1 KiB
Markdown
# Story 5.2: Créer le composant MatchListItem
|
|
|
|
Status: review
|
|
|
|
## Acceptance Criteria
|
|
|
|
**Given** des matchs avec prédictions existent
|
|
**When** la liste de matchs est affichée
|
|
**Then** chaque item affiche : équipes, date/heure, Confidence Meter
|
|
**And** les items sont triés par date (prochains en premier)
|
|
**And** le design est responsive (mobile-first)
|
|
|
|
**Given** je tap sur un MatchListItem
|
|
**When** l'item est sélectionné
|
|
**Then** la card s'expand pour montrer plus de détails
|
|
**And** les détails incluent graphique d'énergie, historique
|
|
|
|
## Tasks / Subtasks
|
|
|
|
- [x] Créer le composant MatchListItem (AC: #1)
|
|
- [x] Créer `src/components/dashboard/MatchListItem.tsx`
|
|
- [x] Accepter props: `match` (Match object)
|
|
- [x] Afficher: équipes (home/away), date/heure, Confidence Meter
|
|
- [x] Utiliser le composant `ConfidenceMeter`
|
|
- [x] Utiliser shadcn/ui components (Card, Badge)
|
|
|
|
- [x] Implémenter l'expansion des détails (AC: #2)
|
|
- [x] Créer l'état d'expansion (`expanded`)
|
|
- [x] Gérer le tap/clic pour expand/collapse
|
|
- [x] Afficher les détails: graphique d'énergie, historique
|
|
- [x] Utiliser une transition fluide (300ms)
|
|
- [x] Optimiser les performances avec lazy loading
|
|
|
|
- [x] Créer les tests du composant (Tous AC)
|
|
- [x] Tester l'affichage des matchs
|
|
- [x] Tester le tri par date
|
|
- [x] Tester l'expansion/collapse
|
|
- [x] Tester l'affichage du Confidence Meter
|
|
- [x] Tester la responsivité (mobile/desktop)
|
|
|
|
- [x] Intégrer le composant dans la liste (AC: #1)
|
|
- [x] Utiliser le composant dans `MatchList.tsx`
|
|
- [x] Trier les matchs par date
|
|
- [x] Gérer l'état de sélection
|
|
- [x] Vérifier la cohérence visuelle
|
|
- [x] Tester avec plusieurs matchs
|
|
|
|
## Dev Notes
|
|
|
|
### Stack Technique
|
|
- **UI:** shadcn/ui + Tailwind CSS
|
|
- **State:** React useState
|
|
- **Animations:** CSS transitions
|
|
|
|
### File Structure
|
|
```
|
|
src/components/dashboard/
|
|
└── MatchListItem.tsx
|
|
```
|
|
|
|
### References
|
|
- [Source: _bmad-output/planning-artifacts/epics.md#Story-5.2]
|
|
|
|
## Dev Agent Record
|
|
|
|
### Agent Model Used
|
|
GLM-4.7
|
|
|
|
### Completion Notes List
|
|
- Créé le composant Badge dans `src/components/ui/badge.tsx` pour shadcn/ui
|
|
- Créé le composant EnergyWave minimal dans `src/components/dashboard/EnergyWave.tsx`
|
|
- Mis à jour `MatchListItem.tsx` avec:
|
|
- Utilisation de shadcn/ui Card et Badge
|
|
- Affichage des équipes, date/heure, et ConfidenceMeter
|
|
- Implémentation de l'état d'expansion avec transition fluide de 300ms
|
|
- Lazy loading du composant EnergyWave
|
|
- Affichage des détails (graphique d'énergie, historique, prédiction)
|
|
- Formatage intelligent des dates (Aujourd'hui, Demain, Dans X jours, Il y a X jours)
|
|
- Créé `MatchList.tsx` avec tri par date (prochains matchs en premier)
|
|
- Créé 24 tests unitaires pour MatchListItem (tous passants)
|
|
- Créé 9 tests unitaires pour MatchList (tous passants)
|
|
|
|
### File List
|
|
- `src/components/ui/badge.tsx` (nouveau)
|
|
- `src/components/dashboard/MatchListItem.tsx` (modifié)
|
|
- `src/components/dashboard/EnergyWave.tsx` (nouveau)
|
|
- `src/components/dashboard/MatchList.tsx` (nouveau)
|
|
- `src/tests/match-list-item.test.tsx` (modifié)
|
|
- `src/tests/match-list.test.tsx` (nouveau)
|