MIGRATION VERS GITEA

docs/INFORMATIONS_PAGE_REFACTOR.md

@@ -0,0 +1,115 @@
+# 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
+
+```jsx
+<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
+
+1. **Meilleure compatibilité** : Utilise correctement la structure native des web components
+2. **Code plus propre** : Moins de logique conditionnelle pour l'affichage
+3. **Maintenabilité** : Structure plus claire et plus facile à modifier
+4. **Performance** : Le web component gère lui-même l'affichage/masquage des panneaux
+5. **Style cohérent** : CSS dédié pour une meilleure organisation
+
+## Test de la page
+
+Pour vérifier que tout fonctionne correctement :
+
+1. **Onglets** : Cliquer sur chaque onglet (Info Trafic, Événements, Actualités)
+2. **Affichage** : Vérifier que le contenu de chaque onglet s'affiche correctement
+3. **Création** : Tester la création d'un nouvel élément dans chaque onglet
+4. **Modification** : Tester la modification d'un élément existant
+5. **Suppression** : Tester la suppression d'un élément
+6. **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
+