PR feedback. Also reset search on route change

gardener · Jul 10, 2024 · 4b46049 · 4b46049
1 parent a377133
commit 4b46049
Showing 1 changed file with 25 additions and 15 deletions.
diff --git a/frontend/src/views/GShootList.vue b/frontend/src/views/GShootList.vue
@@ -86,7 +86,7 @@ SPDX-License-Identifier: Apache-2.0
                 density="compact"
                 class="g-table-search-field mr-3"
                 @update:model-value="onUpdateShootSearch"
-                @keyup.esc="resetShootSearch"
+                @keyup.esc="setShootSearch(null)"
               />
             </template>
             Search terms are <span class="font-weight-bold">ANDed</span>.<br>
@@ -292,13 +292,15 @@ export default {
     })
   },
   beforeRouteUpdate (to, from, next) {
-    this.resetShootSearch()
+    const searchQuery = to.fullPath === from.fullPath ? to.params.q : null
+
+    this.setShootSearch(searchQuery)
     this.updateTableSettings()
     this.focusModeInternal = false
     next()
   },
   beforeRouteLeave (to, from, next) {
-    this.resetShootSearch()
+    this.setShootSearch(null)
     this.focusModeInternal = false
     next()
   },
@@ -317,21 +319,36 @@ export default {
     const shootSearch = ref(params.q)
     const debouncedShootSearch = ref(shootSearch.value)
 
-    watch(params, value => {
-      if (value.q !== shootSearch.value) {
-        debouncedShootSearch.value = shootSearch.value = value.q
+    function setShootSearch (value) {
+      debouncedShootSearch.value = shootSearch.value = value
+    }
+
+    const setDebouncedShootSearch = debounce(() => {
+      debouncedShootSearch.value = shootSearch.value
+    }, 500)
+
+    watch(() => params.q, value => {
+      if (shootSearch.value !== value) {
+        setShootSearch(value)
       }
     })
 
-    watch(shootSearch, value => {
-      params.q = value
+    watch(debouncedShootSearch, value => {
+      if (!value) {
+        params.q = null
+      } else if (params.q !== value) {
+        params.q = value
+      }
     })
 
     return {
       activePopoverKey,
       shootCustomFields,
       shootSearch,
       debouncedShootSearch,
+      params,
+      setShootSearch,
+      setDebouncedShootSearch,
     }
   },
   data () {
@@ -791,10 +808,6 @@ export default {
       'setFocusMode',
       'setSortBy',
     ]),
-    resetShootSearch () {
-      this.shootSearch = null
-      this.debouncedShootSearch = null
-    },
     async showDialog (args) {
       switch (args.action) {
         case 'access':
@@ -862,9 +875,6 @@ export default {
 
       this.setDebouncedShootSearch()
     },
-    setDebouncedShootSearch: debounce(function () {
-      this.debouncedShootSearch = this.shootSearch
-    }, 500),
   },
 }
 </script>