feat: use delegatedSignal and debounce via appSettings in ESS solution

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: manfredsteyer

src/app/domains/shared/util-common/app-settings.ts

@@ -0,0 +1,7 @@
+export interface AppSettings {
+  readonly debounceTimeMs: number;
+}
+
+export const appSettings: AppSettings = {
+  debounceTimeMs: 300,
+};

src/app/domains/shared/util-common/delegated-signal.ts

@@ -0,0 +1,18 @@
+import { linkedSignal, WritableSignal } from '@angular/core';
+
+export function delegatedSignal<T>(
+  getter: () => T,
+  setter: (value: T) => void,
+): WritableSignal<T> {
+  const read = linkedSignal(getter);
+
+  return Object.assign(read, {
+    set: setter,
+    update(fn: (value: T) => T) {
+      setter(fn(read()));
+    },
+    asReadonly() {
+      return read;
+    },
+  });
+}

src/app/domains/ticketing/feature-booking/flight-search/flight-search.spec.ts

@@ -6,9 +6,10 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { provideRouter } from '@angular/router';
 import { page } from 'vitest/browser';
 
-import { provideLanguageService } from '../../../shared/util-common/language';
 import { createTestFlight } from '../../../../testing/create-test-flight';
 import { provideTestConfig } from '../../../../testing/provide-test-config';
+import { appSettings } from '../../../shared/util-common/app-settings';
+import { provideLanguageService } from '../../../shared/util-common/language';
 import { FlightSearch } from './flight-search';
 import { FlightStore } from './flight-store';
 
@@ -28,6 +29,9 @@ describe('flight-search', () => {
       ],
     }).compileComponents();
 
+    // Turn off debouncing so the form propagates changes immediately
+    vi.spyOn(appSettings, 'debounceTimeMs', 'get').mockReturnValue(0);
+
     fixture = TestBed.createComponent(FlightSearch);
     component = fixture.componentInstance;
 
@@ -36,9 +40,11 @@ describe('flight-search', () => {
     // Await the initial data loading (from = Graz, to = Hamburg)
     const request = await vi.waitFor(
       () => ctrl.expectOne('/flight?from=Graz&to=Hamburg'),
-      { interval: 50, timeout: 1000 },
+      { interval: 0 },
     );
     request.flush([]);
+
+    await fixture.whenStable();
   });
 
   afterEach(() => {
@@ -57,34 +63,37 @@ describe('flight-search', () => {
     await expect.element(button).toBeDisabled();
   });
 
-  it('enables the search button when from and to are given', async () => {
-    await page.getByLabelText('From').fill('Paris');
+  it('loads flights when the search criteria change', async () => {
     await page.getByLabelText('To').fill('London');
 
-    const button = page.getByRole('button', { name: 'Search' });
-    await expect.element(button).toBeEnabled();
+    const request = await vi.waitFor(
+      () => ctrl.expectOne('/flight?from=Graz&to=London'),
+      { interval: 0 },
+    );
+
+    request.flush([
+      createTestFlight(1),
+      createTestFlight(2),
+      createTestFlight(3),
+    ]);
+
+    await fixture.whenStable();
   });
 
-  it('searches for flights when the search button is clicked', async () => {
+  it('delegates the filter changes to the store', async () => {
     const store = TestBed.inject(FlightStore);
     vi.spyOn(store, 'updateFilter');
 
-    await page.getByLabelText('From').fill('Paris');
     await page.getByLabelText('To').fill('London');
 
-    const button = page.getByRole('button', { name: 'Search' });
-    await button.click();
-
-    const request = await vi.waitFor(() =>
-      ctrl.expectOne('/flight?from=Paris&to=London'),
+    const request = await vi.waitFor(
+      () => ctrl.expectOne('/flight?from=Graz&to=London'),
+      { interval: 0 },
     );
+    request.flush([]);
 
-    request.flush([
-      createTestFlight(1),
-      createTestFlight(2),
-      createTestFlight(3),
-    ]);
+    await fixture.whenStable();
 
-    expect(store.updateFilter).toBeCalledWith('Paris', 'London');
+    expect(store.updateFilter).toBeCalledWith('Graz', 'London');
   });
 });

src/app/domains/ticketing/feature-booking/flight-search/flight-search.ts

@@ -5,12 +5,13 @@ import {
   computed,
   effect,
   inject,
-  linkedSignal,
   signal,
 } from '@angular/core';
-import { form, FormField } from '@angular/forms/signals';
+import { debounce, form, FormField } from '@angular/forms/signals';
 import { RouterLink } from '@angular/router';
 
+import { appSettings } from '../../../shared/util-common/app-settings';
+import { delegatedSignal } from '../../../shared/util-common/delegated-signal';
 import { LanguageService } from '../../../shared/util-common/language';
 import { FlightCard } from '../../ui/flight-card/flight-card';
 import { FlightStore } from './flight-store';
@@ -25,11 +26,16 @@ export class FlightSearch {
   private flightStore = inject(FlightStore);
   private languageService = inject(LanguageService);
 
-  protected readonly filter = linkedSignal(() => ({
-    from: this.flightStore.from(),
-    to: this.flightStore.to(),
-  }));
-  protected readonly filterForm = form(this.filter);
+  protected readonly filter = delegatedSignal(
+    () => ({
+      from: this.flightStore.from(),
+      to: this.flightStore.to(),
+    }),
+    (value) => this.flightStore.updateFilter(value.from, value.to),
+  );
+  protected readonly filterForm = form(this.filter, (path) => {
+    debounce(path, appSettings.debounceTimeMs);
+  });
 
   protected readonly flightRoute = computed(
     () => this.filter().from + ' to ' + this.filter().to,
@@ -57,7 +63,7 @@ export class FlightSearch {
   }
 
   protected search(): void {
-    this.flightStore.updateFilter(this.filter().from, this.filter().to);
+    this.flightStore.reload();
   }
 
   protected updateBasket(flightId: number, selected: boolean): void {