From a2b8e0e6ae5dd1fe9296027ca34dfd75aab4d9f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien.fastre@champs-libres.coop>
Date: Mon, 21 Jul 2025 00:53:26 +0200
Subject: [PATCH] [WIP] initialize search bar

---
 .../vuejs/AddressPicker/AddressPicker.vue     | 17 +++++-----
 .../AddressPicker/Component/SearchBar.vue     | 31 +++++++++++++++++++
 .../public/vuejs/AddressPicker/index.ts       | 16 +++++-----
 3 files changed, 49 insertions(+), 15 deletions(-)
 create mode 100644 src/Bundle/ChillMainBundle/Resources/public/vuejs/AddressPicker/Component/SearchBar.vue

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/AddressPicker/AddressPicker.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/AddressPicker/AddressPicker.vue
index 6f17c5de1..30bc495e6 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/AddressPicker/AddressPicker.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/AddressPicker/AddressPicker.vue
@@ -1,22 +1,23 @@
 <script setup lang="ts">
-
-import {Address} from "ChillMainAssets/types";
+import { Address } from "ChillMainAssets/types";
+import SearchBar from "ChillMainAssets/vuejs/AddressPicker/Component/SearchBar.vue";
 
 interface AddressPickerProps {
     suggestions?: Address[];
 }
 
 const props = withDefaults(defineProps<AddressPickerProps>(), {
-    suggestions: []
+    suggestions: () => [],
 });
 
-
+const onSearch = function (search: string) {
+    console.log("onSearch", search);
+};
 </script>
 
 <template>
-<p>test</p>
+    <search-bar @search="onSearch"></search-bar>
+    <p>test</p>
 </template>
 
-<style scoped lang="scss">
-
-</style>
+<style scoped lang="scss"></style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/AddressPicker/Component/SearchBar.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/AddressPicker/Component/SearchBar.vue
new file mode 100644
index 000000000..8a90c2874
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/AddressPicker/Component/SearchBar.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const emits = defineEmits<{
+    search: [search: string];
+}>();
+
+let searchTimer = 0;
+let searchString: string;
+
+const onInput = function (event: InputEvent) {
+    const target = event.target as HTMLInputElement;
+    const value = target.value;
+    searchString = value;
+
+    if (0 === searchTimer) {
+        window.clearTimeout(searchTimer);
+        searchTimer = 0;
+    }
+
+    searchTimer = window.setTimeout(() => {
+        if (value === searchString) {
+            emits("search", value);
+        }
+    }, 500);
+};
+</script>
+
+<template>
+    <input type="search" @input="onInput" />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/AddressPicker/index.ts b/src/Bundle/ChillMainBundle/Resources/public/vuejs/AddressPicker/index.ts
index 8095e0ba5..3bbc6a162 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/AddressPicker/index.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/AddressPicker/index.ts
@@ -1,10 +1,12 @@
-import {createApp} from "vue";
+import { createApp } from "vue";
 import AddressPicker from "ChillMainAssets/vuejs/AddressPicker/AddressPicker.vue";
 
-document.addEventListener('DOMContentLoaded', async () => {
-    document.querySelectorAll<HTMLDivElement>('div[data-address-picker]').forEach((elem): void  => {
-        const app = createApp(AddressPicker);
+document.addEventListener("DOMContentLoaded", async () => {
+    document
+        .querySelectorAll<HTMLDivElement>("div[data-address-picker]")
+        .forEach((elem): void => {
+            const app = createApp(AddressPicker);
 
-        app.mount(elem);
-    })
-})
+            app.mount(elem);
+        });
+});