134 lines
4.6 KiB
HTML
134 lines
4.6 KiB
HTML
<article class="tenant-card" [attr.aria-busy]="deleting() || uploading()">
|
|
<div class="tenant-identity">
|
|
<span class="tenant-avatar"
|
|
>{{ tenant().firstName.charAt(0) }}{{ tenant().lastName.charAt(0) }}</span
|
|
>
|
|
<div>
|
|
<p class="property-label">Locataire</p>
|
|
<h2>{{ tenant().firstName }} {{ tenant().lastName }}</h2>
|
|
</div>
|
|
</div>
|
|
<dl class="contact-list">
|
|
<div>
|
|
<dt>E-mail</dt>
|
|
<dd>{{ tenant().email }}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Téléphone</dt>
|
|
<dd>{{ tenant().phone || 'Non renseigné' }}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Adresse</dt>
|
|
<dd>{{ tenant().address || 'Non renseignée' }}</dd>
|
|
</div>
|
|
</dl>
|
|
<div class="attachments">
|
|
<div class="section-title">
|
|
<strong>Pièces jointes</strong><span>{{ tenant().attachments?.length ?? 0 }}</span>
|
|
</div>
|
|
@for (attachment of tenant().attachments ?? []; track attachment.id) {
|
|
<div
|
|
class="attachment-item"
|
|
[attr.aria-busy]="
|
|
deletingAttachmentIds().has(attachment.id) ||
|
|
downloadingAttachmentIds().has(attachment.id)
|
|
"
|
|
>
|
|
<div class="attachment-actions">
|
|
<button
|
|
mat-button
|
|
type="button"
|
|
class="attachment-row"
|
|
[disabled]="
|
|
deleting() ||
|
|
deletingAttachmentIds().has(attachment.id) ||
|
|
downloadingAttachmentIds().has(attachment.id)
|
|
"
|
|
[attr.aria-label]="'Télécharger la pièce jointe ' + attachment.fileName"
|
|
(click)="attachmentDownloadRequested.emit({ tenantId: tenant().id!, attachment })"
|
|
>
|
|
@if (downloadingAttachmentIds().has(attachment.id)) {
|
|
<mat-spinner diameter="16" aria-hidden="true" /> Téléchargement…
|
|
} @else {
|
|
<span aria-hidden="true">↧</span>{{ attachment.fileName }}
|
|
}
|
|
</button>
|
|
<button
|
|
mat-button
|
|
type="button"
|
|
class="attachment-delete danger-action"
|
|
[disabled]="
|
|
deleting() ||
|
|
deletingAttachmentIds().has(attachment.id) ||
|
|
downloadingAttachmentIds().has(attachment.id)
|
|
"
|
|
[attr.aria-label]="'Retirer la pièce jointe ' + attachment.fileName"
|
|
(click)="attachmentDeleteRequested.emit({ tenantId: tenant().id!, attachment })"
|
|
>
|
|
@if (deletingAttachmentIds().has(attachment.id)) {
|
|
<mat-spinner diameter="16" aria-hidden="true" /> Suppression…
|
|
} @else {
|
|
<fa-icon [icon]="faXmark" aria-hidden="true" />
|
|
}
|
|
</button>
|
|
</div>
|
|
@if (attachmentDownloadErrors()[attachment.id]) {
|
|
<p class="attachment-error" role="alert">
|
|
{{ attachmentDownloadErrors()[attachment.id] }}
|
|
</p>
|
|
}
|
|
@if (attachmentDeleteErrors()[attachment.id]) {
|
|
<p class="attachment-error" role="alert">{{ attachmentDeleteErrors()[attachment.id] }}</p>
|
|
}
|
|
</div>
|
|
}
|
|
@if (tenant().id) {
|
|
@if (uploadError() || attachmentError()) {
|
|
<p class="attachment-error" role="alert">{{ uploadError() || attachmentError() }}</p>
|
|
}
|
|
<label class="upload-action"
|
|
><input
|
|
type="file"
|
|
[disabled]="uploading() || deleting()"
|
|
[attr.aria-label]="
|
|
'Ajouter une pièce jointe pour ' + tenant().firstName + ' ' + tenant().lastName
|
|
"
|
|
(change)="selectFile($event)"
|
|
/>+ Ajouter une pièce jointe <small>· 250 Mo maximum</small></label
|
|
>
|
|
@if (uploading()) {
|
|
<div class="upload-progress" role="status" aria-live="polite">
|
|
<span>Envoi{{ uploadProgress() === null ? '…' : ' : ' + uploadProgress() + ' %' }}</span>
|
|
<mat-progress-bar
|
|
[mode]="uploadProgress() === null ? 'indeterminate' : 'determinate'"
|
|
[value]="uploadProgress() ?? 0"
|
|
/>
|
|
</div>
|
|
}
|
|
}
|
|
</div>
|
|
@if (deleteError()) {
|
|
<p class="attachment-error" role="alert">{{ deleteError() }}</p>
|
|
}
|
|
<div class="card-actions" aria-live="polite">
|
|
<button mat-button type="button" [disabled]="deleting()" (click)="editRequested.emit(tenant())">
|
|
Modifier
|
|
</button>
|
|
@if (tenant().id) {
|
|
<button
|
|
mat-button
|
|
type="button"
|
|
class="danger-action"
|
|
[disabled]="deleting()"
|
|
(click)="deleteRequested.emit(tenant().id!)"
|
|
>
|
|
@if (deleting()) {
|
|
<mat-spinner diameter="16" aria-hidden="true" /> Suppression…
|
|
} @else {
|
|
Supprimer
|
|
}
|
|
</button>
|
|
}
|
|
</div>
|
|
</article>
|