refactoring Filter Handling

bizmatch/src/app/pages/home/home.component.ts

@@ -3,30 +3,22 @@ import { ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/co
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { NgSelectModule } from '@ng-select/ng-select';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { UntilDestroy } from '@ngneat/until-destroy';
 import { initFlowbite } from 'flowbite';
-import { catchError, concat, debounceTime, distinctUntilChanged, Observable, of, Subject, Subscription, switchMap, tap } from 'rxjs';
+import { catchError, concat, distinctUntilChanged, Observable, of, Subject, switchMap, tap } from 'rxjs';
 import { BusinessListingCriteria, CityAndStateResult, CommercialPropertyListingCriteria, GeoResult, KeycloakUser, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
 import { ModalService } from '../../components/search-modal/modal.service';
 import { TooltipComponent } from '../../components/tooltip/tooltip.component';
 import { AiService } from '../../services/ai.service';
 import { AuthService } from '../../services/auth.service';
-import { CriteriaChangeService } from '../../services/criteria-change.service';
+import { FilterStateService } from '../../services/filter-state.service';
 import { GeoService } from '../../services/geo.service';
 import { ListingsService } from '../../services/listings.service';
 import { SearchService } from '../../services/search.service';
 import { SelectOptionsService } from '../../services/select-options.service';
 import { UserService } from '../../services/user.service';
-import {
-  compareObjects,
-  createEmptyBusinessListingCriteria,
-  createEmptyCommercialPropertyListingCriteria,
-  createEmptyUserListingCriteria,
-  createEnhancedProxy,
-  getCriteriaStateObject,
-  map2User,
-  removeSortByStorage,
-} from '../../utils/utils';
+import { map2User } from '../../utils/utils';
+
 @UntilDestroy()
 @Component({
   selector: 'app-home',
@@ -50,7 +42,6 @@ export class HomeComponent {
   cityLoading = false;
   cityInput$ = new Subject<string>();
   cityOrState = undefined;
-  private criteriaChangeSubscription: Subscription;
   numberOfResults$: Observable<number>;
   numberOfBroker$: Observable<number>;
   numberOfCommercial$: Observable<number>;
@@ -59,127 +50,156 @@ export class HomeComponent {
   aiSearchFailed = false;
   loadingAi = false;
   @ViewChild('aiSearchInput', { static: false }) searchInput!: ElementRef;
-  typingSpeed: number = 100; // Geschwindigkeit des Tippens (ms)
-  pauseTime: number = 2000; // Pausezeit, bevor der Text verschwindet (ms)
+  typingSpeed: number = 100;
+  pauseTime: number = 2000;
   index: number = 0;
   charIndex: number = 0;
   typingInterval: any;
-  showInput: boolean = true; // Steuerung der Anzeige des Eingabefelds
+  showInput: boolean = true;
   tooltipTargetBeta = 'tooltipTargetBeta';
-  public constructor(
+
+  constructor(
     private router: Router,
     private modalService: ModalService,
     private searchService: SearchService,
     private activatedRoute: ActivatedRoute,
     public selectOptions: SelectOptionsService,
-
-    private criteriaChangeService: CriteriaChangeService,
     private geoService: GeoService,
     public cdRef: ChangeDetectorRef,
     private listingService: ListingsService,
     private userService: UserService,
     private aiService: AiService,
     private authService: AuthService,
+    private filterStateService: FilterStateService,
   ) {}
+
   async ngOnInit() {
     setTimeout(() => {
       initFlowbite();
     }, 0);
-    this.numberOfBroker$ = this.userService.getNumberOfBroker(createEmptyUserListingCriteria());
+
+    // Clear all filters and sort options on initial load
+    this.filterStateService.resetCriteria('businessListings');
+    this.filterStateService.resetCriteria('commercialPropertyListings');
+    this.filterStateService.resetCriteria('brokerListings');
+    this.filterStateService.updateSortBy('businessListings', null);
+    this.filterStateService.updateSortBy('commercialPropertyListings', null);
+    this.filterStateService.updateSortBy('brokerListings', null);
+
+    // Initialize criteria for the default tab
+    this.criteria = this.filterStateService.getCriteria('businessListings');
+
+    this.numberOfBroker$ = this.userService.getNumberOfBroker(this.filterStateService.getCriteria('brokerListings') as UserListingCriteria);
     this.numberOfCommercial$ = this.listingService.getNumberOfListings('commercialProperty');
     const token = await this.authService.getToken();
-    sessionStorage.removeItem('businessListings');
-    sessionStorage.removeItem('commercialPropertyListings');
-    sessionStorage.removeItem('brokerListings');
-    this.criteria = createEnhancedProxy(getCriteriaStateObject('businessListings'), this);
-    removeSortByStorage();
     this.user = map2User(token);
     this.loadCities();
-    this.setupCriteriaChangeListener();
+    this.setTotalNumberOfResults();
   }
-  async changeTab(tabname: 'business' | 'commercialProperty' | 'broker') {
+
+  changeTab(tabname: 'business' | 'commercialProperty' | 'broker') {
     this.activeTabAction = tabname;
     this.cityOrState = null;
-    if ('business' === tabname) {
-      this.criteria = createEnhancedProxy(getCriteriaStateObject('businessListings'), this);
-    } else if ('commercialProperty' === tabname) {
-      this.criteria = createEnhancedProxy(getCriteriaStateObject('commercialPropertyListings'), this);
-    } else if ('broker' === tabname) {
-      this.criteria = createEnhancedProxy(getCriteriaStateObject('brokerListings'), this);
-    } else {
-      this.criteria = undefined;
-    }
+    const tabToListingType = {
+      business: 'businessListings',
+      commercialProperty: 'commercialPropertyListings',
+      broker: 'brokerListings',
+    };
+    this.criteria = this.filterStateService.getCriteria(tabToListingType[tabname] as 'businessListings' | 'commercialPropertyListings' | 'brokerListings');
+    this.setTotalNumberOfResults();
   }
 
   search() {
     this.router.navigate([`${this.activeTabAction}Listings`]);
   }
-  private setupCriteriaChangeListener() {
-    this.criteriaChangeSubscription = this.criteriaChangeService.criteriaChange$.pipe(untilDestroyed(this), debounceTime(400)).subscribe(() => this.setTotalNumberOfResults());
-  }
 
   toggleMenu() {
     this.isMenuOpen = !this.isMenuOpen;
   }
+
   onTypesChange(value) {
-    if (value === '') {
-      // Wenn keine Option ausgewählt ist, setzen Sie types zurück auf ein leeres Array
-      this.criteria.types = [];
-    } else {
-      this.criteria.types = [value];
-    }
+    const tabToListingType = {
+      business: 'businessListings',
+      commercialProperty: 'commercialPropertyListings',
+      broker: 'brokerListings',
+    };
+    const listingType = tabToListingType[this.activeTabAction] as 'businessListings' | 'commercialPropertyListings' | 'brokerListings';
+    this.filterStateService.updateCriteria(listingType, { types: value === '' ? [] : [value] });
+    this.criteria = this.filterStateService.getCriteria(listingType);
+    this.setTotalNumberOfResults();
   }
+
   onRadiusChange(value) {
-    if (value === 'null') {
-      // Wenn keine Option ausgewählt ist, setzen Sie types zurück auf ein leeres Array
-      this.criteria.radius = null;
-    } else {
-      this.criteria.radius = parseInt(value);
-    }
+    const tabToListingType = {
+      business: 'businessListings',
+      commercialProperty: 'commercialPropertyListings',
+      broker: 'brokerListings',
+    };
+    const listingType = tabToListingType[this.activeTabAction] as 'businessListings' | 'commercialPropertyListings' | 'brokerListings';
+    this.filterStateService.updateCriteria(listingType, { radius: value === 'null' ? null : parseInt(value) });
+    this.criteria = this.filterStateService.getCriteria(listingType);
+    this.setTotalNumberOfResults();
   }
+
   async openModal() {
+    const tabToListingType = {
+      business: 'businessListings',
+      commercialProperty: 'commercialPropertyListings',
+      broker: 'brokerListings',
+    };
+    const listingType = tabToListingType[this.activeTabAction] as 'businessListings' | 'commercialPropertyListings' | 'brokerListings';
     const accepted = await this.modalService.showModal(this.criteria);
     if (accepted) {
       this.router.navigate([`${this.activeTabAction}Listings`]);
     }
   }
+
   private loadCities() {
     this.cities$ = concat(
-      of([]), // default items
+      of([]),
       this.cityInput$.pipe(
         distinctUntilChanged(),
         tap(() => (this.cityLoading = true)),
         switchMap(term =>
-          //this.geoService.findCitiesStartingWith(term).pipe(
           this.geoService.findCitiesAndStatesStartingWith(term).pipe(
-            catchError(() => of([])), // empty list on error
-            // map(cities => cities.map(city => city.city)), // transform the list of objects to a list of city names
+            catchError(() => of([])),
             tap(() => (this.cityLoading = false)),
           ),
         ),
       ),
     );
   }
+
   trackByFn(item: GeoResult) {
     return item.id;
   }
+
   setCityOrState(cityOrState: CityAndStateResult) {
+    const tabToListingType = {
+      business: 'businessListings',
+      commercialProperty: 'commercialPropertyListings',
+      broker: 'brokerListings',
+    };
+    const listingType = tabToListingType[this.activeTabAction] as 'businessListings' | 'commercialPropertyListings' | 'brokerListings';
+
     if (cityOrState) {
       if (cityOrState.type === 'state') {
-        this.criteria.state = cityOrState.content.state_code;
+        this.filterStateService.updateCriteria(listingType, { state: cityOrState.content.state_code, city: null, radius: null, searchType: 'exact' });
       } else {
-        this.criteria.city = cityOrState.content as GeoResult;
-        this.criteria.state = cityOrState.content.state;
-        this.criteria.searchType = 'radius';
-        this.criteria.radius = 20;
+        this.filterStateService.updateCriteria(listingType, {
+          city: cityOrState.content as GeoResult,
+          state: cityOrState.content.state,
+          searchType: 'radius',
+          radius: 20,
+        });
       }
     } else {
-      this.criteria.state = null;
-      this.criteria.city = null;
-      this.criteria.radius = null;
-      this.criteria.searchType = 'exact';
+      this.filterStateService.updateCriteria(listingType, { state: null, city: null, radius: null, searchType: 'exact' });
     }
+    this.criteria = this.filterStateService.getCriteria(listingType);
+    this.setTotalNumberOfResults();
   }
+
   getTypes() {
     if (this.criteria.criteriaType === 'businessListings') {
       return this.selectOptions.typesOfBusiness;
@@ -189,6 +209,7 @@ export class HomeComponent {
       return this.selectOptions.customerSubTypes;
     }
   }
+
   getPlaceholderLabel() {
     if (this.criteria.criteriaType === 'businessListings') {
       return 'Business Type';
@@ -198,80 +219,28 @@ export class HomeComponent {
       return 'Professional Type';
     }
   }
+
   setTotalNumberOfResults() {
     if (this.criteria) {
       console.log(`Getting total number of results for ${this.criteria.criteriaType}`);
+      const tabToListingType = {
+        business: 'businessListings',
+        commercialProperty: 'commercialPropertyListings',
+        broker: 'brokerListings',
+      };
+      const listingType = tabToListingType[this.activeTabAction] as 'businessListings' | 'commercialPropertyListings' | 'brokerListings';
+
       if (this.criteria.criteriaType === 'businessListings' || this.criteria.criteriaType === 'commercialPropertyListings') {
         this.numberOfResults$ = this.listingService.getNumberOfListings(this.criteria.criteriaType === 'businessListings' ? 'business' : 'commercialProperty');
       } else if (this.criteria.criteriaType === 'brokerListings') {
-        this.numberOfResults$ = this.userService.getNumberOfBroker(this.criteria);
+        this.numberOfResults$ = this.userService.getNumberOfBroker(this.filterStateService.getCriteria('brokerListings') as UserListingCriteria);
       } else {
         this.numberOfResults$ = of();
       }
     }
   }
-  getNumberOfFiltersSet() {
-    if (this.criteria?.criteriaType === 'brokerListings') {
-      return compareObjects(createEmptyUserListingCriteria(), this.criteria, ['start', 'length', 'page', 'searchType', 'radius']);
-    } else if (this.criteria?.criteriaType === 'businessListings') {
-      return compareObjects(createEmptyBusinessListingCriteria(), this.criteria, ['start', 'length', 'page', 'searchType', 'radius']);
-    } else if (this.criteria?.criteriaType === 'commercialPropertyListings') {
-      return compareObjects(createEmptyCommercialPropertyListingCriteria(), this.criteria, ['start', 'length', 'page', 'searchType', 'radius']);
-    } else {
-      return 0;
-    }
-  }
-  toggleAiSearch() {
-    this.aiSearch = !this.aiSearch;
-    this.aiSearchFailed = false;
-    if (!this.aiSearch) {
-      this.aiSearchText = '';
-      this.stopTypingEffect();
-    } else {
-      setTimeout(() => this.startTypingEffect(), 0);
-    }
-  }
+
   ngOnDestroy(): void {
-    clearTimeout(this.typingInterval); // Stelle sicher, dass das Intervall gestoppt wird, wenn die Komponente zerstört wird
-  }
-
-  startTypingEffect(): void {
-    if (!this.aiSearchText) {
-      this.typePlaceholder();
-    }
-  }
-
-  stopTypingEffect(): void {
     clearTimeout(this.typingInterval);
   }
-  typePlaceholder(): void {
-    if (!this.searchInput || !this.searchInput.nativeElement) {
-      return; // Falls das Eingabefeld nicht verfügbar ist (z.B. durch ngIf)
-    }
-
-    if (this.aiSearchText) {
-      return; // Stoppe, wenn der Benutzer Text eingegeben hat
-    }
-
-    const inputField = this.searchInput.nativeElement as HTMLInputElement;
-    if (document.activeElement === inputField) {
-      this.stopTypingEffect();
-      return;
-    }
-
-    inputField.placeholder = this.placeholders[this.index].substring(0, this.charIndex);
-
-    if (this.charIndex < this.placeholders[this.index].length) {
-      this.charIndex++;
-      this.typingInterval = setTimeout(() => this.typePlaceholder(), this.typingSpeed);
-    } else {
-      // Nach dem vollständigen Tippen eine Pause einlegen
-      this.typingInterval = setTimeout(() => {
-        inputField.placeholder = ''; // Schlagartiges Löschen des Platzhalters
-        this.charIndex = 0;
-        this.index = (this.index + 1) % this.placeholders.length;
-        this.typingInterval = setTimeout(() => this.typePlaceholder(), this.typingSpeed);
-      }, this.pauseTime);
-    }
-  }
 }