From ccd48f575c47ccf0b2f8d2c2c412cd2aac105478 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Mon, 30 Jun 2025 04:11:41 +0200
Subject: [PATCH 1/2] Cart quantity change

---
 components/Cart/CartContents.vue    | 15 +++++++
 components/Cart/CartItem.vue        | 31 +++++++++++--
 components/common/QuantityInput.vue | 68 +++++++++++++++++++++++++++++
 3 files changed, 111 insertions(+), 3 deletions(-)
 create mode 100644 components/common/QuantityInput.vue

diff --git a/components/Cart/CartContents.vue b/components/Cart/CartContents.vue
index 8450799a..0150d7c5 100644
--- a/components/Cart/CartContents.vue
+++ b/components/Cart/CartContents.vue
@@ -15,6 +15,7 @@
         :key="product.key"
         :product="product"
         @remove="handleRemoveProduct"
+        @update-quantity="handleUpdateQuantity"
       />
     </section>
     <CommonButton v-if="showCheckoutButton" link-to="/checkout" center-button>
@@ -73,6 +74,20 @@ onMounted(async () => {
     isLoading.value = false;
   }
 });
+
+/**
+ * Handles updating the quantity of a cart item.
+ *
+ * @param {{ key: string, quantity: number }} payload
+ */
+const handleUpdateQuantity = async ({ key, quantity }) => {
+  try {
+    await cart.updateCartItemQuantity(key, quantity);
+  } catch (error) {
+    console.error("Error updating cart item quantity:", error);
+    // Optionally, add user notification here
+  }
+};
 </script>
 
 <style scoped>
diff --git a/components/Cart/CartItem.vue b/components/Cart/CartItem.vue
index 89f2efee..222d4a74 100644
--- a/components/Cart/CartItem.vue
+++ b/components/Cart/CartItem.vue
@@ -20,7 +20,12 @@
     <div class="item">
       <span class="block mt-2 font-extrabold">Quantity: <br /></span>
       <span class="item-content">
-        {{ product.quantity }}
+        <QuantityInput
+          :model-value="localQuantity"
+          :min="1"
+          :loading="isUpdating"
+          @update:modelValue="onQuantityChange"
+        />
       </span>
     </div>
     <div class="item">
@@ -46,10 +51,20 @@
  * @emits CartItem#remove - Emitted when the remove button is clicked.
  */
 
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { formatPrice } from "@/utils/functions";
+import QuantityInput from "@/components/common/QuantityInput.vue";
 
 const isRemoving = ref(false);
+const isUpdating = ref(false);
+const localQuantity = ref(props.product.quantity);
+
+watch(
+  () => props.product.quantity,
+  (newVal) => {
+    localQuantity.value = newVal;
+  }
+);
 
 const props = defineProps({
   product: {
@@ -58,7 +73,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["remove"]);
+const emit = defineEmits(["remove", "update-quantity"]);
 
 /**
  * Emits a "remove" event with the product's key as the payload.
@@ -67,6 +82,16 @@ const emitRemove = () => {
   isRemoving.value = true;
   emit("remove", props.product.key);
 };
+
+const onQuantityChange = (newQuantity) => {
+  if (newQuantity === props.product.quantity || isUpdating.value) return;
+  isUpdating.value = true;
+  emit("update-quantity", { key: props.product.key, quantity: newQuantity });
+  // UI disables controls while updating; parent resets isUpdating via prop or reactivity
+  setTimeout(() => {
+    isUpdating.value = false;
+  }, 1000);
+};
 </script>
 
 <style scoped>
diff --git a/components/common/QuantityInput.vue b/components/common/QuantityInput.vue
new file mode 100644
index 00000000..07ed2a23
--- /dev/null
+++ b/components/common/QuantityInput.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="flex items-center space-x-2">
+    <button
+      class="px-2 py-1 bg-gray-200 rounded disabled:opacity-50"
+      :disabled="loading || value <= min"
+      @click="updateValue(value - 1)"
+      aria-label="Decrease quantity"
+    >
+      -
+    </button>
+    <input
+      type="number"
+      :value="value"
+      :min="min"
+      :max="max"
+      class="w-12 text-center border rounded"
+      :disabled="loading"
+      @input="onInput"
+    />
+    <button
+      class="px-2 py-1 bg-gray-200 rounded disabled:opacity-50"
+      :disabled="loading || (max !== null && value >= max)"
+      @click="updateValue(value + 1)"
+      aria-label="Increase quantity"
+    >
+      +
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    required: true,
+  },
+  min: {
+    type: Number,
+    default: 1,
+  },
+  max: {
+    type: Number,
+    default: null,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const value = computed(() => props.modelValue);
+
+function updateValue(newValue) {
+  if (props.loading) return;
+  if (props.max !== null && newValue > props.max) return;
+  if (newValue < props.min) return;
+  emit("update:modelValue", newValue);
+}
+
+function onInput(e) {
+  const newValue = Number(e.target.value);
+  updateValue(newValue);
+}
+</script>

From 69c4a1fcbb75f3c4574aa33fdea14a8513be6c1a Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Mon, 30 Jun 2025 04:15:22 +0200
Subject: [PATCH 2/2] Input

---
 components/Cart/CartItem.vue                             | 3 +--
 components/common/{QuantityInput.vue => CommonInput.vue} | 0
 2 files changed, 1 insertion(+), 2 deletions(-)
 rename components/common/{QuantityInput.vue => CommonInput.vue} (100%)

diff --git a/components/Cart/CartItem.vue b/components/Cart/CartItem.vue
index 222d4a74..3eb56da7 100644
--- a/components/Cart/CartItem.vue
+++ b/components/Cart/CartItem.vue
@@ -20,7 +20,7 @@
     <div class="item">
       <span class="block mt-2 font-extrabold">Quantity: <br /></span>
       <span class="item-content">
-        <QuantityInput
+        <CommonInput
           :model-value="localQuantity"
           :min="1"
           :loading="isUpdating"
@@ -53,7 +53,6 @@
 
 import { ref, watch } from "vue";
 import { formatPrice } from "@/utils/functions";
-import QuantityInput from "@/components/common/QuantityInput.vue";
 
 const isRemoving = ref(false);
 const isUpdating = ref(false);
diff --git a/components/common/QuantityInput.vue b/components/common/CommonInput.vue
similarity index 100%
rename from components/common/QuantityInput.vue
rename to components/common/CommonInput.vue