reset search on click

fix zoom bug

frontend/src/App.vue

@@ -15,6 +15,7 @@
           <router-link
             to="/"
             style="text-decoration: none"
+            @click="resetSearch"
           >
             <v-toolbar-title class="text-white font-weight-medium">
               <span class="font-weight-medium">DAVe</span>
@@ -79,6 +80,7 @@ import InfoMessage from "@/components/app/InfoMessage.vue";
 import SearchInputField from "@/components/app/SearchInputField.vue";
 import VisitHistory from "@/components/app/VisitHistory.vue";
 import TheSnackbar from "@/components/common/TheSnackbar.vue";
+import { useSearchStore } from "@/store/SearchStore";
 import { useSnackbarStore } from "@/store/SnackbarStore";
 import { useUserStore } from "@/store/UserStore";
 import SsoUserInfoResponse from "@/types/app/SsoUserInfoResponse";
@@ -93,6 +95,7 @@ const frontendVersion = ref("");
 
 const snackbarStore = useSnackbarStore();
 const userStore = useUserStore();
+const searchStore = useSearchStore();
 const route = useRoute();
 
 created();
@@ -157,6 +160,10 @@ function shortCuts(event: KeyboardEvent) {
     }
   }
 }
+
+function resetSearch() {
+  searchStore.resetAndTriggerSearch();
+}
 </script>
 
 <style>

frontend/src/components/app/SearchInputField.vue

@@ -72,7 +72,7 @@ import type SucheZaehlstelleSuggestDTO from "@/types/suche/SucheZaehlstelleSugge
 import type SucheZaehlungSuggestDTO from "@/types/suche/SucheZaehlungSuggestDTO";
 
 import { isEmpty, isNil } from "lodash";
-import { onMounted, ref, watch } from "vue";
+import { ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
 import SucheService from "@/api/service/SucheService";
@@ -98,10 +98,6 @@ const router = useRouter();
 const snackbarStore = useSnackbarStore();
 const searchStore = useSearchStore();
 
-onMounted(() => {
-  clearSearch();
-});
-
 function suggest(query: string) {
   if (!isEmpty(query)) {
     lastSuggestQuery.value = query;
@@ -171,8 +167,7 @@ function suggest(query: string) {
 function clearSearch(): void {
   searchQuery.value = "";
   selectedSuggestion.value = undefined;
-  searchStore.setLastSearchQuery(searchQuery.value);
-  search();
+  searchStore.resetAndTriggerSearch();
 }
 
 function searchOrShowSelectedSuggestion() {
@@ -272,9 +267,10 @@ function iconOfSuggestion(type: string) {
 }
 
 watch(
-  () => searchStore.getLastSearchQuery,
+  () => searchStore.getTriggerSearch,
   () => {
     searchQuery.value = searchStore.getLastSearchQuery;
+    selectedSuggestion.value = undefined;
     search();
   }
 );

frontend/src/components/map/ZaehlstelleMap.vue

@@ -311,6 +311,8 @@ function setMarkerToMap() {
     // Zaehlartenmarker erzeugen
     setZaehlartenmarkerToMap();
     map.setView(center.value, zoomValue.value);
+  } else {
+    map.setView(center.value, zoomValue.value);
   }
 }
 

frontend/src/store/SearchStore.ts

@@ -6,21 +6,30 @@ import { computed, ref } from "vue";
 export const useSearchStore = defineStore("searchStore", () => {
   const searchResult = ref<Array<AnzeigeKarteDTO>>([]);
   const lastSearchQuery = ref("");
+  const triggerSearch = ref(false);
 
   const getSearchResult = computed(() => searchResult.value);
   const getLastSearchQuery = computed(() => lastSearchQuery.value);
+  const getTriggerSearch = computed(() => triggerSearch.value);
 
   function setSearchResult(payload: Array<AnzeigeKarteDTO>) {
     searchResult.value = payload;
   }
   function setLastSearchQuery(payload: string) {
     lastSearchQuery.value = payload;
   }
+  function resetAndTriggerSearch() {
+    setSearchResult([]);
+    setLastSearchQuery("");
+    triggerSearch.value = !triggerSearch.value;
+  }
 
   return {
     getSearchResult,
     getLastSearchQuery,
+    getTriggerSearch,
     setSearchResult,
     setLastSearchQuery,
+    resetAndTriggerSearch,
   };
 });