Consultation par mois : liste mensuelle groupée par jour, carte par jour
Refonte de la navigation temporelle suite au retour d'usage :
- Sélecteur temporel limité à année/mois (suppression du segment jour).
Nouvel Output moisSelectionne: {annee, mois} en remplacement de
dateSelectionnee (jour ISO). Surbrillance des mois avec données conservée.
- Consultation : deux états distincts. Le signal mois pilote le chargement
de la liste (tous les trajets du mois, triés par date), le signal date
pilote la carte (trajets du jour) et la date par défaut à l'ajout/insertion.
Bande « ‹ Jour préc. / date / Jour suiv. › » au-dessus de la carte, bornée
au mois sélectionné. La navigation jour ne recharge que la carte.
- Liste : trajets du mois groupés par journée (en-tête de date). Un
cdkDropList indépendant par jour (listes non connectées) : le
réordonnancement par glisser-déposer est limité à chaque journée, avec
recalcul des positions internes et rétablissement en cas d'échec.
Builds dev et prod OK. Backend inchangé (API résumé mensuel/réordonner
déjà en place).
This commit is contained in:
@@ -1,107 +1,117 @@
|
||||
@if (trajetsTries().length === 0) {
|
||||
<p class="liste-vide" role="status">Aucun trajet pour cette journée.</p>
|
||||
@if (groupes().length === 0) {
|
||||
<p class="liste-vide" role="status">Aucun trajet pour ce mois.</p>
|
||||
} @else {
|
||||
<ul
|
||||
class="trajets"
|
||||
cdkDropList
|
||||
(cdkDropListDropped)="onDrop($event)"
|
||||
role="list"
|
||||
>
|
||||
@for (trajet of trajetsTries(); track trajet.id; let i = $index) {
|
||||
<li
|
||||
class="trajet"
|
||||
cdkDrag
|
||||
[cdkDragDisabled]="operationEnCours()"
|
||||
role="listitem"
|
||||
(mouseenter)="onSurvol(trajet.id)"
|
||||
(mouseleave)="onSurvol(null)"
|
||||
<!-- Un groupe par journée : en-tête de date + liste de dépôt indépendante.
|
||||
Les listes NE sont PAS connectées entre elles → drag limité à chaque jour. -->
|
||||
@for (groupe of groupes(); track groupe.date) {
|
||||
<section class="jour" aria-label="Trajets d'une journée">
|
||||
<h3 class="jour__entete">{{ groupe.date | date: 'dd/MM/yyyy' }}</h3>
|
||||
|
||||
<ul
|
||||
class="trajets"
|
||||
cdkDropList
|
||||
[cdkDropListData]="groupe.trajets"
|
||||
(cdkDropListDropped)="onDrop(groupe, $event)"
|
||||
role="list"
|
||||
>
|
||||
<!-- Poignée de glisser-déposer (Exigence 11.9). -->
|
||||
<button
|
||||
type="button"
|
||||
class="poignee"
|
||||
cdkDragHandle
|
||||
[disabled]="operationEnCours()"
|
||||
aria-label="Déplacer le trajet pour le réordonner"
|
||||
title="Glisser pour réordonner"
|
||||
>
|
||||
⠿
|
||||
</button>
|
||||
|
||||
<!-- Colonne dédiée A/R (largeur fixe) : garde date/adresses alignées. -->
|
||||
<div class="trajet__ar-col" aria-hidden="false">
|
||||
@if (trajet.allerRetour) {
|
||||
<span class="trajet__ar" title="Aller/Retour : distance comptée doublée">A/R</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="trajet__infos">
|
||||
<div class="trajet__ligne">
|
||||
<span class="trajet__date">{{ trajet.date | date: 'dd/MM/yyyy' }}</span>
|
||||
@if (trajet.commentaire) {
|
||||
<span class="trajet__commentaire">{{ trajet.commentaire }}</span>
|
||||
}
|
||||
</div>
|
||||
<div class="trajet__adresses">
|
||||
<span class="trajet__depart">{{ trajet.adresseDepart }}</span>
|
||||
<span class="trajet__fleche" aria-hidden="true">→</span>
|
||||
<span class="trajet__arrivee">{{ trajet.adresseArrivee }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="trajet__distance">{{ distanceAffichee(trajet) }}</div>
|
||||
|
||||
<div class="trajet__actions">
|
||||
<div class="trajet__actions-ligne">
|
||||
@for (trajet of groupe.trajets; track trajet.id; let i = $index) {
|
||||
<li
|
||||
class="trajet"
|
||||
cdkDrag
|
||||
[cdkDragData]="trajet"
|
||||
[cdkDragDisabled]="operationEnCours()"
|
||||
role="listitem"
|
||||
(mouseenter)="onSurvol(trajet.id)"
|
||||
(mouseleave)="onSurvol(null)"
|
||||
>
|
||||
<!-- Poignée de glisser-déposer (Exigence 11.9). -->
|
||||
<button
|
||||
type="button"
|
||||
class="action action--icone"
|
||||
(click)="modifier(trajet)"
|
||||
class="poignee"
|
||||
cdkDragHandle
|
||||
[disabled]="operationEnCours()"
|
||||
title="Modifier ce trajet"
|
||||
aria-label="Modifier ce trajet"
|
||||
aria-label="Déplacer le trajet pour le réordonner"
|
||||
title="Glisser pour réordonner"
|
||||
>
|
||||
✏️
|
||||
⠿
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="action action--icone action--danger"
|
||||
(click)="demanderSuppression(trajet)"
|
||||
[disabled]="operationEnCours()"
|
||||
title="Supprimer ce trajet"
|
||||
aria-label="Supprimer ce trajet"
|
||||
>
|
||||
🗑️
|
||||
</button>
|
||||
</div>
|
||||
<div class="trajet__actions-ligne">
|
||||
@if (!estDernier(i)) {
|
||||
<button
|
||||
type="button"
|
||||
class="action action--icone"
|
||||
(click)="insererAvantSuivant(i)"
|
||||
[disabled]="operationEnCours()"
|
||||
title="Insérer un trajet avant le suivant"
|
||||
aria-label="Insérer un trajet avant le suivant"
|
||||
>
|
||||
↥
|
||||
</button>
|
||||
}
|
||||
<button
|
||||
type="button"
|
||||
class="action action--icone"
|
||||
(click)="insererApres(trajet)"
|
||||
[disabled]="operationEnCours()"
|
||||
title="Insérer un trajet après celui-ci"
|
||||
aria-label="Insérer un trajet après celui-ci"
|
||||
>
|
||||
↧
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
|
||||
<!-- Colonne dédiée A/R (largeur fixe) : garde date/adresses alignées. -->
|
||||
<div class="trajet__ar-col" aria-hidden="false">
|
||||
@if (trajet.allerRetour) {
|
||||
<span class="trajet__ar" title="Aller/Retour : distance comptée doublée">A/R</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="trajet__infos">
|
||||
<div class="trajet__ligne">
|
||||
<span class="trajet__date">{{ trajet.date | date: 'dd/MM/yyyy' }}</span>
|
||||
@if (trajet.commentaire) {
|
||||
<span class="trajet__commentaire">{{ trajet.commentaire }}</span>
|
||||
}
|
||||
</div>
|
||||
<div class="trajet__adresses">
|
||||
<span class="trajet__depart">{{ trajet.adresseDepart }}</span>
|
||||
<span class="trajet__fleche" aria-hidden="true">→</span>
|
||||
<span class="trajet__arrivee">{{ trajet.adresseArrivee }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="trajet__distance">{{ distanceAffichee(trajet) }}</div>
|
||||
|
||||
<div class="trajet__actions">
|
||||
<div class="trajet__actions-ligne">
|
||||
<button
|
||||
type="button"
|
||||
class="action action--icone"
|
||||
(click)="modifier(trajet)"
|
||||
[disabled]="operationEnCours()"
|
||||
title="Modifier ce trajet"
|
||||
aria-label="Modifier ce trajet"
|
||||
>
|
||||
✏️
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="action action--icone action--danger"
|
||||
(click)="demanderSuppression(trajet)"
|
||||
[disabled]="operationEnCours()"
|
||||
title="Supprimer ce trajet"
|
||||
aria-label="Supprimer ce trajet"
|
||||
>
|
||||
🗑️
|
||||
</button>
|
||||
</div>
|
||||
<div class="trajet__actions-ligne">
|
||||
@if (!estDernier(groupe, i)) {
|
||||
<button
|
||||
type="button"
|
||||
class="action action--icone"
|
||||
(click)="insererAvantSuivant(groupe, i)"
|
||||
[disabled]="operationEnCours()"
|
||||
title="Insérer un trajet avant le suivant"
|
||||
aria-label="Insérer un trajet avant le suivant"
|
||||
>
|
||||
↥
|
||||
</button>
|
||||
}
|
||||
<button
|
||||
type="button"
|
||||
class="action action--icone"
|
||||
(click)="insererApres(trajet)"
|
||||
[disabled]="operationEnCours()"
|
||||
title="Insérer un trajet après celui-ci"
|
||||
aria-label="Insérer un trajet après celui-ci"
|
||||
>
|
||||
↧
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
}
|
||||
}
|
||||
|
||||
<!-- Confirmation de suppression (Exigence 5.4). -->
|
||||
|
||||
Reference in New Issue
Block a user