counties, pagination, filter count, show total results

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

@@ -1,10 +1,13 @@
 import { AsyncPipe, NgIf } from '@angular/common';
 import { Component } from '@angular/core';
 import { NgSelectModule } from '@ng-select/ng-select';
-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 { catchError, concat, debounceTime, distinctUntilChanged, map, Observable, of, Subject, Subscription, switchMap, tap } from 'rxjs';
+import { BusinessListingCriteria, CommercialPropertyListingCriteria, CountyResult, GeoResult, KeyValue, KeyValueStyle, UserListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
+import { CriteriaChangeService } from '../../services/criteria-change.service';
 import { GeoService } from '../../services/geo.service';
+import { ListingsService } from '../../services/listings.service';
 import { SelectOptionsService } from '../../services/select-options.service';
+import { UserService } from '../../services/user.service';
 import { SharedModule } from '../../shared/shared/shared.module';
 import { ModalService } from './modal.service';
 
@@ -17,17 +20,33 @@ import { ModalService } from './modal.service';
 })
 export class SearchModalComponent {
   cities$: Observable<GeoResult[]>;
+  counties$: Observable<CountyResult[]>;
   cityLoading = false;
+  countyLoading = false;
   cityInput$ = new Subject<string>();
-  constructor(public selectOptions: SelectOptionsService, public modalService: ModalService, private geoService: GeoService) {}
+  countyInput$ = new Subject<string>();
+  private criteriaChangeSubscription: Subscription;
+  public criteria: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria;
+  numberOfResults$: Observable<number>;
+  constructor(
+    public selectOptions: SelectOptionsService,
+    public modalService: ModalService,
+    private geoService: GeoService,
+    private criteriaChangeService: CriteriaChangeService,
+    private listingService: ListingsService,
+    private userService: UserService,
+  ) {}
   ngOnInit() {
+    this.setupCriteriaChangeListener();
     this.modalService.message$.subscribe(msg => {
       this.criteria = msg;
+      this.setTotalNumberOfResults();
     });
     this.loadCities();
+    this.loadCounties();
   }
-  public criteria: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria;
 
+  ngOnChanges() {}
   categoryClicked(checked: boolean, value: string) {
     if (checked) {
       this.criteria.types.push(value);
@@ -54,13 +73,34 @@ export class SearchModalComponent {
       ),
     );
   }
+  private loadCounties() {
+    this.counties$ = concat(
+      of([]), // default items
+      this.countyInput$.pipe(
+        distinctUntilChanged(),
+        tap(() => (this.countyLoading = true)),
+        switchMap(term =>
+          this.geoService.findCountiesStartingWith(term).pipe(
+            catchError(() => of([])), // empty list on error
+            map(counties => counties.map(county => county.name)), // transform the list of objects to a list of city names
+            tap(() => (this.countyLoading = false)),
+          ),
+        ),
+      ),
+    );
+  }
+  private setupCriteriaChangeListener() {
+    this.criteriaChangeSubscription = this.criteriaChangeService.criteriaChange$.pipe(debounceTime(400)).subscribe(() => this.setTotalNumberOfResults());
+  }
   trackByFn(item: GeoResult) {
     return item.id;
   }
   search() {
     console.log('Search criteria:', this.criteria);
   }
-
+  getCounties() {
+    this.geoService.findCountiesStartingWith('');
+  }
   closeModal() {
     console.log('Closing modal');
   }
@@ -70,4 +110,16 @@ export class SearchModalComponent {
   isTypeOfProfessionalClicked(v: KeyValue) {
     return this.criteria.types.find(t => t === v.value);
   }
+  setTotalNumberOfResults() {
+    if (this.criteria) {
+      console.log(`Getting total number of results for ${this.criteria.criteriaType}`);
+      if (this.criteria.criteriaType === 'business' || this.criteria.criteriaType === 'commercialProperty') {
+        this.numberOfResults$ = this.listingService.getNumberOfListings(this.criteria, this.criteria.criteriaType);
+      } else if (this.criteria.criteriaType === 'broker') {
+        this.numberOfResults$ = this.userService.getNumberOfBroker(this.criteria);
+      } else {
+        this.numberOfResults$ = of();
+      }
+    }
+  }
 }