From 7d336f975d26ed259f0b2bc2037290ebdb3e4ff8 Mon Sep 17 00:00:00 2001
From: Andreas Knuth <andreas.knuth@gmail.com>
Date: Wed, 23 Jul 2025 19:11:45 -0500
Subject: [PATCH] fixed error for mobile version

---
 .../search-modal/search-modal.component.html  | 340 ++++++++----------
 .../search-modal/search-modal.component.ts    |   6 +
 .../business-listings.component.ts            |   5 +-
 3 files changed, 167 insertions(+), 184 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 1332ffc..cec1fb2 100644
--- a/bizmatch/src/app/components/search-modal/search-modal.component.html
+++ b/bizmatch/src/app/components/search-modal/search-modal.component.html
@@ -1,15 +1,15 @@
 <div *ngIf="isModal && (modalService.modalVisible$ | async)" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center z-50">
   <div class="relative w-full max-h-full">
     <div class="relative bg-white rounded-lg shadow">
-      <div class="flex items-start justify-between p-4 border-b rounded-t">
+      <div class="flex items-start justify-between p-4 border-b rounded-t bg-blue-600">
         @if(criteria.criteriaType==='businessListings') {
-        <h3 class="text-xl font-semibold text-gray-900">Business Listing Search</h3>
+        <h3 class="text-xl font-semibold text-white p-2 rounded">Business Listing Search</h3>
         } @else if (criteria.criteriaType==='commercialPropertyListings') {
         <h3 class="text-xl font-semibold text-gray-900">Property Listing Search</h3>
         } @else {
         <h3 class="text-xl font-semibold text-gray-900">Professional Listing Search</h3>
         }
-        <button (click)="close()" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center">
+        <button (click)="closeAndSearch()" type="button" class="text-white bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center">
           <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
           </svg>
@@ -25,172 +25,8 @@
             <div class="tooltip-arrow" data-popper-arrow></div>
           </div>
         </div>
