116 lines
4.1 KiB
Markdown
116 lines
4.1 KiB
Markdown
# 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
|
|
|