fix: Fix Many Requests After Using Back Button (#467)

* WIP

* trigger also on change in prüfi input

* put only the prüfidentifikator in the input field after selection

* remove unused import

* fix tests

Author: hf-krechan

src/app/features/ahbs/components/ahb-search-form-header/ahb-search-form-header.component.html

@@ -3,6 +3,5 @@
   <app-pruefi-input
     class="inline-block h-16 w-64"
     formControlName="pruefi"
-    [formatVersion]="headerSearchForm.controls.formatVersion.value"
-    (ngModelChange)="onPruefiSelect()" />
+    [formatVersion]="headerSearchForm.controls.formatVersion.value" />
 </form>

src/app/features/ahbs/components/ahb-search-form-header/ahb-search-form-header.component.ts

@@ -1,4 +1,4 @@
-import { Component, effect, input, output } from '@angular/core';
+import { Component, input, output, effect } from '@angular/core';
 import {
   FormControl,
   FormGroup,
@@ -21,36 +21,51 @@ export class AhbSearchFormHeaderComponent {
   pruefi = input.required<string>();
 
   formatVersionChange = output<string>();
+  pruefiChange = output<string>();
 
   headerSearchForm = new FormGroup({
     formatVersion: new FormControl('', Validators.required),
     pruefi: new FormControl('', Validators.required),
   });
 
   constructor(private readonly router: Router) {
+    // Update form when inputs change
     effect(() => {
-      this.headerSearchForm.setValue({
-        formatVersion: this.formatVersion(),
-        pruefi: this.pruefi(),
-      });
+      const newFormatVersion = this.formatVersion();
+      if (newFormatVersion !== this.headerSearchForm.get('formatVersion')?.value) {
+        this.headerSearchForm.patchValue({ formatVersion: newFormatVersion }, { emitEvent: false });
+      }
+    });
+
+    effect(() => {
+      const newPruefi = this.pruefi();
+      if (newPruefi !== this.headerSearchForm.get('pruefi')?.value) {
+        this.headerSearchForm.patchValue({ pruefi: newPruefi }, { emitEvent: false });
+      }
     });
 
+    // Handle form control changes
     this.headerSearchForm.get('formatVersion')?.valueChanges.subscribe(value => {
       if (value) {
         this.formatVersionChange.emit(value);
       }
     });
+
+    this.headerSearchForm.get('pruefi')?.valueChanges.subscribe(value => {
+      if (value) {
+        this.pruefiChange.emit(value);
+        this.navigateToAhb();
+      }
+    });
   }
 
-  onPruefiSelect() {
-    if (!this.headerSearchForm.valid) {
-      this.headerSearchForm.markAllAsTouched();
-      return;
+  private navigateToAhb() {
+    if (this.headerSearchForm.valid) {
+      this.router.navigate([
+        '/ahb',
+        this.headerSearchForm.value.formatVersion,
+        this.headerSearchForm.value.pruefi,
+      ]);
     }
-    this.router.navigate([
-      '/ahb',
-      this.headerSearchForm.value.formatVersion,
-      this.headerSearchForm.value.pruefi,
-    ]);
   }
 }

src/app/features/ahbs/components/pruefi-input/pruefi-input.component.ts

@@ -112,13 +112,17 @@ export class PruefiInputComponent implements ControlValueAccessor {
       return;
     }
 
-    const regexPattern = /^(?<pruefi>\d{5})\b\s*-\s*(?<name>.+)\s*$/;
+    const regexPattern = /^(?<pruefi>\d{5})\b(?:\s*-\s*(?<n>.+)\s*)?$/;
     const digitOnlyPattern = /^\d+$/;
 
     if (regexPattern.test(inputValue)) {
-      // Full format with name (e.g., "12345 - Some Name")
+      // Full format with optional name (e.g., "12345 - Some Name" or just "12345")
       const match = inputValue.match(regexPattern);
       pruefidentifikator = match?.groups?.['pruefi'] ?? null;
+      // Update the form control with just the pruefidentifikator
+      if (pruefidentifikator) {
+        this.control.setValue(pruefidentifikator, { emitEvent: false });
+      }
     } else if (digitOnlyPattern.test(inputValue)) {
       // Handle numeric input
       if (inputValue.length === 5) {
@@ -127,14 +131,13 @@ export class PruefiInputComponent implements ControlValueAccessor {
       } else if (inputValue.length > 5) {
         // More than 5 digits - take first 5
         pruefidentifikator = inputValue.slice(0, 5);
+        // Update the form control with just the first 5 digits
+        this.control.setValue(pruefidentifikator, { emitEvent: false });
       }
       // Less than 5 digits - treat as invalid (pruefidentifikator remains null)
     }
     // Any other format is considered invalid (pruefidentifikator remains null)
 
-    // Update the form control with the full input value to allow searching
-    this.control.setValue(inputValue);
-
     // Emit changes
     if (this.onChange) {
       this.onChange(pruefidentifikator);

src/app/features/ahbs/views/ahb-page/ahb-page.component.html

@@ -5,7 +5,8 @@
       class="flex-1 hidden md:inline"
       [formatVersion]="formatVersion()"
       [pruefi]="pruefi()"
-      (formatVersionChange)="onFormatVersionChange($event)" />
+      (formatVersionChange)="onFormatVersionChange($event)"
+      (pruefiChange)="onPruefiChange($event)" />
     <app-input-search-enhanced
       class="inline-block w-full md:w-96"
       [searchQuery]="searchQuery()"

src/app/features/ahbs/views/ahb-page/ahb-page.component.spec.ts

@@ -8,9 +8,23 @@ import { signal, computed } from '@angular/core';
 
 describe('AhbPageComponent', () => {
   let mockRouter: { navigate: jest.Mock };
+  let mockAhbService: { getAhb$Json: jest.Mock };
 
   beforeEach(() => {
     mockRouter = { navigate: jest.fn() };
+    mockAhbService = {
+      getAhb$Json: jest.fn(params =>
+        of({
+          meta: {
+            pruefidentifikator: params.pruefi,
+            description: '',
+            direction: '',
+            maus_version: '',
+          },
+          lines: [],
+        })
+      ),
+    };
 
     return MockBuilder(AhbPageComponent)
       .keep(AhbTableComponent)
@@ -24,23 +38,21 @@ describe('AhbPageComponent', () => {
           resetMarkIndex: () => {},
         },
       })
-      .mock(AhbService, {
-        getAhb$Json: jest.fn(params =>
-          of({
-            meta: {
-              pruefidentifikator: params.pruefi,
-              description: '',
-              direction: '',
-              maus_version: '',
-            },
-            lines: [],
-          })
-        ),
+      .provide({
+        provide: AhbService,
+        useValue: mockAhbService,
       })
-      .mock(ActivatedRoute, {
-        queryParams: of({}),
+      .provide({
+        provide: ActivatedRoute,
+        useValue: {
+          queryParams: of({}),
+          params: of({ formatVersion: 'FV123', pruefi: '123' }),
+        },
       })
-      .mock(Router, mockRouter);
+      .provide({
+        provide: Router,
+        useValue: mockRouter,
+      });
   });
 
   it('should render', () => {
@@ -103,18 +115,16 @@ describe('AhbPageComponent', () => {
 
   it('should refresh table and redirect URL upon formatversion change', () => {
     const fixture = MockRender(AhbPageComponent, {
-      formatVersion: 'FV123',
-      pruefi: '456',
+      formatVersion: 'FV2304',
+      pruefi: '123',
     });
     const component = fixture.point.componentInstance;
     const router = ngMocks.findInstance(Router);
 
     const navigateSpy = jest.spyOn(router, 'navigate');
 
-    component.onFormatVersionChange('FV456');
+    component.onFormatVersionChange('FV2410');
 
-    expect(navigateSpy).toHaveBeenCalledWith(['/ahb', 'FV456', '456']);
+    expect(navigateSpy).toHaveBeenCalledWith(['/ahb', 'FV2410', '123']);
   });
-
-  // Add more tests here
 });

src/app/features/ahbs/views/ahb-page/ahb-page.component.ts

@@ -1,12 +1,11 @@
 import {
   Component,
-  computed,
   ElementRef,
-  effect,
-  input,
-  signal,
   viewChild,
   OnInit,
+  OnDestroy,
+  signal,
+  computed,
 } from '@angular/core';
 import { HeaderComponent } from '../../../../shared/components/header/header.component';
 import { FooterComponent } from '../../../../shared/components/footer/footer.component';
@@ -16,7 +15,8 @@ import { AhbTableComponent } from '../../components/ahb-table/ahb-table.componen
 import { Ahb, AhbService } from '../../../../core/api';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { Observable, map, shareReplay, tap, catchError, of } from 'rxjs';
+import { Observable, Subject, of } from 'rxjs';
+import { map, shareReplay, catchError, takeUntil, distinctUntilChanged } from 'rxjs/operators';
 import { AhbSearchFormHeaderComponent } from '../../components/ahb-search-form-header/ahb-search-form-header.component';
 import { InputSearchEnhancedComponent } from '../../../../shared/components/input-search-enhanced/input-search-enhanced.component';
 import { ExportButtonComponent } from '../../components/export-button/export-button.component';
@@ -42,63 +42,75 @@ import { FallbackPageComponent } from '../../../../shared/components/fallback-pa
   ],
   templateUrl: './ahb-page.component.html',
 })
-export class AhbPageComponent implements OnInit {
-  formatVersion = input.required<string>();
-  pruefi = input.required<string>();
+export class AhbPageComponent implements OnInit, OnDestroy {
+  // State management
+  formatVersion = signal<string>('');
+  pruefi = signal<string>('');
+  searchQuery = signal<string | undefined>('');
+  edifactFormat = computed(() => this.getEdifactFormat(this.pruefi()));
 
+  // View references
   table = viewChild(AhbTableComponent);
   scroll = viewChild<ElementRef>('scroll');
 
-  searchQuery = signal<string | undefined>('');
-  edifactFormat = computed(() => this.getEdifactFormat(this.pruefi()));
-
+  // Data streams
   ahb$?: Observable<Ahb>;
   lines$?: Observable<Ahb['lines']>;
   errorOccurred = false;
 
-  private initialSearchQuery: string | null = null;
+  private destroy$ = new Subject<void>();
 
   constructor(
     private readonly ahbService: AhbService,
     private readonly route: ActivatedRoute,
     private readonly router: Router
-  ) {
-    effect(() => {
-      this.loadAhbData();
-    });
-  }
+  ) {}
 
   ngOnInit() {
-    this.route.queryParams.subscribe(params => {
-      const query = params['query'];
-      if (query) {
-        this.initialSearchQuery = query;
-        this.searchQuery.set(query);
+    // Handle route parameters
+    this.route.params.pipe(takeUntil(this.destroy$), distinctUntilChanged()).subscribe(params => {
+      const formatVersion = params['formatVersion'];
+      const pruefi = params['pruefi'];
+
+      if (formatVersion && pruefi) {
+        this.formatVersion.set(formatVersion);
+        this.pruefi.set(pruefi);
+        this.loadAhbData(formatVersion, pruefi);
       }
     });
+
+    // Handle search query params
+    this.route.queryParams
+      .pipe(takeUntil(this.destroy$), distinctUntilChanged())
+      .subscribe(params => {
+        const query = params['query'];
+        if (query) {
+          this.searchQuery.set(query);
+          this.triggerSearch(query);
+        }
+      });
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 
-  private loadAhbData() {
+  private loadAhbData(formatVersion: string, pruefi: string) {
     this.errorOccurred = false;
 
     this.ahb$ = this.ahbService
       .getAhb$Json({
-        'format-version': this.formatVersion(),
-        pruefi: this.pruefi(),
+        'format-version': formatVersion,
+        pruefi: pruefi,
       })
       .pipe(
-        tap(() => {
-          if (this.initialSearchQuery) {
-            setTimeout(() => this.triggerSearch(this.initialSearchQuery!), 0);
-          }
-        }),
         shareReplay(1),
         catchError(error => {
           if (error.status === 404) {
             this.errorOccurred = true;
           }
-          // Return an empty object of type Ahb if there's an error
-          return of({} as Ahb); // Returning a fallback object of type Ahb
+          return of({} as Ahb);
         })
       );
 
@@ -109,6 +121,10 @@ export class AhbPageComponent implements OnInit {
     this.router.navigate(['/ahb', newFormatVersion, this.pruefi()]);
   }
 
+  onPruefiChange(newPruefi: string) {
+    this.router.navigate(['/ahb', this.formatVersion(), newPruefi]);
+  }
+
   triggerSearch(query: string | undefined) {
     if (!query) return;
 
@@ -118,7 +134,6 @@ export class AhbPageComponent implements OnInit {
         tableComponent.resetMarkIndex();
       }, 0);
     }
-    this.initialSearchQuery = null; // Reset after first use
   }
 
   scrollToElement(element: HTMLElement, offsetY: number): void {
@@ -155,7 +170,6 @@ export class AhbPageComponent implements OnInit {
     }
   }
 
-  // mapping provided by mig_ahb_utility_stack
   private getEdifactFormat(pruefi: string): string {
     const mapping: { [key: string]: string } = {
       '99': 'APERAK',