From 1d37ce42dc38c9486466ab12ae82a0376a6b3228 Mon Sep 17 00:00:00 2001
From: aserrador <alejandro.ayala@onecluster.org>
Date: Sat, 14 Mar 2026 16:28:10 -0500
Subject: [PATCH] feat: Improve product card design and sync cart quantity

- Add borders, hover effects, and box shadows to product cards
- Improve typography and layout styling
- Fix cart sync when updating quantity via minus button or input field
- Add updateQuantity prop to handle manual quantity changes
---
 src/components/catalog/Card.vue | 157 +++++++++++++++++++++++++-------
 src/pages/catalog.vue           |  48 ++++++----
 2 files changed, 155 insertions(+), 50 deletions(-)

diff --git a/src/components/catalog/Card.vue b/src/components/catalog/Card.vue
index 42f2856..e06e526 100644
--- a/src/components/catalog/Card.vue
+++ b/src/components/catalog/Card.vue
@@ -1,29 +1,30 @@
 <template>
-  <v-card>
-    <v-row no-gutters align="center" class="w-100">
-      <v-col cols="12" md="3" class="d-flex">
+  <v-card class="product-card">
+    <v-row no-gutters align="center" class="w-100 py-3 px-2">
+      <v-col cols="12" md="3" class="d-flex justify-center">
         <v-img :src="product.img" class="product-img" contain></v-img>
       </v-col>
 
-      <v-col cols="12" md="6">
-        <v-card-title>{{ product.name }}</v-card-title>
-        <v-card-subtitle>{{ product.description }}</v-card-subtitle>
-        <div class="prices mt-2">
-          <div class="price-line">
-            Precio unitario: <strong>{{ currency(product.price) }}</strong>
+      <v-col cols="12" md="5">
+        <v-card-title class="product-name">{{ product.name }}</v-card-title>
+        <v-card-subtitle class="product-description">{{ product.description }}</v-card-subtitle>
+        <div class="prices mt-3">
+          <div class="price-unit">
+            <span class="price-label">Precio unitario</span>
+            <span class="price-value">{{ currency(product.price) }}</span>
           </div>
-          <div class="price-line">
-            Precio total:
-            <strong>{{ currency(product.price * product.quantity) }}</strong>
+          <div class="price-total">
+            <span class="price-label">Precio total</span>
+            <span class="price-value total">{{ currency(product.price * product.quantity) }}</span>
           </div>
         </div>
       </v-col>
 
-      <v-col cols="12" md="3" class="d-flex align-center justify-end">
+      <v-col cols="12" md="4" class="d-flex align-center justify-md-end justify-center mt-3 mt-md-0">
         <div class="quantity-controls">
-          <v-btn small text class="qty-btn" @click="decrease(product)"
-            ><v-icon small>mdi-minus</v-icon></v-btn
-          >
+          <v-btn icon small class="qty-btn" @click="decrease(product)">
+            <v-icon small>mdi-minus</v-icon>
+          </v-btn>
           <v-text-field
             v-model.number="product.quantity"
             type="number"
@@ -33,9 +34,11 @@
             outlined
             hide-details
             aria-label="Cantidad"
+            @input="handleQuantityChange"
           />
-          <v-btn small text class="qty-btn" @click="handleIncrease"
-            ><v-icon small>mdi-plus</v-icon></v-btn>
+          <v-btn icon small class="qty-btn qty-btn-add" @click="handleIncrease">
+            <v-icon small>mdi-plus</v-icon>
+          </v-btn>
         </div>
       </v-col>
     </v-row>
@@ -60,48 +63,140 @@ export default {
     currency: {
       type: Function,
       required: true
+    },
+    updateQuantity: {
+      type: Function,
+      required: true
     }
   },
   methods: {
     handleIncrease() {
       this.increase(this.product);
       this.$emit('add-to-cart', this.product);
+    },
+    handleQuantityChange(value) {
+      this.updateQuantity(this.product);
+      if (this.product.quantity > 0) {
+        this.$emit('add-to-cart', this.product);
+      }
     }
   }
 }
 </script>
 
 <style scoped>
