shopping cart add and remove products quantity

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

@@ -23,6 +23,8 @@
     <shopping-cart
       :cart="cart"
       :cart-menu="cartMenu"
+      :products="stallproducts"
+      @add-to-cart="addToCart"
       @remove-from-cart="removeFromCart"
       @reset-cart="resetCart"
       @open-checkout="openCheckout"

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

@@ -10,6 +10,7 @@ async function customerStall(path) {
       'login-dialog',
       'stall',
       'products',
+      'stallproducts',
       'product-detail',
       'change-page',
       'relays',
@@ -124,7 +125,17 @@ async function customerStall(path) {
         this.updateCart(+item.price)
       },
       removeFromCart(item) {
-        this.cart.products.delete(item.id)
+        let prod = this.cart.products
+        let qty = prod.get(item.id).quantity
+        if (qty == 1) {
+          prod.delete(item.id)
+        } else {
+          prod.set(item.id, {
+            ...prod.get(item.id),
+            quantity: qty - 1
+          })
+        }
+        this.cart.products = prod
         this.updateCart(+item.price, true)
       },
       updateCart(price, del = false) {

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

@@ -4,17 +4,19 @@
   </q-badge>
   <q-menu v-if="cart.size">
     <q-list style="min-width: 100px">
-      <q-item :key="p.id" v-for="p in cartMenu">
-        <q-item-section side>
-          <span>{{p.quantity}} x </span>
+      <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>
+        <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 size="sm" :src="p.image" />
+            <img :src="p.image" />
           </q-avatar>
         </q-item-section>
 
-        <q-item-section>
+        <q-item-section top class="q-mx-sm">
           <q-item-label>{{ p.name }}</q-item-label>
         </q-item-section>
 
@@ -42,7 +44,7 @@
         @click="$emit('open-checkout')"
       ></q-btn>
       <q-btn
-        class="q-ml-lg"
+        class="q-ml-auto"
         flat
         color="primary"
         label="Reset"

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

@@ -5,12 +5,32 @@ async function shoppingCart(path) {
     name: 'shopping-cart',
     template,
 
-    props: ['cart', 'cart-menu', 'remove-from-cart', 'reset-cart'],
+    props: [
+      'cart',
+      'cart-menu',
+      'add-to-cart',
+      'remove-from-cart',
+      'reset-cart',
+      'products'
+    ],
     data: function () {
       return {}
     },
     computed: {},
-    methods: {},
+    methods: {
+      add(id) {
+        this.$emit(
+          'add-to-cart',
+          this.products.find(p => p.id == id)
+        )
+      },
+      remove(id) {
+        this.$emit(
+          'remove-from-cart',
+          this.products.find(p => p.id == id)
+        )
+      }
+    },
     created() {}
   })
 }