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

Fixes for #36 and #72

Browse Source
This commit is contained in:
Andreas Knuth
2024-08-14 19:47:19 +02:00
parent a8bb163acf
commit 7f756a71e8
8 changed files with 155 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,11 +22,11 @@ import { ModalService } from './modal.service';
styleUrl: './search-modal.component.scss',
})
export class SearchModalComponent {
cities$: Observable<GeoResult[]>;
// cities$: Observable<GeoResult[]>;
counties$: Observable<CountyResult[]>;
cityLoading = false;
// cityLoading = false;
countyLoading = false;
cityInput$ = new Subject<string>();
// cityInput$ = new Subject<string>();
countyInput$ = new Subject<string>();
private criteriaChangeSubscription: Subscription;
public criteria: BusinessListingCriteria | CommercialPropertyListingCriteria | UserListingCriteria;
@@ -54,7 +54,7 @@ export class SearchModalComponent {
this.criteria.start = 0;
}
});
this.loadCities();
// this.loadCities();
this.loadCounties();
}
@@ -71,22 +71,22 @@ 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)),
),
),
),
);
}
// 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)),
// ),
// ),
// ),
// );
// }
private loadCounties() {
this.counties$ = concat(
of([]), // default items

32
bizmatch/src/app/components/validated-county/validated-county.component.html Normal file
View File

@@ -0,0 +1,32 @@
<div>
@if(label){
<label for="type" class="block text-sm font-bold text-gray-700 mb-1 relative w-fit {{ labelClasses }}"
>{{ label }} @if(validationMessage){
<div
attr.data-tooltip-target="tooltip-{{ name }}"
class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 dark:border-gray-900 hover:cursor-pointer"
>
!
</div>
<app-tooltip id="tooltip-{{ name }}" [text]="validationMessage"></app-tooltip>
}
</label>
}
<ng-select
class="custom"
[multiple]="false"
[hideSelected]="true"
[trackByFn]="trackByFn"
[minTermLength]="2"
[loading]="countyLoading"
typeToSearchText="Please enter 2 or more characters"
[typeahead]="countyInput$"
ngModel="{{ value }}"
(ngModelChange)="onInputChange($event)"
[readonly]="readonly"
>
@for (county of counties$ | async; track county.id) {
<ng-option [value]="county">{{ county }}</ng-option>
}
</ng-select>
</div>

9
bizmatch/src/app/components/validated-county/validated-county.component.scss Normal file
View File

@@ -0,0 +1,9 @@
:host ::ng-deep .ng-select.custom .ng-select-container {
// --tw-bg-opacity: 1;
// background-color: rgb(249 250 251 / var(--tw-bg-opacity));
// height: 42px;
border-radius: 0.5rem;
.ng-value-container .ng-input {
top: 10px;
}
}

70
bizmatch/src/app/components/validated-county/validated-county.component.ts Normal file
View File

@@ -0,0 +1,70 @@
import { CommonModule } from '@angular/common';
import { Component, forwardRef, Input } from '@angular/core';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { NgSelectModule } from '@ng-select/ng-select';
import { catchError, concat, distinctUntilChanged, map, Observable, of, Subject, switchMap, tap } from 'rxjs';
import { CountyResult, GeoResult } from '../../../../../bizmatch-server/src/models/main.model';
import { City } from '../../../../../bizmatch-server/src/models/server.model';
import { GeoService } from '../../services/geo.service';
import { SelectOptionsService } from '../../services/select-options.service';
import { BaseInputComponent } from '../base-input/base-input.component';
import { TooltipComponent } from '../tooltip/tooltip.component';
import { ValidationMessagesService } from '../validation-messages.service';
@Component({
selector: 'app-validated-county',
standalone: true,
imports: [CommonModule, FormsModule, NgSelectModule, TooltipComponent],
templateUrl: './validated-county.component.html',
styleUrl: './validated-county.component.scss',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => ValidatedCountyComponent),
multi: true,
},
],
})
export class ValidatedCountyComponent extends BaseInputComponent {
@Input() items;
@Input() labelClasses: string;
@Input() state: string;
@Input() readonly = false;
counties$: Observable<CountyResult[]>;
countyLoading = false;
countyInput$ = new Subject<string>();
constructor(validationMessagesService: ValidationMessagesService, private geoService: GeoService, public selectOptions: SelectOptionsService) {
super(validationMessagesService);
}
override ngOnInit() {
super.ngOnInit();
this.loadCounties();
}
onInputChange(event: City): void {
this.value = event; //{ ...event, longitude: parseFloat(event.longitude), latitude: parseFloat(event.latitude) };
this.onChange(this.value);
}
private loadCounties() {
this.counties$ = concat(
of([]), // default items
this.countyInput$.pipe(
distinctUntilChanged(),
tap(() => (this.countyLoading = true)),
switchMap(term =>
this.geoService.findCountiesStartingWith(term, this.state ? [this.state] : null).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)),
),
),
),
);
}
trackByFn(item: GeoResult) {
return item.id;
}
compareFn = (item, selected) => {
return item.id === selected.id;
};
}