OWC-194 remove browser x from input, add resultscount to basesearchinput, mapview and listview, remove unused searchquery code

Author: merelacato

build/blocks/owc-openkaarten/streetmap/client.js

@@ -1,5 +1,5 @@
 {
-    "/blocks/owc-openkaarten/streetmap/client.js": "/blocks/owc-openkaarten/streetmap/client.js?id=88c98856b9bbb7c789d8082375e21b9d",
+    "/blocks/owc-openkaarten/streetmap/client.js": "/blocks/owc-openkaarten/streetmap/client.js?id=4da8b1fb184d16da1db7dca917971041",
     "/blocks/owc-openkaarten/streetmap/style.css": "/blocks/owc-openkaarten/streetmap/style.css?id=0c70cc29722d11466724176fc03cdd58",
     "/blocks/owc-openkaarten/streetmap/editor.css": "/blocks/owc-openkaarten/streetmap/editor.css?id=f4316f0723fb86e3b028a9b448b1f3ae"
 }

build/blocks/owc-openkaarten/streetmap/client.js.map

@@ -10,6 +10,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  resultsCount: {
+    type: Number,
+    default: 0
+  },
 });
 
 const emit = defineEmits(['search']);
@@ -25,6 +29,11 @@ const clearSearch = () => {
   emit('search', '');
 };
 
+const searchStatus = computed(() => {
+  if (!searchQuery.value) return '';
+  return `${props.resultsCount} resultaten gevonden voor "${searchQuery.value}"`;
+});
+
 </script>
 
 <template>
@@ -34,16 +43,16 @@ const clearSearch = () => {
       class="search-form"
       :style="{ '--search-primary-color': primaryColor }"
     >
-      <label class="sr-only" for="location-search">Zoeken op locatie</label>
+      <label class="sr-only" for="location-search">Zoek op straat en/of plaats of postcode</label>
       <div class="search-wrapper">
-        <div 
+        <div
           role="status" 
           aria-live="polite" 
           aria-atomic="true" 
           class="sr-only"
         >
+          <span>{{ searchStatus }}</span>
         </div>
-        
         <input
           id="location-search"
           type="search"
@@ -120,6 +129,26 @@ const clearSearch = () => {
     outline: 2px solid var(--search-primary-color);
     outline-offset: 2px;
   }
+
+  input[type="search"]::-ms-clear {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+
+  &::-ms-reveal {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+
+  /* clears the 'X' in searchbar from Chrome */
+  &::-webkit-search-decoration,
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-results-button,
+  &::-webkit-search-results-decoration {
+    display: none;
+  }
 }
 
 .search-clear,

build/mix-manifest.json

@@ -128,6 +128,7 @@ const handleSearch = (query) => {
     <div class="list-view__controls">
       <BaseSearchInput 
         :primary-color="primaryColor"
+        :results-count="filteredLocations.length"
         @search="handleSearch"
       />
       <button @click="toggleView" class="list-view__map-button" v-html="mapButtonHTML"></button>

src/blocks/owc-openkaarten/streetmap/assets/scripts/vue/BaseSearchInput.vue

@@ -36,12 +36,10 @@ const props = defineProps({
 
 const tooltipCard = ref(null);
 const showFiltersCard = ref(false);
-const datasetLocations = ref([]);
 const mapRef = ref(null);
 const clusters = ref([]);
-const showListView = ref(false);
 const searchQuery = ref('');
-const searchMarkers = ref([]);
+const resultsCount = ref(0);
 const clusterOptions = {
   spiderfyOnMaxZoom: true,
   showCoverageOnHover: false,
@@ -64,8 +62,6 @@ const clusterOptions = {
   },
 };
 
-const locationAddresses = ref(new Map());
-
 const closeTooltipCard = () => {
 	tooltipCard.value = null;
 	document.getElementById('dataset-map')?.focus();
@@ -104,12 +100,6 @@ const attachEvents = (marker, location, set) => {
 	});
 };
 
-// Helper function to get coordinates from feature
-const getLatLng = (feature) => {
-  const coords = feature.geometry.coordinates;
-  return L.latLng(coords[1], coords[0]);
-};
-
 // Helper function to get color from marker config
 const getColorFromMarker = (markerConfig) => {
   if (!markerConfig) return props.primaryColor;
@@ -293,41 +283,6 @@ onMounted(async () => {
 	}
 });
 
-const filteredLocations = computed(() => {
-	if (!searchQuery.value) return [];
-
-	const query = searchQuery.value.toLowerCase();
-	return props.datasets
-		.filter(dataset => props.selectedDatasets.includes(dataset.id))
-		.flatMap(dataset => dataset.features.map(feature => {
-			const tooltipData = feature.properties?.tooltip || [];
-			const coords = feature.geometry.coordinates;
-			
-			// Collect all searchable text
-			const searchableText = [
-				// Tooltip data
-				tooltipData.find(t => t.layout === 'meta')?.meta,
-				tooltipData.find(t => t.layout === 'title')?.title,
-				tooltipData.find(t => t.layout === 'text')?.text,
-				// Location data
-				feature.properties?.name,
-				feature.properties?.description,
-				// Coordinates (formatted for search)
-				coords ? `${coords[1]},${coords[0]}` : null
-			]
-				.filter(Boolean) // Remove null/undefined values
-				.join(' ')
-				.toLowerCase();
-
-			return {
-				...feature,
-				datasetId: dataset.id,
-				matches: searchableText.includes(query)
-			};
-		}))
-		.filter(location => location.matches);
-});
-
 // Add search handler
 const handleSearch = async (query) => {
   searchQuery.value = query;
@@ -364,6 +319,7 @@ const handleSearch = async (query) => {
 
       // Add new targetMarker.
       targetMarker.addTo(map);
+      resultsCount.value = results.length ? 1 : 0
       targetMarker.bindPopup("Gevonden locatie");
     }
   } catch (error) {
@@ -384,8 +340,8 @@ const handleSearch = async (query) => {
 			<BaseSearchInput
         :placeholder="'Zoek op straat en/of plaats of postcode'"
 				:primary-color="primaryColor"
+        :results-count="resultsCount"
 				@search="handleSearch"
-				:results-count="filteredLocations.length"
 			/>
 		</div>
 		<div id="dataset-map"></div>