fix: partial orders
This commit is contained in:
Vlad Stan
parent
e90d0161eb
commit
5d33fcd756
2 changed files with 105 additions and 88 deletions
|
|
@ -29,97 +29,114 @@
|
||||||
|
|
||||||
<q-separator />
|
<q-separator />
|
||||||
|
|
||||||
|
|
||||||
<q-card-section class="col-12">
|
|
||||||
<q-list>
|
|
||||||
<div v-for="order in merchant.orders" :key="order.id" class="q-mb-md">
|
|
||||||
<q-expansion-item dense expand-separator>
|
|
||||||
|
|
||||||
<template v-slot:header>
|
<q-card-section class="col-12">
|
||||||
<q-item-section class="q-mt-sm">
|
<q-list>
|
||||||
<q-item-label><strong> <span v-text="order.stallName"></span> </strong>
|
<div v-for="order in merchant.orders" :key="order.id" class="q-mb-md">
|
||||||
<q-badge @click="showInvoice(order)" v-if="order.invoice?.human_readable_part?.amount"
|
<q-expansion-item dense expand-separator>
|
||||||
color="orange" class="q-ml-lg">
|
|
||||||
<span v-text="formatCurrency(order.invoice?.human_readable_part?.amount / 1000, 'sat')"></span>
|
|
||||||
</q-badge></q-item-label>
|
|
||||||
|
|
||||||
<q-item-label>
|
<template v-slot:header>
|
||||||
<div class="text-caption text-grey ellipsis-2-lines">
|
<q-item-section class="q-mt-sm">
|
||||||
<p v-if="order.createdAt"><span v-text="fromNow(order.createdAt)"></span></p>
|
<q-item-label><strong> <span v-text="order.stallName"></span> </strong>
|
||||||
</div>
|
<q-badge @click="showInvoice(order)" v-if="order.invoice?.human_readable_part?.amount"
|
||||||
</q-item-label>
|
color="orange" class="q-ml-lg">
|
||||||
</q-item-section>
|
<span v-text="formatCurrency(order.invoice?.human_readable_part?.amount / 1000, 'sat')"></span>
|
||||||
|
</q-badge></q-item-label>
|
||||||
|
|
||||||
<q-item-section side>
|
<q-item-label>
|
||||||
<q-item-label>
|
<div class="text-caption text-grey ellipsis-2-lines">
|
||||||
|
<p v-if="order.createdAt"><span v-text="fromNow(order.createdAt)"></span></p>
|
||||||
|
</div>
|
||||||
|
</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
|
||||||
<q-badge :color="order.paid ? 'green' : 'gray'"><span
|
<q-item-section side>
|
||||||
v-text="order.paid ? 'Paid' : 'Not Paid'"></span></q-badge>
|
<q-item-label>
|
||||||
<q-badge :color="order.shipped ? 'green' : 'gray'"><span
|
|
||||||
v-text="order.shipped ? 'Shipped' : 'Not Shipped'"></span></q-badge>
|
|
||||||
</q-item-label>
|
|
||||||
<q-item-label>
|
|
||||||
<div class="text-caption text-grey ellipsis-2-lines">
|
|
||||||
<p>
|
|
||||||
<span v-text="order.items.length"></span>
|
|
||||||
<span v-text="order.items.length === 1 ? 'product': 'products'"></span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</q-item-label>
|
|
||||||
</q-item-section>
|
|
||||||
</template>
|
|
||||||
<q-separator></q-separator>
|
|
||||||
<q-card-section horizontal>
|
|
||||||
|
|
||||||
<q-card-section class="col-7">
|
<q-badge :color="order.paid ? 'green' : 'gray'"><span
|
||||||
<q-item-section class="q-mt-sm">
|
v-text="order.paid ? 'Paid' : 'Not Paid'"></span></q-badge>
|
||||||
<q-item-label> <strong>Products</strong></q-item-label>
|
<q-badge :color="order.shipped ? 'green' : 'gray'"><span
|
||||||
</q-item-section>
|
v-text="order.shipped ? 'Shipped' : 'Not Shipped'"></span></q-badge>
|
||||||
|
</q-item-label>
|
||||||
<q-item v-for="product in order.products" :key="product.id">
|
<q-item-label>
|
||||||
<q-item-section avatar>
|
<div class="text-caption text-grey ellipsis-2-lines">
|
||||||
<q-avatar>
|
<p>
|
||||||
<img v-if="product.images[0] || product.image" :src="product.images[0] || product.image" />
|
<span v-text="order.items?.length"></span>
|
||||||
<img v-else src="/nostrmarket/static/images/placeholder.png" />
|
<span v-text="order.items?.length === 1 ? 'product': 'products'"></span>
|
||||||
</q-avatar>
|
</p>
|
||||||
</q-item-section>
|
</div>
|
||||||
<q-item-section class="q-mt-sm">
|
</q-item-label>
|
||||||
<q-item-label></q-item-label>
|
</q-item-section>
|
||||||
<q-item-label>
|
</template>
|
||||||
<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-expansion-item>
|
|
||||||
<q-separator></q-separator>
|
<q-separator></q-separator>
|
||||||
</div>
|
<q-card-section horizontal>
|
||||||
</q-list>
|
|
||||||
</q-card-section>
|
<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-separator></q-separator>
|
||||||
|
<q-card-section v-if="order.messages" class="col-12">
|
||||||
|
<q-item-section class="q-mt-sm q-ml-sm">
|
||||||
|
<q-item-label> <strong>Messages: </strong>
|
||||||
|
</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section class="q-mt-sm">
|
||||||
|
<q-item-label>
|
||||||
|
<ul>
|
||||||
|
<li v-for="(message, i) in order.messages" :key="i">
|
||||||
|
<span v-text="message"></span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-card-section>
|
||||||
|
</q-expansion-item>
|
||||||
|
<q-separator></q-separator>
|
||||||
|
</div>
|
||||||
|
</q-list>
|
||||||
|
</q-card-section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</q-card>
|
</q-card>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -25,15 +25,15 @@ async function customerOrders(path) {
|
||||||
const stall = this.stallForOrder(order)
|
const stall = this.stallForOrder(order)
|
||||||
return {
|
return {
|
||||||
...order,
|
...order,
|
||||||
stallName: stall.name,
|
stallName: stall?.name || 'Stall',
|
||||||
shippingZone: stall.shipping.find(s => s.id === order.shipping_id),
|
shippingZone: stall?.shipping?.find(s => s.id === order.shipping_id),
|
||||||
invoice: this.invoiceForOrder(order),
|
invoice: this.invoiceForOrder(order),
|
||||||
products: this.getProductsForOrder(order)
|
products: this.getProductsForOrder(order)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
stallForOrder: function (order) {
|
stallForOrder: function (order) {
|
||||||
try {
|
try {
|
||||||
const productId = order.items[0]?.product_id
|
const productId = order.items && order.items[0]?.product_id
|
||||||
if (!productId) return
|
if (!productId) return
|
||||||
const product = this.products.find(p => p.id === productId)
|
const product = this.products.find(p => p.id === productId)
|
||||||
if (!product) return
|
if (!product) return
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue