Umbau Filter linksseitig

bizmatch/src/app/components/header/header.component.html

@@ -6,7 +6,7 @@
     <div class="flex items-center md:order-2 space-x-3 rtl:space-x-reverse">
       <!-- Filter button -->
       @if(isFilterUrl()){
-      <button
+      <!--    <button
         type="button"
         #triggerButton
         (click)="openModal()"
@@ -14,7 +14,7 @@
         class="max-sm:hidden px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
       >
         <i class="fas fa-filter mr-2"></i>Filter ({{ getNumberOfFiltersSet() }})
-      </button>
+      </button> -->
       <!-- Sort button -->
       <div class="relative">
         <button
@@ -217,14 +217,14 @@
   </div>
   <!-- Mobile filter button -->
   <div class="md:hidden flex justify-center pb-4">
-    <button
+    <!--     <button
       (click)="openModal()"
       type="button"
       id="filterDropdownMobileButton"
       class="w-full mx-4 px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
     >
       <i class="fas fa-filter mr-2"></i>Filter ({{ getNumberOfFiltersSet() }})
-    </button>
+    </button> -->
     <!-- Sorting -->
     <button
       (click)="toggleSortDropdown()"

bizmatch/src/app/components/search-modal/modal.service.ts

@@ -21,7 +21,12 @@ export class ModalService {
       this.resolvePromise = resolve;
     });
   }
-
+  sendCriteria(message: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria): Promise<ModalResult> {
+    this.messageSubject.next(message);
+    return new Promise<ModalResult>(resolve => {
+      this.resolvePromise = resolve;
+    });
+  }
   accept(): void {
     this.modalVisibleSubject.next(false);
     this.resolvePromise({ accepted: true });

bizmatch/src/app/components/search-modal/search-modal.component.ts

@@ -1,5 +1,5 @@
 import { AsyncPipe, NgIf } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, Input, Output } 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';
@@ -7,10 +7,11 @@ import { BusinessListingCriteria, CommercialPropertyListingCriteria, CountyResul
 import { CriteriaChangeService } from '../../services/criteria-change.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 { resetBusinessListingCriteria, resetCommercialPropertyListingCriteria, resetUserListingCriteria } from '../../utils/utils';
+import { getCriteriaStateObject, resetBusinessListingCriteria, resetCommercialPropertyListingCriteria, resetUserListingCriteria } from '../../utils/utils';
 import { ValidatedCityComponent } from '../validated-city/validated-city.component';
 import { ValidatedPriceComponent } from '../validated-price/validated-price.component';
 import { ModalService } from './modal.service';
@@ -23,6 +24,9 @@ import { ModalService } from './modal.service';
   styleUrl: './search-modal.component.scss',
 })
 export class SearchModalComponent {
+  @Output()
+  @Input()
+  isModal: boolean = true;
   // cities$: Observable<GeoResult[]>;
   counties$: Observable<CountyResult[]>;
   // cityLoading = false;
@@ -31,7 +35,8 @@ export class SearchModalComponent {
   countyInput$ = new Subject<string>();
   private criteriaChangeSubscription: Subscription;
   public criteria: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria;
-  backupCriteria: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria;
+
+  public backupCriteria: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria = getCriteriaStateObject('businessListings');
   numberOfResults$: Observable<number>;
   cancelDisable = false;
   constructor(
@@ -41,9 +46,11 @@ export class SearchModalComponent {
     private criteriaChangeService: CriteriaChangeService,
     private listingService: ListingsService,
     private userService: UserService,
+    private searchService: SearchService,
   ) {}
   ngOnInit() {
     this.setupCriteriaChangeListener();
+
     this.modalService.message$.pipe(untilDestroyed(this)).subscribe(msg => {
       this.criteria = msg;
       this.backupCriteria = JSON.parse(JSON.stringify(msg));
@@ -69,6 +76,7 @@ export class SearchModalComponent {
         this.criteria.types.splice(index, 1);
       }
     }
+    this.searchService.search(this.criteria);
   }
   private loadCounties() {
     this.counties$ = concat(
@@ -86,6 +94,9 @@ export class SearchModalComponent {
       ),
     );
   }
+  onCriteriaChange() {
+    this.searchService.search(this.criteria);
+  }
   setCity(city) {
     if (city) {
       this.criteria.city = city;
@@ -95,6 +106,7 @@ export class SearchModalComponent {
       this.criteria.radius = null;
       this.criteria.searchType = 'exact';
     }
+    this.searchService.search(this.criteria);
   }
   setState(state: string) {
     if (state) {
@@ -103,6 +115,11 @@ export class SearchModalComponent {
       this.criteria.state = null;
       this.setCity(null);
     }
+    this.searchService.search(this.criteria);
+  }
+  setRadius(radius: number) {
+    this.criteria.radius = radius;
+    this.searchService.search(this.criteria);
   }
   private setupCriteriaChangeListener() {
     this.criteriaChangeSubscription = this.criteriaChangeService.criteriaChange$.pipe(debounceTime(400)).subscribe(() => {
@@ -160,5 +177,6 @@ export class SearchModalComponent {
 
     // Aktivieren Sie nur die aktuell ausgewählte Checkbox
     this.criteria[checkbox] = value;
+    this.searchService.search(this.criteria);
   }
 }