homepage overhault, aiService 1. try

bizmatch/src/app/pages/home/home.component.ts

@@ -1,12 +1,15 @@
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { ChangeDetectorRef, Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { NgSelectModule } from '@ng-select/ng-select';
 import { KeycloakService } from 'keycloak-angular';
 import onChange from 'on-change';
-import { BusinessListingCriteria, CommercialPropertyListingCriteria, KeycloakUser, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
+import { catchError, concat, distinctUntilChanged, Observable, of, Subject, switchMap, tap } from 'rxjs';
+import { BusinessListingCriteria, CommercialPropertyListingCriteria, GeoResult, KeycloakUser, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
 import { ModalService } from '../../components/search-modal/modal.service';
 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';
@@ -14,7 +17,7 @@ import { getCriteriaStateObject, map2User } from '../../utils/utils';
 @Component({
   selector: 'app-home',
   standalone: true,
-  imports: [CommonModule, FormsModule, RouterModule],
+  imports: [CommonModule, FormsModule, RouterModule, NgSelectModule],
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss',
 })
@@ -28,6 +31,10 @@ export class HomeComponent {
   isMenuOpen = false;
   user: KeycloakUser;
   prompt: string;
+  cities$: Observable<GeoResult[]>;
+  cityLoading = false;
+  cityInput$ = new Subject<string>();
+  cityOrState = undefined;
   public constructor(
     private router: Router,
     private modalService: ModalService,
@@ -37,6 +44,8 @@ export class HomeComponent {
     public keycloakService: KeycloakService,
     private listingsService: ListingsService,
     private criteriaChangeService: CriteriaChangeService,
+    private geoService: GeoService,
+    public cdRef: ChangeDetectorRef,
   ) {}
   async ngOnInit() {
     const token = await this.keycloakService.getToken();
@@ -45,6 +54,7 @@ export class HomeComponent {
     sessionStorage.removeItem('broker_criteria');
     this.criteria = this.createEnhancedProxy(getCriteriaStateObject('business'));
     this.user = map2User(token);
+    this.loadCities();
   }
   async changeTab(tabname: 'business' | 'commercialProperty' | 'broker') {
     this.activeTabAction = tabname;
@@ -90,6 +100,22 @@ export class HomeComponent {
   toggleMenu() {
     this.isMenuOpen = !this.isMenuOpen;
   }
+  onTypesChange(value) {
+    if (value === '') {
+      // Wenn keine Option ausgewählt ist, setzen Sie types zurück auf ein leeres Array
+      this.criteria.types = [];
+    } else {
+      this.criteria.types = [value];
+    }
+  }
+  onRadiusChange(value) {
+    if (value === 'null') {
+      // Wenn keine Option ausgewählt ist, setzen Sie types zurück auf ein leeres Array
+      this.criteria.radius = null;
+    } else {
+      this.criteria.radius = value;
+    }
+  }
   async openModal() {
     const accepted = await this.modalService.showModal(this.criteria);
     if (accepted) {
@@ -97,4 +123,33 @@ export class HomeComponent {
       this.router.navigate([`${this.activeTabAction}Listings`]);
     }
   }
+  private loadCities() {
+    this.cities$ = concat(
+      of([]), // default items
+      this.cityInput$.pipe(
+        distinctUntilChanged(),
+        tap(() => (this.cityLoading = true)),
+        switchMap(term =>
+          this.geoService.findCitiesStartingWith(term).pipe(
+            catchError(() => of([])), // empty list on error
+            // map(cities => cities.map(city => city.city)), // transform the list of objects to a list of city names
+            tap(() => (this.cityLoading = false)),
+          ),
+        ),
+      ),
+    );
+  }
+  trackByFn(item: GeoResult) {
+    return item.id;
+  }
+  setCity(city) {
+    if (city) {
+      this.criteria.city = city.city;
+      this.criteria.state = city.state_code;
+    } else {
+      this.criteria.city = null;
+      this.criteria.radius = null;
+      this.criteria.searchType = 'exact';
+    }
+  }
 }