MadJax
6bdd67fd00
- Survol orange plein (texte blanc) étendu aux boutons d'action secondaires : « Utiliser mon domicile », « Export PDF » (résumés mensuel/annuel), « Recopier le dernier barème », « Modifier » et « Enregistrer/Ajouter » (carnet d'adresses) - Boutons « Annuler » uniformisés sur tout le site (fond blanc, bordure grise, survol gris clair), via classes dédiées .btn-annuler (barème) et .btn--annuler (carnet), alignés sur trajet-form et confirm-dialog - Suppression (rouge), boutons à icône et indicateurs d'état inchangés - Charte graphique de design.md mise à jour (convention d'interaction)
110 lines
3.3 KiB
HTML
110 lines
3.3 KiB
HTML
<section class="carnet">
|
|
<div class="carnet__entete">
|
|
<h1>Carnet d'adresses</h1>
|
|
<button type="button" class="btn--ajouter" (click)="ouvrirCreation()">
|
|
+ Ajouter une adresse
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Popup de création / modification -->
|
|
<div
|
|
class="modale-overlay"
|
|
*ngIf="modaleOuverte()"
|
|
(click)="fermerSurOverlay($event)"
|
|
>
|
|
<form class="modale-panneau carnet__form" [formGroup]="form" (ngSubmit)="enregistrer()">
|
|
<h2>{{ enEdition ? 'Modifier une adresse' : 'Ajouter une adresse' }}</h2>
|
|
|
|
<div class="field">
|
|
<label for="denomination">Dénomination</label>
|
|
<input
|
|
id="denomination"
|
|
type="text"
|
|
formControlName="denomination"
|
|
maxlength="100"
|
|
autocomplete="off"
|
|
placeholder="Ex. Bureau, Client X…"
|
|
/>
|
|
<p
|
|
class="field__error"
|
|
*ngIf="form.get('denomination')?.touched && form.get('denomination')?.invalid"
|
|
>
|
|
La dénomination est obligatoire (1 à 100 caractères).
|
|
</p>
|
|
</div>
|
|
|
|
<div class="field field--autocomplete">
|
|
<label for="adresse">Adresse</label>
|
|
<input
|
|
id="adresse"
|
|
type="text"
|
|
formControlName="adresse"
|
|
maxlength="255"
|
|
autocomplete="off"
|
|
placeholder="Saisir au moins 3 caractères…"
|
|
(input)="onAdresseInput($any($event.target).value)"
|
|
/>
|
|
<p
|
|
class="field__error"
|
|
*ngIf="form.get('adresse')?.touched && form.get('adresse')?.invalid"
|
|
>
|
|
L'adresse est obligatoire (1 à 255 caractères).
|
|
</p>
|
|
|
|
<ul class="suggestions" *ngIf="suggestions().length > 0">
|
|
<li
|
|
*ngFor="let s of suggestions()"
|
|
class="suggestions__item"
|
|
(click)="choisirSuggestion(s)"
|
|
>
|
|
{{ s.properties.label }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="carnet__actions">
|
|
<button type="submit" [disabled]="form.invalid || enregistrement()">
|
|
{{ enEdition ? 'Enregistrer' : 'Ajouter' }}
|
|
</button>
|
|
<button type="button" class="btn--secondary btn--annuler" (click)="annuler()">
|
|
Annuler
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Liste des adresses nommées, triée par dénomination -->
|
|
<div class="carnet__liste">
|
|
<h2>Adresses enregistrées</h2>
|
|
|
|
<p *ngIf="chargement()" class="carnet__vide">Chargement…</p>
|
|
<p *ngIf="!chargement() && adresses().length === 0" class="carnet__vide">
|
|
Aucune adresse enregistrée pour le moment.
|
|
</p>
|
|
|
|
<ul *ngIf="!chargement() && adresses().length > 0">
|
|
<li *ngFor="let adresse of adresses()" class="ligne">
|
|
<div class="ligne__infos">
|
|
<span class="ligne__denomination">{{ adresse.denomination }}</span>
|
|
<span class="ligne__adresse">{{ adresse.adresse }}</span>
|
|
<span
|
|
class="ligne__warning"
|
|
*ngIf="!aCoordonnees(adresse)"
|
|
title="Coordonnées non disponibles (géocodage échoué)"
|
|
>
|
|
⚠ Coordonnées indisponibles
|
|
</span>
|
|
</div>
|
|
<div class="ligne__actions">
|
|
<button type="button" class="btn--secondary" (click)="editer(adresse)">
|
|
Modifier
|
|
</button>
|
|
<button type="button" class="btn--danger" (click)="supprimer(adresse)">
|
|
Supprimer
|
|
</button>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|