diff --git a/src/src/app/modals/place-create-gmaps-modal/place-create-gmaps-modal.component.html b/src/src/app/modals/place-create-gmaps-modal/place-create-gmaps-modal.component.html new file mode 100644 index 0000000..ca4cd6c --- /dev/null +++ b/src/src/app/modals/place-create-gmaps-modal/place-create-gmaps-modal.component.html @@ -0,0 +1,24 @@ +
+ @for (r of results; track r.name) { +
+
+
+ +
+ +
+

+ {{ r.name }} +

+

+ {{ r.description.split('\n')[0] }} +

+
+
+ +
+ - +
+
+ } +
\ No newline at end of file diff --git a/src/src/app/modals/place-create-gmaps-modal/place-create-gmaps-modal.component.scss b/src/src/app/modals/place-create-gmaps-modal/place-create-gmaps-modal.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/src/app/modals/place-create-gmaps-modal/place-create-gmaps-modal.component.ts b/src/src/app/modals/place-create-gmaps-modal/place-create-gmaps-modal.component.ts new file mode 100644 index 0000000..e71df73 --- /dev/null +++ b/src/src/app/modals/place-create-gmaps-modal/place-create-gmaps-modal.component.ts @@ -0,0 +1,26 @@ +import { Component } from '@angular/core'; +import { ButtonModule } from 'primeng/button'; +import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog'; +import { GooglePlaceResult } from '../../types/poi'; + +@Component({ + selector: 'app-place-create-gmaps-modal', + imports: [ButtonModule], + standalone: true, + templateUrl: './place-create-gmaps-modal.component.html', + styleUrl: './place-create-gmaps-modal.component.scss', +}) +export class PlaceCreateGmapsModalComponent { + results: GooglePlaceResult[]; + + constructor( + private ref: DynamicDialogRef, + private config: DynamicDialogConfig, + ) { + this.results = this.config.data; + } + + closeDialog(data: GooglePlaceResult) { + this.ref.close(data); + } +} diff --git a/src/src/app/modals/place-create-modal/place-create-modal.component.html b/src/src/app/modals/place-create-modal/place-create-modal.component.html index 8b187f0..199c632 100644 --- a/src/src/app/modals/place-create-modal/place-create-modal.component.html +++ b/src/src/app/modals/place-create-modal/place-create-modal.component.html @@ -6,7 +6,8 @@ + class="absolute right-2 top-1/2 -translate-y-1/2" pTooltip="Complete using GMaps API" + (click)="gmapsSearchText()" /> diff --git a/src/src/app/modals/place-create-modal/place-create-modal.component.ts b/src/src/app/modals/place-create-modal/place-create-modal.component.ts index 237d06a..5e1e40a 100644 --- a/src/src/app/modals/place-create-modal/place-create-modal.component.ts +++ b/src/src/app/modals/place-create-modal/place-create-modal.component.ts @@ -2,23 +2,24 @@ import { Component } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms'; import { ButtonModule } from 'primeng/button'; -import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog'; +import { DialogService, DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog'; import { FloatLabelModule } from 'primeng/floatlabel'; import { InputTextModule } from 'primeng/inputtext'; import { SelectModule } from 'primeng/select'; import { TextareaModule } from 'primeng/textarea'; -import { Observable } from 'rxjs'; +import { Observable, take } from 'rxjs'; import { AsyncPipe } from '@angular/common'; import { InputGroupModule } from 'primeng/inputgroup'; import { InputGroupAddonModule } from 'primeng/inputgroupaddon'; import { ApiService } from '../../services/api.service'; import { UtilsService } from '../../services/utils.service'; import { FocusTrapModule } from 'primeng/focustrap'; -import { Category, Place } from '../../types/poi'; +import { Category, GooglePlaceResult, Place } from '../../types/poi'; import { CheckboxModule } from 'primeng/checkbox'; import { TooltipModule } from 'primeng/tooltip'; import { checkAndParseLatLng, formatLatLng } from '../../shared/latlng-parser'; import { InputNumberModule } from 'primeng/inputnumber'; +import { PlaceCreateGmapsModalComponent } from '../place-create-gmaps-modal/place-create-gmaps-modal.component'; @Component({ selector: 'app-place-create-modal', @@ -54,6 +55,7 @@ export class PlaceCreateModalComponent { private ref: DynamicDialogRef, private apiService: ApiService, private utilsService: UtilsService, + private dialogService: DialogService, private fb: FormBuilder, private config: DynamicDialogConfig, ) { @@ -215,6 +217,34 @@ export class PlaceCreateModalComponent { this.placeForm.get('category')?.markAsDirty(); return; } + + const modal: DynamicDialogRef = this.dialogService.open(PlaceCreateGmapsModalComponent, { + header: 'Select GMaps Place', + modal: true, + appendTo: 'body', + closable: true, + dismissableMask: true, + data: results, + width: '40vw', + breakpoints: { + '960px': '70vw', + '640px': '90vw', + }, + })!; + + modal.onClose.pipe(take(1)).subscribe({ + next: (result: GooglePlaceResult | null) => { + if (!result) return; + const r = result; + this.placeForm.patchValue({ + ...r, + lat: formatLatLng(r.lat), + lng: formatLatLng(r.lng), + place: r.name || '', + }); + this.placeForm.get('category')?.markAsDirty(); + }, + }); }, }); }