refactoring Filter Handling

bizmatch/src/app/components/header/header.component.ts

@@ -1,25 +1,26 @@
-import { BreakpointObserver } from '@angular/cdk/layout';
 import { CommonModule } from '@angular/common';
-import { Component, HostListener } from '@angular/core';
+import { Component, HostListener, OnDestroy, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { NavigationEnd, Router, RouterModule } from '@angular/router';
 import { faUserGear } from '@fortawesome/free-solid-svg-icons';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Collapse, Dropdown, initFlowbite } from 'flowbite';
-import { debounceTime, filter, Observable, Subject, Subscription } from 'rxjs';
+import { filter, Observable, Subject, takeUntil } from 'rxjs';
+
 import { SortByOptions, User } from '../../../../../bizmatch-server/src/models/db.model';
-import { BusinessListingCriteria, CommercialPropertyListingCriteria, emailToDirName, KeycloakUser, KeyValueAsSortBy, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
+import { emailToDirName, KeycloakUser, KeyValueAsSortBy, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../environments/environment';
 import { AuthService } from '../../services/auth.service';
-import { CriteriaChangeService } from '../../services/criteria-change.service';
+import { FilterStateService } from '../../services/filter-state.service';
 import { ListingsService } from '../../services/listings.service';
 import { SearchService } from '../../services/search.service';
 import { SelectOptionsService } from '../../services/select-options.service';
 import { SharedService } from '../../services/shared.service';
 import { UserService } from '../../services/user.service';
-import { assignProperties, createEmptyUserListingCriteria, getCriteriaProxy, map2User } from '../../utils/utils';
+import { map2User } from '../../utils/utils';
 import { DropdownComponent } from '../dropdown/dropdown.component';
 import { ModalService } from '../search-modal/modal.service';
+
 @UntilDestroy()
 @Component({
   selector: 'header',
@@ -28,7 +29,7 @@ import { ModalService } from '../search-modal/modal.service';
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss',
 })
-export class HeaderComponent {
+export class HeaderComponent implements OnInit, OnDestroy {
   public buildVersion = environment.buildVersion;
   user$: Observable<KeycloakUser>;
   keycloakUser: KeycloakUser;
@@ -41,27 +42,31 @@ export class HeaderComponent {
   isMobile: boolean = false;
   private destroy$ = new Subject<void>();
   prompt: string;
-  private subscription: Subscription;
-  criteria: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria;
-  private routerSubscription: Subscription | undefined;
-  baseRoute: string;
-  sortDropdownVisible: boolean;
+
+  // Aktueller Listing-Typ basierend auf Route
+  currentListingType: 'businessListings' | 'commercialPropertyListings' | 'brokerListings' | null = null;
+
+  // Sortierung
+  sortDropdownVisible: boolean = false;
   sortByOptions: KeyValueAsSortBy[] = [];
+  sortBy: SortByOptions = null;
+
+  // Observable für Anzahl der Listings
   numberOfBroker$: Observable<number>;
   numberOfCommercial$: Observable<number>;
-  sortBy: SortByOptions = null; // Neu: Separate Property
+
   constructor(
     private router: Router,
     private userService: UserService,
     private sharedService: SharedService,
-    private breakpointObserver: BreakpointObserver,
     private modalService: ModalService,
     private searchService: SearchService,
-    private criteriaChangeService: CriteriaChangeService,
+    private filterStateService: FilterStateService,
     public selectOptions: SelectOptionsService,
     public authService: AuthService,
     private listingService: ListingsService,
   ) {}
+
   @HostListener('document:click', ['$event'])
   handleGlobalClick(event: Event) {
     const target = event.target as HTMLElement;
@@ -69,91 +74,125 @@ export class HeaderComponent {
       this.sortDropdownVisible = false;
     }
   }
+
   async ngOnInit() {
+    // User Setup
     const token = await this.authService.getToken();
     this.keycloakUser = map2User(token);
     if (this.keycloakUser) {
       this.user = await this.userService.getByMail(this.keycloakUser?.email);
       this.profileUrl = this.user.hasProfile ? `${this.env.imageBaseUrl}/pictures/profile/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}` : `/assets/images/placeholder.png`;
     }
-    this.numberOfBroker$ = this.userService.getNumberOfBroker(createEmptyUserListingCriteria());
+
+    // Lade Anzahl der Listings
+    this.numberOfBroker$ = this.userService.getNumberOfBroker(this.createEmptyUserListingCriteria());
     this.numberOfCommercial$ = this.listingService.getNumberOfListings('commercialProperty');
+
+    // Flowbite initialisieren
     setTimeout(() => {
       initFlowbite();
     }, 10);
 
-    this.sharedService.currentProfilePhoto.subscribe(photoUrl => {
+    // Profile Photo Updates
+    this.sharedService.currentProfilePhoto.pipe(untilDestroyed(this)).subscribe(photoUrl => {
       this.profileUrl = photoUrl;
     });
 
-    this.checkCurrentRoute(this.router.url);
-    this.setupSortByOptions();
-    this.loadSortBy(); // Neu
-    this.routerSubscription = this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event: any) => {
-      this.checkCurrentRoute(event.urlAfterRedirects);
-      this.setupSortByOptions();
-    });
-    this.subscription = this.criteriaChangeService.criteriaChange$.pipe(debounceTime(400)).subscribe(() => {
-      this.criteria = getCriteriaProxy(this.baseRoute, this);
-    });
+    // User Updates
     this.userService.currentUser.pipe(untilDestroyed(this)).subscribe(u => {
       this.user = u;
     });
-  }
-  private loadSortBy() {
-    const storedSortBy = sessionStorage.getItem(this.getSortByKey());
-    this.sortBy = storedSortBy ? (storedSortBy as SortByOptions) : null;
+
+    // Router Events
+    this.router.events
+      .pipe(
+        filter(event => event instanceof NavigationEnd),
+        untilDestroyed(this),
+      )
+      .subscribe((event: NavigationEnd) => {
+        this.checkCurrentRoute(event.urlAfterRedirects);
+      });
+
+    // Initial Route Check
+    this.checkCurrentRoute(this.router.url);
   }
 
-  private saveSortBy() {
-    sessionStorage.setItem(this.getSortByKey(), this.sortBy);
-  }
-  private getSortByKey(): string {
-    // Basierend auf Route (für Business/Commercial unterscheiden)
-    if (this.isBusinessListing()) return 'businessSortBy';
-    if (this.isCommercialPropertyListing()) return 'commercialSortBy';
-    if (this.isProfessionalListing()) return 'professionalsSortBy';
-    return 'defaultSortBy'; // Fallback
-  }
-  sortByFct(selectedSortBy: SortByOptions) {
-    this.sortBy = selectedSortBy;
-    this.saveSortBy(); // Speichere separat
-    this.sortDropdownVisible = false;
-    this.searchService.search(this.criteria.criteriaType); // Neu: Übergebe sortBy separat
-  }
   private checkCurrentRoute(url: string): void {
-    this.baseRoute = url.split('/')[1]; // Nimmt den ersten Teil der Route nach dem ersten '/'
-    const specialRoutes = [, '', ''];
-    this.criteria = getCriteriaProxy(this.baseRoute, this);
+    const baseRoute = url.split('/')[1];
+
+    // Bestimme den aktuellen Listing-Typ
+    if (baseRoute === 'businessListings') {
+      this.currentListingType = 'businessListings';
+    } else if (baseRoute === 'commercialPropertyListings') {
+      this.currentListingType = 'commercialPropertyListings';
+    } else if (baseRoute === 'brokerListings') {
+      this.currentListingType = 'brokerListings';
+    } else {
+      this.currentListingType = null;
+      return; // Keine relevante Route für Filter/Sort
+    }
+
+    // Setup für diese Route
+    this.setupSortByOptions();
+    this.subscribeToStateChanges();
   }
-  setupSortByOptions() {
+
+  private subscribeToStateChanges(): void {
+    if (!this.currentListingType) return;
+
+    // Abonniere State-Änderungen für den aktuellen Listing-Typ
+    this.filterStateService
+      .getState$(this.currentListingType)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(state => {
+        this.sortBy = state.sortBy;
+      });
+  }
+
+  private setupSortByOptions(): void {
     this.sortByOptions = [];
-    let storedSortBy = null;
-    if (this.isProfessionalListing()) {
-      this.sortByOptions = [...this.sortByOptions, ...this.selectOptions.sortByOptions.filter(s => s.type === 'professional')];
-      storedSortBy = sessionStorage.getItem('professionalsSortBy');
-    }
-    if (this.isBusinessListing()) {
-      this.sortByOptions = [...this.sortByOptions, ...this.selectOptions.sortByOptions.filter(s => s.type === 'business' || s.type === 'listing')];
-      storedSortBy = sessionStorage.getItem('businessSortBy');
-    }
-    if (this.isCommercialPropertyListing()) {
-      this.sortByOptions = [...this.sortByOptions, ...this.selectOptions.sortByOptions.filter(s => s.type === 'commercial' || s.type === 'listing')];
-      storedSortBy = sessionStorage.getItem('commercialSortBy');
+
+    if (!this.currentListingType) return;
+
+    switch (this.currentListingType) {
+      case 'brokerListings':
+        this.sortByOptions = [...this.selectOptions.sortByOptions.filter(s => s.type === 'professional')];
+        break;
+      case 'businessListings':
+        this.sortByOptions = [...this.selectOptions.sortByOptions.filter(s => s.type === 'business' || s.type === 'listing')];
+        break;
+      case 'commercialPropertyListings':
+        this.sortByOptions = [...this.selectOptions.sortByOptions.filter(s => s.type === 'commercial' || s.type === 'listing')];
+        break;
     }
+
+    // Füge generische Optionen hinzu (ohne type)
     this.sortByOptions = [...this.sortByOptions, ...this.selectOptions.sortByOptions.filter(s => !s.type)];
-    this.sortBy = storedSortBy && storedSortBy !== 'null' ? (storedSortBy as SortByOptions) : null;
   }
-  ngAfterViewInit() {}
+
+  sortByFct(selectedSortBy: SortByOptions): void {
+    if (!this.currentListingType) return;
+
+    this.sortDropdownVisible = false;
+
+    // Update sortBy im State
+    this.filterStateService.updateSortBy(this.currentListingType, selectedSortBy);
+
+    // Trigger search
+    this.searchService.search(this.currentListingType);
+  }
 
   async openModal() {
-    const modalResult = await this.modalService.showModal(this.criteria);
+    if (!this.currentListingType) return;
+
+    const criteria = this.filterStateService.getCriteria(this.currentListingType);
+    const modalResult = await this.modalService.showModal(criteria);
+
     if (modalResult.accepted) {
-      this.searchService.search(this.criteria.criteriaType);
-    } else {
-      this.criteria = assignProperties(this.criteria, modalResult.criteria);
+      this.searchService.search(this.currentListingType);
     }
   }
+
   navigateWithState(dest: string, state: any) {
     this.router.navigate([dest], { state: state });
   }
@@ -161,17 +200,21 @@ export class HeaderComponent {
   isActive(route: string): boolean {
     return this.router.url === route;
   }
+
   isFilterUrl(): boolean {
     return ['/businessListings', '/commercialPropertyListings', '/brokerListings'].includes(this.router.url);
   }
+
   isBusinessListing(): boolean {
-    return ['/businessListings'].includes(this.router.url);
+    return this.router.url === '/businessListings';
   }
+
   isCommercialPropertyListing(): boolean {
-    return ['/commercialPropertyListings'].includes(this.router.url);
+    return this.router.url === '/commercialPropertyListings';
   }
+
   isProfessionalListing(): boolean {
-    return ['/brokerListings'].includes(this.router.url);
+    return this.router.url === '/brokerListings';
   }
 
   closeDropdown() {
@@ -183,6 +226,7 @@ export class HeaderComponent {
       dropdown.hide();
     }
   }
+
   closeMobileMenu() {
     const targetElement = document.getElementById('navbar-user');
     const triggerElement = document.querySelector('[data-collapse-toggle="navbar-user"]');
@@ -192,23 +236,60 @@ export class HeaderComponent {
       collapse.collapse();
     }
   }
+
   closeMenusAndSetCriteria(path: string) {
     this.closeDropdown();
     this.closeMobileMenu();
-    const criteria = getCriteriaProxy(path, this);
-    criteria.page = 1;
-    criteria.start = 0;
+
+    // Bestimme Listing-Typ aus dem Pfad
+    let listingType: 'businessListings' | 'commercialPropertyListings' | 'brokerListings' | null = null;
+
+    if (path === 'businessListings') {
+      listingType = 'businessListings';
+    } else if (path === 'commercialPropertyListings') {
+      listingType = 'commercialPropertyListings';
+    } else if (path === 'brokerListings') {
+      listingType = 'brokerListings';
+    }
+
+    if (listingType) {
+      // Reset Pagination beim Wechsel zwischen Views
+      this.filterStateService.updateCriteria(listingType, {
+        page: 1,
+        start: 0,
+      });
+    }
+  }
+
+  toggleSortDropdown() {
+    this.sortDropdownVisible = !this.sortDropdownVisible;
+  }
+
+  get isProfessional() {
+    return this.user?.customerType === 'professional';
+  }
+
+  // Helper method für leere UserListingCriteria
+  private createEmptyUserListingCriteria(): UserListingCriteria {
+    return {
+      criteriaType: 'brokerListings',
+      types: [],
+      state: null,
+      city: null,
+      radius: null,
+      searchType: 'exact' as const,
+      brokerName: null,
+      companyName: null,
+      counties: [],
+      prompt: null,
+      page: 1,
+      start: 0,
+      length: 12,
+    };
   }
 
   ngOnDestroy() {
     this.destroy$.next();
     this.destroy$.complete();
   }
-
-  toggleSortDropdown() {
-    this.sortDropdownVisible = !this.sortDropdownVisible;
-  }
-  get isProfessional() {
-    return this.user?.customerType === 'professional';
-  }
 }