Merge pull request #32 from lnbits/input_quantity

Allow manual quantity input

static/components/customer-stall/customer-stall.html

@@ -26,6 +26,7 @@
       :products="stallproducts"
       @add-to-cart="addToCart"
       @remove-from-cart="removeFromCart"
+      @update-qty="updateQty"
       @reset-cart="resetCart"
       @open-checkout="openCheckout"
     ></shopping-cart>

static/components/customer-stall/customer-stall.js

@@ -92,6 +92,15 @@ async function customerStall(path) {
       getAmountFormated(amount, unit = 'USD') {
         return LNbits.utils.formatCurrency(amount, unit)
       },
+      updateQty(id, qty) {
+        let prod = this.cart.products
+        let product = prod.get(id)
+        prod.set(id, {
+          ...product,
+          quantity: qty
+        })
+        this.updateCart()
+      },
       addToCart(item) {
         let prod = this.cart.products
         if (prod.has(item.id)) {
@@ -122,7 +131,7 @@ async function customerStall(path) {
           icon: 'thumb_up'
         })
         this.cart.products = prod
-        this.updateCart(+item.price)
+        this.updateCart()
       },
       removeFromCart(item, del = false) {
         let prod = this.cart.products
@@ -136,16 +145,15 @@ async function customerStall(path) {
           })
         }
         this.cart.products = prod
-        this.updateCart(+item.price, true)
+        this.updateCart()
       },
-      updateCart(price, del = false) {
-        if (del) {
-          this.cart.total -= price
-          this.cart.size--
-        } else {
-          this.cart.total += price
-          this.cart.size++
-        }
+      updateCart() {
+        this.cart.total = 0
+        this.cart.products.forEach(p => {
+          this.cart.total += p.quantity * p.price
+        })
+
+        this.cart.size = this.cart.products.size
         this.cartMenu = Array.from(this.cart.products, item => {
           return {id: item[0], ...item[1]}
         })
@@ -365,9 +373,8 @@ async function customerStall(path) {
             this.qrCodeDialog.data.message = json.message
             return cb()
           }
-          let payment_request = json.payment_options.find(
-            o => o.type == 'ln'
-          ).link
+          let payment_request = json.payment_options.find(o => o.type == 'ln')
+            .link
           if (!payment_request) return
           this.loading = false
           this.qrCodeDialog.data.payment_request = payment_request

static/components/shopping-cart/shopping-cart.html

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

static/components/shopping-cart/shopping-cart.js

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