refactoring Filter Handling

2025-08-08 18:10:04 -05:00
parent c5c210b616
commit 7b94785a30
10 changed files with 1353 additions and 758 deletions
--- a/bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.ts
+++ b/bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.ts
@@ -2,7 +2,7 @@ import { CommonModule, NgOptimizedImage } from '@angular/common';
 import { ChangeDetectorRef, Component } 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 { BusinessListing, SortByOptions, User } from '../../../../../../bizmatch-server/src/models/db.model';
 import { LISTINGS_PER_PAGE, ListingType, UserListingCriteria, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../../environments/environment';
@@ -62,11 +62,11 @@ export class BrokerListingsComponent {
    this.criteria = getCriteriaProxy('brokerListings', this) as UserListingCriteria;
    this.init();
    this.loadSortBy();
-    this.searchService.currentCriteria.pipe(untilDestroyed(this)).subscribe(({ criteria }) => {
-      if (criteria.criteriaType === 'brokerListings') {
-        this.search();
-      }
-    });
+    // this.searchService.currentCriteria.pipe(untilDestroyed(this)).subscribe(({ criteria }) => {
+    //   if (criteria.criteriaType === 'brokerListings') {
+    //     this.search();
+    //   }
+    // });
  }
  private loadSortBy() {
    const storedSortBy = sessionStorage.getItem('professionalsSortBy');
--- a/bizmatch/src/app/pages/listings/business-listings/business-listings.component.ts
+++ b/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();
  }
 }
--- a/bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.ts
+++ b/bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.ts
@@ -1,21 +1,21 @@
 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 dayjs from 'dayjs';
+import { Subject, takeUntil } from 'rxjs';
 import { CommercialPropertyListing, SortByOptions } from '../../../../../../bizmatch-server/src/models/db.model';
 import { CommercialPropertyListingCriteria, LISTINGS_PER_PAGE, ResponseCommercialPropertyListingArray } from '../../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../../environments/environment';
 import { PaginatorComponent } from '../../../components/paginator/paginator.component';
 import { ModalService } from '../../../components/search-modal/modal.service';
 import { SearchModalCommercialComponent } from '../../../components/search-modal/search-modal-commercial.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, resetCommercialPropertyListingCriteria } from '../../../utils/utils';

@UntilDestroy()
@Component({
@@ -25,103 +25,141 @@ import { assignProperties, getCriteriaProxy, resetCommercialPropertyListingCrite
  templateUrl: './commercial-property-listings.component.html',
  styleUrls: ['./commercial-property-listings.component.scss', '../../pages.scss'],
 })
-export class CommercialPropertyListingsComponent {
+export class CommercialPropertyListingsComponent implements OnInit, OnDestroy {
+  private destroy$ = new Subject<void>();
+
+  // Component properties
  environment = environment;
-  listings: Array<CommercialPropertyListing>;
-  filteredListings: Array<CommercialPropertyListing>;
-  criteria: CommercialPropertyListingCriteria;
-  realEstateChecked: boolean;
-  first: number = 0;
-  rows: number = 12;
-  maxPrice: string;
-  minPrice: string;
-  type: string;
-  statesSet = new Set();
-  state: string;
-  totalRecords: number = 0;
  env = environment;
+  listings: Array<CommercialPropertyListing> = [];
+  filteredListings: Array<CommercialPropertyListing> = [];
+  criteria: CommercialPropertyListingCriteria;
+  sortBy: SortByOptions | null = null;
+
+  // Pagination
+  totalRecords = 0;
  page = 1;
  pageCount = 1;
+  first = 0;
+  rows = LISTINGS_PER_PAGE;
+
+  // UI state
  ts = new Date().getTime();
-  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('commercialPropertyListings', this) as CommercialPropertyListingCriteria;
-    this.modalService.sendCriteria(this.criteria);
-    this.loadSortBy();
-    this.searchService.currentCriteria.pipe(untilDestroyed(this)).subscribe(({ criteria }) => {
-      if (criteria.criteriaType === 'commercialPropertyListings') {
+    private filterStateService: FilterStateService,
+    private route: ActivatedRoute,
+  ) {}
+
+  ngOnInit(): void {
+    // Subscribe to state changes
+    this.filterStateService
+      .getState$('commercialPropertyListings')
+      .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 === 'commercialPropertyListings') {
        this.search();
      }
    });
  }
-  private loadSortBy() {
-    const storedSortBy = sessionStorage.getItem('commercialSortBy');
-    this.sortBy = storedSortBy && storedSortBy !== 'null' ? (storedSortBy as SortByOptions) : null;
-  }
-  async ngOnInit() {
-    this.search();
+
+  async search(): Promise<void> {
+    try {
+      // Perform search
+      const listingResponse = await this.listingsService.getListings('commercialProperty');
+      this.listings = (listingResponse as ResponseCommercialPropertyListingArray).results;
+      this.totalRecords = (listingResponse as ResponseCommercialPropertyListingArray).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('commercialProperty');
-    this.listings = (<ResponseCommercialPropertyListingArray>listingReponse).results;
-    this.totalRecords = (<ResponseCommercialPropertyListingArray>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('commercialPropertyListings', {
+      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('commercialPropertyListings');
+    // Search will be triggered automatically through state subscription
  }

-  reset() {
-    this.criteria.title = null;
+  async openFilterModal(): Promise<void> {
+    // Open modal with current criteria
+    const currentCriteria = this.filterStateService.getCriteria('commercialPropertyListings');
+    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
+    }
  }

-  getTS() {
+  // Helper methods for template
+  getTS(): number {
    return new Date().getTime();
  }

-  getDaysListed(listing: CommercialPropertyListing) {
+  getDaysListed(listing: CommercialPropertyListing): number {
    return dayjs().diff(listing.created, 'day');
  }

-  // New methods for filter actions
-  clearAllFilters() {
-    // Reset criteria to default values
-    resetCommercialPropertyListingCriteria(this.criteria);
-
-    // Reset pagination
-    this.criteria.page = 1;
-    this.criteria.start = 0;
-
-    this.criteriaChangeService.notifyCriteriaChange();
-
-    // Search with cleared filters
-    this.searchService.search('commercialPropertyListings');
+  getListingImage(listing: CommercialPropertyListing): string {
+    if (listing.imageOrder?.length > 0) {
+      return `${this.env.imageBaseUrl}/pictures/property/${listing.imagePath}/${listing.serialId}/${listing.imageOrder[0]}`;
+    }
+    return 'assets/images/placeholder_properties.jpg';
  }

-  async openFilterModal() {
-    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('commercialPropertyListings'); // Trigger search with updated criteria
-    }
+  getListingPrice(listing: CommercialPropertyListing): string {
+    if (!listing.price) return 'Price on Request';
+    return `$${listing.price.toLocaleString()}`;
+  }
+
+  getListingLocation(listing: CommercialPropertyListing): string {
+    if (!listing.location) return 'Location not specified';
+    return listing.location.name || listing.location.county || 'Location not specified';
+  }
+
+  navigateToDetails(listingId: string): void {
+    this.router.navigate(['/details-commercial-property-listing', listingId]);
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
  }
 }