Page Informations - Documentation des modifications

Vue d'ensemble

La page Informations a été entièrement recodée pour afficher correctement tous les contenus des onglets (Info Trafic, Événements, Actualités) en utilisant la structure native des web components wcs-tabs.

Modifications principales

1. Structure des onglets

Avant :

Utilisation de headers-only sur wcs-tabs
Gestion manuelle du contenu avec des conditions {activeTab === 'trafic' && ...}
Synchronisation complexe de l'état avec des listeners multiples

Après :

Utilisation complète de wcs-tabs avec wcs-tab-panel
Chaque onglet a son propre wcs-tab-panel avec le contenu approprié
Synchronisation simplifiée de l'état de l'onglet actif

2. Structure du code

<wcs-tabs
  selected-index={activeTab === 'trafic' ? 0 : activeTab === 'evenements' ? 1 : 2}
  onWcsTabChange={(e) => {
    const idx = e.detail?.selectedIndex;
    setActiveTab(idx === 0 ? 'trafic' : idx === 1 ? 'evenements' : 'actualites');
  }}
>
  <wcs-tab header="Info Trafic">
    <wcs-mat-icon icon="warning" />
  </wcs-tab>
  <wcs-tab header="Événements">
    <wcs-mat-icon icon="event" />
  </wcs-tab>
  <wcs-tab header="Actualités">
    <wcs-mat-icon icon="article" />
  </wcs-tab>

  {/* Panneau Info Trafic */}
  <wcs-tab-panel slot="panel">
    {/* Contenu... */}
  </wcs-tab-panel>

  {/* Panneau Événements */}
  <wcs-tab-panel slot="panel">
    {/* Contenu... */}
  </wcs-tab-panel>

  {/* Panneau Actualités */}
  <wcs-tab-panel slot="panel">
    {/* Contenu... */}
  </wcs-tab-panel>
</wcs-tabs>

3. Gestion de l'état

État simplifié : L'état activeTab est maintenu pour la cohérence avec les formulaires
Synchronisation : L'événement onWcsTabChange met à jour l'état React
Affichage : Chaque wcs-tab-panel contient le contenu correspondant (loading, empty state, ou tableau)

4. Fichier CSS dédié

Création de Informations.css avec :

Styles pour les badges (sévérité, type, catégorie, statut)
Styles pour les formulaires (form-group, form-row, form-checkboxes)
Styles pour les modales (modal-large, modal-small, modal-header, modal-body, modal-footer)
Styles pour les tableaux
États de chargement et vides
Design responsive
Animations

5. Fonctionnalités préservées

Toutes les fonctionnalités existantes sont préservées :

Création, modification et suppression d'info trafic
Création, modification et suppression d'événements
Création, modification et suppression d'actualités
Filtrage par région
Validation des formulaires
Gestion des états de chargement et d'erreur

Avantages de la nouvelle structure

Meilleure compatibilité : Utilise correctement la structure native des web components
Code plus propre : Moins de logique conditionnelle pour l'affichage
Maintenabilité : Structure plus claire et plus facile à modifier
Performance : Le web component gère lui-même l'affichage/masquage des panneaux
Style cohérent : CSS dédié pour une meilleure organisation

Test de la page

Pour vérifier que tout fonctionne correctement :

Onglets : Cliquer sur chaque onglet (Info Trafic, Événements, Actualités)
Affichage : Vérifier que le contenu de chaque onglet s'affiche correctement
Création : Tester la création d'un nouvel élément dans chaque onglet
Modification : Tester la modification d'un élément existant
Suppression : Tester la suppression d'un élément
Responsive : Vérifier l'affichage sur mobile/tablette

Fichiers modifiés

src/pages/informations/Informations.js : Composant principal recodé
src/pages/informations/Informations.css : Nouveau fichier de styles (créé)

Notes techniques

Les web components WCS (SNCF Design System) sont correctement utilisés
La synchronisation entre React et les web components est gérée via les événements natifs
Les formulaires continuent d'utiliser la synchronisation DOM pour garantir la fiabilité
Le CSS est modularisé et suit les conventions de nommage BEM

4.1 KiB Raw Blame History