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

feat: show market categories

Browse source
This commit is contained in:
Vlad Stan 2023-07-13 18:39:07 +03:00
parent 27e55b00b3
commit 79ce34467c
2 changed files with 36 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

13
static/js/market.js
View file

@ -148,6 +148,19 @@ const market = async () => {
allCartsItemCount() {
return this.shoppingCarts.map(s => s.products).flat().reduce((t, p) => t + p.orderedQuantity, 0)
},
allCategories() {
const categories = this.products.map(p => p.categories).flat().filter(c => !!c)
const countedCategories = categories.reduce((all, c) => {
all[c] = (all[c] || 0) + 1
return all
}, {})
const x = Object.keys(countedCategories)
.map(category => ({ category, count: countedCategories[category] }))
.sort((a,b) => b.count - a.count)
console.log('### x', x)
return x
}
},
async created() {

24
templates/nostrmarket/market.html
View file

@ -159,7 +159,6 @@
<div class="row q-mb-sm">
<div class="col-lg-2 col-md-1 col-sm-0"></div>
<div class="col-lg-8 col-md-10 col-sm-12 auto-width">
<div class="row q-mb-md q-pa-none">
<q-toolbar class="col-lg-1 col-md-1 col-sm-0 q-pl-none">
<q-avatar rounded size="64px" class="q-ma-none q-pa-none gt-sm">
@ -204,7 +203,30 @@
</q-toolbar>
</div>
</div>
<div class="col-lg-2 col-md-1 col-sm-0"></div>
</div>
<div class="row q-mb-sm">
<div class="col-lg-2 col-md-1 col-sm-0"></div>
<div class="col-lg-8 col-md-10 col-sm-12">
<div v-if="products?.length" class="gt-sm">
<q-virtual-scroll :items="allCategories" virtual-scroll-horizontal>
<template v-slot="{ item, index }">
<q-chip :key="index" class="cursor-pointer q-mb-md">
<span v-text="item.category"></span>
<q-badge rounded class="q-ml-sm" color="secondary"> <span v-text="item.count"></span></q-badge>
</q-chip>
</template>
</q-virtual-scroll>
</div>
</div>
<div class="col-lg-2 col-md-1 col-sm-0"></div>
</div>
<div class="row q-mb-sm">
<div class="col-lg-2 col-md-1 col-sm-0"></div>
<div class="col-lg-8 col-md-10 col-sm-12 auto-width">
<q-banner class="row q-pa-none q-mb-lg gt-sm shadow-2">
<q-img
src="https://raw.githubusercontent.com/nostr-resources/nostr-resources.github.io/master/assets/images/cover.png"