refactoring Filter Handling

This commit is contained in:
2025-08-08 18:10:04 -05:00
parent c5c210b616
commit 7b94785a30
10 changed files with 1353 additions and 758 deletions

View File

@@ -1,20 +1,20 @@
import { AsyncPipe, NgIf } from '@angular/common';
import { Component, Input, Output } from '@angular/core';
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { NgSelectModule } from '@ng-select/ng-select';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { catchError, concat, debounceTime, distinctUntilChanged, map, Observable, of, Subject, Subscription, switchMap, tap } from 'rxjs';
import { BusinessListingCriteria, CommercialPropertyListingCriteria, CountyResult, GeoResult, KeyValue, KeyValueStyle, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
import { CriteriaChangeService } from '../../services/criteria-change.service';
import { catchError, concat, debounceTime, distinctUntilChanged, map, Observable, of, Subject, switchMap, takeUntil, tap } from 'rxjs';
import { BusinessListingCriteria, CountyResult, GeoResult, KeyValue, KeyValueStyle } from '../../../../../bizmatch-server/src/models/main.model';
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 { SharedModule } from '../../shared/shared/shared.module';
import { getCriteriaStateObject, resetBusinessListingCriteria } from '../../utils/utils';
import { ValidatedCityComponent } from '../validated-city/validated-city.component';
import { ValidatedPriceComponent } from '../validated-price/validated-price.component';
import { ModalService } from './modal.service';
@UntilDestroy()
@Component({
selector: 'app-search-modal',
@@ -23,167 +23,107 @@ import { ModalService } from './modal.service';
templateUrl: './search-modal.component.html',
styleUrl: './search-modal.component.scss',
})
export class SearchModalComponent {
@Output()
@Input()
isModal: boolean = true;
// cities$: Observable<GeoResult[]>;
export class SearchModalComponent implements OnInit, OnDestroy {
@Input() isModal: boolean = true;
private destroy$ = new Subject<void>();
private searchDebounce$ = new Subject<void>();
// State
criteria: BusinessListingCriteria;
backupCriteria: any;
currentListingType: 'businessListings' | 'commercialPropertyListings' | 'brokerListings';
// Geo search
counties$: Observable<CountyResult[]>;
// cityLoading = false;
countyLoading = false;
// cityInput$ = new Subject<string>();
countyInput$ = new Subject<string>();
private criteriaChangeSubscription: Subscription;
public criteria: BusinessListingCriteria;
private debounceTimeout: any;
public backupCriteria: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria = getCriteriaStateObject('businessListings');
numberOfResults$: Observable<number>;
cancelDisable = false;
constructor(
public selectOptions: SelectOptionsService,
public modalService: ModalService,
private geoService: GeoService,
private criteriaChangeService: CriteriaChangeService,
private listingService: ListingsService,
private userService: UserService,
private searchService: SearchService,
) {}
// Define property type options
public propertyTypeOptions = [
// Property type for business listings
selectedPropertyType: string | null = null;
propertyTypeOptions = [
{ name: 'Real Estate', value: 'realEstateChecked' },
{ name: 'Leased Location', value: 'leasedLocation' },
{ name: 'Franchise', value: 'franchiseResale' },
];
selectedPropertyType: string | null = null;
selectedPropertyTypeName: string | null = null;
ngOnInit() {
this.setupCriteriaChangeListener();
this.modalService.message$.pipe(untilDestroyed(this)).subscribe(msg => {
this.criteria = msg as BusinessListingCriteria;
this.backupCriteria = JSON.parse(JSON.stringify(msg));
this.setTotalNumberOfResults();
});
this.modalService.modalVisible$.pipe(untilDestroyed(this)).subscribe(val => {
if (val.visible) {
this.criteria.page = 1;
this.criteria.start = 0;
}
});
// this.loadCities();
// Results count
numberOfResults$: Observable<number>;
constructor(
public selectOptions: SelectOptionsService,
public modalService: ModalService,
private geoService: GeoService,
private filterStateService: FilterStateService,
private listingService: ListingsService,
private userService: UserService,
private searchService: SearchService,
) {}
ngOnInit(): void {
// Load counties
this.loadCounties();
this.updateSelectedPropertyType();
this.modalService.sendCriteria(this.criteria);
}
hasActiveFilters(): boolean {
return !!(
this.criteria.state ||
this.criteria.city ||
this.criteria.minPrice ||
this.criteria.maxPrice ||
this.criteria.minRevenue ||
this.criteria.maxRevenue ||
this.criteria.minCashFlow ||
this.criteria.maxCashFlow ||
this.criteria.types.length ||
this.selectedPropertyType ||
this.criteria.minNumberEmployees ||
this.criteria.maxNumberEmployees ||
this.criteria.establishedMin ||
this.criteria.brokerName ||
this.criteria.title
);
}
removeFilter(filterType: string) {
switch (filterType) {
case 'state':
this.criteria.state = null;
this.setCity(null);
break;
case 'city':
this.criteria.city = null;
this.criteria.radius = null;
this.criteria.searchType = 'exact';
break;
case 'price':
this.criteria.minPrice = null;
this.criteria.maxPrice = null;
break;
case 'revenue':
this.criteria.minRevenue = null;
this.criteria.maxRevenue = null;
break;
case 'cashflow':
this.criteria.minCashFlow = null;
this.criteria.maxCashFlow = null;
break;
case 'types':
this.criteria.types = [];
break;
case 'propertyType':
this.criteria.realEstateChecked = false;
this.criteria.leasedLocation = false;
this.criteria.franchiseResale = false;
this.selectedPropertyType = null;
break;
case 'employees':
this.criteria.minNumberEmployees = null;
this.criteria.maxNumberEmployees = null;
break;
case 'established':
this.criteria.establishedMin = null;
break;
case 'brokerName':
this.criteria.brokerName = null;
break;
case 'title':
this.criteria.title = null;
break;
}
this.searchService.search(this.criteria.criteriaType);
}
// Handle category change
onCategoryChange(selectedCategories: string[]) {
this.criteria.types = selectedCategories;
this.searchService.search(this.criteria.criteriaType);
}
// Handle property type change
onPropertyTypeChange(value: string) {
// Reset all property type flags
(<BusinessListingCriteria>this.criteria).realEstateChecked = false;
(<BusinessListingCriteria>this.criteria).leasedLocation = false;
(<BusinessListingCriteria>this.criteria).franchiseResale = false;
// Set the selected property type
if (value) {
this.criteria[value] = true;
}
this.selectedPropertyType = value;
this.searchService.search(this.criteria.criteriaType);
}
if (this.isModal) {
// Modal mode: Wait for messages from ModalService
this.modalService.message$.pipe(untilDestroyed(this)).subscribe(criteria => {
this.initializeWithCriteria(criteria);
});
// Update selected property type based on current criteria
updateSelectedPropertyType() {
if ((<BusinessListingCriteria>this.criteria).realEstateChecked) this.selectedPropertyType = 'realEstateChecked';
else if ((<BusinessListingCriteria>this.criteria).leasedLocation) this.selectedPropertyType = 'leasedLocation';
else if ((<BusinessListingCriteria>this.criteria).franchiseResale) this.selectedPropertyType = 'franchiseResale';
else this.selectedPropertyType = null;
}
getSelectedPropertyTypeName() {
return this.selectedPropertyType ? this.propertyTypeOptions.find(opt => opt.value === this.selectedPropertyType)?.name : null;
}
categoryClicked(checked: boolean, value: string) {
if (checked) {
this.criteria.types.push(value);
this.modalService.modalVisible$.pipe(untilDestroyed(this)).subscribe(val => {
if (val.visible) {
// Reset pagination when modal opens
if (this.criteria) {
this.criteria.page = 1;
this.criteria.start = 0;
}
}
});
} else {
const index = this.criteria.types.findIndex(t => t === value);
if (index > -1) {
this.criteria.types.splice(index, 1);
}
// Embedded mode: Determine type from route and subscribe to state
this.determineListingType();
this.subscribeToStateChanges();
}
this.searchService.search(this.criteria.criteriaType);
// Setup debounced search
this.searchDebounce$.pipe(debounceTime(400), distinctUntilChanged(), takeUntil(this.destroy$)).subscribe(() => {
this.triggerSearch();
});
}
private loadCounties() {
private initializeWithCriteria(criteria: any): void {
this.criteria = criteria;
this.currentListingType = criteria.criteriaType;
this.backupCriteria = JSON.parse(JSON.stringify(criteria));
this.updateSelectedPropertyType();
this.setTotalNumberOfResults();
}
private determineListingType(): void {
const url = window.location.pathname;
if (url.includes('businessListings')) {
this.currentListingType = 'businessListings';
} else if (url.includes('commercialPropertyListings')) {
this.currentListingType = 'commercialPropertyListings';
} else if (url.includes('brokerListings')) {
this.currentListingType = 'brokerListings';
}
}
private subscribeToStateChanges(): void {
if (!this.isModal && this.currentListingType) {
this.filterStateService
.getState$(this.currentListingType)
.pipe(takeUntil(this.destroy$))
.subscribe(state => {
this.criteria = { ...state.criteria };
this.updateSelectedPropertyType();
this.setTotalNumberOfResults();
});
}
}
private loadCounties(): void {
this.counties$ = concat(
of([]), // default items
this.countyInput$.pipe(
@@ -191,103 +131,314 @@ export class SearchModalComponent {
tap(() => (this.countyLoading = true)),
switchMap(term =>
this.geoService.findCountiesStartingWith(term).pipe(
catchError(() => of([])), // empty list on error
map(counties => counties.map(county => county.name)), // transform the list of objects to a list of city names
catchError(() => of([])),
map(counties => counties.map(county => county.name)),
tap(() => (this.countyLoading = false)),
),
),
),
);
}
onCriteriaChange() {
this.searchService.search(this.criteria.criteriaType);
// Filter removal methods
removeFilter(filterType: string): void {
const updates: any = {};
switch (filterType) {
case 'state':
updates.state = null;
updates.city = null;
updates.radius = null;
updates.searchType = 'exact';
break;
case 'city':
updates.city = null;
updates.radius = null;
updates.searchType = 'exact';
break;
case 'price':
updates.minPrice = null;
updates.maxPrice = null;
break;
case 'revenue':
updates.minRevenue = null;
updates.maxRevenue = null;
break;
case 'cashflow':
updates.minCashFlow = null;
updates.maxCashFlow = null;
break;
case 'types':
updates.types = [];
break;
case 'propertyType':
updates.realEstateChecked = false;
updates.leasedLocation = false;
updates.franchiseResale = false;
this.selectedPropertyType = null;
break;
case 'employees':
updates.minNumberEmployees = null;
updates.maxNumberEmployees = null;
break;
case 'established':
updates.establishedMin = null;
break;
case 'brokerName':
updates.brokerName = null;
break;
case 'title':
updates.title = null;
break;
}
this.updateCriteria(updates);
}
setCity(city) {
// Category handling
onCategoryChange(selectedCategories: string[]): void {
this.updateCriteria({ types: selectedCategories });
}
categoryClicked(checked: boolean, value: string): void {
const types = [...(this.criteria.types || [])];
if (checked) {
if (!types.includes(value)) {
types.push(value);
}
} else {
const index = types.indexOf(value);
if (index > -1) {
types.splice(index, 1);
}
}
this.updateCriteria({ types });
}
// Property type handling (Business listings only)
onPropertyTypeChange(value: string): void {
const updates: any = {
realEstateChecked: false,
leasedLocation: false,
franchiseResale: false,
};
if (value) {
updates[value] = true;
}
this.selectedPropertyType = value;
this.updateCriteria(updates);
}
onCheckboxChange(checkbox: string, value: boolean): void {
const updates: any = {
realEstateChecked: false,
leasedLocation: false,
franchiseResale: false,
};
updates[checkbox] = value;
this.selectedPropertyType = value ? checkbox : null;
this.updateCriteria(updates);
}
// Location handling
setState(state: string): void {
const updates: any = { state };
if (!state) {
updates.city = null;
updates.radius = null;
updates.searchType = 'exact';
}
this.updateCriteria(updates);
}
setCity(city: any): void {
const updates: any = {};
if (city) {
this.criteria.city = city;
this.criteria.state = city.state;
updates.city = city;
updates.state = city.state;
} else {
this.criteria.city = null;
this.criteria.radius = null;
this.criteria.searchType = 'exact';
updates.city = null;
updates.radius = null;
updates.searchType = 'exact';
}
this.searchService.search(this.criteria.criteriaType);
this.updateCriteria(updates);
}
setState(state: string) {
if (state) {
this.criteria.state = state;
} else {
this.criteria.state = null;
this.setCity(null);
}
this.searchService.search(this.criteria.criteriaType);
setRadius(radius: number): void {
this.updateCriteria({ radius });
}
setRadius(radius: number) {
this.criteria.radius = radius;
this.searchService.search(this.criteria.criteriaType);
onCriteriaChange(): void {
this.triggerSearch();
}
private setupCriteriaChangeListener() {
this.criteriaChangeSubscription = this.criteriaChangeService.criteriaChange$.pipe(debounceTime(400)).subscribe(() => {
// Debounced search for text inputs
debouncedSearch(): void {
this.searchDebounce$.next();
}
// Clear all filters
clearFilter(): void {
if (this.isModal) {
// In modal: Reset locally
const defaultCriteria = this.getDefaultCriteria();
this.criteria = defaultCriteria;
this.updateSelectedPropertyType();
this.setTotalNumberOfResults();
this.cancelDisable = true;
});
} else {
// Embedded: Use state service
this.filterStateService.clearFilters(this.currentListingType);
}
}
trackByFn(item: GeoResult) {
return item.id;
// Modal-specific methods
closeAndSearch(): void {
if (this.isModal) {
// Save changes to state
this.filterStateService.setCriteria(this.currentListingType, this.criteria);
this.modalService.accept();
this.searchService.search(this.currentListingType);
}
}
search() {
console.log('Search criteria:', this.criteria);
close(): void {
if (this.isModal) {
// Discard changes
this.modalService.reject(this.backupCriteria);
}
}
getCounties() {
this.geoService.findCountiesStartingWith('');
// Helper methods
private updateCriteria(updates: any): void {
if (this.isModal) {
// In modal: Update locally only
this.criteria = { ...this.criteria, ...updates };
this.setTotalNumberOfResults();
} else {
// Embedded: Update through state service
this.filterStateService.updateCriteria(this.currentListingType, updates);
}
// Trigger search after update
this.debouncedSearch();
}
closeModal() {
console.log('Closing modal');
private triggerSearch(): void {
if (this.isModal) {
// In modal: Only update count
this.setTotalNumberOfResults();
} else {
// Embedded: Full search
this.searchService.search(this.currentListingType);
}
}
closeAndSearch() {
this.modalService.accept();
this.searchService.search(this.criteria.criteriaType);
this.close();
}
isTypeOfBusinessClicked(v: KeyValueStyle) {
return this.criteria.types.find(t => t === v.value);
}
isTypeOfProfessionalClicked(v: KeyValue) {
return this.criteria.types.find(t => t === v.value);
}
setTotalNumberOfResults() {
if (this.criteria) {
console.log(`Getting total number of results for ${this.criteria.criteriaType}`);
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);
private updateSelectedPropertyType(): void {
if (this.currentListingType === 'businessListings') {
const businessCriteria = this.criteria as BusinessListingCriteria;
if (businessCriteria.realEstateChecked) {
this.selectedPropertyType = 'realEstateChecked';
} else if (businessCriteria.leasedLocation) {
this.selectedPropertyType = 'leasedLocation';
} else if (businessCriteria.franchiseResale) {
this.selectedPropertyType = 'franchiseResale';
} else {
this.numberOfResults$ = of();
this.selectedPropertyType = null;
}
}
}
clearFilter() {
resetBusinessListingCriteria(this.criteria);
this.searchService.search(this.criteria.criteriaType);
}
close() {
this.modalService.reject(this.backupCriteria);
}
onCheckboxChange(checkbox: string, value: boolean) {
(<BusinessListingCriteria>this.criteria).realEstateChecked = false;
(<BusinessListingCriteria>this.criteria).leasedLocation = false;
(<BusinessListingCriteria>this.criteria).franchiseResale = false;
private setTotalNumberOfResults(): void {
if (!this.criteria) return;
// Aktivieren Sie nur die aktuell ausgewählte Checkbox
this.criteria[checkbox] = value;
this.searchService.search(this.criteria.criteriaType);
switch (this.currentListingType) {
case 'businessListings':
this.numberOfResults$ = this.listingService.getNumberOfListings('business');
break;
case 'commercialPropertyListings':
this.numberOfResults$ = this.listingService.getNumberOfListings('commercialProperty');
break;
case 'brokerListings':
this.numberOfResults$ = this.userService.getNumberOfBroker();
break;
}
}
debouncedSearch() {
clearTimeout(this.debounceTimeout);
this.debounceTimeout = setTimeout(() => {
this.searchService.search(this.criteria.criteriaType);
}, 1000);
private getDefaultCriteria(): any {
switch (this.currentListingType) {
case 'businessListings':
return this.filterStateService['createEmptyBusinessListingCriteria']();
case 'commercialPropertyListings':
return this.filterStateService['createEmptyCommercialPropertyListingCriteria']();
case 'brokerListings':
return this.filterStateService['createEmptyUserListingCriteria']();
}
}
hasActiveFilters(): boolean {
if (!this.criteria) return false;
// Check all possible filter properties
const hasBasicFilters = !!(this.criteria.state || this.criteria.city || this.criteria.types?.length);
// Check business-specific filters
if (this.currentListingType === 'businessListings') {
const bc = this.criteria as BusinessListingCriteria;
return (
hasBasicFilters ||
!!(
bc.minPrice ||
bc.maxPrice ||
bc.minRevenue ||
bc.maxRevenue ||
bc.minCashFlow ||
bc.maxCashFlow ||
bc.minNumberEmployees ||
bc.maxNumberEmployees ||
bc.establishedMin ||
bc.brokerName ||
bc.title ||
this.selectedPropertyType
)
);
}
// Check commercial property filters
// if (this.currentListingType === 'commercialPropertyListings') {
// const cc = this.criteria as CommercialPropertyListingCriteria;
// return hasBasicFilters || !!(cc.minPrice || cc.maxPrice || cc.title);
// }
// Check user/broker filters
// if (this.currentListingType === 'brokerListings') {
// const uc = this.criteria as UserListingCriteria;
// return hasBasicFilters || !!(uc.brokerName || uc.companyName || uc.counties?.length);
// }
return hasBasicFilters;
}
getSelectedPropertyTypeName(): string | null {
return this.selectedPropertyType ? this.propertyTypeOptions.find(opt => opt.value === this.selectedPropertyType)?.name || null : null;
}
isTypeOfBusinessClicked(v: KeyValueStyle): boolean {
return !!this.criteria.types?.find(t => t === v.value);
}
isTypeOfProfessionalClicked(v: KeyValue): boolean {
return !!this.criteria.types?.find(t => t === v.value);
}
trackByFn(item: GeoResult): any {
return item.id;
}
ngOnDestroy(): void {
this.destroy$.next();
this.destroy$.complete();
}
}