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] 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;