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 00de32a..a142c91 100644
--- a/bizmatch/src/app/components/search-modal/search-modal.component.html
+++ b/bizmatch/src/app/components/search-modal/search-modal.component.html
@@ -398,27 +398,35 @@
@@ -460,25 +468,25 @@
@@ -487,7 +495,7 @@
type="text"
id="title"
[(ngModel)]="criteria.title"
- (ngModelChange)="onCriteriaChange()"
+ (ngModelChange)="debouncedSearch()"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
placeholder="e.g. Restaurant"
/>
@@ -525,7 +533,7 @@
type="number"
id="numberEmployees-from"
[(ngModel)]="criteria.minNumberEmployees"
- (ngModelChange)="onCriteriaChange()"
+ (ngModelChange)="debouncedSearch()"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
placeholder="From"
/>
@@ -534,7 +542,7 @@
type="number"
id="numberEmployees-to"
[(ngModel)]="criteria.maxNumberEmployees"
- (ngModelChange)="onCriteriaChange()"
+ (ngModelChange)="debouncedSearch()"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
placeholder="To"
/>
@@ -547,7 +555,7 @@
type="number"
id="establishedSince-From"
[(ngModel)]="criteria.establishedSince"
- (ngModelChange)="onCriteriaChange()"
+ (ngModelChange)="debouncedSearch()"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
placeholder="YYYY"
/>
@@ -556,7 +564,7 @@
type="number"
id="establishedSince-To"
[(ngModel)]="criteria.establishedUntil"
- (ngModelChange)="onCriteriaChange()"
+ (ngModelChange)="debouncedSearch()"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
placeholder="YYYY"
/>
@@ -568,6 +576,7 @@
type="text"
id="brokername"
[(ngModel)]="criteria.brokerName"
+ (ngModelChange)="debouncedSearch()"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
placeholder="e.g. Brokers Invest"
/>
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 18c1e1f..2b36b78 100644
--- a/bizmatch/src/app/components/search-modal/search-modal.component.ts
+++ b/bizmatch/src/app/components/search-modal/search-modal.component.ts
@@ -35,7 +35,7 @@ export class SearchModalComponent {
countyInput$ = new Subject();
private criteriaChangeSubscription: Subscription;
public criteria: BusinessListingCriteria;
-
+ private debounceTimeout: any;
public backupCriteria: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria = getCriteriaStateObject('businessListings');
numberOfResults$: Observable;
cancelDisable = false;
@@ -49,7 +49,7 @@ export class SearchModalComponent {
private searchService: SearchService,
) {}
// Define property type options
- propertyTypeOptions = [
+ public propertyTypeOptions = [
{ name: 'Real Estate', value: 'realEstateChecked' },
{ name: 'Leased Location', value: 'leasedLocation' },
{ name: 'Franchise', value: 'franchiseResale' },
@@ -78,14 +78,19 @@ export class SearchModalComponent {
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.minPrice ||
+ this.criteria.maxPrice ||
+ this.criteria.minRevenue ||
+ this.criteria.maxRevenue ||
+ this.criteria.minCashFlow ||
+ this.criteria.maxCashFlow ||
this.criteria.types.length ||
- this.selectedPropertyType
+ this.selectedPropertyType ||
+ this.criteria.minNumberEmployees ||
+ this.criteria.maxNumberEmployees ||
+ this.criteria.establishedSince ||
+ this.criteria.establishedUntil ||
+ this.criteria.brokerName
);
}
removeFilter(filterType: string) {
@@ -100,26 +105,37 @@ export class SearchModalComponent {
this.criteria.searchType = 'exact';
break;
case 'price':
- (this.criteria).minPrice = null;
- (this.criteria).maxPrice = null;
+ this.criteria.minPrice = null;
+ this.criteria.maxPrice = null;
break;
case 'revenue':
- (this.criteria).minRevenue = null;
- (this.criteria).maxRevenue = null;
+ this.criteria.minRevenue = null;
+ this.criteria.maxRevenue = null;
break;
case 'cashflow':
- (this.criteria).minCashFlow = null;
- (this.criteria).maxCashFlow = null;
+ 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.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.establishedSince = null;
+ this.criteria.establishedUntil = null;
+ break;
+ case 'brokerName':
+ this.criteria.brokerName = null;
+ break;
}
this.searchService.search(this.criteria);
}
@@ -140,7 +156,6 @@ export class SearchModalComponent {
this.criteria[value] = true;
}
this.selectedPropertyType = value;
- this.updateSelectedPropertyTypeName();
this.searchService.search(this.criteria);
}
@@ -150,10 +165,9 @@ export class SearchModalComponent {
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;
+ getSelectedPropertyTypeName() {
+ return this.selectedPropertyType ? this.propertyTypeOptions.find(opt => opt.value === this.selectedPropertyType)?.name : null;
}
categoryClicked(checked: boolean, value: string) {
if (checked) {
@@ -268,4 +282,10 @@ export class SearchModalComponent {
this.criteria[checkbox] = value;
this.searchService.search(this.criteria);
}
+ debouncedSearch() {
+ clearTimeout(this.debounceTimeout);
+ this.debounceTimeout = setTimeout(() => {
+ this.searchService.search(this.criteria);
+ }, 1000);
+ }
}