From e7356b3c3c934deaa73b2aca01f67e414d94ec85 Mon Sep 17 00:00:00 2001
From: SRP-mango <siriphicha.mango02@gmail.com>
Date: Thu, 14 Sep 2023 23:57:18 +0700
Subject: [PATCH 1/2] hide search  bar after search

---
 src/views/Home.vue | 53 ++++++++++++++++++++++++++--------------------
 1 file changed, 30 insertions(+), 23 deletions(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index 27f4625..03a2106 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -14,30 +14,36 @@
         <v-app-bar scroll-threshold="0"
             class="mx-auto px-auto"
             >
-            <v-text-field
-              v-model="searchQuery"
-              @keyup.enter="performSearch"
-              @input="performSearch"
-              density="compact"
-              variant="solo"
-              prepend-inner-icon="mdi-magnify"
-              single-line
-              hide-details
-            ></v-text-field>
-            <v-btn icon>
+            
+            <div class="flex-grow-1">
+                <v-text-field
+                  v-model="searchQuery"
+                  @keyup.enter="performSearch"
+                  @input="performSearch"
+                  density="compact"
+                  variant="solo"
+                  prepend-inner-icon="mdi-magnify"
+                  single-line
+                  hide-details
+                  
+                ></v-text-field>
+            </div>
+
+            <v-btn icon @click="showSearchBar = !showSearchBar">
                 <v-icon>mdi-crosshairs-gps</v-icon>
             </v-btn>
+
         </v-app-bar>
         
       </v-layout>
 
-      <div v-if="searchResults.length > 0" class="search-results">
-              <ul>
-                <li v-for="result in searchResults" :key="result.place_id" @click="moveToLocation(result)">
-                  {{ result.display_name }}
-                </li>
-              </ul>
-            </div>
+      <div v-if="!hideSearchResults && searchResults.length > 0" class="search-results">
+        <ul>
+          <li v-for="result in searchResults" :key="result.place_id" @click="moveToLocation(result)">
+            {{ result.display_name }}
+          </li>
+        </ul>
+      </div>
   <!-- <map/> -->
     <ol-map
     :loadTilesWhileAnimating="true"
@@ -84,14 +90,15 @@ const popupData = ref(null);
 //search
 const searchQuery = ref("");
 const searchResults = ref([]);
+const showSearchBar = ref(false);
+const hideSearchResults = ref(true);
+
 
 const moveToLocation = (result) => {
-  // Extract latitude and longitude from the selected result
   const lat = parseFloat(result.lat);
   const lon = parseFloat(result.lon);
-
-  // Update the center coordinates to move the camera to the selected location
   center.value = [lon, lat];
+  hideSearchResults.value = true;
 };
 
 const performSearch = async () => {
@@ -100,14 +107,14 @@ const performSearch = async () => {
       `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(searchQuery.value)}`
     );
 
-    // Process the search results and limit to, let's say, 5 results
     searchResults.value = response.data.slice(0, 5);
+
+    hideSearchResults.value = false;
   } catch (error) {
     console.error("Error fetching search results:", error);
   }
 };
 
-
 //Show API
 const handleMapClick = async event => {
   const clickedCoordinate = event.coordinate;

From cab24874f74713586277cb087a827c18d82bc58d Mon Sep 17 00:00:00 2001
From: SRP-mango <siriphicha.mango02@gmail.com>
Date: Fri, 15 Sep 2023 01:36:47 +0700
Subject: [PATCH 2/2] toggle search bar

---
 src/views/Home.vue | 38 +++++++++++++++++++++++++++-----------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index 03a2106..e392d98 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -20,6 +20,7 @@
                   v-model="searchQuery"
                   @keyup.enter="performSearch"
                   @input="performSearch"
+                  @click="toggleSearchBar()"
                   density="compact"
                   variant="solo"
                   prepend-inner-icon="mdi-magnify"
@@ -37,13 +38,28 @@
         
       </v-layout>
 
-      <div v-if="!hideSearchResults && searchResults.length > 0" class="search-results">
-        <ul>
-          <li v-for="result in searchResults" :key="result.place_id" @click="moveToLocation(result)">
-            {{ result.display_name }}
-          </li>
-        </ul>
-      </div>
+      <!-- <div v-if="searchResults.length > 0" class="search-results">
+          <ul>
+             <li v-for="result in searchResults" :key="result.place_id" @click="moveToLocation(result)">
+               {{ result.display_name }}
+             </li>
+          </ul>
+      </div> -->
+
+            
+      <v-list v-if="searchResults.length > 0 && !showSearchBar" class="search-results">
+        <v-list-item
+          v-for="result in searchResults"
+          :key="result.place_id"
+          @click="moveToLocation(result),toggleSearchBar()"
+        >
+          <v-list-item-icon>
+            <v-icon>mdi-map-marker</v-icon>
+          </v-list-item-icon>
+          {{ result.display_name }}
+        </v-list-item>
+      </v-list>
+
   <!-- <map/> -->
     <ol-map
     :loadTilesWhileAnimating="true"
@@ -91,14 +107,16 @@ const popupData = ref(null);
 const searchQuery = ref("");
 const searchResults = ref([]);
 const showSearchBar = ref(false);
-const hideSearchResults = ref(true);
 
+const toggleSearchBar = () => {
+  showSearchBar.value = !showSearchBar.value;
+};
 
 const moveToLocation = (result) => {
   const lat = parseFloat(result.lat);
   const lon = parseFloat(result.lon);
   center.value = [lon, lat];
-  hideSearchResults.value = true;
+  showSearchBar.value = false;
 };
 
 const performSearch = async () => {
@@ -108,8 +126,6 @@ const performSearch = async () => {
     );
 
     searchResults.value = response.data.slice(0, 5);
-
-    hideSearchResults.value = false;
   } catch (error) {
     console.error("Error fetching search results:", error);
   }