new Landing page, stripped app

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

@@ -0,0 +1,153 @@
+import { AsyncPipe, CommonModule, NgIf } from '@angular/common';
+import { Component } from '@angular/core';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { debounceTime, Observable, of, Subject, Subscription } from 'rxjs';
+import { BusinessListingCriteria, CountyResult, GeoResult, KeyValue, KeyValueStyle } from '../../../../../bizmatch-server/src/models/main.model';
+
+import { ModalService } from '../../services/modal.service';
+
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { CriteriaChangeService } from '../../services/criteria-change.service';
+import { ListingsService } from '../../services/listings.service';
+import { SelectOptionsService } from '../../services/select-options.service';
+import { UserService } from '../../services/user.service';
+import { resetBusinessListingCriteria } from '../../utils/utils';
+import { ValidatedPriceComponent } from '../validated-price/validated-price.component';
+@UntilDestroy()
+@Component({
+  selector: 'app-search-modal',
+  standalone: true,
+  imports: [CommonModule, FormsModule, RouterModule, FontAwesomeModule, AsyncPipe, NgIf, NgSelectModule, ValidatedPriceComponent],
+  templateUrl: './search-modal.component.html',
+  styleUrl: './search-modal.component.scss',
+})
+export class SearchModalComponent {
+  // cities$: Observable<GeoResult[]>;
+  counties$: Observable<CountyResult[]>;
+  // cityLoading = false;
+  countyLoading = false;
+  // cityInput$ = new Subject<string>();
+  countyInput$ = new Subject<string>();
+  private criteriaChangeSubscription: Subscription;
+  public criteria: BusinessListingCriteria;
+  backupCriteria: BusinessListingCriteria;
+  numberOfResults$: Observable<number>;
+  cancelDisable = false;
+  constructor(public selectOptions: SelectOptionsService, public modalService: ModalService, private criteriaChangeService: CriteriaChangeService, private listingService: ListingsService, private userService: UserService) {}
+  ngOnInit() {
+    this.setupCriteriaChangeListener();
+    this.modalService.message$.pipe(untilDestroyed(this)).subscribe(msg => {
+      this.criteria = msg as BusinessListingCriteria;
+      this.backupCriteria = JSON.parse(JSON.stringify(msg));
+      this.setTotalNumberOfResults();
+    });
+    this.modalService.modalVisible$.pipe(untilDestroyed(this)).subscribe(val => {
+      if (val) {
+        this.criteria.page = 1;
+        this.criteria.start = 0;
+      }
+    });
+    // this.loadCities();
+    // this.loadCounties();
+  }
+
+  ngOnChanges() {}
+  categoryClicked(checked: boolean, value: string) {
+    if (checked) {
+      this.criteria.types.push(value);
+    } else {
+      const index = this.criteria.types.findIndex(t => t === value);
+      if (index > -1) {
+        this.criteria.types.splice(index, 1);
+      }
+    }
+  }
+  // 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)),
+  //         ),
+  //       ),
+  //     ),
+  //   );
+  // }
+  setCity(city) {
+    if (city) {
+      this.criteria.city = city;
+      this.criteria.state = city.state;
+    } else {
+      this.criteria.city = null;
+      this.criteria.radius = null;
+      this.criteria.searchType = 'exact';
+    }
+  }
+  setState(state: string) {
+    if (state) {
+      this.criteria.state = state;
+    } else {
+      this.criteria.state = null;
+      this.setCity(null);
+    }
+  }
+  private setupCriteriaChangeListener() {
+    this.criteriaChangeSubscription = this.criteriaChangeService.criteriaChange$.pipe(debounceTime(400)).subscribe(() => {
+      this.setTotalNumberOfResults();
+      this.cancelDisable = true;
+    });
+  }
+  trackByFn(item: GeoResult) {
+    return item.id;
+  }
+  search() {
+    console.log('Search criteria:', this.criteria);
+  }
+  // getCounties() {
+  //   this.geoService.findCountiesStartingWith('');
+  // }
+  closeModal() {
+    console.log('Closing modal');
+  }
+  isTypeOfBusinessClicked(v: KeyValueStyle) {
+    return this.criteria.types.find(t => t === v.value);
+  }
+  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 === 'businessListings' || this.criteria.criteriaType === 'commercialPropertyListings') {
+        this.numberOfResults$ = this.listingService.getNumberOfListings(this.criteria);
+      } else if (this.criteria.criteriaType === 'brokerListings') {
+        this.numberOfResults$ = this.userService.getNumberOfBroker();
+      } else {
+        this.numberOfResults$ = of();
+      }
+    }
+  }
+  clearFilter() {
+    resetBusinessListingCriteria(this.criteria);
+  }
+  close() {
+    this.modalService.reject(this.backupCriteria);
+  }
+  onCheckboxChange(checkbox: string, value: boolean) {
+    // Deaktivieren Sie alle Checkboxes
+    (<BusinessListingCriteria>this.criteria).realEstateChecked = false;
+    (<BusinessListingCriteria>this.criteria).leasedLocation = false;
+    (<BusinessListingCriteria>this.criteria).franchiseResale = false;
+
+    // Aktivieren Sie nur die aktuell ausgewählte Checkbox
+    this.criteria[checkbox] = value;
+  }
+}