feat: basic orders UI

static/components/customer-orders/customer-orders.html

@@ -1 +1,68 @@
-<div>xxxx</div>
+<div>
+  <q-card v-if="!orders?.length" bordered class="q-mb-md">
+    <q-card-section>
+      <strong>No products in cart!</strong>
+    </q-card-section>
+  </q-card>
+  <div v-for="merchant in orders">
+
+    <q-card bordered class="q-mb-md">
+      <q-item>
+        <q-item-section avatar>
+          <q-avatar>
+            <img v-if="merchant?.profile?.picture" :src="merchant?.profile?.picture">
+            <img v-else src="/nostrmarket/static/images/blank-avatar.webp">
+          </q-avatar>
+        </q-item-section>
+
+        <q-item-section>
+          <q-item-label>
+            <strong>
+              <!-- <span v-text="cart.products[0]?.stallName"></span> -->
+              Todo: stall name
+            </strong>
+          </q-item-label>
+          <q-item-label caption>
+            By 
+            <!-- <span v-text="cart.merchant?.profile?.name || cart.merchant?.publicKey"></span> -->
+            <span v-text="merchant.pubkey"></span>
+          </q-item-label>
+        </q-item-section>
+
+      </q-item>
+
+      <q-separator />
+
+      <q-card-section horizontal>
+
+        <q-card-section class="col-12">
+          <q-list class="q-mt-md">
+            <q-item v-for="order in merchant.orders" :key="order.id">
+
+  
+              <q-item-section class="q-mt-sm">
+                <q-item-label>products</q-item-label>
+                <q-item-label>
+                  <div class="text-caption text-grey ellipsis-2-lines">
+                    <p>xxxx</p>
+                  </div>
+                </q-item-label>
+              </q-item-section>
+         
+              <q-item-section side>
+                <div>
+                  <q-btn flat dense round icon="delete" />
+                </div>
+              </q-item-section>
+
+            </q-item>
+
+          </q-list>
+        </q-card-section>
+      </q-card-section>
+
+    </q-card>
+
+  </div>
+
+</div>

static/components/customer-orders/customer-orders.js

@@ -2,7 +2,7 @@ async function customerOrders(path) {
   const template = await loadTemplateAsync(path)
 
   Vue.component('customer-orders', {
-    name: 'customer-orders',
+    name: 'orders',
     template,
 
     props: ['orders'],
@@ -13,6 +13,8 @@ async function customerOrders(path) {
     methods: {
     
     },
-    created() { }
+    created() { 
+      console.log('### orders', this.orders)
+    }
   })
 }

static/js/market.js

@@ -102,6 +102,15 @@ const market = async () => {
       }
     },
     computed: {
+      allOrders() {
+        const prefix = 'nostrmarket.orders.'
+        const orderKeys = this.$q.localStorage.getAllKeys().filter(k => k.startsWith(prefix))
+
+        return orderKeys.map((key) => ({
+          pubkey: key.substring(prefix.length),
+          orders: this.$q.localStorage.getItem(key)
+        }), {})
+      },
       filterProducts() {
         let products = this.products
         console.log('### this.products', this.products)

templates/nostrmarket/market.html

@@ -218,7 +218,7 @@
         <shopping-cart-checkout v-else-if="activePage === 'shopping-cart-checkout'" :cart="checkoutCart"
           :stall="checkoutStall" :customer-pubkey="account?.pubkey" @login-required="openAccountDialog"
           @place-order="placeOrder"></shopping-cart-checkout>
-        <customer-orders v-else-if="activePage === 'customer-orders'"></customer-orders>
+        <customer-orders v-else-if="activePage === 'customer-orders'" :orders="allOrders"></customer-orders>
         <customer-stall v-else-if=" !isLoading && activeStall" :stall="stalls.find(stall => stall.id == activeStall)"
           :products="filterProducts" :stall-products="products.filter(p => p.stall_id == activeStall)"
           :product-detail="activeProduct" :relays="relays" :account="account" :pool="pool" :styles="config?.opts ?? {}"