refactor(Search page): Many small improvements on the search form (#582)

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

Hide file tree

Showing 5 changed files with 68 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>
diff --git a/tests/e2e/spec.cy.js b/tests/e2e/spec.cy.js
@@ -1,10 +1,12 @@
 describe('Basic tests', () => {
   beforeEach(() => {
     cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/products?page=1&size=10&order_by=-price_count', { fixture: 'products.json' })
+    cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/products?page=1&size=10&code=3011360030498', { fixture: 'products_3011360030498.json' })
     cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/products/code/3011360030498', { fixture: 'product_3011360030498.json' })
     cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/products/code/0000000000000', { statusCode: 404, body: { "detail": "Product with code 35647000112700 not found" }})
     cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/prices?page=1&size=1&order_by=-created*', { fixture: 'prices.json' })
     cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/prices?page=1&size=10&order_by=-created', { fixture: 'prices.json' })
+    cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/prices?page=1&size=1&order_by=-date&product_code=3011360030498', { fixture: 'product_3011360030498_prices.json' })
     cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/prices?page=1&size=10&order_by=-date&product_code=3011360030498', { fixture: 'product_3011360030498_prices.json' })
     cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/prices?page=1&size=10&order_by=-date&category_tag=en%3Apitted-apricot', { fixture: 'pitted_apricot_prices.json' })
     cy.intercept('GET', 'http://127.0.0.1:8000/api/v1/prices?page=1&size=10&order_by=-date&category_tag=en%3Aaaaaaaaaaaaa', { body: {"items":[],"total":0,"page":1,"size":10,"pages":0} })
@@ -81,4 +83,15 @@ describe('Basic tests', () => {
     cy.get('[data-name="price-card"]').should('have.length', 0)
     cy.contains('Load more').should('not.exist')
   })
+
+  it('displays the search page', () => {
+    cy.visit('/search?q=3011360030498')
+    cy.contains('Welcome to Open Prices!').should('not.exist')
+    cy.get('#product-title').contains('Mayonnaise Classique')
+    cy.get('#price-count').contains('1')
+    cy.contains('Latest price')
+    cy.get('[data-name="product-missing-chip"]').should('have.length', 0)
+    cy.get('[data-name="price-card"]').should('have.length', 0)
+    cy.contains('Load more').should('not.exist')
+  })
 })
diff --git a/tests/fixtures/products_3011360030498.json b/tests/fixtures/products_3011360030498.json
@@ -0,0 +1,28 @@
+{
+    "items": [
+        {
+            "code": "3011360030498",
+            "price_count": 1,
+            "id": 368,
+            "source": "off",
+            "product_name": "Mayonnaise Classique",
+            "product_quantity": 175,
+            "product_quantity_unit": null,
+            "categories_tags": [],
+            "brands": "Lesieur",
+            "brands_tags": [],
+            "labels_tags": [],
+            "image_url": "https://images.openfoodfacts.net/images/products/301/136/003/0498/front_en.119.400.jpg",
+            "nutriscore_grade": null,
+            "ecoscore_grade": null,
+            "nova_group": null,
+            "unique_scans_n": 78,
+            "created": "2024-02-18T19:39:38.162303+01:00",
+            "updated": "2024-02-18T19:39:38.186691+01:00"
+        }
+    ],
+    "total": 1,
+    "page": 1,
+    "size": 10,
+    "pages": 1
+}