From a6f1571b8b338c328bffcc2d020bc7549a4e1ab5 Mon Sep 17 00:00:00 2001
From: Andreas Knuth <andreas.knuth@gmail.com>
Date: Tue, 22 Jul 2025 10:45:29 -0500
Subject: [PATCH] All filters & debounce

---
 .../search-modal/search-modal.component.html  | 47 ++++++++------
 .../search-modal/search-modal.component.ts    | 64 ++++++++++++-------
 2 files changed, 70 insertions(+), 41 deletions(-)

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 @@
   <!-- Display active filters as tags -->
   <div class="flex flex-wrap gap-2" *ngIf="hasActiveFilters()">
     <span *ngIf="criteria.state" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      State: {{ criteria.state }} <button (click)="removeFilter('state')" class="ml-1 text-red-500 hover:text-red-700">&times;</button>
+      State: {{ criteria.state }} <button (click)="removeFilter('state')" class="ml-1 text-red-500 hover:text-red-700">×</button>
     </span>
     <span *ngIf="criteria.city" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      City: {{ criteria.city }} <button (click)="removeFilter('city')" class="ml-1 text-red-500 hover:text-red-700">&times;</button>
+      City: {{ criteria.city }} <button (click)="removeFilter('city')" class="ml-1 text-red-500 hover:text-red-700">×</button>
     </span>
     <span *ngIf="criteria.minPrice || criteria.maxPrice" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      Price: {{ criteria.minPrice || 'Any' }} - {{ criteria.maxPrice || 'Any' }} <button (click)="removeFilter('price')" class="ml-1 text-red-500 hover:text-red-700">&times;</button>
+      Price: {{ criteria.minPrice || 'Any' }} - {{ criteria.maxPrice || 'Any' }} <button (click)="removeFilter('price')" class="ml-1 text-red-500 hover:text-red-700">×</button>
     </span>
     <span *ngIf="criteria.minRevenue || criteria.maxRevenue" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      Revenue: {{ criteria.minRevenue || 'Any' }} - {{ criteria.maxRevenue || 'Any' }} <button (click)="removeFilter('revenue')" class="ml-1 text-red-500 hover:text-red-700">&times;</button>
+      Revenue: {{ criteria.minRevenue || 'Any' }} - {{ criteria.maxRevenue || 'Any' }} <button (click)="removeFilter('revenue')" class="ml-1 text-red-500 hover:text-red-700">×</button>
     </span>
     <span *ngIf="criteria.minCashFlow || criteria.maxCashFlow" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      Cashflow: {{ criteria.minCashFlow || 'Any' }} - {{ criteria.maxCashFlow || 'Any' }} <button (click)="removeFilter('cashflow')" class="ml-1 text-red-500 hover:text-red-700">&times;</button>
+      Cashflow: {{ criteria.minCashFlow || 'Any' }} - {{ criteria.maxCashFlow || 'Any' }} <button (click)="removeFilter('cashflow')" class="ml-1 text-red-500 hover:text-red-700">×</button>
     </span>
     <span *ngIf="criteria.types.length" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      Categories: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" class="ml-1 text-red-500 hover:text-red-700">&times;</button>
+      Categories: {{ criteria.types.join(', ') }} <button (click)="removeFilter('types')" class="ml-1 text-red-500 hover:text-red-700">×</button>
     </span>
     <span *ngIf="selectedPropertyType" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-      Property Type: {{ selectedPropertyTypeName }} <button (click)="removeFilter('propertyType')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+      Property Type: {{ getSelectedPropertyTypeName() }} <button (click)="removeFilter('propertyType')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+    </span>
+    <span *ngIf="criteria.minNumberEmployees || criteria.maxNumberEmployees" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
+      Employees: {{ criteria.minNumberEmployees || 'Any' }} - {{ criteria.maxNumberEmployees || 'Any' }} <button (click)="removeFilter('employees')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+    </span>
+    <span *ngIf="criteria.establishedSince || criteria.establishedUntil" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
+      Established: {{ criteria.establishedSince || 'Any' }} - {{ criteria.establishedUntil || 'Any' }} <button (click)="removeFilter('established')" class="ml-1 text-red-500 hover:text-red-700">×</button>
+    </span>
+    <span *ngIf="criteria.brokerName" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
+      Broker: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" class="ml-1 text-red-500 hover:text-red-700">×</button>
     </span>
