diff --git a/static/components/customer-market/customer-market.html b/static/components/customer-market/customer-market.html
index 1fb88b9..356fd1d 100644
--- a/static/components/customer-market/customer-market.html
+++ b/static/components/customer-market/customer-market.html
@@ -31,7 +31,7 @@
-
+
diff --git a/static/components/customer-market/customer-market.js b/static/components/customer-market/customer-market.js
index 0c7698c..521bff4 100644
--- a/static/components/customer-market/customer-market.js
+++ b/static/components/customer-market/customer-market.js
@@ -11,18 +11,59 @@ async function customerMarket(path) {
'relays',
'update-products',
'update-stalls',
- 'styles'
+ 'styles',
+
+ 'search-text'
],
data: function () {
return {
search: null,
partialProducts: [],
+ filteredProducts: [],
productsPerPage: 24,
startIndex: 0,
- lastProductIndex: 0
+ lastProductIndex: 0,
+ showProducts: true,
+ }
+ },
+ watch: {
+ searchText: function () {
+ this.refreshProducts()
+ },
+ products: function () {
+ this.refreshProducts()
}
},
methods: {
+ refreshProducts: function() {
+ this.showProducts = false
+ const searchText = this.searchText?.toLowerCase() || ''
+ this.partialProducts = []
+ if (searchText.length < 3) {
+ this.filteredProducts = [...this.products]
+ this.lastProductIndex = Math.min(this.filteredProducts.length, 24)
+ this.partialProducts.push(...this.filteredProducts.slice(0, this.lastProductIndex))
+ setTimeout(() => this.showProducts = true, 0)
+ 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, 24)
+ this.partialProducts.push(...this.filteredProducts.slice(0, this.lastProductIndex))
+
+ setTimeout(() => { this.showProducts = true }, 0)
+ console.log('### xxx this.filteredProducts', this.lastProductIndex, this.filteredProducts)
+ },
changePageM(page, opts) {
this.$emit('change-page', page, opts)
},
@@ -55,20 +96,22 @@ async function customerMarket(path) {
},
onLoad(_, done) {
setTimeout(() => {
- if (this.startIndex >= this.products.length) {
+ if (this.startIndex >= this.filteredProducts.length) {
done()
return
}
this.startIndex = this.lastProductIndex
- this.lastProductIndex = Math.min(this.products.length, this.lastProductIndex + this.productsPerPage)
- this.partialProducts.push(...this.products.slice(this.startIndex, this.lastProductIndex))
+ this.lastProductIndex = Math.min(this.filteredProducts.length, this.lastProductIndex + this.productsPerPage)
+ this.partialProducts.push(...this.filteredProducts.slice(this.startIndex, this.lastProductIndex))
done()
}, 100)
}
},
created() {
- this.lastProductIndex = Math.min(this.products.length, 24)
- this.partialProducts.push(...this.products.slice(0, this.lastProductIndex))
+ this.filteredProducts = [...this.products]
+ console.log('#### created this.filteredProducts', this.filteredProducts)
+ this.lastProductIndex = Math.min(this.filteredProducts.length, 24)
+ this.partialProducts.push(...this.filteredProducts.slice(0, this.lastProductIndex))
}
})
}
diff --git a/templates/nostrmarket/market.html b/templates/nostrmarket/market.html
index afeea13..a3831d1 100644
--- a/templates/nostrmarket/market.html
+++ b/templates/nostrmarket/market.html
@@ -224,7 +224,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">
-