Add search field to POI dialog

frontend/src/lib/components/overpass/overpass.ts

@@ -2,7 +2,7 @@ import WithRender from "./overpass.vue";
 import Vue from "vue";
 import { Component, Prop } from "vue-property-decorator";
 import { Client, InjectClient, InjectContext, InjectMapComponents, InjectMapContext } from "../../utils/decorators";
-import { overpassPresets, validateOverpassQuery } from "facilmap-leaflet";
+import { OverpassPreset, overpassPresets, validateOverpassQuery } from "facilmap-leaflet";
 import FormModal from "../ui/form-modal/form-modal";
 import { MapComponents, MapContext } from "../leaflet-map/leaflet-map";
 import { Context } from "../facilmap/facilmap";
@@ -28,6 +28,10 @@ export default class Overpass extends Vue {
 	@Prop({ type: String, required: true }) id!: string;
 
 	activeTab = 0;
+	selectedPresets: string[] = [];
+	customQuery = "";
+	searchTerm = "";
+	isCustomQueryMode = false;
 
 	get categories(): (typeof overpassPresets) {
 		return overpassPresets.map((cat) => {
@@ -40,10 +44,6 @@ export default class Overpass extends Vue {
 		});
 	}
 
-	selectedPresets: string[] = [];
-	customQuery = "";
-	isCustomQueryMode = false;
-
 	get isModified(): boolean {
 		if (this.isCustomQueryMode)
 			return !!this.customQuery != !!this.mapContext.overpassCustom || this.customQuery != this.mapContext.overpassCustom;
@@ -51,6 +51,14 @@ export default class Overpass extends Vue {
 			return !isEqual(new Set(this.selectedPresets), new Set(this.mapContext.overpassPresets.map((preset) => preset.key)));
 	}
 
+	get filteredPresets(): OverpassPreset[] {
+		if (!this.searchTerm)
+			return [];
+
+		const lowerTerm = this.searchTerm.toLowerCase();
+		return this.categories.map((cat) => cat.presets).flat().flat().filter((preset) => preset.label.toLowerCase().includes(lowerTerm));
+	}
+
 	initialize(): void {
 		this.selectedPresets = this.mapContext.overpassPresets.map((p) => p.key);
 		this.customQuery = this.mapContext.overpassCustom || "";

frontend/src/lib/components/overpass/overpass.vue

@@ -8,7 +8,18 @@
 	ok-title="Apply"
 >
 	<template v-if="!isCustomQueryMode">
-		<b-tabs pills lazy v-model="activeTab">
+		<b-form-input type="search" v-model="searchTerm" placeholder="Search…" autofocus></b-form-input>
+		<hr />
+
+		<div v-if="searchTerm" class="checkbox-grid">
+			<b-form-checkbox
+				v-for="preset in filteredPresets"
+				:checked="preset.isChecked"
+				@input="togglePreset(preset.key)"
+			>{{preset.label}}</b-form-checkbox>
+		</div>
+
+		<b-tabs v-else pills lazy v-model="activeTab">
 			<b-tab v-for="(category, idx) in categories" :title="category.label">
 				<template #title>
 					{{category.label}}

leaflet/src/overpass/overpass-layer.ts

@@ -171,6 +171,9 @@ export default class OverpassLayer extends FeatureGroup {
 		if (this._lastRequestController)
 			this._lastRequestController.abort();
 
+		if (!this._map._loaded)
+			return;
+
 		if (this.isEmpty()) {
 			this.clearLayers();
 			return;