97 lines
3.0 KiB
HTML
97 lines
3.0 KiB
HTML
<section class="form-page">
|
|
<header class="page-heading">
|
|
<div>
|
|
<button
|
|
mat-button
|
|
type="button"
|
|
class="back-action"
|
|
[disabled]="saving()"
|
|
(click)="cancelled.emit()"
|
|
>
|
|
← Retour
|
|
</button>
|
|
<p class="eyebrow">Dossier locataire</p>
|
|
<h1>{{ tenant() ? 'Modifier le locataire' : 'Ajouter un locataire' }}</h1>
|
|
<p>Renseignez les coordonnées nécessaires à la gestion du bail.</p>
|
|
</div>
|
|
</header>
|
|
<form
|
|
class="entity-form"
|
|
#tenantForm="ngForm"
|
|
ngNativeValidate
|
|
(ngSubmit)="save(tenantForm)"
|
|
[attr.aria-busy]="saving()"
|
|
>
|
|
@if (saveError()) {
|
|
<div class="alert-error" role="alert">{{ saveError() }}</div>
|
|
}
|
|
<p class="visually-hidden" role="status" aria-live="polite">
|
|
{{ saving() ? 'Enregistrement en cours.' : '' }}
|
|
</p>
|
|
<fieldset class="busy-fieldset" [disabled]="saving()" [attr.inert]="saving() ? '' : null">
|
|
<div class="form-grid">
|
|
<mat-form-field appearance="outline"
|
|
><mat-label>Prénom</mat-label
|
|
><input
|
|
matInput
|
|
name="firstName"
|
|
[ngModel]="firstName()"
|
|
(ngModelChange)="firstName.set($event)"
|
|
required
|
|
/></mat-form-field>
|
|
<mat-form-field appearance="outline"
|
|
><mat-label>Nom</mat-label
|
|
><input
|
|
matInput
|
|
name="lastName"
|
|
[ngModel]="lastName()"
|
|
(ngModelChange)="lastName.set($event)"
|
|
required
|
|
/></mat-form-field>
|
|
<mat-form-field appearance="outline"
|
|
><mat-label>E-mail</mat-label
|
|
><input
|
|
matInput
|
|
type="email"
|
|
name="email"
|
|
[ngModel]="email()"
|
|
(ngModelChange)="email.set($event)"
|
|
required
|
|
autocomplete="email"
|
|
/></mat-form-field>
|
|
<mat-form-field appearance="outline"
|
|
><mat-label>Téléphone</mat-label
|
|
><input
|
|
matInput
|
|
type="tel"
|
|
name="phone"
|
|
[ngModel]="phone()"
|
|
(ngModelChange)="phone.set($event)"
|
|
pattern="^(?:(?:0\d(?:[ .-]?\d){8})|(?:(?:\+|00)\d(?:[ .()-]?\d){7,14}))$"
|
|
autocomplete="tel"
|
|
/></mat-form-field>
|
|
<mat-form-field appearance="outline" class="full-field"
|
|
><mat-label>Adresse complète</mat-label
|
|
><input
|
|
matInput
|
|
name="address"
|
|
[ngModel]="address()"
|
|
(ngModelChange)="address.set($event)"
|
|
/></mat-form-field>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button mat-button type="button" (click)="cancelled.emit()">Annuler</button
|
|
><button mat-flat-button type="submit" class="primary-action">
|
|
<span>
|
|
@if (saving()) {
|
|
<mat-spinner diameter="18" aria-hidden="true" /> Enregistrement…
|
|
} @else {
|
|
Enregistrer
|
|
}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</section>
|