Paginator & SQL Querries where clauses & city search

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

@@ -1,7 +1,9 @@
 import { AsyncPipe, NgIf } from '@angular/common';
 import { Component } from '@angular/core';
 import { NgSelectModule } from '@ng-select/ng-select';
-import { BusinessListingCriteria, CommercialPropertyListingCriteria, KeyValue, KeyValueStyle, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
+import { catchError, concat, distinctUntilChanged, Observable, of, Subject, switchMap, tap } from 'rxjs';
+import { BusinessListingCriteria, CommercialPropertyListingCriteria, GeoResult, KeyValue, KeyValueStyle, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
+import { GeoService } from '../../services/geo.service';
 import { SelectOptionsService } from '../../services/select-options.service';
 import { SharedModule } from '../../shared/shared/shared.module';
 import { ModalService } from './modal.service';
@@ -14,11 +16,15 @@ import { ModalService } from './modal.service';
   styleUrl: './search-modal.component.scss',
 })
 export class SearchModalComponent {
-  constructor(public selectOptions: SelectOptionsService, public modalService: ModalService) {}
+  cities$: Observable<GeoResult[]>;
+  cityLoading = false;
+  cityInput$ = new Subject<string>();
+  constructor(public selectOptions: SelectOptionsService, public modalService: ModalService, private geoService: GeoService) {}
   ngOnInit() {
     this.modalService.message$.subscribe(msg => {
       this.criteria = msg;
     });
+    this.loadCities();
   }
   public criteria: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria;
 
@@ -32,6 +38,25 @@ export class SearchModalComponent {
       }
     }
   }
+  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;
+  }
   search() {
     console.log('Search criteria:', this.criteria);
   }