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)
119 lines
4.0 KiB
HTML
119 lines
4.0 KiB
HTML
<section class="bareme">
|
|
<h1>Barème kilométrique</h1>
|
|
|
|
<form [formGroup]="anneeForm" class="annee-form" (ngSubmit)="charger()">
|
|
<div class="champ">
|
|
<label for="annee">Année</label>
|
|
<input id="annee" type="number" formControlName="annee" min="2000" max="2100" />
|
|
</div>
|
|
<button type="submit" class="btn-principal" [disabled]="anneeForm.invalid || chargement()">
|
|
Afficher
|
|
</button>
|
|
</form>
|
|
|
|
<div class="bareme__entete-tranches">
|
|
<h2>Tranches {{ annee() }}</h2>
|
|
<button
|
|
type="button"
|
|
class="btn-secondaire"
|
|
(click)="recopierDernierBareme()"
|
|
[disabled]="!recopiePossible() || recopieEnCours() || chargement()"
|
|
[title]="recopiePossible()
|
|
? 'Recopier le barème ' + anneeSourceRecopie() + ' vers ' + annee() + ' (remplace la saisie existante)'
|
|
: 'Aucun barème antérieur à recopier'"
|
|
>
|
|
@if (recopieEnCours()) {
|
|
Recopie…
|
|
} @else {
|
|
Recopier le dernier barème connu
|
|
}
|
|
</button>
|
|
</div>
|
|
|
|
<table class="tranches" *ngIf="tranches().length; else aucune">
|
|
<thead>
|
|
<tr>
|
|
<th>Puissance fiscale (CV)</th>
|
|
<th>Km min</th>
|
|
<th>Km max</th>
|
|
<th>Coefficient (€/km)</th>
|
|
<th>Base (€)</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr *ngFor="let t of tranches()" [class.en-edition]="t.id === trancheEnEdition()">
|
|
<td>{{ t.puissanceFiscale }}</td>
|
|
<td>{{ t.kmMin | number: '1.0-0' }}</td>
|
|
<td>{{ t.kmMax === null ? 'illimité' : (t.kmMax | number: '1.0-0') }}</td>
|
|
<td>{{ t.coefficient | number: '1.3-3' }}</td>
|
|
<td>{{ t.base | number: '1.2-2' }}</td>
|
|
<td class="actions-cellule">
|
|
<button type="button" class="btn-lien" (click)="editer(t)">Modifier</button>
|
|
<button type="button" class="btn-lien danger" (click)="supprimer(t)">Supprimer</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<ng-template #aucune>
|
|
<p class="vide">Aucune tranche définie pour cette année.</p>
|
|
</ng-template>
|
|
|
|
<h2>{{ trancheEnEdition() !== null ? 'Modifier la tranche' : 'Ajouter une tranche' }}</h2>
|
|
|
|
<form [formGroup]="trancheForm" class="tranche-form" (ngSubmit)="enregistrer()">
|
|
<div class="ligne">
|
|
<div class="champ">
|
|
<label for="pf">Puissance fiscale (CV)</label>
|
|
<input id="pf" type="number" formControlName="puissanceFiscale" min="1" />
|
|
<span
|
|
class="erreur"
|
|
*ngIf="trancheForm.get('puissanceFiscale')?.invalid && trancheForm.get('puissanceFiscale')?.touched"
|
|
>
|
|
Puissance fiscale requise (≥ 1).
|
|
</span>
|
|
</div>
|
|
|
|
<div class="champ">
|
|
<label for="kmMin">Km min</label>
|
|
<input id="kmMin" type="number" formControlName="kmMin" min="0" />
|
|
</div>
|
|
|
|
<div class="champ">
|
|
<label for="kmMax">Km max</label>
|
|
<input id="kmMax" type="number" formControlName="kmMax" min="0" placeholder="Vide = illimité" />
|
|
<small class="aide">Laisser vide pour une tranche sans borne supérieure (illimité).</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ligne">
|
|
<div class="champ">
|
|
<label for="coef">Coefficient (€/km)</label>
|
|
<input id="coef" type="number" step="0.001" formControlName="coefficient" min="0" />
|
|
</div>
|
|
|
|
<div class="champ">
|
|
<label for="base">Base (€)</label>
|
|
<input id="base" type="number" step="0.01" formControlName="base" min="0" />
|
|
</div>
|
|
</div>
|
|
|
|
<p class="erreur" *ngIf="erreurChevauchement()">{{ erreurChevauchement() }}</p>
|
|
|
|
<div class="actions">
|
|
<button type="submit" class="btn-principal" [disabled]="trancheForm.invalid || chargement()">
|
|
{{ trancheEnEdition() !== null ? 'Enregistrer les modifications' : 'Ajouter' }}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="btn-secondaire btn-annuler"
|
|
*ngIf="trancheEnEdition() !== null"
|
|
(click)="annulerEdition()"
|
|
>
|
|
Annuler
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</section>
|