+.product-card {
+  border: 1px solid #e0e0e0;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  transition: all 0.3s ease;
+}
+.product-card:hover {
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  transform: translateY(-2px);
+  border-color: #bdbdbd;
+}
 .product-img {
-  width: 150px;
-  height: 100px;
-  border-radius: 6px;
+  width: 120px;
+  height: 120px;
+  border-radius: 10px;
   object-fit: cover;
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+.product-name {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #2c3e50;
+  line-height: 1.3;
+  padding: 0 0 4px 0;
+}
+.product-description {
+  font-size: 0.85rem;
+  color: #7f8c8d;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.prices {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.price-unit, .price-total {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.price-label {
+  font-size: 0.75rem;
+  color: #95a5a6;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.price-value {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #2c3e50;
+}
+.price-value.total {
+  color: #27ae60;
+  font-size: 1.1rem;
 }
 .quantity-controls {
   display: inline-flex;
   align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-}
-.prices .price-line {
-  margin-bottom: 4px;
+  gap: 4px;
+  background: #f5f5f5;
+  border-radius: 25px;
+  padding: 4px;
 }
 .quantity-input {
-  max-width: 90px;
+  max-width: 70px;
 }
 .quantity-input input {
   text-align: center;
+  font-weight: 600;
 }
 .qty-btn {
-  min-width: 36px !important;
-  height: 36px !important;
-  border-radius: 18px !important;
+  min-width: 32px !important;
+  height: 32px !important;
+  border-radius: 50% !important;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+.qty-btn:hover {
+  background: #e0e0e0;
+}
+.qty-btn-add {
+  background: #27ae60;
+  color: white;
+}
+.qty-btn-add:hover {
+  background: #219a52 !important;
+}
+@media (max-width: 960px) {
+  .product-img {
+    width: 100px;
+    height: 100px;
+  }
 }
 @media (max-width: 600px) {
+  .product-card {
+    border-radius: 8px;
+  }
   .product-img {
-    width: 120px;
+    width: 80px;
     height: 80px;
   }
+  .product-name {
+    font-size: 1rem;
+    text-align: center;
+  }
+  .prices {
+    align-items: center;
+  }
 }
 </style>
diff --git a/src/pages/catalog.vue b/src/pages/catalog.vue
index c2471ba..8226cdd 100644
--- a/src/pages/catalog.vue
+++ b/src/pages/catalog.vue
@@ -6,7 +6,7 @@
           <span class="headline">Catálogo</span>
         </v-card-title>
         <v-list-item v-for="item in items" :key="item.id" class="catalog-item">
-          <Card :product="item" :increase="increase" :decrease="decrease" :currency="currency" @add-to-cart="addToCart"/>
+          <Card :product="item" :increase="increase" :decrease="decrease" :currency="currency" :updateQuantity="updateQuantity" @add-to-cart="addToCart"/>
         </v-list-item>
       </v-col>
       
@@ -28,6 +28,7 @@
 <script>
 import Card from '@/components/catalog/Card.vue';
 import Cart from '@/components/catalog/Cart.vue';
+import { inject } from 'vue';
 
 export default {
   components: {
@@ -36,33 +37,33 @@ export default {
   },
   data() {
     return {
+      api: inject('api'),
       cartItems: [],
-      items: [
-        { id: 1, name: 'Producto 1', description: 'Descripción del producto 1', img: 'https://picsum.photos/300/200?random=1', quantity: 0, price: 1200 },
-        { id: 2, name: 'Producto 2', description: 'Descripción del producto 2', img: 'https://picsum.photos/300/200?random=2', quantity: 0, price: 1200 },
-        { id: 3, name: 'Producto 3', description: 'Descripción del producto 3', img: 'https://picsum.photos/300/200?random=3', quantity: 0, price: 1200 },
-        { id: 4, name: 'Producto 4', description: 'Descripción del producto 4', img: 'https://picsum.photos/300/200?random=4', quantity: 0, price: 1200 },
-        { id: 5, name: 'Producto 5', description: 'Descripción del producto 5', img: 'https://picsum.photos/300/200?random=5', quantity: 0, price: 1200 },
-        { id: 6, name: 'Producto 6', description: 'Descripción del producto 6', img: 'https://picsum.photos/300/200?random=6', quantity: 0, price: 1200 },
-        { id: 7, name: 'Producto 7', description: 'Descripción del producto 7', img: 'https://picsum.photos/300/200?random=7', quantity: 0, price: 1200 },
-        { id: 8, name: 'Producto 8', description: 'Descripción del producto 8', img: 'https://picsum.photos/300/200?random=8', quantity: 0, price: 1200 },
-        { id: 9, name: 'Producto 9', description: 'Descripción del producto 9', img: 'https://picsum.photos/300/200?random=9', quantity: 0, price: 1200 },
-        { id: 10, name: 'Producto 10', description: 'Descripción del producto 10', img: 'https://picsum.photos/300/200?random=10', quantity: 0, price: 1200 },
-        { id: 11, name: 'Producto 11', description: 'Descripción del producto 11', img: 'https://picsum.photos/300/200?random=11', quantity: 0, price: 1200 },
-        { id: 12, name: 'Producto 12', description: 'Descripción del producto 12', img: 'https://picsum.photos/300/200?random=12', quantity: 0, price: 1200 },
-        { id: 13, name: 'Producto 13', description: 'Descripción del producto 13', img: 'https://picsum.photos/300/200?random=13', quantity: 0, price: 1200 },
-        { id: 14, name: 'Producto 14', description: 'Descripción del producto 14', img: 'https://picsum.photos/300/200?random=14', quantity: 0, price: 1200 },
-        { id: 15, name: 'Producto 15', description: 'Descripción del producto 15', img: 'https://picsum.photos/300/200?random=15', quantity: 0, price: 1200 },
-        { id: 16, name: 'Producto 16', description: 'Descripción del producto 16', img: 'https://picsum.photos/300/200?random=16', quantity: 0, price: 1200 },
-      ],
+      items: [],
     };
   },
+  created() {
+    this.fetchProducts();
+  },
   computed: {
     cartCount() {
       return this.cartItems.reduce((sum, item) => sum + item.quantity, 0);
     }
   },
   methods: {
+    fetchProducts() {
+      this.api.getProducts()
+        .then(data => {
+          this.items = data.map(product => ({
+            ...product,
+            quantity: 0,
+            img: product.img || `https://picsum.photos/300/200?random=${product.id}`
+          }));
+        })
+        .catch(error => {
+          console.error(error);
+        });
+    },
     increase(item) {
       item.quantity = Number(item.quantity) + 1;
       this.addToCart(item);
@@ -71,6 +72,15 @@ export default {
       item.quantity = Math.max(0, Number(item.quantity) - 1);
       if (item.quantity === 0) {
         this.removeFromCart(item.id);
+      } else {
+        this.addToCart(item);
+      }
+    },
+    updateQuantity(item) {
+      if (item.quantity > 0) {
+        this.addToCart(item);
+      } else {
+        this.removeFromCart(item.id);
       }
     },
     addToCart(item) {