feat: enhance filter functionality; update search handling and state management in filter service

libs/feature/return/pages/src/lib/main/main-page.component.html

@@ -4,8 +4,4 @@
   via Rechnungsnummer, E-Mail-Adresse oder Kundennamen
 </p>
 
-<filter-search-bar-input
-  groupName="main"
-  inputKey="qs"
-  (search)="onSearch()"
-></filter-search-bar-input>
+<filter-search-bar-input inputKey="qs" (search)="onSearch()"></filter-search-bar-input>

libs/feature/return/pages/src/lib/main/main-page.component.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { Router } from '@angular/router';
 import { ReturnSearchService } from '@feature/return/services';
 import { injectActivatedProcessId } from '@isa/core/process';
 import { FilterService, SearchBarInputComponent } from '@isa/shared/filter';
@@ -12,6 +13,8 @@ import { FilterService, SearchBarInputComponent } from '@isa/shared/filter';
   imports: [SearchBarInputComponent],
 })
 export class MainPageComponent {
+  #router = inject(Router);
+
   processId = injectActivatedProcessId();
 
   filterService = inject(FilterService);
@@ -19,10 +22,9 @@ export class MainPageComponent {
   returnSearchService = inject(ReturnSearchService);
 
   onSearch() {
-    this.returnSearchService
-      .search({
-        filter: this.filterService.toParams(),
-      })
-      .subscribe();
+    this.#router.navigate([], {
+      queryParams: this.filterService.toParams(),
+      queryParamsHandling: 'merge',
+    });
   }
 }

libs/feature/return/pages/src/lib/return-pages.component.ts

@@ -1,6 +1,8 @@
-import { Component, inject } from '@angular/core';
+import { Component, effect, inject, untracked } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, RouterOutlet } from '@angular/router';
-import { provideQuerySettings } from '@isa/shared/filter';
+import { FilterService, provideQuerySettings } from '@isa/shared/filter';
+import { isEqual } from 'lodash';
 
 @Component({
   selector: 'lib-return-pages',
@@ -9,4 +11,23 @@ import { provideQuerySettings } from '@isa/shared/filter';
   styleUrl: './return-pages.component.scss',
   providers: [provideQuerySettings(() => inject(ActivatedRoute).snapshot.data['querySettings'])],
 })
-export class ReturnPagesComponent {}
+export class ReturnPagesComponent {
+  private queryParams = toSignal(inject(ActivatedRoute).queryParams);
+
+  private filterService = inject(FilterService);
+
+  constructor() {
+    effect(() => {
+      const params = this.queryParams();
+      const currentParams = this.filterService.toParams();
+
+      if (!params || isEqual(params, currentParams)) {
+        return;
+      }
+
+      untracked(() => {
+        this.filterService.parseParams(params, { commit: true });
+      });
+    });
+  }
+}

libs/shared/filter/src/lib/core/filter.service.ts

@@ -1,6 +1,6 @@
 import { inject, Injectable, InjectionToken, Provider } from '@angular/core';
 import { InputType, QuerySettingsDTO } from '../types';
-import { patchState, signalState } from '@ngrx/signals';
+import { getState, patchState, signalState } from '@ngrx/signals';
 import { mapToFilter } from './mappings';
 
 export const QUERY_SETTINGS = new InjectionToken<QuerySettingsDTO>('QuerySettings');
@@ -13,14 +13,16 @@ export function provideQuerySettings(factory: () => QuerySettingsDTO): Provider[
 export class FilterService {
   readonly settings = inject(QUERY_SETTINGS);
 
-  #state = signalState(mapToFilter(this.settings));
+  #commitdState = mapToFilter(this.settings);
+
+  #state = signalState(this.#commitdState);
 
   groups = this.#state.groups;
 
   inputs = this.#state.inputs;
 
-  setInputValue(key: string, value: string | undefined): void {
-    const inputs = this.inputs().map((input) => {
+  setInputValue(key: string, value: string | undefined, options?: { commit: boolean }): void {
+    const inputs = this.#state.inputs().map((input) => {
       if (input.key !== key) {
         return input;
       }
@@ -29,10 +31,35 @@ export class FilterService {
         return { ...input, value };
       }
 
-      throw new Error(`Input type not supported: ${input.type}`);
+      console.warn(`Input type not supported: ${input.type}`);
+
+      return input;
     });
 
     patchState(this.#state, { inputs });
+
+    if (options?.commit) {
+      this.commit();
+    }
+  }
+
+  rollback() {
+    patchState(this.#state, this.#commitdState);
+  }
+
+  commit() {
+    this.#commitdState = getState(this.#state);
+  }
+
+  /**
+   * Resets the filter to its default state.
+   */
+  reset(options?: { commit: boolean }) {
+    patchState(this.#state, mapToFilter(this.settings));
+
+    if (options?.commit) {
+      this.commit();
+    }
   }
 
   toParams(): Record<string, string> {
@@ -51,7 +78,25 @@ export class FilterService {
     return params;
   }
 
-  parseParams(params: Record<string, string>): void {
-    throw new Error('Not implemented');
+  parseParams(params: Record<string, string>, options?: { commit: boolean }): void {
+    // Mögliche Alternative zum reset
+    // const inputKeys = this.inputs().map((i) => i.key);
+
+    // for (const key of inputKeys) {
+    //   if (!params[key]) {
+    //     this.setInputValue(key, undefined);
+    //   } else {
+    //     this.setInputValue(key, params[key]);
+    //   }
+    // }
+
+    this.reset();
+    for (const key in params) {
+      this.setInputValue(key, params[key]);
+    }
+
+    if (options?.commit) {
+      this.commit();
+    }
   }
 }