Align rent revision validation flows (#56)

frontend/src/app/components/rent-revision-preview/rent-revision-preview.css

@@ -108,6 +108,12 @@ input[type='number'] {
 	color: var(--danger, #b42318);
 }
 
+.field-error,
+.stale-preview {
+	color: var(--danger, #b42318);
+	font-size: 0.75rem;
+}
+
 .preview-warnings ul {
 	display: grid;
 	gap: var(--space-2, 0.5rem);

frontend/src/app/components/rent-revision-preview/rent-revision-preview.html

@@ -17,7 +17,11 @@
 				<summary>Changer la série INSEE</summary>
 				<label>
 					<span>Nouvelle série officielle</span>
-					<select class="series-override" [formField]="requestForm.seriesIdOverride">
+					<select
+						class="series-override"
+						[formField]="requestForm.seriesIdOverride"
+						(change)="onSeriesChanged()"
+					>
 						<option value="">Série prévue dans le bail</option>
 						<option value="001515333">Métropole — 001515333</option>
 						<option value="010760507">Corse — 010760507</option>
@@ -25,6 +29,9 @@
 							Départements d’outre-mer (article 73) — 010760509
 						</option>
 					</select>
+					@if (fieldError('seriesIdOverride')) {
+						<small class="field-error">{{ fieldError('seriesIdOverride') }}</small>
+					}
 				</label>
 				@if (requestModel().seriesIdOverride.trim()) {
 					<label class="attestation">
@@ -47,18 +54,26 @@
 							<input
 								class="previous-index"
 								type="number"
-								step="0.01"
+								step="0.0001"
+								(input)="clearFieldError('previousIndex')"
 								[formField]="requestForm.previousIndex"
 							/>
+							@if (fieldError('previousIndex')) {
+								<small class="field-error">{{ fieldError('previousIndex') }}</small>
+							}
 						</label>
 						<label>
 							<span>Nouvel indice</span>
 							<input
 								class="new-index"
 								type="number"
-								step="0.01"
+								step="0.0001"
+								(input)="clearFieldError('newIndex')"
 								[formField]="requestForm.newIndex"
 							/>
+							@if (fieldError('newIndex')) {
+								<small class="field-error">{{ fieldError('newIndex') }}</small>
+							}
 						</label>
 					</div>
 					<label class="attestation">
@@ -164,10 +179,17 @@
 			}
 		</article>
 	}
+	@if (preview() && !previewActionable()) {
+		<p class="stale-preview" role="status">
+			Cette simulation est conservée pour référence, mais doit être recalculée avant toute
+			proposition.
+		</p>
+	}
 
 	<app-rent-revision-proposals
 		[leaseId]="leaseId()"
 		[preview]="preview()"
 		[previewRequest]="lastSuccessfulRequest()"
+		[previewActionable]="previewActionable()"
 	/>
 </section>

frontend/src/app/components/rent-revision-preview/rent-revision-preview.spec.ts

@@ -114,8 +114,8 @@ describe('RentRevisionPreviewComponent', () => {
 
 		const previous: HTMLInputElement = fixture.nativeElement.querySelector('.previous-index');
 		const next: HTMLInputElement = fixture.nativeElement.querySelector('.new-index');
-		expect(previous.min).toBe('0.01');
-		expect(next.min).toBe('0.01');
+		expect(previous.min).toBe('0.0001');
+		expect(next.min).toBe('0.0001');
 		previous.value = '145.17';
 		previous.dispatchEvent(new Event('input'));
 		next.value = '146.68';
@@ -202,7 +202,7 @@ describe('RentRevisionPreviewComponent', () => {
 		http.expectOne('/api/leases/lease-1/rent-revisions/preview').flush({});
 	});
 
-	it('does not leave a previous simulation actionable after a recalculation failure', () => {
+	it('preserves a previous simulation but disables its stale proposal after a recalculation failure', () => {
 		const fixture = createComponent();
 		fixture.nativeElement.querySelector('.preview-submit').click();
 		http.expectOne('/api/leases/lease-1/rent-revisions/preview').flush(previewResponse());
@@ -216,8 +216,11 @@ describe('RentRevisionPreviewComponent', () => {
 		);
 		fixture.detectChanges();
 
-		expect(fixture.nativeElement.querySelector('.preview-result')).toBeNull();
+		expect(fixture.nativeElement.querySelector('.preview-result')).not.toBeNull();
 		expect(fixture.nativeElement.querySelector('.proposal-form')).toBeNull();
+		expect(fixture.nativeElement.textContent).toContain(
+			'doit être recalculée avant toute proposition',
+		);
 		expect(fixture.nativeElement.textContent).toContain('Recalcul impossible');
 	});
 });

frontend/src/app/components/rent-revision-preview/rent-revision-preview.ts

@@ -1,4 +1,4 @@
-import { Component, DestroyRef, inject, input, signal } from '@angular/core';
+import { Component, DestroyRef, ElementRef, inject, input, signal } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { FormField, FormRoot, form, min } from '@angular/forms/signals';
@@ -9,7 +9,7 @@ import {
 	RentRevisionPreview,
 	RentRevisionPreviewRequest,
 } from '../../services/lease.service';
-import { httpErrorMessage } from '../../services/http-error-message';
+import { FieldValidationError, saveFailure } from '../../services/http-error-message';
 import { leaseWarningDescription } from '../../services/lease-warning-label';
 import { RentRevisionProposalsComponent } from '../rent-revision-proposals/rent-revision-proposals';
 
@@ -36,13 +36,16 @@ const indexFormatter = new Intl.NumberFormat('fr-FR', { maximumFractionDigits: 4
 export class RentRevisionPreviewComponent {
 	private readonly leases = inject(LeaseService);
 	private readonly destroyRef = inject(DestroyRef);
+	private readonly host = inject(ElementRef<HTMLElement>);
 
 	readonly leaseId = input.required<string>();
 	readonly preview = signal<RentRevisionPreview | null>(null);
 	readonly pending = signal(false);
 	readonly error = signal('');
+	readonly fieldErrors = signal<FieldValidationError[]>([]);
 	readonly validationError = signal('');
 	readonly manualRequired = signal(false);
+	readonly previewActionable = signal(false);
 	readonly lastSuccessfulRequest = signal<RentRevisionPreviewRequest | null>(null);
 	readonly requestModel = signal({
 		seriesIdOverride: '',
@@ -52,18 +55,18 @@ export class RentRevisionPreviewComponent {
 		manualIndicesConfirmed: false,
 	});
 	readonly requestForm = form(this.requestModel, (fields) => {
-		min(fields.previousIndex, 0.01);
-		min(fields.newIndex, 0.01);
+		min(fields.previousIndex, 0.0001);
+		min(fields.newIndex, 0.0001);
 	});
 
 	prepare(): void {
 		if (this.pending()) return;
 		const request = this.buildRequest();
 		if (!request) return;
-		this.preview.set(null);
-		this.lastSuccessfulRequest.set(null);
+		this.previewActionable.set(false);
 		this.pending.set(true);
 		this.error.set('');
+		this.fieldErrors.set([]);
 		this.validationError.set('');
 		this.leases
 			.previewRentRevision(this.leaseId(), request)
@@ -75,17 +78,69 @@ export class RentRevisionPreviewComponent {
 				next: (preview) => {
 					this.preview.set(preview);
 					this.lastSuccessfulRequest.set(request);
+					this.previewActionable.set(true);
+					if (this.manualRequired() && preview.indexSource !== 'MANUAL') {
+						this.clearManualIndices();
+					}
 					this.manualRequired.set(preview.indexSource === 'MANUAL');
 				},
 				error: (error: unknown) => {
-					if (this.isIndexUnavailable(error)) this.manualRequired.set(true);
-					this.error.set(
-						httpErrorMessage(error, 'Impossible de préparer la révision du loyer.'),
+					if (this.isIndexUnavailable(error)) {
+						if (!this.manualRequired()) this.clearManualIndices();
+						this.manualRequired.set(true);
+						this.error.set(
+							'Les indices IRL officiels sont indisponibles. Saisissez-les manuellement après vérification.',
+						);
+						return;
+					}
+					const failure = saveFailure(
+						error,
+						'Impossible de préparer la révision du loyer.',
 					);
+					const visibleErrors = failure.fieldErrors.filter((fieldError) =>
+						this.isKnownField(fieldError.field),
+					);
+					this.fieldErrors.set(visibleErrors);
+					this.error.set(
+						visibleErrors.length === failure.fieldErrors.length
+							? failure.message
+							: this.operationError(failure.fieldErrors),
+					);
+					this.focusFirstFieldError();
 				},
 			});
 	}
 
+	clearFieldError(field: string): void {
+		if (!this.fieldErrors().some((error) => error.field === field)) return;
+		const remaining = this.fieldErrors().filter((error) => error.field !== field);
+		this.fieldErrors.set(remaining);
+		if (remaining.length === 0) this.error.set('');
+	}
+
+	onSeriesChanged(): void {
+		this.clearFieldError('seriesIdOverride');
+		this.requestModel.update((model) => ({
+			...model,
+			seriesOverrideConfirmed: false,
+			previousIndex: null,
+			newIndex: null,
+			manualIndicesConfirmed: false,
+		}));
+	}
+
+	fieldError(field: string): string {
+		if (!this.fieldErrors().some((error) => error.field === field)) return '';
+		return (
+			{
+				timeZone: 'Le fuseau horaire du navigateur est invalide.',
+				seriesIdOverride: 'Choisissez une série IRL officielle prise en charge.',
+				previousIndex: 'Renseignez un indice précédent strictement positif.',
+				newIndex: 'Renseignez un nouvel indice strictement positif.',
+			}[field] ?? 'Vérifiez cette valeur.'
+		);
+	}
+
 	civilDate(date: string): string {
 		const [year, month, day] = date.split('-').map(Number);
 		return civilDateFormatter.format(new Date(Date.UTC(year, month - 1, day)));
@@ -159,4 +214,40 @@ export class RentRevisionPreviewComponent {
 			error.error.code === 'IRL_INDEX_UNAVAILABLE'
 		);
 	}
+
+	private isKnownField(field: string): boolean {
+		return ['timeZone', 'seriesIdOverride', 'previousIndex', 'newIndex'].includes(field);
+	}
+
+	private operationError(errors: FieldValidationError[]): string {
+		return errors.some((error) => error.field === 'timeZone')
+			? 'Le fuseau horaire du navigateur est invalide.'
+			: 'Impossible de préparer la révision du loyer.';
+	}
+
+	private focusFirstFieldError(): void {
+		const selector = this.fieldErrors()
+			.map(
+				(error) =>
+					({
+						seriesIdOverride: '.series-override',
+						previousIndex: '.previous-index',
+						newIndex: '.new-index',
+					})[error.field],
+			)
+			.find((value): value is string => typeof value === 'string');
+		if (selector)
+			queueMicrotask(() =>
+				(this.host.nativeElement.querySelector(selector) as HTMLElement | null)?.focus(),
+			);
+	}
+
+	private clearManualIndices(): void {
+		this.requestModel.update((model) => ({
+			...model,
+			previousIndex: null,
+			newIndex: null,
+			manualIndicesConfirmed: false,
+		}));
+	}
 }