Function EpreuvesTable

Name

EpreuvesTable

Ce composant constitue l'interface centrale de visualisation des épreuves sportives des Jeux Olympiques 2024. Il orchestre l'affichage sous forme de tableau structuré avec colonnes spécialisées, gestion complète des états (chargement, erreurs, vide), système de rafraîchissement intelligent, et intégration des actions CRUD via lignes interactives. Conçu pour l'administration JO, il suit les standards AdminJO avec responsive design, feedback utilisateur riche, et gestion contextuelle des données.

Structure et affichage tableau réellement implémentés

Architecture tableau spécialisée épreuves

• Header tableau : Section avec titre + compteur + actions refresh
• Corps tableau : Structure HTML sémantique avec thead/tbody
• Colonnes spécialisées : Libellé épreuve, Discipline, Actions

En-tête tableau avec métadonnées dynamiques

• Titre contextuel : "Épreuves" avec compteur dynamique (${epreuves.length})
• Indicateur de chargement : Spinner + "Chargement..." pendant loading
• Bouton actualisation : "🔄 Actualiser" avec callback onRefresh
• État bouton : Désactivation automatique pendant chargement
• Feedback visuel : Spinner small size

Colonnes tableau optimisées métier épreuves

• Colonne 1 - Libellé : "Libellé de l'Épreuve" avec nom complet
• Colonne 2 - Discipline : "Discipline" avec nom + icône associée
• Colonne 3 - Actions : "Actions" avec boutons Modifier/Supprimer

Gestion des états d'interface avancée

États de chargement multicouches

• Loading global : Spinner dans header + désactivation refresh
• Loading initial : Message "Chargement des épreuves..." avec spinner medium
• Désactivation actions : disabled={loading} sur bouton refresh
• Cohérence visuelle : Spinners small/medium selon contexte
• Non-intrusion : Loading header n'affecte pas structure tableau

Gestion d'erreurs contextuelles

• Affichage erreur : Bandeau rouge en haut tableau si error présent
• Position : Sous header, au-dessus tableau pour visibilité
• Conditional rendering : {error && ...} pour affichage conditionnel
• Message brut : Affichage direct contenu error string
• Persistance : Erreur reste affichée jusqu'à nouvel appel API

États vide avec messages contextuels intelligents

• Vide + recherche : "Aucune épreuve trouvée" + terme recherche affiché
• Vide initial : "Aucune épreuve" + "Commencez par créer votre première épreuve"
• Vide + loading : "Chargement des épreuves..." avec spinner medium
• Colspan complet : colSpan={3} pour occuper toutes colonnes

Intégration lignes et actions CRUD

Rendu dynamique des lignes épreuves

• Mapping optimisé : epreuves.map((epreuve) => ...) avec key stable
• Composant ligne : EpreuvesTableRow pour chaque épreuve
• Props transmission : epreuve, onDelete, onEdit vers lignes
• Key unique : epreuve.id pour optimisation React reconciliation
• Callbacks bubbling : Remontée actions ligne vers composant parent
• Données complètes : Objet épreuve + discipline transmis intégralement
• Performance : Re-render optimisé avec keys stables

Actions tableau et callbacks

• Refresh intelligent : onRefresh() préserve contexte recherche/filtres
• Suppression épreuve : onDelete(id) avec ID numérique pour sécurité
• Édition épreuve : onEdit(epreuve) avec objet complet pour modal
• Délégation logique : Actions gérées par composants parents
• État préservé : Callbacks n'affectent pas état local tableau
• Feedback externe : Notifications gérées par EpreuvesManagement
• Synchronisation : Mise à jour automatique via props epreuves

Intégrations et dépendances

Composants intégrés spécialisés

• EpreuvesTableRow : Composant ligne individuelle avec actions
• Spinner : Composant loading réutilisable avec tailles (small/medium)
• Epreuve type : Interface TypeScript pour validation données
• Props interface : Contrat strict avec composant parent
• Callbacks externes : Fonctions handler fournies par parents
• État externe : Pas d'état local, données via props uniquement

Communication parent-enfant optimisée

• Props descendantes : epreuves, loading, error, searchTerm depuis parent
• Callbacks ascendantes : onRefresh, onDelete, onEdit vers parent
• Transmission ciblée : Props spécifiques transmises aux lignes
• État centralisé : Gestion state dans EpreuvesManagement parent
• Réactivité : Re-render automatique sur changement props
• Performance : Minimal props drilling avec callbacks stables