lnbits-exts/nostrmarket
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

feat: search marketplace

Browse source
This commit is contained in:
Vlad Stan 2023-07-12 17:21:41 +03:00
parent c3c141cac4
commit ca46a8f7f3
3 changed files with 52 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

2
static/components/customer-market/customer-market.html
View file

@ -31,7 +31,7 @@
<product-card :product="item" @change-page="changePageM"></product-card>
</div>
</div>
<template v-if="lastProductIndex < products.length" v-slot:loading>
<template v-if="lastProductIndex < filteredProducts.length" v-slot:loading>
<div class="row justify-center q-my-md">
<q-spinner-dots color="primary" size="40px" />
</div>

57
static/components/customer-market/customer-market.js
View file

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