refactor: split tenant and lease page modules

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

@@ -1,24 +1,14 @@
-import { Component, effect, input, output, signal } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { Component, input, output, signal } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { isValidEmail, isValidPhone } from '../../shared/contact-validation';
-import { Tenant, TenantAttachment } from '../../services/tenant.service';
+import { Tenant } from '../../services/tenant.service';
+import { TenantCard, TenantAttachmentRequest } from '../tenant-card/tenant-card';
+import { TenantForm, TenantSaveRequest } from '../tenant-form/tenant-form';
 
-export interface TenantSaveRequest {
-  tenant: Tenant;
-  tenantId?: string;
-}
-
-export interface TenantAttachmentRequest {
-  tenantId: string;
-  attachment: TenantAttachment;
-}
+export type { TenantAttachmentRequest, TenantSaveRequest };
 
 @Component({
   selector: 'app-tenants-page',
-  imports: [FormsModule, MatButtonModule, MatFormFieldModule, MatInputModule],
+  imports: [MatButtonModule, TenantCard, TenantForm],
   templateUrl: './tenants-page.html',
   styleUrl: './tenants-page.css',
 })
@@ -32,77 +22,17 @@ export class TenantsPage {
 
   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('');
-  readonly attachmentUploadError = 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;
-    }
-    if (!isValidEmail(this.email())) {
-      this.error.set('Saisissez une adresse e-mail valide.');
-      return;
-    }
-    if (!isValidPhone(this.phone())) {
-      this.error.set('Saisissez un numéro français ou international valide.');
-      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 (file && file.size > 250 * 1024 * 1024) {
-      this.attachmentUploadError.set('Une pièce jointe ne peut pas dépasser 250 Mo.');
-    } else if (tenant.id && file) {
-      this.attachmentUploadError.set('');
-      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('');
-  }
 }