Align rent payment dialog validation (#55)

frontend/src/app/components/rent-payment-reversal-dialog/rent-payment-reversal-dialog.ts

@@ -1,12 +1,18 @@
-import { Component, inject, signal } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Component, ElementRef, inject, signal } from '@angular/core';
+import {
+	AbstractControl,
+	FormControl,
+	FormGroup,
+	ReactiveFormsModule,
+	ValidationErrors,
+} from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { finalize } from 'rxjs';
-import { httpErrorMessage } from '../../services/http-error-message';
+import { saveFailure } from '../../services/http-error-message';
 import { browserTimeZone, formatEuro } from '../../services/rent-payment-format';
 import { RentPayment, RentPaymentService } from '../../services/rent-payment.service';
 import { isRentPaymentDataStale, RENT_PAYMENT_DATA_STALE } from '../rent-payment-dialog-result';
@@ -28,20 +34,26 @@ export class RentPaymentReversalDialog {
 	readonly payment = inject<RentPayment>(MAT_DIALOG_DATA);
 	private readonly dialogRef = inject(MatDialogRef<RentPaymentReversalDialog>);
 	private readonly payments = inject(RentPaymentService);
+	private readonly host = inject(ElementRef<HTMLElement>);
 	readonly saving = signal(false);
 	readonly error = signal('');
+	readonly fieldErrorFields = signal<ReadonlySet<string>>(new Set());
 	readonly formatEuro = formatEuro;
 
 	readonly form = new FormGroup({
 		reason: new FormControl('', {
 			nonNullable: true,
-			validators: [Validators.required, Validators.maxLength(500)],
+			validators: this.validReason.bind(this),
 		}),
 	});
 
 	submit(): void {
 		this.form.markAllAsTouched();
-		if (this.form.invalid || this.saving()) return;
+		if (this.form.invalid) {
+			this.focusFirstInvalid();
+			return;
+		}
+		if (this.saving()) return;
 		this.saving.set(true);
 		this.error.set('');
 		this.payments
@@ -59,10 +71,45 @@ export class RentPaymentReversalDialog {
 						this.dialogRef.close(RENT_PAYMENT_DATA_STALE);
 						return;
 					}
-					this.error.set(
-						httpErrorMessage(error, 'Impossible de contrepasser ce règlement.'),
-					);
+					this.showFailure(error, 'Impossible de contrepasser ce règlement.');
 				},
 			});
 	}
+
+	private validReason(control: AbstractControl<string>): ValidationErrors | null {
+		const reason = control.value.trim();
+		if (!reason) return { required: true };
+		return reason.length > 500 ? { maxlength: true } : null;
+	}
+
+	private showFailure(error: unknown, fallback: string): void {
+		const failure = saveFailure(error, fallback);
+		const knownErrors = failure.fieldErrors.filter((fieldError) =>
+			this.isKnownFieldError(fieldError.field, fieldError.code),
+		);
+		this.error.set(knownErrors.length === failure.fieldErrors.length ? '' : failure.message);
+		this.fieldErrorFields.set(new Set(knownErrors.map((fieldError) => fieldError.field)));
+		for (const fieldError of knownErrors) {
+			const control = this.form.get(fieldError.field);
+			if (control) control.setErrors({ ...control.errors, [fieldError.code]: true });
+		}
+		this.focusFirstInvalid();
+	}
+
+	clearFieldError(field: string): void {
+		if (!this.fieldErrorFields().has(field)) return;
+		const remaining = new Set(this.fieldErrorFields());
+		remaining.delete(field);
+		this.fieldErrorFields.set(remaining);
+		if (remaining.size === 0) this.error.set('');
+	}
+
+	private isKnownFieldError(field: string, code: string): boolean {
+		return field === 'reason' && ['not_blank', 'size'].includes(code);
+	}
+
+	private focusFirstInvalid(): void {
+		if (this.form.controls.reason.invalid)
+			this.host.nativeElement.querySelector('[formControlName="reason"]')?.focus();
+	}
 }