feat: allow for manual quantity input

This commit is contained in:
Tiago Vasconcelos 2023-03-27 18:12:04 +01:00
parent 415ca6da74
commit d4efa84d2e
4 changed files with 52 additions and 18 deletions

View file

@ -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>

View file

@ -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() {}