From 3a9440512498065ba7f5c22238bb4886c529877c Mon Sep 17 00:00:00 2001 From: Vlad Stan Date: Fri, 14 Jul 2023 11:12:26 +0300 Subject: [PATCH] fix: filter products at top level --- .../customer-market/customer-market.js | 27 +++---------------- static/js/market.js | 12 +++++++-- templates/nostrmarket/market.html | 2 +- 3 files changed, 15 insertions(+), 26 deletions(-) diff --git a/static/components/customer-market/customer-market.js b/static/components/customer-market/customer-market.js index 703c62b..f4fc3cc 100644 --- a/static/components/customer-market/customer-market.js +++ b/static/components/customer-market/customer-market.js @@ -5,7 +5,7 @@ async function customerMarket(path) { template, props: [ - 'products', + 'filtered-products', 'change-page', 'search-nostr', 'relays', @@ -20,7 +20,6 @@ async function customerMarket(path) { return { search: null, partialProducts: [], - filteredProducts: [], productsPerPage: 12, startIndex: 0, lastProductIndex: 0, @@ -31,11 +30,10 @@ async function customerMarket(path) { searchText: function () { this.refreshProducts() }, - products: function () { + filteredProducts: function () { this.refreshProducts() }, filterCategories: function () { - console.log('### watch filterCategories') this.refreshProducts() } }, @@ -44,7 +42,7 @@ async function customerMarket(path) { this.showProducts = false const searchText = this.searchText?.toLowerCase() || '' this.partialProducts = [] - this.filteredProducts = this.products.filter(p => this.hasCategory(p.categories)) + if (searchText.length < 3) { this.lastProductIndex = Math.min(this.filteredProducts.length, this.productsPerPage) this.partialProducts.push(...this.filteredProducts.slice(0, this.lastProductIndex)) @@ -52,29 +50,13 @@ async function customerMarket(path) { return } - - this.filteredProducts = this.products.filter(p => { - return ( - p.name.toLowerCase().includes(searchText) || - (p.description && - p.description.toLowerCase().includes(searchText)) || - (p.categories && - p.categories.toString().toLowerCase().includes(searchText)) - ) - }) this.startIndex = 0 this.lastProductIndex = Math.min(this.filteredProducts.length, this.productsPerPage) this.partialProducts.push(...this.filteredProducts.slice(0, this.lastProductIndex)) setTimeout(() => { this.showProducts = true }, 0) }, - hasCategory(categories = []) { - if (!this.filterCategories?.length) return true - for (const cat of categories) { - if (this.filterCategories.indexOf(cat) !== -1) return true - } - return false - }, + addToCart(item) { this.$emit('add-to-cart', item) }, @@ -122,7 +104,6 @@ async function customerMarket(path) { } }, created() { - this.filteredProducts = [...this.products] this.lastProductIndex = Math.min(this.filteredProducts.length, 24) this.partialProducts.push(...this.filteredProducts.slice(0, this.lastProductIndex)) } diff --git a/static/js/market.js b/static/js/market.js index 60bfec4..cb13893 100644 --- a/static/js/market.js +++ b/static/js/market.js @@ -111,7 +111,7 @@ const market = async () => { }, computed: { filterProducts() { - let products = this.products + let products = this.products.filter(p => this.hasCategory(p.categories)) if (this.activeStall) { products = products.filter(p => p.stall_id == this.activeStall) } @@ -891,7 +891,15 @@ const market = async () => { } else { this.filterCategories.splice(index, 1) } - } + }, + + hasCategory(categories = []) { + if (!this.filterCategories?.length) return true + for (const cat of categories) { + if (this.filterCategories.indexOf(cat) !== -1) return true + } + return false + }, } }) diff --git a/templates/nostrmarket/market.html b/templates/nostrmarket/market.html index 3675a64..07068af 100644 --- a/templates/nostrmarket/market.html +++ b/templates/nostrmarket/market.html @@ -277,7 +277,7 @@ :products="filterProducts" :stall-products="products.filter(p => p.stall_id == activeStall)" :product-detail="activeProduct" :relays="relays" :account="account" :pool="pool" :styles="config?.opts ?? {}" @login-dialog="openAccountDialog" @change-page="navigateTo" @add-to-cart="addProductToCart"> -