feat: manage tenants and leases (#4)

frontend/src/app/components/tenants-page/tenants-page.ts

@@ -0,0 +1,94 @@
+import { Component, effect, input, output, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { Tenant, TenantAttachment } from '../../services/tenant.service';
+
+export interface TenantSaveRequest {
+  tenant: Tenant;
+  tenantId?: string;
+}
+
+export interface TenantAttachmentRequest {
+  tenantId: string;
+  attachment: TenantAttachment;
+}
+
+@Component({
+  selector: 'app-tenants-page',
+  imports: [FormsModule, MatButtonModule, MatFormFieldModule, MatInputModule],
+  templateUrl: './tenants-page.html',
+  styleUrl: './tenants-page.css',
+})
+export class TenantsPage {
+  readonly tenants = input.required<Tenant[]>();
+  readonly tenantSaved = output<TenantSaveRequest>();
+  readonly deleteRequested = output<string>();
+  readonly attachmentUploadRequested = output<{ tenantId: string; file: File }>();
+  readonly attachmentDownloadRequested = output<TenantAttachmentRequest>();
+
+  readonly showForm = signal(false);
+  readonly editingTenant = signal<Tenant | null>(null);
+  readonly firstName = signal('');
+  readonly lastName = signal('');
+  readonly email = signal('');
+  readonly phone = signal('');
+  readonly address = signal('');
+  readonly error = signal('');
+
+  constructor() {
+    effect(() => this.fillForm(this.editingTenant()));
+  }
+
+  openAddForm(): void {
+    this.editingTenant.set(null);
+    this.fillForm(null);
+    this.showForm.set(true);
+  }
+
+  openEditForm(tenant: Tenant): void {
+    this.editingTenant.set(tenant);
+    this.showForm.set(true);
+  }
+
+  closeForm(): void {
+    this.showForm.set(false);
+    this.editingTenant.set(null);
+  }
+
+  save(): void {
+    if (!this.firstName().trim() || !this.lastName().trim() || !this.email().trim()) {
+      this.error.set('Le prénom, le nom et l’e-mail sont obligatoires.');
+      return;
+    }
+    this.tenantSaved.emit({
+      tenant: {
+        firstName: this.firstName().trim(),
+        lastName: this.lastName().trim(),
+        email: this.email().trim(),
+        phone: this.phone().trim(),
+        address: this.address().trim(),
+      },
+      tenantId: this.editingTenant()?.id,
+    });
+    this.closeForm();
+  }
+
+  selectFile(tenant: Tenant, event: Event): void {
+    const file = (event.target as HTMLInputElement).files?.item(0);
+    if (tenant.id && file) {
+      this.attachmentUploadRequested.emit({ tenantId: tenant.id, file });
+    }
+    (event.target as HTMLInputElement).value = '';
+  }
+
+  private fillForm(tenant: Tenant | null): void {
+    this.firstName.set(tenant?.firstName ?? '');
+    this.lastName.set(tenant?.lastName ?? '');
+    this.email.set(tenant?.email ?? '');
+    this.phone.set(tenant?.phone ?? '');
+    this.address.set(tenant?.address ?? '');
+    this.error.set('');
+  }
+}