feat: search marketplace

static/components/customer-market/customer-market.html

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

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

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"></customer-stall>
-        <customer-market v-else :search-nostr="searchNostr" :relays="relays" :products="filterProducts"
+        <customer-market v-else :search-nostr="searchNostr" :relays="relays" :products="products" :search-text="searchText"
           :styles="config?.opts ?? {}" @change-page="navigateTo" @update-data="updateData"></customer-market>
       </div>
       <div class="col-lg-2 col-md-1 col-sm-0 auto-width"></div>