lnbits-exts/nostrmarket
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

feat: orders UI

Browse source
This commit is contained in:
Vlad Stan 2023-07-12 11:16:42 +03:00
parent 6d921d7559
commit edef69c92c
2 changed files with 68 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

58
static/components/customer-orders/customer-orders.html
View file

@ -30,7 +30,7 @@
<q-separator /> <q-separator />
<q-card-section horizontal> <q-card-section>
<q-card-section class="col-12"> <q-card-section class="col-12">
<q-list class="q-mt-md"> <q-list class="q-mt-md">
@ -39,9 +39,9 @@
<template v-slot:header> <template v-slot:header>
<q-item-section class="q-mt-sm"> <q-item-section class="q-mt-sm">
<q-item-label><strong> <span v-text="order.stallName"></span> </strong> <q-item-label><strong> <span v-text="order.stallName"></span> </strong>
<q-badge @click="showInvoice(order)" <q-badge @click="showInvoice(order)" v-if="order.invoice?.human_readable_part?.amount"
v-if="order.invoice?.human_readable_part?.amount" color="orange" class="q-ml-lg"> color="orange" class="q-ml-lg">
<span v-text="formatCurrency(order.invoice?.human_readable_part?.amount / 1000, 'sat')"></span> <span v-text="formatCurrency(order.invoice?.human_readable_part?.amount / 1000, 'sat')"></span>
</q-badge></q-item-label> </q-badge></q-item-label>
@ -70,12 +70,52 @@
</q-item-label> </q-item-label>
</q-item-section> </q-item-section>
</template> </template>
<q-card-section class="q-pa-none"> <q-separator></q-separator>
<q-separator></q-separator> <q-card-section horizontal>
<span v-text="order.invoice?.human_readable_part?.amount"></span>
<q-card-section class="col-7">
<q-item-section class="q-mt-sm">
<q-item-label> <strong>Products</strong></q-item-label>
</q-item-section>
<q-item v-for="product in order.products" :key="product.id">
<q-item-section avatar>
<q-avatar>
<img v-if="product.images[0] || product.image" :src="product.images[0] || product.image" />
<img v-else src="/nostrmarket/static/images/placeholder.png" />
</q-avatar>
</q-item-section>
<q-item-section class="q-mt-sm">
<q-item-label></q-item-label>
<q-item-label>
<strong>{{ product.orderedQuantity}} x {{ product.name}} </strong></q-item-label>
<q-item-label>
<div class="text-caption text-grey ellipsis-2-lines">
<p>{{ product.description }}</p>
</div>
</q-item-label>
</q-item-section>
</q-item>
</q-card-section>
<q-separator vertical />
<q-card-section>
<q-item-section class="q-mt-sm q-ml-sm">
<q-item-label> <strong>Shipping Zone: </strong>
<span v-text="order.shippingZone?.name || ''"></span>
</q-item-label>
</q-item-section>
<q-item-section class="q-mt-md q-ml-sm">
<q-item-label> <strong>Invoice: </strong>
<q-badge @click="showInvoice(order)" v-if="order.invoice?.human_readable_part?.amount"
color="orange" class="cursor-pointer">
<span
v-text="formatCurrency(order.invoice?.human_readable_part?.amount / 1000, 'sat')"></span>
</q-badge>
</q-item-label>
</q-item-section>
</q-card-section>
</q-card-section> </q-card-section>
</q-expansion-item> </q-expansion-item>
<q-separator></q-separator> <q-separator></q-separator>
</div> </div>

28
static/components/customer-orders/customer-orders.js
View file

@ -16,24 +16,26 @@ async function customerOrders(path) {
}, },
methods: { methods: {
enrichOrder: function (order) { enrichOrder: function (order) {
const stall = this.stallForOrder(order)
return { return {
...order, ...order,
stallName: this.stallNameForOrder(order), stallName: stall.name,
invoice: this.invoiceForOrder(order) shippingZone: stall.shipping.find(s => s.id === order.shipping_id),
invoice: this.invoiceForOrder(order),
products: this.getProductsForOrder(order)
} }
}, },
stallNameForOrder: function (order) { stallForOrder: function (order) {
try { try {
console.log('### stallNameForOrder', order)
const productId = order.items[0]?.product_id const productId = order.items[0]?.product_id
if (!productId) return 'Stall Name' if (!productId) return
const product = this.products.find(p => p.id === productId) const product = this.products.find(p => p.id === productId)
if (!product) return 'Stall Name' if (!product) return
const stall = this.stalls.find(s => s.id === product.stall_id) const stall = this.stalls.find(s => s.id === product.stall_id)
if (!stall) return 'Stall Name' if (!stall) return
return stall.name return stall
} catch (error) { } catch (error) {
return 'Stall Name' console.log(error)
} }
}, },
@ -52,6 +54,14 @@ async function customerOrders(path) {
return merchant?.profile return merchant?.profile
}, },
getProductsForOrder: function (order) {
if (!order?.items?.length) return []
const productsIds = order.items.map(i => i.product_id)
return this.products
.filter(p => productsIds.indexOf(p.id) !== -1)
.map(p => ({ ...p, orderedQuantity: order.items.find(i => i.product_id === p.id).quantity }))
},
showInvoice: function (order) { showInvoice: function (order) {
if (order.paid) return if (order.paid) return
const invoice = order?.payment_options?.find(p => p.type === 'ln').link const invoice = order?.payment_options?.find(p => p.type === 'ln').link