add customer stall component, remove toolbar

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

@@ -0,0 +1,102 @@
+<div>
+  <q-toolbar>
+    <q-breadcrumbs class="cursor">
+      <q-breadcrumbs-el
+        label="Market"
+        icon="home"
+        @click="$emit('change-page', 'market')"
+        style="cursor: pointer"
+      ></q-breadcrumbs-el>
+      <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>
+  </q-toolbar>
+  <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>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,17 @@
+async function customerStall(path) {
+  const template = await loadTemplateAsync(path)
+  Vue.component('customer-stall', {
+    name: 'customer-stall',
+    template,
+
+    props: ['stall', 'products', 'exchange-rates'],
+    data: function () {
+      return {}
+    },
+    methods: {},
+    created() {
+      console.log(this.stall)
+      console.log(this.products)
+    }
+  })
+}