feat: allow for manual quantity input
This commit is contained in:
parent
415ca6da74
commit
d4efa84d2e
4 changed files with 52 additions and 18 deletions
|
|
@ -5,11 +5,19 @@
|
|||
<q-menu v-if="cart.size">
|
||||
<q-list style="min-width: 100px">
|
||||
<q-item :id="p.id" :key="p.id" v-for="p in cartMenu">
|
||||
<q-btn color="red" size="xs" icon="remove" @click="remove(p.id)" />
|
||||
<q-item-section>
|
||||
<span class="text-center q-ma-xs">{{p.quantity}} x </span>
|
||||
<q-item-section style="flex-flow: row">
|
||||
<q-btn color="red" size="xs" icon="remove" @click="remove(p.id)" />
|
||||
<q-input
|
||||
v-model.number="p.quantity"
|
||||
@change="addQty(p.id, p.quantity)"
|
||||
type="number"
|
||||
dense
|
||||
standout
|
||||
:max="products.find(pr => pr.id == p.id).quantity"
|
||||
></q-input>
|
||||
<!-- <span class="text-center q-ma-xs">{{p.quantity}} x </span> -->
|
||||
<q-btn color="green" size="xs" icon="add" @click="add(p.id)" />
|
||||
</q-item-section>
|
||||
<q-btn color="green" size="xs" icon="add" @click="add(p.id)" />
|
||||
<q-item-section avatar v-if="p.image">
|
||||
<q-avatar color="primary">
|
||||
<img :src="p.image" />
|
||||
|
|
@ -29,7 +37,7 @@
|
|||
color="red"
|
||||
size="xs"
|
||||
icon="close"
|
||||
@click="$emit('remove-from-cart', p)"
|
||||
@click="removeProduct(p.id)"
|
||||
/>
|
||||
</span>
|
||||
</q-item-section>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ async function shoppingCart(path) {
|
|||
'cart-menu',
|
||||
'add-to-cart',
|
||||
'remove-from-cart',
|
||||
'update-qty',
|
||||
'reset-cart',
|
||||
'products'
|
||||
],
|
||||
|
|
@ -36,6 +37,23 @@ async function shoppingCart(path) {
|
|||
this.products.find(p => p.id == id),
|
||||
true
|
||||
)
|
||||
},
|
||||
addQty(id, qty) {
|
||||
if (qty == 0) {
|
||||
return this.removeProduct(id)
|
||||
}
|
||||
let product = this.products.find(p => p.id == id)
|
||||
if (product.quantity < qty) {
|
||||
this.$q.notify({
|
||||
type: 'warning',
|
||||
message: `${product.name} only has ${product.quantity} units!`,
|
||||
icon: 'production_quantity_limits'
|
||||
})
|
||||
let objIdx = this.cartMenu.findIndex(pr => pr.id == id)
|
||||
this.cartMenu[objIdx].quantity = this.cart.products.get(id).quantity
|
||||
return
|
||||
}
|
||||
this.$emit('update-qty', id, qty)
|
||||
}
|
||||
},
|
||||
created() {}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue