diff --git a/src/components/FilterMenu.vue b/src/components/FilterMenu.vue index a9681ec7383..a1b31210b9c 100644 --- 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,6 +56,7 @@ export default { productSourceList: constants.PRODUCT_SOURCE_LIST, productFilterList: constants.PRODUCT_FILTER_LIST, priceFilterList: constants.PRICE_FILTER_LIST, + proofFilterList: constants.PROOF_FILTER_LIST, } }, computed: { @@ -63,7 +64,7 @@ export default { 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 index e205143954c..760e8cf1ca3 100644 --- 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 index 0906c46e9e9..f6136474b77 100644 --- 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 index a63d3e71d57..6c5f617db9b 100644 --- a/src/views/UserDashboardProofList.vue +++ b/src/views/UserDashboardProofList.vue @@ -19,7 +19,8 @@

{{ $t('UserDashboard.LatestProofs') }} - + +

@@ -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