From 2ba8004240bb0120852a22999e1136805ef550f8 Mon Sep 17 00:00:00 2001
From: aserrador <alejandro.ayala@onecluster.org>
Date: Sat, 7 Mar 2026 17:57:31 -0500
Subject: [PATCH] feat: Add quantity controls to cart with +/- buttons

---
 src/components/catalog/Cart.vue | 62 +++++++++++++++++++++++++++++++--
 src/pages/catalog.vue           | 11 ++++++
 2 files changed, 71 insertions(+), 2 deletions(-)

diff --git a/src/components/catalog/Cart.vue b/src/components/catalog/Cart.vue
index f9d7276..c557e72 100644
--- a/src/components/catalog/Cart.vue
+++ b/src/components/catalog/Cart.vue
@@ -21,8 +21,26 @@
         </template>
         
         <v-list-item-title>{{ item.name }}</v-list-item-title>
-        <v-list-item-subtitle>
-          {{ item.quantity }} x {{ currency(item.price) }}
+        <v-list-item-subtitle class="d-flex align-center">
+          <div class="quantity-controls">
+            <v-btn small text class="qty-btn" @click="decreaseQuantity(item.id)"
+              ><v-icon small>mdi-minus</v-icon></v-btn
+            >
+            <v-text-field
+              :model-value="item.quantity"
+              @update:model-value="updateQuantity(item.id, $event)"
+              type="number"
+              min="1"
+              density="compact"
+              variant="outlined"
+              hide-details
+              class="qty-input"
+            />
+            <v-btn small text class="qty-btn" @click="increaseQuantity(item.id)"
+              ><v-icon small>mdi-plus</v-icon></v-btn
+            >
+          </div>
+          <span class="ml-2">x {{ currency(item.price) }}</span>
         </v-list-item-subtitle>
         
         <template v-slot:append>
@@ -71,6 +89,7 @@ export default {
       required: true
     }
   },
+  emits: ['remove', 'checkout', 'update-quantity'],
   computed: {
     cartCount() {
       return this.cartItems.reduce((sum, item) => sum + item.quantity, 0);
@@ -78,6 +97,45 @@ export default {
     cartTotal() {
       return this.cartItems.reduce((sum, item) => sum + (item.price * item.quantity), 0);
     }
+  },
+  methods: {
+    updateQuantity(itemId, newQuantity) {
+      const qty = parseInt(newQuantity) || 1;
+      this.$emit('update-quantity', { itemId, quantity: qty });
+    },
+    increaseQuantity(itemId) {
+      const item = this.cartItems.find(i => i.id === itemId);
+      if (item) {
+        this.$emit('update-quantity', { itemId, quantity: item.quantity + 1 });
+      }
+    },
+    decreaseQuantity(itemId) {
+      const item = this.cartItems.find(i => i.id === itemId);
+      if (item && item.quantity > 1) {
+        this.$emit('update-quantity', { itemId, quantity: item.quantity - 1 });
+      } else if (item) {
+        this.$emit('remove', itemId);
+      }
+    }
   }
 }
 </script>
+
+<style scoped>
+.qty-input {
+  width: 70px;
+}
+.qty-input input {
+  text-align: center;
+}
+.quantity-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.qty-btn {
+  min-width: 28px !important;
+  height: 28px !important;
+  border-radius: 14px !important;
+}
+</style>
diff --git a/src/pages/catalog.vue b/src/pages/catalog.vue
index 3047d99..c2471ba 100644
--- a/src/pages/catalog.vue
+++ b/src/pages/catalog.vue
@@ -17,6 +17,7 @@
             :currency="currency"
             @remove="removeFromCart"
             @checkout="goToCheckout"
+            @update-quantity="updateCartQuantity"
           />
         </div>
       </v-col>
@@ -98,6 +99,16 @@ export default {
         item.quantity = 0;
       }
     },
+    updateCartQuantity({ itemId, quantity }) {
+      const cartItem = this.cartItems.find(i => i.id === itemId);
+      if (cartItem) {
+        cartItem.quantity = quantity;
+      }
+      const productItem = this.items.find(i => i.id === itemId);
+      if (productItem) {
+        productItem.quantity = quantity;
+      }
+    },
     goToCheckout() {
       this.$router.push('/comprar');
     },