feat: update URL when usering filter & order_by queries (#344)

openfoodfacts · Feb 17, 2024 · 4a5b9f8 · 4a5b9f8
1 parent f29ad24
commit 4a5b9f8
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 8 deletions.
diff --git a/src/constants.js b/src/constants.js
diff --git a/src/views/BrandDetail.vue b/src/views/BrandDetail.vue
@@ -83,8 +83,8 @@ export default {
       // filter & order
       productFilter: '',
       productFilterList: constants.PRODUCT_FILTER_LIST,
-      productOrder: '-unique_scans_n',
-      productOrderList: constants.PRODUCT_ORDER_LIST,
+      productOrder: constants.PRODUCT_ORDER_BY_LIST[1].key,
+      productOrderList: constants.PRODUCT_ORDER_BY_LIST,
       // data
       brand: null,  // see init
       brandProductList: [],
@@ -107,6 +107,8 @@ export default {
     },
   },
   mounted() {
+    this.productFilter = this.$route.query[constants.FILTER_PARAM] || this.productFilter
+    this.productOrder = this.$route.query[constants.ORDER_BY_PARAM] || this.productOrder
     this.initBrand()
   },
   methods: {
@@ -128,12 +130,14 @@ export default {
     },
     toggleProductFilter(filterKey) {
       this.productFilter = this.productFilter ? '' : filterKey
-      this.initBrand()
+      this.$router.push({ query: { ...this.$route.query, [constants.FILTER_PARAM]: this.productFilter } })
+      // this.initBrand() will be called in watch $route
     },
     selectProductOrder(orderKey) {
       if (this.productOrder !== orderKey) {
         this.productOrder = orderKey
-        this.initBrand()
+        this.$router.push({ query: { ...this.$route.query, [constants.ORDER_BY_PARAM]: this.productOrder } })
+        // this.initBrand() will be called in watch $route
       }
     }
   },

diff --git a/src/views/ProductList.vue b/src/views/ProductList.vue
@@ -60,8 +60,8 @@ export default {
       // filter & order
       productFilter: '',
       productFilterList: constants.PRODUCT_FILTER_LIST,
-      productOrder: '-unique_scans_n',
-      productOrderList: constants.PRODUCT_ORDER_LIST,
+      productOrder: constants.PRODUCT_ORDER_BY_LIST[1].key,
+      productOrderList: constants.PRODUCT_ORDER_BY_LIST,
       // data
       productList: [],
       productTotal: null,
@@ -83,6 +83,8 @@ export default {
     },
   },
   mounted() {
+    this.productFilter = this.$route.query[constants.FILTER_PARAM] || this.productFilter
+    this.productOrder = this.$route.query[constants.ORDER_BY_PARAM] || this.productOrder
     this.initProductList()
   },
   methods: {
@@ -103,11 +105,20 @@ export default {
     },
     toggleProductFilter(filterKey) {
       this.productFilter = this.productFilter ? '' : filterKey
-      this.initProductList()
+      this.$router.push({ query: { ...this.$route.query, [constants.FILTER_PARAM]: this.productFilter } })
+      // this.initProductList() will be called in watch $route
     },
     selectProductOrder(orderKey) {
       if (this.productOrder !== orderKey) {
         this.productOrder = orderKey
+        this.$router.push({ query: { ...this.$route.query, [constants.ORDER_BY_PARAM]: this.productOrder } })
+        // this.initProductList() will be called in watch $route
+      }
+    }
+  },
+  watch: {
+    $route (newRoute, oldRoute) {
+      if (oldRoute.fullPath !== newRoute.fullPath) {
         this.initProductList()
       }
     }