routing done

static/components/customer-stall/customer-stall.html

@@ -10,94 +10,25 @@
       <q-breadcrumbs-el :label="stall.name" icon="widgets"></q-breadcrumbs-el>
     </q-breadcrumbs>
     <q-toolbar-title></q-toolbar-title>
-    <q-btn dense round flat icon="shopping_cart" class="q-ml-md"></q-btn>
+    <shopping-cart></shopping-cart>
   </q-toolbar>
-  <product-detail v-if="productDetail" :product="mock"></product-detail>
+  <div class="row">
+    <product-detail
+      class="col-12"
+      v-if="productDetail && product"
+      :product="product"
+    ></product-detail>
+    <div class="col-12 q-my-lg">
+      <q-separator></q-separator>
+    </div>
+  </div>
   <div class="row q-col-gutter-md">
     <div
       class="col-xs-12 col-sm-6 col-md-4 col-lg-3"
       v-for="(item, idx) in products"
       :key="idx"
     >
-      <q-card class="card--product">
-        <q-img
-          :src="item.image ? item.image : '/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">
-          <q-btn
-            round
-            :disabled="item.amount < 1"
-            color="primary"
-            icon="shopping_cart"
-            size="lg"
-            style="
-              position: absolute;
-              top: 0;
-              right: 0;
-              transform: translate(-50%, -50%);
-            "
-            @click=""
-            ><q-tooltip> Add to cart </q-tooltip></q-btn
-          >
-          <div class="row no-wrap items-center">
-            <div class="col text-subtitle2 ellipsis-2-lines">
-              {{ item.name }}
-            </div>
-          </div>
-
-          <!-- <q-rating v-model="stars" color="orange" :max="5" readonly size="17px"></q-rating> -->
-        </q-card-section>
-
-        <q-card-section class="q-py-sm">
-          <div>
-            <div class="text-caption text-weight-bolder">
-              {{ item.stallName }}
-            </div>
-            <span v-if="item.currency == 'sat'">
-              <span class="text-h6">{{ item.price }} sats</span
-              ><span class="q-ml-sm text-grey-6"
-                >BTC {{ (item.price / 1e8).toFixed(8) }}</span
-              >
-            </span>
-            <span v-else>
-              <span class="text-h6">{{ item.formatedPrice }}</span>
-              <span v-if="exchangeRates" class="q-ml-sm text-grey-6"
-                >({{ item.priceInSats }} sats)</span
-              >
-            </span>
-            <span
-              class="q-ml-md text-caption text-green-8 text-weight-bolder q-mt-md"
-              >{{ item.amount }} left</span
-            >
-          </div>
-          <div v-if="item.categories" class="text-subtitle1">
-            <q-chip v-for="(cat, i) in item.categories" :key="i" dense
-              >{{cat}}</q-chip
-            >
-          </div>
-          <div
-            class="text-caption text-grey ellipsis-2-lines"
-            style="min-height: 40px"
-          >
-            <p v-if="item.description">{{ item.description }}</p>
-          </div>
-        </q-card-section>
-
-        <q-separator></q-separator>
-
-        <q-card-actions>
-          <span>Stall: {{ item.stallName }}</span>
-          <div class="q-ml-auto">
-            <q-btn flat dense>See product</q-btn>
-          </div>
-        </q-card-actions>
-      </q-card>
+      <product-card :product="item" @change-page="changePageS"></product-card>
     </div>
   </div>
 </div>

static/components/customer-stall/customer-stall.js

@@ -1,34 +1,32 @@
 async function customerStall(path) {
   const template = await loadTemplateAsync(path)
-  const mock = {
-    stall: '4M8j9KKGzUckHgb4C3pKCv',
-    name: 'product 1',
-    description:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo integer malesuada nunc vel risus commodo. Sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis. Cras ornare arcu dui vivamus. Risus pretium quam vulputate dignissim suspendisse in est ante in. Faucibus in ornare quam viverra orci sagittis eu volutpat odio.',
-    amount: 100,
-    price: '10',
-    images: ['https://i.imgur.com/cEfpEjq.jpeg'],
-    id: ['RyMbE9Hdwk9X333JKtkkNS'],
-    categories: ['crafts', 'robots'],
-    currency: 'EUR',
-    stallName: 'stall 1',
-    formatedPrice: '€10.00',
-    priceInSats: 0
-  }
+
   Vue.component('customer-stall', {
     name: 'customer-stall',
     template,
 
-    props: ['stall', 'products', 'exchange-rates', 'product-detail'],
+    props: [
+      'stall',
+      'products',
+      'exchange-rates',
+      'product-detail',
+      'change-page'
+    ],
     data: function () {
-      return {
-        mock: mock
+      return {}
+    },
+    computed: {
+      product() {
+        if (this.productDetail) {
+          return this.products.find(p => p.id == this.productDetail)
+        }
       }
     },
-    methods: {},
-    created() {
-      console.log(this.stall)
-      console.log(this.products)
-    }
+    methods: {
+      changePageS(page, opts) {
+        this.$emit('change-page', page, opts)
+      }
+    },
+    created() {}
   })
 }