From ad0ac073ab28f62bb731fc1ff1b23c88b440008d Mon Sep 17 00:00:00 2001
From: Vlad Stan <stan.v.vlad@gmail.com>
Date: Fri, 14 Jul 2023 14:28:26 +0300
Subject: [PATCH] feat: add basic stall list

---
 .../customer-stall-list.html                  | 57 +++++++++++++++++++
 .../customer-stall-list.js                    | 20 +++++++
 static/js/market.js                           |  3 +-
 templates/nostrmarket/market.html             | 20 +++++--
 4 files changed, 94 insertions(+), 6 deletions(-)
 create mode 100644 static/components/customer-stall-list/customer-stall-list.html
 create mode 100644 static/components/customer-stall-list/customer-stall-list.js

diff --git a/static/components/customer-stall-list/customer-stall-list.html b/static/components/customer-stall-list/customer-stall-list.html
new file mode 100644
index 0000000..7cdf61b
--- /dev/null
+++ b/static/components/customer-stall-list/customer-stall-list.html
@@ -0,0 +1,57 @@
+<div class="row q-col-gutter-md">
+  <div v-for="stall of stalls" :key="stall.id" class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
+    <q-card class="card--product">
+      <!-- <q-img
+    :src="(product.images && product.images.length > 0 && product.images[0]) ? product.images[0] : '/nostrmarket/static/images/placeholder.png'"
+    alt="Product Image" loading="lazy" spinner-color="white" fit="contain" height="300px"></q-img> -->
+
+      <q-card-section class="q-pb-xs q-pt-md">
+        <div class="row no-wrap items-center">
+          <div class="col text-subtitle2 ellipsis-2-lines">{{ stall.name }}</div>
+        </div>
+
+      </q-card-section>
+
+      <q-card-section class="q-py-sm">
+        <div>
+          <span v-if="stall.currency == 'sat'">
+            <!-- <span class="text-h6">{{ product.price }} sats</span><q-tooltip> BTC {{ (product.price /
+          1e8).toFixed(8) }}</q-tooltip> -->
+            currency sat
+          </span>
+          <span v-else>
+            <span class="text-h6">currency fiat</span>
+          </span>
+          <span class="q-ml-md text-caption text-green-8 text-weight-bolder q-mt-md">product count</span>
+        </div>
+        <div v-if="stall.categories" class="text-subtitle1">
+          <q-virtual-scroll :items="product.categories || []" virtual-scroll-horizontal>
+            <template v-slot="{ item, index }">
+              <q-chip :key="index" dense><span v-text="item"></span></q-chip>
+            </template>
+          </q-virtual-scroll>
+        </div>
+        <div v-else class="text-subtitle1">
+          &nbsp
+        </div>
+
+        <div class="text-caption text-grey ellipsis-2-lines" style="min-height: 40px">
+          <p v-if="stall.description">{{ stall.description }}</p>
+        </div>
+
+
+      </q-card-section>
+
+      <q-separator></q-separator>
+
+      <q-card-actions>
+        <div class="q-ml-auto">
+          <q-btn flat class="text-weight-bold text-capitalize q-ml-auto float-left" dense color="primary"
+            @click="$emit('change-page', 'stall', {stall: stall.id})">
+            Visit Stall
+          </q-btn>
+        </div>
+      </q-card-actions>
+    </q-card>
+  </div>
+</div>
\ No newline at end of file
diff --git a/static/components/customer-stall-list/customer-stall-list.js b/static/components/customer-stall-list/customer-stall-list.js
new file mode 100644
index 0000000..cf6eeec
--- /dev/null
+++ b/static/components/customer-stall-list/customer-stall-list.js
@@ -0,0 +1,20 @@
+async function customerStallList(path) {
+  const template = await loadTemplateAsync(path)
+
+  Vue.component('customer-stall-list', {
+    name: 'customer-stall-list',
+    template,
+
+    props: ['stalls'],
+    data: function () {
+      return {}
+    },
+    computed: {},
+    methods: {
+
+    },
+    created() {
+      console.log('### stalls', this.stalls)
+    }
+  })
+}
diff --git a/static/js/market.js b/static/js/market.js
index d04d2fa..e4ac3f7 100644
--- a/static/js/market.js
+++ b/static/js/market.js
@@ -29,6 +29,7 @@ const market = async () => {
     productCard('static/components/product-card/product-card.html'),
     customerMarket('static/components/customer-market/customer-market.html'),
     customerStall('static/components/customer-stall/customer-stall.html'),
+    customerStallList('static/components/customer-stall-list/customer-stall-list.html'),
     productDetail('static/components/product-detail/product-detail.html'),
     shoppingCart('static/components/shopping-cart/shopping-cart.html'),
     shoppingCartList('static/components/shopping-cart-list/shopping-cart-list.html'),
@@ -75,6 +76,7 @@ const market = async () => {
 
         searchNostr: false,
         filterCategories: [],
+        groupByStall: false,
 
         drawer: true,
         pubkeys: new Set(),
@@ -233,7 +235,6 @@ const market = async () => {
         if (product_id) {
           this.activeProduct = product_id
         }
-        this.activePage = 'stall'
         this.activeStall = stall_id
       }
       if (merchant_pubkey && !this.pubkeys.has(merchant_pubkey)) {
diff --git a/templates/nostrmarket/market.html b/templates/nostrmarket/market.html
index 77f0b70..06c1863 100644
--- a/templates/nostrmarket/market.html
+++ b/templates/nostrmarket/market.html
@@ -235,8 +235,11 @@
         </q-banner>
         <div>
           <q-breadcrumbs class="cursor">
-            <q-breadcrumbs-el :label="'Market'" icon="home" @click="navigateTo('market')"
-              class="cursor-pointer"></q-breadcrumbs-el>
+            <q-breadcrumbs-el :label="'Market'" icon="home" @click="navigateTo('market')" class="cursor-pointer">
+              <q-checkbox v-model="groupByStall" v-if="activePage === 'market'" class="q-pl-md float-right" size="xs"
+                val="xs" label="Group by stalls"></q-checkbox>
+
+            </q-breadcrumbs-el>
             <q-breadcrumbs-el v-if="activePage === 'customer-stall'" :label="stallName"
               @click="navigateTo('stall', {stall: activeStall})" icon="storefront"
               class="cursor-pointer"></q-breadcrumbs-el>
@@ -285,9 +288,14 @@
           :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" :filtered-products="filterProducts"
-          :search-text="searchText" :filter-categories="filterCategories" :styles="config?.opts ?? {}"
-          @change-page="navigateTo" @update-data="updateData" @add-to-cart="addProductToCart"></customer-market>
+        <div v-else>
+          <customer-stall-list v-if="groupByStall" :stalls="stalls"></customer-stall-list>
+
+          <customer-market v-else :search-nostr="searchNostr" :relays="relays" :filtered-products="filterProducts"
+            :search-text="searchText" :filter-categories="filterCategories" :styles="config?.opts ?? {}"
+            @change-page="navigateTo" @update-data="updateData" @add-to-cart="addProductToCart"></customer-market>
+        </div>
+
       </div>
       <div class="col-lg-2 col-md-1 col-sm-0 auto-width"></div>
     </div>
@@ -381,6 +389,8 @@
 <script src="{{ url_for('nostrmarket_static', path='components/product-card/product-card.js') }}"></script>
 <script src="{{ url_for('nostrmarket_static', path='components/customer-market/customer-market.js') }}"></script>
 <script src="{{ url_for('nostrmarket_static', path='components/customer-stall/customer-stall.js') }}"></script>
+<script
+  src="{{ url_for('nostrmarket_static', path='components/customer-stall-list/customer-stall-list.js') }}"></script>
 <script src="{{ url_for('nostrmarket_static', path='components/product-detail/product-detail.js') }}"></script>
 <script src="{{ url_for('nostrmarket_static', path='components/shopping-cart/shopping-cart.js') }}"></script>
 <script src="{{ url_for('nostrmarket_static', path='components/shopping-cart-list/shopping-cart-list.js') }}"></script>