feat: basic orders

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

@@ -1,10 +1,12 @@
 <div>
-  <q-card v-if="!orders?.length" bordered class="q-mb-md">
+  <q-card v-if="!merchantOrders?.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">
+  <div v-for="merchant in merchantOrders">
+
+
 
     <q-card bordered class="q-mb-md">
       <q-item>
@@ -19,7 +21,7 @@
           <q-item-label>
             <strong>
               <!-- <span v-text="cart.products[0]?.stallName"></span> -->
-              Todo: stall name
+              Todo: merchant name
             </strong>
           </q-item-label>
           <q-item-label caption>
@@ -37,26 +39,37 @@
 
         <q-card-section class="col-12">
           <q-list class="q-mt-md">
-            <q-item v-for="order in merchant.orders" :key="order.id">
+            <div v-for="order in merchant.orders" :key="order.id" class="q-mb-md">
+              <q-expansion-item>
+
+                <template v-slot:header>
+                  <q-item-section class="q-mt-sm">
+                    <q-item-label><strong> <span v-text="stallNameForOrder(order)"></span> </strong></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-badge :color="order.paid ? 'green' : 'gray'"><span
+                          v-text="order.paid ? 'Paid' : 'Not Paid'"></span></q-badge>
+                      <q-badge :color="order.shipped ? 'green' : 'gray'"><span
+                          v-text="order.paid ? 'Shipped' : 'Not Shipped'"></span></q-badge>
+                    </div>
+                  </q-item-section>
+                </template>
+                <q-card-section class="q-pa-none">
+                  <q-separator></q-separator>
+                  xxxx
+                </q-card-section>
 
 
-              <q-item-section class="q-mt-sm">
+              </q-expansion-item>
-                <q-item-label>products</q-item-label>
+              <q-separator></q-separator>
-                <q-item-label>
+            </div>
-                  <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>

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

@@ -5,16 +5,32 @@ async function customerOrders(path) {
     name: 'orders',
     template,
 
-    props: ['orders'],
+    props: ['orders', 'products', 'stalls'],
     data: function () {
       return {}
     },
-    computed: {},
+    computed: {
+      merchantOrders: function () {
+        return Object.keys(this.orders).map(pubkey => ({ pubkey, orders: this.orders[pubkey] }))
+      }
+    },
     methods: {
+      stallNameForOrder: function (order) {
+        console.log('### stallNameForOrder', order)
+        const productId = order.items[0]?.product_id
+        if (!productId) return 'Stall Name'
+        const product = this.products.find(p => p.id === productId)
+        if (!product) return 'Stall Name'
+        const stall = this.stalls.find(s => s.id === product.stall_id)
+        if (!stall) return 'Stall Name'
+        return stall.name
+      }
 
     },
     created() {
       console.log('### orders', this.orders)
+      console.log('### products', this.products)
+      console.log('### stall', this.stalls)
     }
   })
 }

static/js/market.js

@@ -76,6 +76,8 @@ const market = async () => {
         events: [],
         stalls: [],
         products: [],
+        orders: {},
+
         profiles: new Map(),
         searchText: null,
         inputPubkey: null,
@@ -102,14 +104,38 @@ const market = async () => {
       }
     },
     computed: {
-      allOrders() {
+      // allOrders() {
-        const prefix = 'nostrmarket.orders.'
+      //   console.log('### allOrders compute')
-        const orderKeys = this.$q.localStorage.getAllKeys().filter(k => k.startsWith(prefix))
+      //   const prefix = 'nostrmarket.orders.'
 
-        return orderKeys.map((key) => ({
+      //   return Object.keys(this.orders).map((key) => ({
-          pubkey: key.substring(prefix.length),
+      //     pubkey: key.substring(prefix.length),
-          orders: this.$q.localStorage.getItem(key)
+      //     orders: this.orders[key]
-        }), {})
+      //   }), {})
+      // },
+      orderedProducts: function () {
+        const allItems = Object.keys(this.orders)
+          .map(pubkey => this.orders[pubkey]
+            .map(o => o.items)
+            .flat()
+            .map(i => i.product_id)
+            .flat())
+          .flat()
+        const uniqueProductIds = [...new Set(allItems)];
+        return this.products.filter(p => uniqueProductIds.indexOf(p.id) !== -1)
+      },
+      orderedStalls: function () {
+        const allItems = Object.keys(this.orders)
+          .map(pubkey => this.orders[pubkey]
+            .map(o => o.items)
+            .flat()
+            .map(i => i.product_id)
+            .flat())
+          .flat()
+        const uniqueProductIds = [...new Set(allItems)];
+        const uniqueStallIds = this.products.filter(p => uniqueProductIds.indexOf(p.id) !== -1).map(p => p.stall_id)
+
+        return this.stalls.filter(s => uniqueStallIds.indexOf(s.id) !== -1)
       },
       filterProducts() {
         let products = this.products
@@ -160,6 +186,14 @@ const market = async () => {
 
       this.account = this.$q.localStorage.getItem('nostrmarket.account') || null
 
+      const prefix = 'nostrmarket.orders.'
+      const orderKeys = this.$q.localStorage.getAllKeys().filter(k => k.startsWith(prefix))
+      orderKeys.forEach(k => {
+        const pubkey = k.substring(prefix.length)
+        this.orders[pubkey] = this.$q.localStorage.getItem(k)
+      })
+
+
 
 
       //console.log("UUID", crypto.randomUUID())
@@ -405,6 +439,7 @@ const market = async () => {
             return obj
           })
           .filter(f => f)
+        console.log('### products', this.products)
       },
       async initNostr() {
         this.$q.loading.show()
@@ -796,10 +831,11 @@ const market = async () => {
 
       persistOrderUpdate(pubkey, orderUpdate) {
         console.log('### persistOrderUpdate', pubkey, orderUpdate)
-        const orders = this.$q.localStorage.getItem(`nostrmarket.orders.${pubkey}`) || []
+        let orders = this.$q.localStorage.getItem(`nostrmarket.orders.${pubkey}`) || []
         let order = orders.find(o => o.id === orderUpdate.id)
         if (!order) {
-          orders.push({ ...orderUpdate, messages: orderUpdate.message ? [orderUpdate.message] : [] })
+          orders.unshift({ ...orderUpdate, messages: orderUpdate.message ? [orderUpdate.message] : [] })
+          this.orders[pubkey] = orders
           this.$q.localStorage.set(`nostrmarket.orders.${pubkey}`, orders)
           return
         }
@@ -815,7 +851,10 @@ const market = async () => {
           order.shipped = orderUpdate.shipped
         }
 
-        this.$q.localStorage.set(`nostrmarket.orders.${pubkey}`, [order].concat(orders.filter(o => o.id !== order.id)))
+
+        orders = [order].concat(orders.filter(o => o.id !== order.id))
+        this.orders[pubkey] = orders
+        this.$q.localStorage.set(`nostrmarket.orders.${pubkey}`, orders)
       }
 
     }

templates/nostrmarket/market.html

@@ -218,7 +218,8 @@
         <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'" :orders="allOrders"></customer-orders>
+        <customer-orders v-else-if="activePage === 'customer-orders'" :orders="orders" :products="products"
+          :stalls="stalls"></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 ?? {}"