From 83f25f7972d5b7b406bf460b39193e935947583d Mon Sep 17 00:00:00 2001
From: Tiago Vasconcelos <talvasconcelos@gmail.com>
Date: Thu, 23 Mar 2023 16:34:26 +0000
Subject: [PATCH] shopping cart add and remove products quantity

---
 .../customer-stall/customer-stall.html        |  2 ++
 .../customer-stall/customer-stall.js          | 13 +++++++++-
 .../shopping-cart/shopping-cart.html          | 14 ++++++-----
 .../components/shopping-cart/shopping-cart.js | 24 +++++++++++++++++--
 templates/nostrmarket/market.html             |  1 +
 5 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/static/components/customer-stall/customer-stall.html b/static/components/customer-stall/customer-stall.html
index 60c5a11..9d11834 100644
--- a/static/components/customer-stall/customer-stall.html
+++ b/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"
diff --git a/static/components/customer-stall/customer-stall.js b/static/components/customer-stall/customer-stall.js
index 2b4090d..34aef83 100644
--- a/static/components/customer-stall/customer-stall.js
+++ b/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) {
diff --git a/static/components/shopping-cart/shopping-cart.html b/static/components/shopping-cart/shopping-cart.html
index 2864cf3..786ef28 100644
--- a/static/components/shopping-cart/shopping-cart.html
+++ b/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"
diff --git a/static/components/shopping-cart/shopping-cart.js b/static/components/shopping-cart/shopping-cart.js
index 8f6902d..2961fa3 100644
--- a/static/components/shopping-cart/shopping-cart.js
+++ b/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() {}
   })
 }
diff --git a/templates/nostrmarket/market.html b/templates/nostrmarket/market.html
index 28cb08a..82d874b 100644
--- a/templates/nostrmarket/market.html
+++ b/templates/nostrmarket/market.html
@@ -186,6 +186,7 @@
       v-if="!isLoading && activeStall"
       :stall="stalls.find(stall => stall.id == activeStall)"
       :products="filterProducts"
+      :stallproducts="products.filter(p => p.stall_id == activeStall)"
       :product-detail="activeProduct"
       :relays="relays"
       :account="account"