Carta — Platos y bebidas del restaurante

Vista

La Carta (/carta) muestra todos los platos y bebidas del restaurante. Es pública: cualquier visitante puede consultarla sin iniciar sesión.

• Pestañas de categorías para filtrar: Todos, Especialidades, Entrantes, Carnes, Pescados, Postres y Bebidas.
• Tarjeta de cada producto con foto, etiqueta (si la tiene), nombre, precio, descripción, selector de cantidad y botón "Añadir".
• Al pulsar en la foto o el nombre, se abre el detalle del producto.

Responsables y tareas

Responsable: Gema Miguel · Maqueta inicial: Iker

Tarea Jira	Descripción	Estado
GC-84	[HU-06] Explorar la carta filtrando por categoría	Historia
GC-87	Crear la tarjeta de producto con imagen, badge, nombre, precio y descripción corta	Listo
GC-88	Conectar con el listado de productos (API del backend)	Listo

Capturas

Entidades involucradas

Archivo	Tipo	Función
src/Views/Menu/CartaView.vue	Vista	Página de la Carta: carga los productos, filtra por categoría y añade al carrito
src/components/CategoryTabs.vue	Componente	Pestañas de categorías (usa v-model)
src/components/ProductCard.vue	Componente	Tarjeta de producto con selector de cantidad y botón "Añadir"
src/components/QuantityStepper.vue	Componente	Selector de cantidad (− / +)
src/composables/useProducts.js	Composable	Pide los productos al back y los comparte con la Home
src/composables/useCart.js	Composable	Carrito compartido de toda la aplicación
public/menu-img/	Imágenes	Fotos de los 38 productos

Endpoints que consume

Método	Ruta	Para qué
GET	/api/products	Todos los productos de la carta

La URL base se toma de la variable VITE_API_URL del archivo .env (ver .env.example).

Cómo probarlo

1. Arranca el back (Docker Desktop + GoxuApplication) y el front (npm run dev).
2. Abre http://localhost:5173/carta.
3. Comprueba que:
   • Aparecen los 38 productos con su foto.
   • Al pulsar una pestaña solo se ven los productos de esa categoría.
   • Al pulsar "Añadir", el botón cambia a "Añadido ✓" durante un momento y aparece el aviso en el icono del carrito de la cabecera.
   • En el carrito aparecen los productos con la cantidad elegida.

Decisiones

• El filtro se hace en el front. Se piden todos los productos una sola vez y las pestañas los filtran con una propiedad computed, sin volver a llamar al back en cada cambio de categoría.
• Adaptador entre back y front. useProducts convierte el precio a número y agrupa la etiqueta en un objeto badge: { label, tone }, que es el formato que espera ProductCard.
• Estado compartido. La lista de productos se declara fuera de la función del composable, así la Carta y la Home usan la misma.
• La tarjeta avisa, la vista decide. ProductCard no añade al carrito: emite el evento add con { id, quantity } y es CartaView quien llama a useCart.
• Confirmación visual accesible. Al añadir, el botón cambia de color y de texto ("Añadido ✓"), con aria-live para que lo anuncien los lectores de pantalla.
• Imágenes en el front. El back solo guarda la ruta (/menu-img/...); los archivos están en la carpeta public/ del front.

Limitaciones

• Las categorías están escritas en CartaView. Si el back añade una categoría nueva, hay que añadirla también a la lista del front.
• El carrito no se guarda si se recarga la página: vive en memoria mientras la aplicación está abierta.