feat: select category

static/js/market.js

@@ -74,6 +74,8 @@ const market = async () => {
         },
 
         searchNostr: false,
+        filterCategories: [],
+
         drawer: true,
         pubkeys: new Set(),
         relays: new Set(),
@@ -157,7 +159,11 @@ const market = async () => {
           return all
         }, {})
         const x = Object.keys(countedCategories)
-          .map(category => ({ category, count: countedCategories[category] }))
+          .map(category => ({
+            category,
+            count: countedCategories[category],
+            selected: this.filterCategories.indexOf(category) !== -1
+          }))
           .sort((a, b) => b.count - a.count)
         console.log('### x', x)
         return x
@@ -861,7 +867,6 @@ const market = async () => {
           order = order.eventCreatedAt < eventCreatedAt ? { ...order, ...orderUpdate } : { ...orderUpdate, ...order }
         }
 
-        // orders = [order].concat(orders.filter(o => o.id !== order.id))
         orders.splice(orderIndex, 1, order)
         this.orders[pubkey] = orders
         this.orders = { ...this.orders }
@@ -877,6 +882,15 @@ const market = async () => {
           dismissMsg: null,
           show: true
         }
+      },
+
+      toggleCategoryFilter(category) {
+        const index = this.filterCategories.indexOf(category)
+        if (index === -1) {
+          this.filterCategories.push(category)
+        } else {
+          this.filterCategories.splice(index, 1)
+        }
       }
 
     }

templates/nostrmarket/market.html

@@ -213,9 +213,10 @@
         <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 :key="index" :color="item.selected ? 'grey': ''" class="cursor-pointer q-mb-md">
+                <span v-text="item.category" @click="toggleCategoryFilter(item.category)"></span>
+                <q-badge @click="toggleCategoryFilter(item.category)" rounded class="q-ml-sm" color="secondary"> <span
+                    v-text="item.count"></span></q-badge>
               </q-chip>
             </template>
           </q-virtual-scroll>