US perso : affichage et détail d'une équipe - loyde07/RDI25 GitHub Wiki
US PERSO de Mayala-Luneko Loyde
US-03 — En tant que visiteur, je souhaite pouvoir visualiser différentes équipes afin de consulter rapidement les membres et la composition de chacune.
Valeur du client
Cela permet au visiteur d'obtenir rapidement des informations précises sur une équipe comme son nom, son logo, ainsi que la liste complète de ses membres avec leurs prénoms, leurs noms, leur mails et écoles respectifs. Elle favorise une navigation fluide et ciblée, tout en mettant en avant l'identité de chaque équipe.
Description textuelle
Cette fonctionnalité permet à un visiteur de consulter les informations d’une équipe sélectionnée (par un clic) dans le carrousel. Lorsqu'un visiteur clique sur le logo d’une équipe dans le carrousel, une section s’affiche avec :
- Le nom complet de l’équipe
- Son logo Une liste de tous ses membres, incluant pour chacun :
- le prénom
- le nom
- et l’établissement scolaire (école)
Cette section est affichée sous le carrousel, avec une mise en page. Chaque changement de sélection dans le carrousel met automatiquement à jour les informations affichées.
Début de la fonctionnalité: Elle commence au moment où le visiteur clique sur le logo d’une équipe affichée dans le carrousel.
Fin de la fonctionnalité: Elle se termine lorsque le visiteur fini de consulter les détails affichés de l’équipe sélectionnée et peut librement revenir ou changer de sélection via le carrousel
Références aux autres US liées
US-01 : Affichage du carrousel des équipes (prérequis).
US-02 : Navigation dans le carrousel via les flèches directionnelles
Critères d’acceptation :
- L’utilisateur peut cliquer sur un logo d’équipe visible dans le carrousel.
- Lorsqu’une équipe est sélectionnée, une section s’affiche sous le carrousel.
- La section contient : le nom de l’équipe, son logo, et la liste des membres. Si l'équipe n'a pas de logo, il y a un logo par défaut implémenter
- Chaque membre est listé avec son nom, prénom, leur noms d'utilisateurs (mail) et école.
- Le changement de sélection met à jour automatiquement les données affichées.
Petit scénario explicatif :
Le visiteur voit le carrousel avec plusieurs équipes. Il clique sur une équipe qui attire son attention. Automatiquement, les informations de cette équipe apparaissent sous le carrousel. Il peut lire la liste des membres, identifier les écoles représentées. Il clique sur une autre équipe, les infos se mettent à jour instantanément et rebelote.
Maquette
La page team
- Le carrousel :
Il y a le carrousel interactif (circulaire 3D), lieu dans lequel on va cliquer pour avoir les infos de l'équipe
- La fiche détail d'une team :
Il y a le nom et le logo de l'équipe (ou celui par défaut), ainsi que les informations concernant chaque membres de l'équipes (nom, prénom, mail et école de ceux-ci)
Tâches Techniques
Récupération des équipes
Description : Récupérer toutes les équipes depuis l’API backend au chargement du composant React.
Endpoint utilisé : GET /api/teams
Base de données : Collection teams
Librairies : Axios, React (useEffect, useState)
- Gestion de la sélection d’équipe
Description : Lorsqu’un logo est cliqué, mettre à jour l’index de l’équipe sélectionnée via le state React.
Dépendances : Aucune.
Librairies : React
- Requête des joueurs de l’équipe sélectionnée
Description : Récupérer dynamiquement la liste des joueurs liés à une équipe sélectionnée.
Dépendance : Sélection d’équipe active
Endpoint utilisé : GET /api/joueurs/team/:teamId
Base de données : Collections teams (avec référence à joueurs), joueurs (avec référence à ecoles)
Librairies : Axios, Mongoose (populate)
- Affichage des joueurs
Description : Afficher la liste des joueurs avec leurs prénoms, noms, et écoles respectives.
Dépendance : Données issues de la tâche 4
Librairies : React JSX
Traitement : Utilisation de joueur.ecole_id?.nom (grâce au populate côté backend)
- Gestion des logos manquants
Description : Si une équipe n’a pas de logo défini, afficher une image par défaut (/val.png placée dans le dossier public).
Librairies : React (conditionnelle), HTML statique
- Affichage de la fiche équipe
Description : Afficher sous le carrousel une fiche détaillée contenant : nom de l’équipe, logo, membres, et école de chaque membre.
Librairies : React, Tailwind CSS, CSS personnalisé
La complexité/durée
Durée : +/- 6-7h Complexité : moyenne