Add search input to map and list view. Search only on address for now. OWC-94

Author: markacato

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

@@ -1,5 +1,5 @@
 {
-    "/blocks/owc-openkaarten/streetmap/client.js": "/blocks/owc-openkaarten/streetmap/client.js?id=7a35ddc22ecd2afb0e29c5bc1867f468",
+    "/blocks/owc-openkaarten/streetmap/client.js": "/blocks/owc-openkaarten/streetmap/client.js?id=8888c46658d6c24f49ebeaf5d0a89eb3",
     "/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

@@ -0,0 +1,97 @@
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: 'Zoeken...',
+  },
+  primaryColor: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['search']);
+const searchQuery = ref('');
+
+const handleSubmit = (e) => {
+  e.preventDefault();
+  emit('search', searchQuery.value);
+};
+
+const handleInput = () => {
+  if (!searchQuery.value) {
+    emit('search', ''); // Clear search when input is empty
+  }
+};
+</script>
+
+<template>
+  <form 
+    @submit="handleSubmit" 
+    class="search-input"
+    :style="{ '--search-primary-color': primaryColor }"
+  >
+    <input
+      type="search"
+      v-model="searchQuery"
+      :placeholder="placeholder"
+      @input="handleInput"
+      class="search-input__field"
+    />
+    <button 
+      type="submit" 
+      class="search-input__button"
+      :disabled="!searchQuery"
+    >
+      <span class="sr-only">Zoeken</span>
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z" fill="currentColor"/>
+      </svg>
+    </button>
+  </form>
+</template>
+
+<style lang="scss" scoped>
+.search-input {
+    position: relative;
+    flex-grow: 1;
+    margin-inline-end: 1.5rem;
+
+  &__field {
+    block-size: 100%;
+    inline-size: 100%;
+    padding: 0.75rem 1rem;
+    border: 1px solid #7a7a7a;
+    border-radius: 4px;
+    font-size: 1rem;
+  }
+
+  &__button {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inset-block: 4px;
+    inset-inline-end: 4px;
+    min-block-size: auto;
+    padding: 0.75rem;
+    background-color: var(--search-primary-color);
+    border: none;
+    border-radius: 4px;
+    color: white;
+    transition: opacity 0.2s ease;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.9;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--search-primary-color);
+      outline-offset: 2px;
+    }
+  }
+}
+</style> 

build/blocks/owc-openkaarten/streetmap/editor.css.map

@@ -4,6 +4,7 @@ import BaseListCard from './BaseListCard.vue';
 import { makeFilterButtonHTML } from '../utils/make-filter-button-html';
 import { makeMapButtonHTML } from '../utils/make-map-button-html';
 import BaseFilters from './BaseFilters.vue';
+import BaseSearchInput from './BaseSearchInput.vue';
 
 const props = defineProps({
   datasets: {
@@ -20,8 +21,10 @@ const props = defineProps({
   },
 });
 
+const searchQuery = ref('');
+
 const filteredLocations = computed(() => {
-  return props.datasets
+  let locations = props.datasets
     .filter(dataset => {
       return props.selectedDatasets.includes(dataset.id) &&
              !dataset.features.some(feature => feature.geometry?.type === 'Polygon');
@@ -39,6 +42,15 @@ const filteredLocations = computed(() => {
         image: tooltipData.find(t => t.layout === 'image')?.image || ''
       };
     }));
+
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase();
+    locations = locations.filter(location => 
+      location.meta?.toLowerCase().includes(query)
+    );
+  }
+
+  return locations;
 });
 
 const emits = defineEmits(['toggleView', 'datasetChange']);
@@ -88,6 +100,10 @@ const loadMore = () => {
     }
   });
 };
+
+const handleSearch = (query) => {
+  searchQuery.value = query;
+};
 </script>
 
 <template>
@@ -100,6 +116,10 @@ const loadMore = () => {
     }"
   >
     <div class="list-view__controls">
+      <BaseSearchInput 
+        :primary-color="primaryColor"
+        @search="handleSearch"
+      />
       <button @click="toggleView" class="list-view__map-button" v-html="mapButtonHTML"></button>
       <button
         v-if="datasets.length > 1"
@@ -187,7 +207,7 @@ const loadMore = () => {
   &__controls {
     display: flex;
     justify-content: flex-end;
-    gap: 1rem;
+    gap: 0.5rem;
     margin-block-end: 0.5rem;
 
     button {