Synthèse Kms : largeur de lecture bornée au lieu de la pleine largeur

Sur grand écran, la pleine largeur rendait une ligne du tableau peu
lisible (le mois et le bouton d'export étaient trop éloignés). L'écran
Synthèse Kms adopte désormais une largeur maximale de 1100 px centrée,
comme Specs. Trajets et Carnet d'adresses restent en pleine largeur.

Specs (requirements 12.27, design-requirements 12.5, design) mises à
jour en cohérence.
This commit is contained in:
2026-10-11 20:42:05 +02:00
parent 3d9557f852
commit 77cb5b87a7
4 changed files with 9 additions and 4 deletions
@@ -174,7 +174,7 @@ Le document est organisé **en miroir** des exigences de `requirements.md` : cha
2. WHEN l'utilisateur change de Véhicule sélectionné, THE Frontend SHALL mettre à jour la liste mensuelle des Trajets, le Panneau_Totaux et la Carte dans un délai de 1000 ms sans rechargement complet de la page. 2. WHEN l'utilisateur change de Véhicule sélectionné, THE Frontend SHALL mettre à jour la liste mensuelle des Trajets, le Panneau_Totaux et la Carte dans un délai de 1000 ms sans rechargement complet de la page.
3. THE SelecteurTemporelComponent SHALL exposer un paramètre d'entrée commutant entre le mode « année + mois » (émission d'un événement `moisSelectionne { annee, mois }`) et le mode « année seule » (émission d'un événement portant l'année choisie, sans rendu de la grille des mois), le mode « année seule » étant utilisé par le SyntheseKmsComponent et le mode « année + mois » par le ConsultationJourComponent. 3. THE SelecteurTemporelComponent SHALL exposer un paramètre d'entrée commutant entre le mode « année + mois » (émission d'un événement `moisSelectionne { annee, mois }`) et le mode « année seule » (émission d'un événement portant l'année choisie, sans rendu de la grille des mois), le mode « année seule » étant utilisé par le SyntheseKmsComponent et le mode « année + mois » par le ConsultationJourComponent.
4. WHEN l'utilisateur sélectionne le niveau le plus bas du SelecteurTemporelComponent (le mois en mode « année + mois », l'année en mode « année seule »), THE SelecteurTemporelComponent SHALL basculer son état interne en position repliée. 4. WHEN l'utilisateur sélectionne le niveau le plus bas du SelecteurTemporelComponent (le mois en mode « année + mois », l'année en mode « année seule »), THE SelecteurTemporelComponent SHALL basculer son état interne en position repliée.
5. THE Frontend SHALL rendre les écrans ConsultationJourComponent (« Trajets »), CarnetAdressesComponent (« Carnet d'adresses ») et SyntheseKmsComponent (« Synthèse Kms ») sur toute la largeur disponible (sans largeur maximale centrée), tandis que le SpecsComponent (« Specs ») SHALL conserver une largeur de lecture limitée. 5. THE Frontend SHALL rendre les écrans ConsultationJourComponent (« Trajets ») et CarnetAdressesComponent (« Carnet d'adresses ») sur toute la largeur disponible (sans largeur maximale centrée), tandis que le SyntheseKmsComponent (« Synthèse Kms ») et le SpecsComponent (« Specs ») SHALL conserver une largeur de lecture limitée centrée (max-width ~1100 px).
6. WHEN le TrajetListComponent rend une ligne de Trajet, THE Frontend SHALL positionner les boutons d'action du Trajet (modifier, supprimer, insérer avant/après) en début de ligne, après la poignée de glisser-déposer et avant la colonne « A/R », alignés à droite au sein de leur colonne afin de conserver l'alignement vertical du bouton « insérer après ». 6. WHEN le TrajetListComponent rend une ligne de Trajet, THE Frontend SHALL positionner les boutons d'action du Trajet (modifier, supprimer, insérer avant/après) en début de ligne, après la poignée de glisser-déposer et avant la colonne « A/R », alignés à droite au sein de leur colonne afin de conserver l'alignement vertical du bouton « insérer après ».
--- ---
+2 -2
View File
@@ -255,7 +255,7 @@ src/
- **Barre d'action au-dessus du tableau** : un unique bouton « Enregistrer » qui persiste uniquement les Montant_Regle **modifiés** depuis le dernier chargement (plusieurs mois en une seule action) ; pas de bouton d'enregistrement par ligne - **Barre d'action au-dessus du tableau** : un unique bouton « Enregistrer » qui persiste uniquement les Montant_Regle **modifiés** depuis le dernier chargement (plusieurs mois en une seule action) ; pas de bouton d'enregistrement par ligne
- **Ligne TOTAL** : total kilométrique annuel, Montant_Reel (total du remboursement réel), **cellule « indication 80% » vide**, total réglé (somme des Montant_Regle, non modifiable), bouton « Export PDF » qui exporte le rapport **annuel** ; aucun bouton « Enregistrer » sur cette ligne - **Ligne TOTAL** : total kilométrique annuel, Montant_Reel (total du remboursement réel), **cellule « indication 80% » vide**, total réglé (somme des Montant_Regle, non modifiable), bouton « Export PDF » qui exporte le rapport **annuel** ; aucun bouton « Enregistrer » sur cette ligne
- **Aucun nouvel endpoint backend** : composition d'endpoints existants — `GET /api/regularisation/{annee}` (barème, km mensuels, Frais_Reel_Mensuel, total annuel, Montant_Reel, total réglé), `GET /api/montant-previsionnel/{annee}/{mois}` (indication 80%), `PUT /api/montants-regles` (upsert à l'enregistrement), `GET /api/exports/mensuel/{annee}/{mois}` et `GET /api/exports/annuel/{annee}` (exports PDF) - **Aucun nouvel endpoint backend** : composition d'endpoints existants — `GET /api/regularisation/{annee}` (barème, km mensuels, Frais_Reel_Mensuel, total annuel, Montant_Reel, total réglé), `GET /api/montant-previsionnel/{annee}/{mois}` (indication 80%), `PUT /api/montants-regles` (upsert à l'enregistrement), `GET /api/exports/mensuel/{annee}/{mois}` et `GET /api/exports/annuel/{annee}` (exports PDF)
- **Pleine largeur** : l'écran occupe toute la largeur disponible (pas de largeur maximale centrée) - **Largeur de lecture limitée** : l'écran a une largeur maximale de lecture (~1100 px) centrée, afin de garder une ligne de tableau lisible sur grand écran (le mois à gauche reste proche des actions à droite)
- Tous les kilomètres sont formatés selon `formatKm()` (signal `precisionDistance` de `ParametresApplicationService`), reflétant Precision_Distance — voir spec `precision-distances-km` ; les montants en euros à 2 décimales - Tous les kilomètres sont formatés selon `formatKm()` (signal `precisionDistance` de `ParametresApplicationService`), reflétant Precision_Distance — voir spec `precision-distances-km` ; les montants en euros à 2 décimales
- Le **détail des Trajets un par un n'est plus affiché** dans cet écran de synthèse : il reste consultable sur `ConsultationJourComponent` (écran « Trajets ») - Le **détail des Trajets un par un n'est plus affiché** dans cet écran de synthèse : il reste consultable sur `ConsultationJourComponent` (écran « Trajets »)
@@ -394,7 +394,7 @@ src/
- Rendu : le Markdown (`GET /api/specs/{cle}`) est converti en HTML par **`marked`** (GFM : titres, listes, tableaux, code), puis **assaini par `DOMPurify`** avant injection (`[innerHTML]`) — Exigence 19.7 - Rendu : le Markdown (`GET /api/specs/{cle}`) est converti en HTML par **`marked`** (GFM : titres, listes, tableaux, code), puis **assaini par `DOMPurify`** avant injection (`[innerHTML]`) — Exigence 19.7
- **Diagrammes Mermaid** : un renderer `marked` transforme les blocs ` ```mermaid ` en `<pre class="mermaid">` ; après injection du HTML (déclenchée via `setTimeout` pour laisser Angular résoudre le `@ViewChild`), **Mermaid.js** (importé dynamiquement) rend ces blocs en SVG (`securityLevel: 'loose'` pour accepter les libellés HTML type `<br/>`). En cas d'échec de rendu d'un diagramme, le bloc de code brut reste visible. - **Diagrammes Mermaid** : un renderer `marked` transforme les blocs ` ```mermaid ` en `<pre class="mermaid">` ; après injection du HTML (déclenchée via `setTimeout` pour laisser Angular résoudre le `@ViewChild`), **Mermaid.js** (importé dynamiquement) rend ces blocs en SVG (`securityLevel: 'loose'` pour accepter les libellés HTML type `<br/>`). En cas d'échec de rendu d'un diagramme, le bloc de code brut reste visible.
- Accès derrière `authGuard` (mêmes règles que les autres vues protégées) - Accès derrière `authGuard` (mêmes règles que les autres vues protégées)
- **Largeur de lecture limitée** : à la différence des écrans « Trajets », « Carnet d'adresses » et « Synthèse Kms » (passés en pleine largeur), le `SpecsComponent` conserve une largeur maximale centrée adaptée à la lecture (comportement inchangé) - **Largeur de lecture limitée** : à la différence des écrans « Trajets » et « Carnet d'adresses » (passés en pleine largeur), le `SpecsComponent` conserve une largeur maximale centrée adaptée à la lecture (comportement inchangé) ; l'écran « Synthèse Kms » adopte lui aussi une largeur de lecture limitée centrée (~1100 px)
**`ProfilConfigureGuard`** (garde de route Angular — `CanActivate` / `CanActivateFn`) **`ProfilConfigureGuard`** (garde de route Angular — `CanActivate` / `CanActivateFn`)
- Au chargement de l'application, appelle `ProfilService.getEtat()` (`GET /api/profil/etat`) - Au chargement de l'application, appelle `ProfilService.getEtat()` (`GET /api/profil/etat`)
@@ -346,7 +346,7 @@ L'application permet de gérer un profil (identité, matricule, adresse de domic
24. THE Frontend SHALL afficher, à l'extrémité droite de l'en-tête de chaque journée, un bouton dédié « Ajouter un trajet sur cette journée » qui ouvre le formulaire de création avec la date de CETTE journée pré-remplie, indépendamment de la journée actuellement affichée sur la Carte (afin d'éviter qu'un survol traversant plusieurs journées ouvertes ne fasse dériver la date visée par l'utilisateur). 24. THE Frontend SHALL afficher, à l'extrémité droite de l'en-tête de chaque journée, un bouton dédié « Ajouter un trajet sur cette journée » qui ouvre le formulaire de création avec la date de CETTE journée pré-remplie, indépendamment de la journée actuellement affichée sur la Carte (afin d'éviter qu'un survol traversant plusieurs journées ouvertes ne fasse dériver la date visée par l'utilisateur).
25. THE Sélecteur_Temporel SHALL proposer un mode « année seule » limitant la sélection au choix d'une année (sans afficher la grille des mois) et émettant l'année choisie, utilisé par la Synthèse_Kms ; sur la Vue_Consultation, le Sélecteur_Temporel SHALL conserver son mode « année + mois ». Dans les deux modes, la liste des années proposées se limite à l'année courante et aux années comportant au moins un Trajet. 25. THE Sélecteur_Temporel SHALL proposer un mode « année seule » limitant la sélection au choix d'une année (sans afficher la grille des mois) et émettant l'année choisie, utilisé par la Synthèse_Kms ; sur la Vue_Consultation, le Sélecteur_Temporel SHALL conserver son mode « année + mois ». Dans les deux modes, la liste des années proposées se limite à l'année courante et aux années comportant au moins un Trajet.
26. WHEN l'utilisateur sélectionne le niveau le plus bas du Sélecteur_Temporel (le mois en mode « année + mois », l'année en mode « année seule »), THE Sélecteur_Temporel SHALL se replier automatiquement. 26. WHEN l'utilisateur sélectionne le niveau le plus bas du Sélecteur_Temporel (le mois en mode « année + mois », l'année en mode « année seule »), THE Sélecteur_Temporel SHALL se replier automatiquement.
27. THE Frontend SHALL afficher les écrans « Trajets » (Vue_Consultation), « Carnet d'adresses » et Synthèse_Kms en occupant toute la largeur disponible, tandis que l'écran de consultation des Documents_Specification SHALL conserver une largeur de lecture limitée. 27. THE Frontend SHALL afficher les écrans « Trajets » (Vue_Consultation) et « Carnet d'adresses » en occupant toute la largeur disponible, tandis que l'écran Synthèse_Kms et l'écran de consultation des Documents_Specification SHALL conserver une largeur de lecture limitée centrée.
--- ---
@@ -1,5 +1,10 @@
.synthese-kms { .synthese-kms {
padding: 1.5rem; padding: 1.5rem;
// Largeur de lecture bornée et centrée : sur un très grand écran, le tableau
// ne s'étale pas sur toute la largeur, ce qui garde une ligne lisible
// (le mois à gauche reste proche des actions à droite).
max-width: 1100px;
margin: 0 auto;
} }
h1 { h1 {