diff --git a/bizmatch/src/app/components/search-modal/search-modal.component.html b/bizmatch/src/app/components/search-modal/search-modal.component.html index 1ed0b05..00de32a 100644 --- a/bizmatch/src/app/components/search-modal/search-modal.component.html +++ b/bizmatch/src/app/components/search-modal/search-modal.component.html @@ -216,8 +216,8 @@ - } @if(criteria.criteriaType==='commercialPropertyListings') { -
+ + + + }
} @@ -383,6 +383,9 @@ + + +

Filter ({{ numberOfResults$ | async }})

@@ -392,6 +395,31 @@
+ +
+ + State: {{ criteria.state }} + + + City: {{ criteria.city }} + + + Price: {{ criteria.minPrice || 'Any' }} - {{ criteria.maxPrice || 'Any' }} + + + Revenue: {{ criteria.minRevenue || 'Any' }} - {{ criteria.maxRevenue || 'Any' }} + + + Cashflow: {{ criteria.minCashFlow || 'Any' }} - {{ criteria.maxCashFlow || 'Any' }} + + + Categories: {{ criteria.types.join(', ') }} + + + Property Type: {{ selectedPropertyTypeName }} + + +
@if(criteria.criteriaType==='businessListings') {
@@ -466,56 +494,29 @@
-
- @for(tob of selectOptions.typesOfBusiness; track tob) { -
- - -
- } -
+
-
-
- - -
-
- - -
-
- - -
-
+
@@ -572,8 +573,8 @@ />
- } @if(criteria.criteriaType==='commercialPropertyListings') { -
+ + + + + }
diff --git a/bizmatch/src/app/components/search-modal/search-modal.component.scss b/bizmatch/src/app/components/search-modal/search-modal.component.scss index 79b09a7..21a8b27 100644 --- a/bizmatch/src/app/components/search-modal/search-modal.component.scss +++ b/bizmatch/src/app/components/search-modal/search-modal.component.scss @@ -1,9 +1,12 @@ :host ::ng-deep .ng-select.custom .ng-select-container { --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity)); - height: 46px; + min-height: 46px; border-radius: 0.5rem; .ng-value-container .ng-input { top: 10px; } } +:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder { + position: unset; +} diff --git a/bizmatch/src/app/components/search-modal/search-modal.component.ts b/bizmatch/src/app/components/search-modal/search-modal.component.ts index 9150c9b..18c1e1f 100644 --- a/bizmatch/src/app/components/search-modal/search-modal.component.ts +++ b/bizmatch/src/app/components/search-modal/search-modal.component.ts @@ -11,7 +11,7 @@ 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, resetCommercialPropertyListingCriteria, resetUserListingCriteria } from '../../utils/utils'; +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'; @@ -34,7 +34,7 @@ export class SearchModalComponent { // cityInput$ = new Subject(); countyInput$ = new Subject(); private criteriaChangeSubscription: Subscription; - public criteria: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria; + public criteria: BusinessListingCriteria; public backupCriteria: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria = getCriteriaStateObject('businessListings'); numberOfResults$: Observable; @@ -48,11 +48,19 @@ export class SearchModalComponent { private userService: UserService, private searchService: SearchService, ) {} + // Define property type options + 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; + this.criteria = msg as BusinessListingCriteria; this.backupCriteria = JSON.parse(JSON.stringify(msg)); this.setTotalNumberOfResults(); }); @@ -64,9 +72,89 @@ export class SearchModalComponent { }); // this.loadCities(); this.loadCounties(); + this.updateSelectedPropertyType(); + } + 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 + ); + } + 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; + } + this.searchService.search(this.criteria); + } + // Handle category change + onCategoryChange(selectedCategories: string[]) { + this.criteria.types = selectedCategories; + this.searchService.search(this.criteria); } - ngOnChanges() {} + // Handle property type change + onPropertyTypeChange(value: string) { + // Reset all property type flags + (this.criteria).realEstateChecked = false; + (this.criteria).leasedLocation = false; + (this.criteria).franchiseResale = false; + // Set the selected property type + if (value) { + this.criteria[value] = true; + } + this.selectedPropertyType = value; + this.updateSelectedPropertyTypeName(); + this.searchService.search(this.criteria); + } + + // Update selected property type based on current criteria + updateSelectedPropertyType() { + if ((this.criteria).realEstateChecked) this.selectedPropertyType = 'realEstateChecked'; + else if ((this.criteria).leasedLocation) this.selectedPropertyType = 'leasedLocation'; + else if ((this.criteria).franchiseResale) this.selectedPropertyType = 'franchiseResale'; + else this.selectedPropertyType = null; + this.updateSelectedPropertyTypeName(); + } + updateSelectedPropertyTypeName() { + this.selectedPropertyTypeName = this.selectedPropertyType ? this.propertyTypeOptions.find(opt => opt.value === this.selectedPropertyType)?.name : null; + } categoryClicked(checked: boolean, value: string) { if (checked) { this.criteria.types.push(value); @@ -151,20 +239,21 @@ export class SearchModalComponent { if (this.criteria.criteriaType === 'businessListings' || this.criteria.criteriaType === 'commercialPropertyListings') { this.numberOfResults$ = this.listingService.getNumberOfListings(this.criteria, 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.criteria); } else { this.numberOfResults$ = of(); } } } clearFilter() { - if (this.criteria.criteriaType === 'businessListings') { - resetBusinessListingCriteria(this.criteria); - } else if (this.criteria.criteriaType === 'commercialPropertyListings') { + //if (this.criteria.criteriaType === 'businessListings') { + resetBusinessListingCriteria(this.criteria); + /* } else if (this.criteria.criteriaType === 'commercialPropertyListings') { resetCommercialPropertyListingCriteria(this.criteria); } else { resetUserListingCriteria(this.criteria); - } + } */ + this.searchService.search(this.criteria); } close() { this.modalService.reject(this.backupCriteria);