refactor: split tenant and lease page modules

frontend/src/app/components/tenant-form/tenant-form.css

@@ -0,0 +1,67 @@
+:host {
+  display: block;
+}
+.page-heading {
+  margin-bottom: 30px;
+}
+.page-heading h1 {
+  margin-bottom: 8px;
+  font-size: clamp(2rem, 7vw, 3.2rem);
+  font-weight: 750;
+  letter-spacing: -0.055em;
+  line-height: 1.02;
+}
+.page-heading p:last-child {
+  margin-bottom: 0;
+  color: var(--text-muted);
+  line-height: 1.6;
+}
+.back-action.mat-mdc-button {
+  --mdc-text-button-label-text-color: var(--text-muted);
+  margin: 0 0 20px -16px;
+}
+.entity-form {
+  padding: 20px;
+  border: 1px solid var(--border);
+  border-radius: 22px;
+  background: var(--surface);
+}
+.form-grid {
+  display: grid;
+  gap: 2px;
+}
+.form-grid mat-form-field {
+  width: 100%;
+}
+.form-actions {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 8px;
+}
+.form-actions button {
+  width: 100%;
+}
+@media (min-width: 700px) {
+  .form-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 18px;
+  }
+  .full-field {
+    grid-column: span 2;
+  }
+  .entity-form {
+    padding: 30px;
+  }
+  .form-actions {
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+  .form-actions button {
+    width: auto;
+  }
+}
+@media (min-width: 1180px) {
+  .form-page {
+    max-width: 900px;
+  }
+}

frontend/src/app/components/tenant-form/tenant-form.html

@@ -0,0 +1,64 @@
+<section class="form-page">
+  <header class="page-heading">
+    <div>
+      <button mat-button type="button" class="back-action" (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)">
+    <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">Enregistrer</button>
+    </div>
+  </form>
+</section>

frontend/src/app/components/tenant-form/tenant-form.spec.ts

@@ -0,0 +1,18 @@
+import { TestBed } from '@angular/core/testing';
+import { TenantForm } from './tenant-form';
+
+describe('TenantForm', () => {
+  it('emits a trimmed tenant through its small interface', () => {
+    const fixture = TestBed.createComponent(TenantForm);
+    const component = fixture.componentInstance;
+    component.firstName.set(' Camille ');
+    component.lastName.set(' Martin ');
+    component.email.set(' camille@example.com ');
+    let firstName = '';
+    component.submitted.subscribe((request) => (firstName = request.tenant.firstName));
+
+    component.save({ invalid: false } as never);
+
+    expect(firstName).toBe('Camille');
+  });
+});

frontend/src/app/components/tenant-form/tenant-form.ts

@@ -0,0 +1,59 @@
+import { Component, effect, input, output, signal } from '@angular/core';
+import { FormsModule, NgForm } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { Tenant } from '../../services/tenant.service';
+
+export interface TenantSaveRequest {
+  tenant: Tenant;
+  tenantId?: string;
+}
+
+@Component({
+  selector: 'app-tenant-form',
+  imports: [FormsModule, MatButtonModule, MatFormFieldModule, MatInputModule],
+  templateUrl: './tenant-form.html',
+  styleUrl: './tenant-form.css',
+})
+export class TenantForm {
+  readonly tenant = input<Tenant | null>(null);
+  readonly cancelled = output<void>();
+  readonly submitted = output<TenantSaveRequest>();
+
+  readonly firstName = signal('');
+  readonly lastName = signal('');
+  readonly email = signal('');
+  readonly phone = signal('');
+  readonly address = signal('');
+
+  constructor() {
+    effect(() => this.fillForm(this.tenant()));
+  }
+
+  save(form: NgForm): void {
+    if (form.invalid) {
+      form.control.markAllAsTouched();
+      return;
+    }
+
+    this.submitted.emit({
+      tenant: {
+        firstName: this.firstName().trim(),
+        lastName: this.lastName().trim(),
+        email: this.email().trim(),
+        phone: this.phone().trim(),
+        address: this.address().trim(),
+      },
+      tenantId: this.tenant()?.id,
+    });
+  }
+
+  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 ?? '');
+  }
+}