refactoring Filter Handling

bizmatch/src/app/pages/listings/business-listings/business-listings.component.ts

@@ -1,8 +1,10 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectorRef, Component } from '@angular/core';
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { UntilDestroy } from '@ngneat/until-destroy';
+import { Subject, takeUntil } from 'rxjs';
+
 import dayjs from 'dayjs';
 import { BusinessListing, SortByOptions } from '../../../../../../bizmatch-server/src/models/db.model';
 import { BusinessListingCriteria, LISTINGS_PER_PAGE, ListingType, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
@@ -10,12 +12,12 @@ import { environment } from '../../../../environments/environment';
 import { PaginatorComponent } from '../../../components/paginator/paginator.component';
 import { ModalService } from '../../../components/search-modal/modal.service';
 import { SearchModalComponent } from '../../../components/search-modal/search-modal.component';
-import { CriteriaChangeService } from '../../../services/criteria-change.service';
+import { FilterStateService } from '../../../services/filter-state.service';
 import { ImageService } from '../../../services/image.service';
 import { ListingsService } from '../../../services/listings.service';
 import { SearchService } from '../../../services/search.service';
 import { SelectOptionsService } from '../../../services/select-options.service';
-import { assignProperties, getCriteriaProxy, resetBusinessListingCriteria } from '../../../utils/utils';
+
 @UntilDestroy()
 @Component({
   selector: 'app-business-listings',
@@ -24,102 +26,137 @@ import { assignProperties, getCriteriaProxy, resetBusinessListingCriteria } from
   templateUrl: './business-listings.component.html',
   styleUrls: ['./business-listings.component.scss', '../../pages.scss'],
 })
-export class BusinessListingsComponent {
+export class BusinessListingsComponent implements OnInit, OnDestroy {
+  private destroy$ = new Subject<void>();
+
+  // Component properties
   environment = environment;
-  listings: Array<BusinessListing>;
-  filteredListings: Array<BusinessListing>;
-  criteria: BusinessListingCriteria;
-  realEstateChecked: boolean;
-  maxPrice: string;
-  minPrice: string;
-  type: string;
-  state: string;
-  totalRecords: number = 0;
-  ts = new Date().getTime();
-  first: number = 0;
-  rows: number = 12;
   env = environment;
-  public category: 'business' | 'commercialProperty' | 'professionals_brokers' | undefined;
+  listings: Array<BusinessListing> = [];
+  filteredListings: Array<ListingType> = [];
+  criteria: BusinessListingCriteria;
+  sortBy: SortByOptions | null = null;
+
+  // Pagination
+  totalRecords = 0;
   page = 1;
   pageCount = 1;
+  first = 0;
+  rows = LISTINGS_PER_PAGE;
+
+  // UI state
+  ts = new Date().getTime();
   emailToDirName = emailToDirName;
-  sortBy: SortByOptions = null; // Neu: Separate Property
+
   constructor(
     public selectOptions: SelectOptionsService,
     private listingsService: ListingsService,
-    private activatedRoute: ActivatedRoute,
     private router: Router,
     private cdRef: ChangeDetectorRef,
     private imageService: ImageService,
-    private route: ActivatedRoute,
     private searchService: SearchService,
     private modalService: ModalService,
-    private criteriaChangeService: CriteriaChangeService,
-  ) {
-    this.criteria = getCriteriaProxy('businessListings', this) as BusinessListingCriteria;
-    this.modalService.sendCriteria(this.criteria);
-    this.init();
-    this.loadSortBy();
-    this.searchService.currentCriteria.pipe(untilDestroyed(this)).subscribe(({ criteria }) => {
-      if (criteria.criteriaType === 'businessListings') {
+    private filterStateService: FilterStateService,
+    private route: ActivatedRoute,
+  ) {}
+
+  ngOnInit(): void {
+    // Subscribe to state changes
+    this.filterStateService
+      .getState$('businessListings')
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(state => {
+        this.criteria = state.criteria;
+        this.sortBy = state.sortBy;
+        // Automatically search when state changes
+        this.search();
+      });
+
+    // Subscribe to search triggers (if triggered from other components)
+    this.searchService.searchTrigger$.pipe(takeUntil(this.destroy$)).subscribe(type => {
+      if (type === 'businessListings') {
         this.search();
       }
     });
   }
-  private loadSortBy() {
-    const storedSortBy = sessionStorage.getItem('businessSortBy');
-    this.sortBy = storedSortBy && storedSortBy !== 'null' ? (storedSortBy as SortByOptions) : null;
-  }
-  async ngOnInit() {
-    this.search();
-  }
-  async init() {
-    this.reset();
+
+  async search(): Promise<void> {
+    try {
+      // Get current criteria from service
+      this.criteria = this.filterStateService.getCriteria('businessListings') as BusinessListingCriteria;
+
+      // Add sortBy if available
+      const searchCriteria = {
+        ...this.criteria,
+        sortBy: this.sortBy,
+      };
+
+      // Perform search
+      const listingsResponse = await this.listingsService.getListings('business');
+      this.listings = listingsResponse.results;
+      this.totalRecords = listingsResponse.totalCount;
+      this.pageCount = Math.ceil(this.totalRecords / LISTINGS_PER_PAGE);
+      this.page = this.criteria.page || 1;
+
+      // Update view
+      this.cdRef.markForCheck();
+      this.cdRef.detectChanges();
+    } catch (error) {
+      console.error('Search error:', error);
+      // Handle error appropriately
+      this.listings = [];
+      this.totalRecords = 0;
+      this.cdRef.markForCheck();
+    }
   }
 
-  async search() {
-    const listingReponse = await this.listingsService.getListings('business');
-    this.listings = listingReponse.results;
-    this.totalRecords = listingReponse.totalCount;
-    this.pageCount = this.totalRecords % LISTINGS_PER_PAGE === 0 ? this.totalRecords / LISTINGS_PER_PAGE : Math.floor(this.totalRecords / LISTINGS_PER_PAGE) + 1;
-    this.page = this.criteria.page ? this.criteria.page : 1;
-    this.cdRef.markForCheck();
-    this.cdRef.detectChanges();
+  onPageChange(page: number): void {
+    // Update only pagination properties
+    this.filterStateService.updateCriteria('businessListings', {
+      page: page,
+      start: (page - 1) * LISTINGS_PER_PAGE,
+      length: LISTINGS_PER_PAGE,
+    });
+    // Search will be triggered automatically through state subscription
   }
-  onPageChange(page: any) {
-    this.criteria.start = (page - 1) * LISTINGS_PER_PAGE;
-    this.criteria.length = LISTINGS_PER_PAGE;
-    this.criteria.page = page;
-    this.search();
+
+  clearAllFilters(): void {
+    // Reset criteria but keep sortBy
+    this.filterStateService.clearFilters('businessListings');
+    // Search will be triggered automatically through state subscription
   }
-  imageErrorHandler(listing: ListingType) {}
-  reset() {
-    this.criteria.title = null;
+
+  async openFilterModal(): Promise<void> {
+    // Open modal with current criteria
+    const currentCriteria = this.filterStateService.getCriteria('businessListings');
+    const modalResult = await this.modalService.showModal(currentCriteria);
+
+    if (modalResult.accepted) {
+      // Modal accepted changes - state is updated by modal
+      // Search will be triggered automatically through state subscription
+    } else {
+      // Modal was cancelled - no action needed
+    }
+  }
+
+  getListingPrice(listing: BusinessListing): string {
+    if (!listing.price) return 'Price on Request';
+    return `$${listing.price.toLocaleString()}`;
+  }
+
+  getListingLocation(listing: BusinessListing): string {
+    if (!listing.location) return 'Location not specified';
+    return `${listing.location.name}, ${listing.location.state}`;
+  }
+
+  navigateToDetails(listingId: string): void {
+    this.router.navigate(['/details-business', listingId]);
   }
   getDaysListed(listing: BusinessListing) {
     return dayjs().diff(listing.created, 'day');
   }
-  // New methods for filter actions
-  clearAllFilters() {
-    // Reset criteria to default values
-    resetBusinessListingCriteria(this.criteria);
-
-    // Reset pagination
-    this.criteria.page = 1;
-    this.criteria.start = 0;
-
-    this.criteriaChangeService.notifyCriteriaChange();
-
-    // Search with cleared filters
-    this.searchService.search('businessListings');
-  }
-
-  async openFilterModal() {
-    // Open the search modal with current criteria
-    const modalResult = await this.modalService.showModal(this.criteria);
-    if (modalResult.accepted) {
-      this.criteria = assignProperties(this.criteria, modalResult.criteria); // Update criteria with modal result
-      this.searchService.search('businessListings'); // Trigger search with updated criteria
-    }
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 }