refactor(Search page): many small improvements on the search form

openfoodfacts · May 23, 2024 · edcdf3a · edcdf3a
1 parent 2092f48
commit edcdf3a
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 5 deletions.
diff --git a/src/components/LocationSelectorDialog.vue b/src/components/LocationSelectorDialog.vue
@@ -169,6 +169,7 @@ export default {
       }
     },
     search() {
+      this.$refs.locationInput.blur()
       this.results = null
       this.loading = true
       api.openstreetmapSearch(this.locationSearchForm.q, this.searchProvider)

diff --git a/src/constants.js b/src/constants.js
@@ -33,6 +33,7 @@ export default {
     { key: 'opf', value: OPF_NAME, icon: OPF_ICON },
     { key: 'opff', value: OPFF_NAME, icon: OPFF_ICON },
   ],
+  QUERY_PARAM: 'q',
   FILTER_PARAM: 'filter',
   PRODUCT_FILTER_LIST: [
     { key: 'hide_price_count_gte_1', value: 'FilterProductWithPriceCountHide' },

diff --git a/src/views/Search.vue b/src/views/Search.vue
@@ -8,17 +8,21 @@
     <v-col>
       <v-form @submit.prevent="search">
         <v-text-field
+          ref="searchInput"
           v-model="productSearchForm.q"
           :label="$t('Search.ProductBarcode')"
           type="number"
           inputmode="numeric"
-          :prepend-inner-icon="formFilled ? 'mdi-barcode' : 'mdi-barcode-scan'"
-          append-inner-icon="mdi-magnify"
-          @click:prepend-inner="showBarcodeScannerDialog"
-          @click:append-inner="search"
           :rules="[fieldRequired]"
+          hide-details="auto"
           :loading="loading"
           required>
+          <template v-slot:prepend-inner>
+            <v-icon :icon="formFilled ? 'mdi-barcode' : 'mdi-barcode-scan'" @click="showBarcodeScannerDialog"></v-icon>
+          </template>
+          <template v-slot:append-inner>
+            <v-icon icon="mdi-magnify" @click="search"></v-icon>
+          </template>
         </v-text-field>
       </v-form>
     </v-col>
@@ -44,6 +48,7 @@
 
 <script>
 import { defineAsyncComponent } from 'vue'
+import constants from '../constants'
 import api from '../services/api'
 
 export default {
@@ -68,21 +73,29 @@ export default {
       return Object.values(this.productSearchForm).every(x => !!x)
     }
   },
+  mounted() {
+    this.productSearchForm.q = this.$route.query[constants.QUERY_PARAM] || ''
+    if (this.productSearchForm.q) {
+      this.getProducts()
+    }
+  },
   methods: {
     fieldRequired(v) {
       return !!v
     },
     showBarcodeScannerDialog() {
+      this.$refs.searchInput.blur()
       this.barcodeScannerDialog = true
     },
     setProductCode(code) {
       this.productSearchForm.q = code
       this.search()
     },
     search() {
+      this.$refs.searchInput.blur()
       this.productList = []
       this.productTotal = null
-      this.getProducts()
+      this.$router.push({ query: { ...this.$route.query, [constants.QUERY_PARAM]: this.productSearchForm.q } })
     },
     getProducts() {
       this.loading = true
@@ -111,6 +124,13 @@ export default {
           }
         })
     }
+  },
+  watch: {
+    $route (newRoute, oldRoute) { // only called when query changes to avoid having an API call when the path changes
+      if (oldRoute.path === newRoute.path && JSON.stringify(oldRoute.query) !== JSON.stringify(newRoute.query)) {
+        this.getProducts()
+      }
+    }
   }
 }
 </script>