From b3772b79dd87ae4fae11008440bc27725dbe26af Mon Sep 17 00:00:00 2001
From: yennanliu <f339339@gmail.com>
Date: Thu, 7 Dec 2023 10:56:56 +0800
Subject: [PATCH 1/2] fix updateItem make cart update work, fix param fetch

---
 .../ecommerce-ui/src/views/Cart/Cart.vue      | 47 ++++++++++++-------
 1 file changed, 30 insertions(+), 17 deletions(-)

diff --git a/ShoppingCart/Frondend/ecommerce-ui/src/views/Cart/Cart.vue b/ShoppingCart/Frondend/ecommerce-ui/src/views/Cart/Cart.vue
index 3b4e3f7d5..a2c1425c6 100644
--- a/ShoppingCart/Frondend/ecommerce-ui/src/views/Cart/Cart.vue
+++ b/ShoppingCart/Frondend/ecommerce-ui/src/views/Cart/Cart.vue
@@ -35,14 +35,22 @@
           <p id="item-price" class="mb-0 font-weight-bold">
             $ {{ cartItem.product.price }} per unit
           </p>
+
           <p id="item-quantity" class="mb-0">
             Quantity :
             <input
               size="1"
               class="p-0 h-25 border-bottom border-top-0 border-left-0 border-right-0"
+              type="number"
               v-model="cartItem.quantity"
+              @change="
+                updateItem(cartItem.id, cartItem.product.id, cartItem.quantity)
+              "
             />
           </p>
+
+          <!-- updateItem(itemId, productId, quantity) -->
+
           <p id="item-total-price" class="mb-0">
             Total Price:
             <span class="font-weight-bold">
@@ -142,23 +150,28 @@ export default {
         params: { id: productId },
       });
     },
-    updateItem(itemId, quantity) {
-      let i;
-      console.log(">>> (updateItem) this.cartItem = " + JSON.stringify(this.cartItem))
-      for (i = 0; i < this.len; i++) {
-        if (this.cartItem[i].id === itemId) {
-          break;
-        }
-      }
-      this.cartItem[i].pQuantity = quantity;
-      let userId = this.cartItem[i].userId;
-      let productId = this.cartItem[i].pId;
-      axios.put(`${this.baseURL}cart/update/${itemId}/?token=${this.token}`, {
-        id: itemId,
-        userId,
-        productId,
-        quantity,
-      });
+
+    updateItem(itemId, productId, quantity) {
+      console.log(">>> (updateItem) itemId = " + itemId);
+      console.log(">>> (updateItem) productId = " + productId);
+
+      axios
+        .put(`${this.baseURL}cart/update/${itemId}/?token=${this.token}`, {
+          id: itemId,
+          productId: productId, // Replace with the actual product id
+          quantity,
+        })
+        .then(
+          (response) => {
+            if (response.status === 200) {
+              console.log("Item quantity updated successfully");
+              // You may want to update the total cost or perform other actions as needed
+            }
+          },
+          (error) => {
+            console.log(error);
+          }
+        );
     },
   },
   mounted() {

From e56085ad48886d28bc1aa0476694756745520883 Mon Sep 17 00:00:00 2001
From: yennanliu <f339339@gmail.com>
Date: Thu, 7 Dec 2023 11:03:25 +0800
Subject: [PATCH 2/2] only update cart when click button

---
 .../Frondend/ecommerce-ui/src/views/Cart/Cart.vue     | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/ShoppingCart/Frondend/ecommerce-ui/src/views/Cart/Cart.vue b/ShoppingCart/Frondend/ecommerce-ui/src/views/Cart/Cart.vue
index a2c1425c6..c5f9f3afe 100644
--- a/ShoppingCart/Frondend/ecommerce-ui/src/views/Cart/Cart.vue
+++ b/ShoppingCart/Frondend/ecommerce-ui/src/views/Cart/Cart.vue
@@ -43,14 +43,9 @@
               class="p-0 h-25 border-bottom border-top-0 border-left-0 border-right-0"
               type="number"
               v-model="cartItem.quantity"
-              @change="
-                updateItem(cartItem.id, cartItem.product.id, cartItem.quantity)
-              "
             />
           </p>
 
-          <!-- updateItem(itemId, productId, quantity) -->
-
           <p id="item-total-price" class="mb-0">
             Total Price:
             <span class="font-weight-bold">
@@ -61,9 +56,9 @@
             >Remove From Cart</a
           >
           <!-- TODO : add UpdateCart button -->
-          <!-- <br /><a href="#" class="text-right" @click="updateItem(cartItem.id)"
-          >Update Cart</a
-        > -->
+          <br /><a href="#" class="text-right" @click="updateItem(cartItem.id, cartItem.product.id, cartItem.quantity)"
+            >Update Cart</a
+          >
         </div>
       </div>