Function EvenementsTableRow

Composant EvenementsTableRow - Ligne de tableau pour événement sportif olympique AdminJO

Ce composant représente une ligne individuelle dans le tableau des événements sportifs olympiques. Il affiche les informations complètes d'un événement (description, épreuves, date/heure, lieu, statut) avec sous-composants spécialisés intégrés et fournit les actions CRUD directes via boutons. Conçu pour l'interface d'administration des Jeux Olympiques 2024, il orchestre l'affichage de données complexes avec relations multiples (épreuves, lieux) et calcul de statut temps réel selon planning.

Données affichées et sous-composants intégrés

Description événement principale

• Description complète : event.description avec typographie medium accentuée
• Contenu riche : Titre descriptif événement sportif (ex: "Finale natation 100m")

Épreuves associées via EvenementEpreuve (sous-composant intégré)

• Composant spécialisé : EvenementEpreuve pour affichage épreuves complexes
• Données relationnelles : event.epreuves array transmis intégralement
• Gestion multiple : Support affichage plusieurs épreuves par événement
• Délégation affichage : Logique rendu déléguée au sous-composant
• Relations normalisées : Chaque événement peut avoir plusieurs épreuves

Date et horaire avec formatage français

• Date formatée : new Date(event.date).toLocaleDateString('fr-FR')
• Format français : Affichage DD/MM/YYYY selon standards locaux
• Horaire complémentaire : event.horraire affiché en sous-texte
• Hiérarchie visuelle : Date principale + horaire secondaire

Lieu événement avec nom établissement

• Nom lieu : event.lieu.nom pour identification établissement
• Relation lieu : Objet lieu imbriqué avec propriétés complètes

Statut temps réel via EventStatus (sous-composant calculé)

• Composant dynamique : EventStatus calcule statut selon date/heure actuelle
• Props transmises : date={event.date} time={event.horraire}
• Calcul temps réel : Statut mis à jour selon horloge système
• États possibles : À venir, En cours, Terminé avec couleurs distinctes

Actions utilisateur CRUD intégrées

✏Action de modification événement

• Bouton "Modifier" : Déclenche édition événement complet
• Callback : onEdit(event) avec objet événement complet
• Données complètes : Transmission objet avec relations (épreuves, lieu)

🗑Action de suppression événement

• Bouton "Supprimer" : Déclenche suppression événement
• Callback : onDelete(event.id) avec ID numérique événement