refactor(Product list): add filter to hide products without prices (#904

)
openfoodfacts · Oct 1, 2024 · 03bcec7 · 03bcec7
1 parent 89f96a3
commit 03bcec7
Show file tree

Hide file tree

Showing 12 changed files with 62 additions and 41 deletions.
diff --git a/src/components/FilterMenu.vue b/src/components/FilterMenu.vue
@@ -38,7 +38,7 @@ export default {
     kind: {
       type: String,
       default: 'product',
-      examples: ['product', 'price', 'proof']
+      examples: ['product', 'price', 'proof', 'location', 'user']
     },
     currentFilter: {
       type: String,
@@ -56,12 +56,14 @@ export default {
   emits: ['update:currentFilter', 'update:currentSource'],
   data() {
     return {
-      productSourceList: constants.PRODUCT_SOURCE_LIST,
+      // default filters
       productFilterList: constants.PRODUCT_FILTER_LIST,
       priceFilterList: constants.PRICE_FILTER_LIST,
       proofFilterList: constants.PROOF_FILTER_LIST,
       locationFilterList: constants.LOCATION_FILTER_LIST,
       userFilterList: constants.USER_FILTER_LIST,
+      // other filters
+      productSourceList: constants.PRODUCT_SOURCE_LIST,
     }
   },
   computed: {

diff --git a/src/constants.js b/src/constants.js
@@ -50,7 +50,8 @@ export default {
   QUERY_PARAM: 'q',
   FILTER_PARAM: 'filter',
   PRODUCT_FILTER_LIST: [
-    { key: 'hide_price_count_gte_1', value: 'FilterProductWithPriceCountHide' },
+    { key: 'price_count_gte_1', value: 'FilterProductWithPriceCount' },
+    { key: 'price_count_0', value: 'FilterProductWithoutPriceCount' },
   ],
   PRICE_FILTER_LIST: [
     { key: 'only_last_30d', value: 'FilterPriceMoreThan30DaysHide' },

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -187,7 +187,9 @@
 		"ExamplesWithColon": "Examples:",
 		"Edit": "Edit",
 		"Filter": "Filter",
+		"FilterProductWithPriceCount": "With a price",
 		"FilterProductWithPriceCountHide": "Hide products with prices",
+		"FilterProductWithoutPriceCount": "Without prices",
 		"FilterPriceMoreThan30DaysHide": "Hide prices older than 30 days",
 		"FilterProofWithPriceCountHide": "Hide proofs with prices",
 		"FilterLocationWithPriceCountHide": "Hide locations with prices",

diff --git a/src/views/BrandDetail.vue b/src/views/BrandDetail.vue
@@ -5,14 +5,14 @@
     </v-col>
   </v-row>
 
-  <v-row>
+  <v-row v-if="!loading">
     <v-col>
       <h2 class="text-h6 d-inline mr-1">
         {{ $t('Common.TopProducts') }}
       </h2>
-      <LoadedCountChip v-if="!loading" :loadedCount="brandProductList.length" :totalCount="brandProductTotal" />
-      <FilterMenu v-if="!loading" kind="product" :currentFilter="currentFilter" :hideSource="true" @update:currentFilter="toggleProductFilter($event)" />
-      <OrderMenu v-if="!loading" kind="product" :currentOrder="currentOrder" @update:currentOrder="selectProductOrder($event)" />
+      <LoadedCountChip :loadedCount="brandProductList.length" :totalCount="brandProductTotal" />
+      <FilterMenu kind="product" :currentFilter="currentFilter" :hideSource="true" @update:currentFilter="toggleProductFilter($event)" />
+      <OrderMenu kind="product" :currentOrder="currentOrder" @update:currentOrder="selectProductOrder($event)" />
     </v-col>
   </v-row>
 
@@ -59,8 +59,12 @@ export default {
   computed: {
     getProductsParams() {
       let defaultParams = { brands__like: this.brandId, order_by: `${this.currentOrder}`, page: this.brandProductPage }
-      if (this.currentFilter && this.currentFilter === 'hide_price_count_gte_1') {
-        defaultParams['price_count'] = 0
+      if (this.currentFilter) {
+        if (this.currentFilter === 'price_count_gte_1') {
+          defaultParams['price_count__gte'] = 1
+        } else if (this.currentFilter === 'price_count_0') {
+          defaultParams['price_count'] = 0
+        }
       }
       return defaultParams
     },
@@ -103,7 +107,7 @@ export default {
         })
     },
     toggleProductFilter(filterKey) {
-      this.currentFilter = this.currentFilter ? '' : filterKey
+      this.currentFilter = (this.currentFilter !== filterKey) ? filterKey : ''
       this.$router.push({ query: { ...this.$route.query, [constants.FILTER_PARAM]: this.currentFilter } })
       // this.initBrand() will be called in watch $route
     },

diff --git a/src/views/CategoryDetail.vue b/src/views/CategoryDetail.vue
@@ -5,14 +5,14 @@
     </v-col>
   </v-row>
 
-  <v-row>
+  <v-row v-if="!loading">
     <v-col>
       <h2 class="text-h6 d-inline mr-1">
         {{ $t('Common.TopProducts') }}
       </h2>
-      <LoadedCountChip v-if="!loading" :loadedCount="categoryProductList.length" :totalCount="categoryProductTotal" />
-      <FilterMenu v-if="!loading" kind="product" :currentFilter="currentFilter" :hideSource="true" @update:currentFilter="toggleProductFilter($event)" />
-      <OrderMenu v-if="!loading" kind="product" :currentOrder="currentOrder" @update:currentOrder="selectProductOrder($event)" />
+      <LoadedCountChip :loadedCount="categoryProductList.length" :totalCount="categoryProductTotal" />
+      <FilterMenu kind="product" :currentFilter="currentFilter" :hideSource="true" @update:currentFilter="toggleProductFilter($event)" />
+      <OrderMenu kind="product" :currentOrder="currentOrder" @update:currentOrder="selectProductOrder($event)" />
     </v-col>
   </v-row>
 
@@ -60,8 +60,12 @@ export default {
   computed: {
     getProductsParams() {
       let defaultParams = { categories_tags__contains: this.category.id, order_by: `${this.currentOrder}`, page: this.categoryProductPage }
-      if (this.currentFilter && this.currentFilter === 'hide_price_count_gte_1') {
-        defaultParams['price_count'] = 0
+      if (this.currentFilter) {
+        if (this.currentFilter === 'price_count_gte_1') {
+          defaultParams['price_count__gte'] = 1
+        } else if (this.currentFilter === 'price_count_0') {
+          defaultParams['price_count'] = 0
+        }
       }
       return defaultParams
     },
@@ -105,7 +109,7 @@ export default {
         })
     },
     toggleProductFilter(filterKey) {
-      this.currentFilter = this.currentFilter ? '' : filterKey
+      this.currentFilter = (this.currentFilter !== filterKey) ? filterKey : ''
       this.$router.push({ query: { ...this.$route.query, [constants.FILTER_PARAM]: this.currentFilter } })
       // this.initCategory() will be called in watch $route
     },

diff --git a/src/views/LabelDetail.vue b/src/views/LabelDetail.vue
@@ -5,14 +5,14 @@
     </v-col>
   </v-row>
 
-  <v-row>
+  <v-row v-if="!loading">
     <v-col>
       <h2 class="text-h6 d-inline mr-1">
         {{ $t('Common.TopProducts') }}
       </h2>
-      <LoadedCountChip v-if="!loading" :loadedCount="labelProductList.length" :totalCount="labelProductTotal" />
-      <FilterMenu v-if="!loading" kind="product" :currentFilter="currentFilter" :hideSource="true" @update:currentFilter="toggleProductFilter($event)" />
-      <OrderMenu v-if="!loading" kind="product" :currentOrder="currentOrder" @update:currentOrder="selectProductOrder($event)" />
+      <LoadedCountChip :loadedCount="labelProductList.length" :totalCount="labelProductTotal" />
+      <FilterMenu kind="product" :currentFilter="currentFilter" :hideSource="true" @update:currentFilter="toggleProductFilter($event)" />
+      <OrderMenu kind="product" :currentOrder="currentOrder" @update:currentOrder="selectProductOrder($event)" />
     </v-col>
   </v-row>
 
@@ -60,8 +60,12 @@ export default {
   computed: {
     getProductsParams() {
       let defaultParams = { labels_tags__contains: this.label.id, order_by: `${this.currentOrder}`, page: this.labelProductPage }
-      if (this.currentFilter && this.currentFilter === 'hide_price_count_gte_1') {
-        defaultParams['price_count'] = 0
+      if (this.currentFilter) {
+        if (this.currentFilter === 'price_count_gte_1') {
+          defaultParams['price_count__gte'] = 1
+        } else if (this.currentFilter === 'price_count_0') {
+          defaultParams['price_count'] = 0
+        }
       }
       return defaultParams
     },
@@ -105,7 +109,7 @@ export default {
         })
     },
     toggleProductFilter(filterKey) {
-      this.currentFilter = this.currentFilter ? '' : filterKey
+      this.currentFilter = (this.currentFilter !== filterKey) ? filterKey : ''
       this.$router.push({ query: { ...this.$route.query, [constants.FILTER_PARAM]: this.currentFilter } })
       // this.initLabel() will be called in watch $route
     },

diff --git a/src/views/LocationDetail.vue b/src/views/LocationDetail.vue
@@ -13,14 +13,14 @@
     </v-col>
   </v-row>
 
-  <v-row>
+  <v-row v-if="!loading">
     <v-col>
       <h2 class="text-h6 d-inline mr-1">
         {{ $t('Common.LatestPrices') }}
       </h2>
-      <LoadedCountChip v-if="!loading" :loadedCount="locationPriceList.length" :totalCount="locationPriceTotal" />
-      <FilterMenu v-if="!loading" kind="price" :currentFilter="currentFilter" @update:currentFilter="togglePriceFilter($event)" />
-      <OrderMenu v-if="!loading" kind="price" :currentOrder="currentOrder" @update:currentOrder="selectPriceOrder($event)" />
+      <LoadedCountChip :loadedCount="locationPriceList.length" :totalCount="locationPriceTotal" />
+      <FilterMenu kind="price" :currentFilter="currentFilter" @update:currentFilter="togglePriceFilter($event)" />
+      <OrderMenu kind="price" :currentOrder="currentOrder" @update:currentOrder="selectPriceOrder($event)" />
     </v-col>
   </v-row>
 

diff --git a/src/views/LocationList.vue b/src/views/LocationList.vue
@@ -8,7 +8,7 @@
       <v-chip label variant="text" prepend-icon="mdi-map-marker-outline">
         {{ $t('LocationList.LocationTotal', { count: locationTotal }) }}
       </v-chip>
-      <FilterMenu v-if="!loading" kind="location" :currentFilter="currentFilter" @update:currentFilter="toggleLocationFilter($event)" />
+      <FilterMenu kind="location" :currentFilter="currentFilter" @update:currentFilter="toggleLocationFilter($event)" />
       <OrderMenu kind="location" :currentOrder="currentOrder" @update:currentOrder="selectLocationOrder($event)" />
     </v-col>
   </v-row>

diff --git a/src/views/ProductList.vue b/src/views/ProductList.vue
@@ -54,8 +54,12 @@ export default {
   computed: {
     getProductsParams() {
       let defaultParams = { order_by: this.currentOrder, page: this.productPage }
-      if (this.currentFilter && this.currentFilter === 'hide_price_count_gte_1') {
-        defaultParams['price_count'] = 0
+      if (this.currentFilter) {
+        if (this.currentFilter === 'price_count_gte_1') {
+          defaultParams['price_count__gte'] = 1
+        } else if (this.currentFilter === 'price_count_0') {
+          defaultParams['price_count'] = 0
+        }
       }
       if (this.currentSource) {
         defaultParams['source'] = this.currentSource
@@ -101,7 +105,7 @@ export default {
         })
     },
     toggleProductFilter(filterKey) {
-      this.currentFilter = this.currentFilter ? '' : filterKey
+      this.currentFilter = (this.currentFilter !== filterKey) ? filterKey : ''
       this.$router.push({ query: { ...this.$route.query, [constants.FILTER_PARAM]: this.currentFilter } })
       // this.initProductList() will be called in watch $route
     },

diff --git a/src/views/UserDashboardProofList.vue b/src/views/UserDashboardProofList.vue
@@ -14,14 +14,14 @@
     </v-col>
   </v-row>
 
-  <v-row>
+  <v-row v-if="!loading">
     <v-col>
       <h2 class="text-h6 d-inline mr-1">
         {{ $t('Common.LatestProofs') }}
       </h2>
-      <LoadedCountChip v-if="!loading" :loadedCount="userProofList.length" :totalCount="userProofTotal" />
-      <FilterMenu v-if="!loading" kind="proof" :currentFilter="currentFilter" @update:currentFilter="toggleProofFilter($event)" />
-      <OrderMenu v-if="!loading" kind="proof" :currentOrder="currentOrder" @update:currentOrder="selectProofOrder($event)" />
+      <LoadedCountChip :loadedCount="userProofList.length" :totalCount="userProofTotal" />
+      <FilterMenu kind="proof" :currentFilter="currentFilter" @update:currentFilter="toggleProofFilter($event)" />
+      <OrderMenu kind="proof" :currentOrder="currentOrder" @update:currentOrder="selectProofOrder($event)" />
     </v-col>
   </v-row>
 

diff --git a/src/views/UserDetail.vue b/src/views/UserDetail.vue
@@ -5,14 +5,14 @@
     </v-col>
   </v-row>
 
-  <v-row>
+  <v-row v-if="!loading">
     <v-col>
       <h2 class="text-h6 d-inline mr-1">
         {{ $t('Common.LatestPrices') }}
       </h2>
-      <LoadedCountChip v-if="!loading" :loadedCount="userPriceList.length" :totalCount="userPriceTotal" />
-      <FilterMenu v-if="!loading" kind="price" :currentFilter="currentFilter" @update:currentFilter="togglePriceFilter($event)" />
-      <OrderMenu v-if="!loading" kind="price" :currentOrder="currentOrder" @update:currentOrder="selectPriceOrder($event)" />
+      <LoadedCountChip :loadedCount="userPriceList.length" :totalCount="userPriceTotal" />
+      <FilterMenu kind="price" :currentFilter="currentFilter" @update:currentFilter="togglePriceFilter($event)" />
+      <OrderMenu kind="price" :currentOrder="currentOrder" @update:currentOrder="selectPriceOrder($event)" />
     </v-col>
   </v-row>
 

diff --git a/src/views/UserList.vue b/src/views/UserList.vue
@@ -8,7 +8,7 @@
       <v-chip label variant="text" prepend-icon="mdi-account-badge-outline">
         {{ $t('UserList.UserTotal', { count: userTotal }) }}
       </v-chip>
-      <FilterMenu v-if="!loading" kind="user" :currentFilter="currentFilter" @update:currentFilter="toggleUserFilter($event)" />
+      <FilterMenu kind="user" :currentFilter="currentFilter" @update:currentFilter="toggleUserFilter($event)" />
       <OrderMenu kind="user" :currentOrder="currentOrder" @update:currentOrder="selectUserOrder($event)" />
     </v-col>
   </v-row>