feat(Dashboard): New filtering menu to hide proofs with prices (#723)

openfoodfacts · Aug 18, 2024 · 53310db · 53310db
1 parent 91f511a
commit 53310db
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 5 deletions.
diff --git a/src/components/FilterMenu.vue b/src/components/FilterMenu.vue
@@ -41,9 +41,9 @@ export default {
       default: null
     },
     kind: {
-      // product, price
       type: String,
-      default: 'product'
+      default: 'product',
+      examples: ['product', 'price', 'proof']
     },
     hideSource: {
       type: Boolean,
@@ -56,14 +56,15 @@ export default {
       productSourceList: constants.PRODUCT_SOURCE_LIST,
       productFilterList: constants.PRODUCT_FILTER_LIST,
       priceFilterList: constants.PRICE_FILTER_LIST,
+      proofFilterList: constants.PROOF_FILTER_LIST,
     }
   },
   computed: {
     showSource() {
       return this.kind === 'product' && !this.hideSource
     },
     filterList() {
-      return this.kind === 'product' ? this.productFilterList : this.priceFilterList
+      return this[`${this.kind}FilterList`]
     },
     currentFilterOrSource() {
       return !!this.currentFilter || !!this.currentSource

diff --git a/src/constants.js b/src/constants.js
@@ -47,6 +47,9 @@ export default {
   PRICE_FILTER_LIST: [
     { key: 'only_last_30d', value: 'FilterPriceMoreThan30DaysHide' },
   ],
+  PROOF_FILTER_LIST: [
+    { key: 'hide_price_count_gte_1', value: 'FilterProofWithPriceCountHide' },
+  ],
   ORDER_PARAM: 'order',
   PRODUCT_ORDER_LIST: [
     { key: '-unique_scans_n', value: 'OrderProductUniqueScansDESC', icon: 'mdi-barcode-scan' },

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -136,6 +136,7 @@
 		"Filter": "Filter",
 		"FilterProductWithPriceCountHide": "Hide products with prices",
 		"FilterPriceMoreThan30DaysHide": "Hide prices older than 30 days",
+		"FilterProofWithPriceCountHide": "Hide proofs with prices",
 		"Help": "Help",
 		"Image": "Image",
 		"LinkCopySuccess": "Link copied",

diff --git a/src/views/UserDashboardProofList.vue b/src/views/UserDashboardProofList.vue
@@ -19,7 +19,8 @@
   <h2 class="text-h6 mb-1">
     {{ $t('UserDashboard.LatestProofs') }}
     <v-progress-circular v-if="loading" indeterminate :size="30" />
-    <OrderMenu v-if="!loading" kind="proof" :currentOrder="currentOrder" @update:currentOrder="selectProofOrder($event)" /> 
+    <FilterMenu v-if="!loading" kind="proof" :currentFilter="currentFilter" @update:currentFilter="toggleProofFilter($event)" />
+    <OrderMenu v-if="!loading" kind="proof" :currentOrder="currentOrder" @update:currentOrder="selectProofOrder($event)" />
   </h2>
 
   <v-row>
@@ -54,6 +55,7 @@ import api from '../services/api'
 
 export default {
   components: {
+    FilterMenu: defineAsyncComponent(() => import('../components/FilterMenu.vue')),
     OrderMenu: defineAsyncComponent(() => import('../components/OrderMenu.vue')),
     ProofCard: defineAsyncComponent(() => import('../components/ProofCard.vue')),
   },
@@ -64,7 +66,8 @@ export default {
       userProofPage: 0,
       loading: false,
       proofUpdated: false,
-      // order
+      // filter & order
+      currentFilter: '',
       currentOrder: constants.PROOF_ORDER_LIST[2].key,
     }
   },
@@ -75,6 +78,9 @@ export default {
     },
     getUserProofsParams() {
       let defaultParams = { owner: this.username, order_by: `${this.currentOrder}`, page: this.userProofPage }
+      if (this.currentFilter && this.currentFilter === 'hide_price_count_gte_1') {
+        defaultParams['price_count'] = 0
+      }
       return defaultParams
     },
   },
@@ -109,6 +115,11 @@ export default {
     handleProofUpdated() {
       this.proofUpdated = true
     },
+    toggleProofFilter(filterKey) {
+      this.currentFilter = this.currentFilter ? '' : filterKey
+      this.$router.push({ query: { ...this.$route.query, [constants.FILTER_PARAM]: this.currentFilter } })
+      // this.initUserProofs() will be called in watch $route
+    },
     selectProofOrder(orderKey) {
       if (this.currentOrder !== orderKey) {
         this.currentOrder = orderKey