francescoalbano/tripweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Place creation: GMaps autocomplete Image and Category, Shift+Enter and Ctrl+Enter shortcuts

Browse Source
This commit is contained in:
itskovacs 2025-11-09 19:14:38 +01:00
parent bfeb66f04f
commit 789a3937a6
2 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/src/app/modals/place-create-modal/place-create-modal.component.html
View File

@ -2,7 +2,8 @@
<div pFocusTrap class="grid grid-cols-2 md:grid-cols-4 gap-4" [formGroup]="placeForm"> <div pFocusTrap class="grid grid-cols-2 md:grid-cols-4 gap-4" [formGroup]="placeForm">
<div class="relative col-span-2"> <div class="relative col-span-2">
<p-floatlabel variant="in"> <p-floatlabel variant="in">
<input id="name" formControlName="name" pInputText autofocus fluid /> <input id="name" formControlName="name" pInputText autofocus fluid (keydown.shift.enter)="gmapsSearchText()"
(keydown.control.enter)="closeDialog()" />
<label for="name">Name</label> <label for="name">Name</label>
</p-floatlabel> </p-floatlabel>
<p-button icon="pi pi-sparkles" variant="text" [disabled]="!placeForm.get('name')!.value" <p-button icon="pi pi-sparkles" variant="text" [disabled]="!placeForm.get('name')!.value"

31
src/src/app/modals/place-create-modal/place-create-modal.component.ts
View File

@ -206,15 +206,31 @@ export class PlaceCreateModalComponent {
this.placeForm.get('gpx')?.markAsDirty(); this.placeForm.get('gpx')?.markAsDirty();
} }
gmapsToForm(r: GooglePlaceResult) {
this.placeForm.patchValue({ ...r, lat: formatLatLng(r.lat), lng: formatLatLng(r.lng), place: r.name || '' });
this.placeForm.get('category')?.markAsDirty();
if (r.category) {
this.categories$?.pipe(take(1)).subscribe({next: categories => {
const category: Category | undefined = categories.find(c => c.name == r.category);
if (!category) return;
this.placeForm.get('category')?.setValue(category.id);
}})
}
}
gmapsSearchText() { gmapsSearchText() {
const query = this.placeForm.get('name')?.value; const query = this.placeForm.get('name')?.value;
if (!query) return; if (!query) return;
this.apiService.gmapsSearchText(query).subscribe({ this.apiService.gmapsSearchText(query).subscribe({
next: (results) => { next: (results) => {
if (!results.length) {
this.utilsService.toast('warn', 'No result', 'No result available for this autocompletion');
return;
}
if (results.length == 1) { if (results.length == 1) {
const r = results[0]; this.gmapsToForm(results[0])
this.placeForm.patchValue({ ...r, lat: formatLatLng(r.lat), lng: formatLatLng(r.lng), place: r.name || '' });
this.placeForm.get('category')?.markAsDirty();
return; return;
} }
@ -235,14 +251,7 @@ export class PlaceCreateModalComponent {
modal.onClose.pipe(take(1)).subscribe({ modal.onClose.pipe(take(1)).subscribe({
next: (result: GooglePlaceResult | null) => { next: (result: GooglePlaceResult | null) => {
if (!result) return; if (!result) return;
const r = result; this.gmapsToForm(result);
this.placeForm.patchValue({
...r,
lat: formatLatLng(r.lat),
lng: formatLatLng(r.lng),
place: r.name || '',
});
this.placeForm.get('category')?.markAsDirty();
}, },
}); });
}, },