-        <div class="space-y-6">
-          <div class="grid grid-cols-1 gap-6">
-            <div class="space-y-4">
-              <div>
-                <label for="state" class="block mb-2 text-sm font-medium text-gray-900">Location - State</label>
-                <ng-select class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"></ng-select>
-              </div>
-              <div>
-                <app-validated-city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-gray-900 font-medium" [state]="criteria.state"></app-validated-city>
-              </div>
-              <div *ngIf="criteria.city">
-                <label class="block mb-2 text-sm font-medium text-gray-900">Search Type</label>
-                <div class="flex items-center space-x-4">
-                  <label class="inline-flex items-center">
-                    <input type="radio" class="form-radio" name="searchType" [(ngModel)]="criteria.searchType" (ngModelChange)="onCriteriaChange()" value="exact" />
-                    <span class="ml-2">Exact City</span>
-                  </label>
-                  <label class="inline-flex items-center">
-                    <input type="radio" class="form-radio" name="searchType" [(ngModel)]="criteria.searchType" (ngModelChange)="onCriteriaChange()" value="radius" />
-                    <span class="ml-2">Radius Search</span>
-                  </label>
-                </div>
-              </div>
-              <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
-                <label class="block mb-2 text-sm font-medium text-gray-900">Select Radius (in miles)</label>
-                <div class="flex flex-wrap">
-                  @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
-                  <button
-                    type="button"
-                    class="px-3 py-2 text-xs font-medium text-center border border-gray-200 hover:bg-gray-500 hover:text-white"
-                    [ngClass]="criteria.radius === radius ? 'text-white bg-gray-500' : 'text-gray-900 bg-white'"
-                    (click)="criteria.radius = radius"
-                  >
-                    {{ radius }}
-                  </button>
-                  }
-                </div>
-              </div>
-              <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)="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)="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)="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)="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)="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)="debouncedSearch()" [(ngModel)]="criteria.maxCashFlow" placeholder="To" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
-                </div>
-              </div>
-              <div>
-                <label for="title" class="block mb-2 text-sm font-medium text-gray-900">Title / Description (Free Search)</label>
-                <input
-                  type="text"
-                  id="title"
-                  [(ngModel)]="criteria.title"
-                  (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"
-                />
-              </div>
-              <div>
-                <label class="block mb-2 text-sm font-medium text-gray-900">Category</label>
-                <ng-select
-                  class="custom"
-                  [items]="selectOptions.typesOfBusiness"
-                  bindLabel="name"
-                  bindValue="value"
-                  [ngModel]="criteria.types"
-                  (ngModelChange)="onCategoryChange($event)"
-                  [multiple]="true"
-                  [closeOnSelect]="true"
-                  placeholder="Select categories"
-                ></ng-select>
-              </div>
-              <div>
-                <label class="block mb-2 text-sm font-medium text-gray-900">Type of Property</label>
-                <ng-select
-                  class="custom"
-                  [items]="propertyTypeOptions"
-                  bindLabel="name"
-                  bindValue="value"
-                  [ngModel]="selectedPropertyType"
-                  (ngModelChange)="onPropertyTypeChange($event)"
-                  placeholder="Select property type"
-                ></ng-select>
-              </div>
-              <div>
-                <label for="numberEmployees" class="block mb-2 text-sm font-medium text-gray-900">Number of Employees</label>
-                <div class="flex items-center space-x-2">
-                  <input
-                    type="number"
-                    id="numberEmployees-from"
-                    [(ngModel)]="criteria.minNumberEmployees"
-                    (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"
-                  />
-                  <span>-</span>
-                  <input
-                    type="number"
-                    id="numberEmployees-to"
-                    [(ngModel)]="criteria.maxNumberEmployees"
-                    (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"
-                  />
-                </div>
-              </div>
-              <div>
-                <label for="establishedSince" class="block mb-2 text-sm font-medium text-gray-900">Established Since</label>
-                <div class="flex items-center space-x-2">
-                  <input
-                    type="number"
-                    id="establishedSince-From"
-                    [(ngModel)]="criteria.establishedSince"
-                    (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"
-                  />
-                  <span>-</span>
-                  <input
-                    type="number"
-                    id="establishedSince-To"
-                    [(ngModel)]="criteria.establishedUntil"
-                    (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"
-                  />
-                </div>
-              </div>
-              <div>
-                <label for="brokername" class="block mb-2 text-sm font-medium text-gray-900">Broker Name / Company Name</label>
-                <input
-                  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"
-                />
-              </div>
-            </div>
-          </div>
-          <!-- Removed other criteria types as per request -->
-        </div>
         <!-- Display active filters as tags -->
-        <div class="flex flex-wrap gap-2" *ngIf="hasActiveFilters()">
+        <div class="flex flex-wrap gap-2 mb-4" *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">×</button>
           </span>
@@ -222,19 +58,161 @@
             Broker: {{ criteria.brokerName }} <button (click)="removeFilter('brokerName')" class="ml-1 text-red-500 hover:text-red-700">×</button>
           </span>
         </div>
-      </div>
-
-      <div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b">
-        <button type="button" (click)="modalService.accept()" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">
-          Search ({{ numberOfResults$ | async }})
-        </button>
-        <button
-          type="button"
-          (click)="close()"
-          class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10"
-        >
-          Cancel
-        </button>
+        <div class="grid grid-cols-1 gap-6">
+          <div class="space-y-4">
+            <div>
+              <label for="state" class="block mb-2 text-sm font-medium text-gray-900">Location - State</label>
+              <ng-select class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"></ng-select>
+            </div>
+            <div>
+              <app-validated-city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-gray-900 font-medium" [state]="criteria.state"></app-validated-city>
+            </div>
+            <div *ngIf="criteria.city">
+              <label class="block mb-2 text-sm font-medium text-gray-900">Search Type</label>
+              <div class="flex items-center space-x-4">
+                <label class="inline-flex items-center">
+                  <input type="radio" class="form-radio" name="searchType" [(ngModel)]="criteria.searchType" (ngModelChange)="onCriteriaChange()" value="exact" />
+                  <span class="ml-2">Exact City</span>
+                </label>
+                <label class="inline-flex items-center">
+                  <input type="radio" class="form-radio" name="searchType" [(ngModel)]="criteria.searchType" (ngModelChange)="onCriteriaChange()" value="radius" />
+                  <span class="ml-2">Radius Search</span>
+                </label>
+              </div>
+            </div>
+            <div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space-y-2">
+              <label class="block mb-2 text-sm font-medium text-gray-900">Select Radius (in miles)</label>
+              <div class="flex flex-wrap">
+                @for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
+                <button
+                  type="button"
+                  class="px-3 py-2 text-xs font-medium text-center border border-gray-200 hover:bg-gray-500 hover:text-white"
+                  [ngClass]="criteria.radius === radius ? 'text-white bg-gray-500' : 'text-gray-900 bg-white'"
+                  (click)="criteria.radius = radius"
+                >
+                  {{ radius }}
+                </button>
+                }
+              </div>
+            </div>
+            <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)="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)="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)="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)="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)="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)="debouncedSearch()" [(ngModel)]="criteria.maxCashFlow" placeholder="To" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
+              </div>
+            </div>
+            <div>
+              <label for="title" class="block mb-2 text-sm font-medium text-gray-900">Title / Description (Free Search)</label>
+              <input
+                type="text"
+                id="title"
+                [(ngModel)]="criteria.title"
+                (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"
+              />
+            </div>
+            <div>
+              <label class="block mb-2 text-sm font-medium text-gray-900">Category</label>
+              <ng-select
+                class="custom"
+                [items]="selectOptions.typesOfBusiness"
+                bindLabel="name"
+                bindValue="value"
+                [ngModel]="criteria.types"
+                (ngModelChange)="onCategoryChange($event)"
+                [multiple]="true"
+                [closeOnSelect]="true"
+                placeholder="Select categories"
+              ></ng-select>
+            </div>
+            <div>
+              <label class="block mb-2 text-sm font-medium text-gray-900">Type of Property</label>
+              <ng-select
+                class="custom"
+                [items]="propertyTypeOptions"
+                bindLabel="name"
+                bindValue="value"
+                [ngModel]="selectedPropertyType"
+                (ngModelChange)="onPropertyTypeChange($event)"
+                placeholder="Select property type"
+              ></ng-select>
+            </div>
+            <div>
+              <label for="numberEmployees" class="block mb-2 text-sm font-medium text-gray-900">Number of Employees</label>
+              <div class="flex items-center space-x-2">
+                <input
+                  type="number"
+                  id="numberEmployees-from"
+                  [(ngModel)]="criteria.minNumberEmployees"
+                  (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"
+                />
+                <span>-</span>
+                <input
+                  type="number"
+                  id="numberEmployees-to"
+                  [(ngModel)]="criteria.maxNumberEmployees"
+                  (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"
+                />
+              </div>
+            </div>
+            <div>
+              <label for="establishedSince" class="block mb-2 text-sm font-medium text-gray-900">Established Since</label>
+              <div class="flex items-center space-x-2">
+                <input
+                  type="number"
+                  id="establishedSince-From"
+                  [(ngModel)]="criteria.establishedSince"
+                  (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"
+                />
+                <span>-</span>
+                <input
+                  type="number"
+                  id="establishedSince-To"
+                  [(ngModel)]="criteria.establishedUntil"
+                  (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"
+                />
+              </div>
+            </div>
+            <div>
+              <label for="brokername" class="block mb-2 text-sm font-medium text-gray-900">Broker Name / Company Name</label>
+              <input
+                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"
+              />
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
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 d421da1..b8c4bb8 100644
--- a/bizmatch/src/app/components/search-modal/search-modal.component.ts
+++ b/bizmatch/src/app/components/search-modal/search-modal.component.ts
@@ -73,6 +73,7 @@ export class SearchModalComponent {
     // this.loadCities();
     this.loadCounties();
     this.updateSelectedPropertyType();
+    this.modalService.sendCriteria(this.criteria);
   }
   hasActiveFilters(): boolean {
     return !!(
@@ -241,6 +242,11 @@ export class SearchModalComponent {
   closeModal() {
     console.log('Closing modal');
   }
+  closeAndSearch() {
+    this.modalService.accept();
+    this.searchService.search(this.criteria);
+    this.close();
+  }
   isTypeOfBusinessClicked(v: KeyValueStyle) {
     return this.criteria.types.find(t => t === v.value);
   }
diff --git a/bizmatch/src/app/pages/listings/business-listings/business-listings.component.ts b/bizmatch/src/app/pages/listings/business-listings/business-listings.component.ts
index dc12c90..0a740b9 100644
--- a/bizmatch/src/app/pages/listings/business-listings/business-listings.component.ts
+++ b/bizmatch/src/app/pages/listings/business-listings/business-listings.component.ts
@@ -113,9 +113,8 @@ export class BusinessListingsComponent {
     // Open the search modal with current criteria
     const modalResult = await this.modalService.showModal(this.criteria);
     if (modalResult.accepted) {
-      this.searchService.search(this.criteria);
-    } else {
-      this.criteria = assignProperties(this.criteria, modalResult.criteria);
+      this.criteria = assignProperties(this.criteria, modalResult.criteria); // Update criteria with modal result
+      this.searchService.search(this.criteria); // Trigger search with updated criteria
     }
   }
 }