-    <!-- Add more filters as needed (e.g., radius, establishedSince, etc.) -->
   </div>
   @if(criteria.criteriaType==='businessListings') {
   <div class="space-y-4">
@@ -460,25 +468,25 @@
     <div>
       <label for="price" class="block mb-2 text-sm font-medium text-gray-900">Price</label>
       <div class="flex items-center space-x-2">
-        <app-validated-price name="price-from" (ngModelChange)="onCriteriaChange()" [(ngModel)]="criteria.minPrice" placeholder="From" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
+        <app-validated-price name="price-from" (ngModelChange)="debouncedSearch()" [(ngModel)]="criteria.minPrice" placeholder="From" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
         <span>-</span>
-        <app-validated-price name="price-to" (ngModelChange)="onCriteriaChange()" [(ngModel)]="criteria.maxPrice" placeholder="To" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
+        <app-validated-price name="price-to" (ngModelChange)="debouncedSearch()" [(ngModel)]="criteria.maxPrice" placeholder="To" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
       </div>
     </div>
     <div>
       <label for="salesRevenue" class="block mb-2 text-sm font-medium text-gray-900">Sales Revenue</label>
       <div class="flex items-center space-x-2">
-        <app-validated-price name="salesRevenue-from" (ngModelChange)="onCriteriaChange()" [(ngModel)]="criteria.minRevenue" placeholder="From" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
+        <app-validated-price name="salesRevenue-from" (ngModelChange)="debouncedSearch()" [(ngModel)]="criteria.minRevenue" placeholder="From" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
         <span>-</span>
-        <app-validated-price name="salesRevenue-to" (ngModelChange)="onCriteriaChange()" [(ngModel)]="criteria.maxRevenue" placeholder="To" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
+        <app-validated-price name="salesRevenue-to" (ngModelChange)="debouncedSearch()" [(ngModel)]="criteria.maxRevenue" placeholder="To" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
       </div>
     </div>
     <div>
       <label for="cashflow" class="block mb-2 text-sm font-medium text-gray-900">Cashflow</label>
       <div class="flex items-center space-x-2">
-        <app-validated-price name="cashflow-from" (ngModelChange)="onCriteriaChange()" [(ngModel)]="criteria.minCashFlow" placeholder="From" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
+        <app-validated-price name="cashflow-from" (ngModelChange)="debouncedSearch()" [(ngModel)]="criteria.minCashFlow" placeholder="From" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
         <span>-</span>
-        <app-validated-price name="cashflow-to" (ngModelChange)="onCriteriaChange()" [(ngModel)]="criteria.maxCashFlow" placeholder="To" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
+        <app-validated-price name="cashflow-to" (ngModelChange)="debouncedSearch()" [(ngModel)]="criteria.maxCashFlow" placeholder="To" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
       </div>
     </div>
     <div>
@@ -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<string>();
   private criteriaChangeSubscription: Subscription;
   public criteria: BusinessListingCriteria;
-
+  private debounceTimeout: any;
   public backupCriteria: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria = getCriteriaStateObject('businessListings');
   numberOfResults$: Observable<number>;
   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 ||
-      (<BusinessListingCriteria>this.criteria).minPrice ||
-      (<BusinessListingCriteria>this.criteria).maxPrice ||
-      (<BusinessListingCriteria>this.criteria).minRevenue ||
-      (<BusinessListingCriteria>this.criteria).maxRevenue ||
-      (<BusinessListingCriteria>this.criteria).minCashFlow ||
-      (<BusinessListingCriteria>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':
-        (<BusinessListingCriteria>this.criteria).minPrice = null;
-        (<BusinessListingCriteria>this.criteria).maxPrice = null;
+        this.criteria.minPrice = null;
+        this.criteria.maxPrice = null;
         break;
       case 'revenue':
-        (<BusinessListingCriteria>this.criteria).minRevenue = null;
-        (<BusinessListingCriteria>this.criteria).maxRevenue = null;
+        this.criteria.minRevenue = null;
+        this.criteria.maxRevenue = null;
         break;
       case 'cashflow':
-        (<BusinessListingCriteria>this.criteria).minCashFlow = null;
-        (<BusinessListingCriteria>this.criteria).maxCashFlow = null;
+        this.criteria.minCashFlow = null;
+        this.criteria.maxCashFlow = null;
         break;
       case 'types':
         this.criteria.types = [];
         break;
       case 'propertyType':
-        (<BusinessListingCriteria>this.criteria).realEstateChecked = false;
-        (<BusinessListingCriteria>this.criteria).leasedLocation = false;
-        (<BusinessListingCriteria>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 ((<BusinessListingCriteria>this.criteria).leasedLocation) this.selectedPropertyType = 'leasedLocation';
     else if ((<BusinessListingCriteria>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);
+  }
 }