aknuth/bizmatch-project
1
0
Fork 0
Code Issues 9 Pull Requests Packages Projects 5 Releases Wiki Activity

Paginator & SQL Querries where clauses & city search

Browse Source
This commit is contained in:
Andreas Knuth
2024-07-18 19:02:32 +02:00
parent f88eebe8d3
commit abcde3991d
30 changed files with 850 additions and 421 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
bizmatch/src/app/components/search-modal/search-modal.component.html
View File

@@ -28,13 +28,28 @@
</div>
<div>
<label for="city" class="block mb-2 text-sm font-medium text-gray-900">Location - City</label>
<input
<!-- <input
type="text"
id="city"
[(ngModel)]="criteria.city"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
placeholder="e.g. Houston"
/>
/> -->
<ng-select
class="custom"
[multiple]="false"
[hideSelected]="true"
[trackByFn]="trackByFn"
[minTermLength]="2"
[loading]="cityLoading"
typeToSearchText="Please enter 2 or more characters"
[typeahead]="cityInput$"
[(ngModel)]="criteria.city"
>
@for (city of cities$ | async; track city.id) {
<ng-option [value]="city.city">{{ city.city }} - {{ selectOptions.getStateInitials(city.state) }}</ng-option>
}
</ng-select>
</div>
<div>
@@ -205,13 +220,28 @@
</div>
<div>
<label for="city" class="block mb-2 text-sm font-medium text-gray-900">Location - City</label>
<input
<!-- <input
type="text"
id="city"
[(ngModel)]="criteria.city"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
placeholder="e.g. Houston"
/>
/> -->
<ng-select
class="custom"
[multiple]="false"
[hideSelected]="true"
[trackByFn]="trackByFn"
[minTermLength]="2"
[loading]="cityLoading"
typeToSearchText="Please enter 2 or more characters"
[typeahead]="cityInput$"
[(ngModel)]="criteria.city"
>
@for (city of cities$ | async; track city.id) {
<ng-option [value]="city.city">{{ city.city }} - {{ selectOptions.getStateInitials(city.state) }}</ng-option>
}
</ng-select>
</div>
<div>
<label for="price" class="block mb-2 text-sm font-medium text-gray-900">Price</label>
@@ -265,7 +295,7 @@
</div>
</div>
</div>
} @if(criteria.criteriaType==='user'){
} @if(criteria.criteriaType==='broker'){
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-4">
<div>
@@ -280,13 +310,28 @@
</div>
<div>
<label for="city" class="block mb-2 text-sm font-medium text-gray-900">Location - City</label>
<input
<!-- <input
type="text"
id="city"
[(ngModel)]="criteria.city"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
placeholder="e.g. Houston"
/>
/> -->
<ng-select
class="custom"
[multiple]="false"
[hideSelected]="true"
[trackByFn]="trackByFn"
[minTermLength]="2"
[loading]="cityLoading"
typeToSearchText="Please enter 2 or more characters"
[typeahead]="cityInput$"
[(ngModel)]="criteria.city"
>
@for (city of cities$ | async; track city.id) {
<ng-option [value]="city.city">{{ city.city }} - {{ selectOptions.getStateInitials(city.state) }}</ng-option>
}
</ng-select>
</div>
</div>
<div class="space-y-4">

3
bizmatch/src/app/components/search-modal/search-modal.component.scss
View File

@@ -3,4 +3,7 @@
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
height: 46px;
border-radius: 0.5rem;
.ng-value-container .ng-input {
top: 10px;
}
}

29
bizmatch/src/app/components/search-modal/search-modal.component.ts
View File

@@ -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);
}