Abrir selector visual de mesas
Abre el plano visual de mesas de la ubicación seleccionada para consultar zonas, mesas, tipos, colores, capacidad y combinaciones antes de preparar una selección temporal.
En este artículo
El selector visual ayuda al responsable de sala a revisar el plano real del local antes de decidir qué mesas usar en una reserva. Carga el layout de la ubicación y muestra zonas, mesas, tipos y reglas de combinación en una superficie de trabajo visual.
Esta acción solo abre y mantiene una selección local. No guarda mesas en la reserva ni persiste cambios en backend; la confirmación pertenece al editor de reserva u otra superficie consumidora.
Antes de empezar
- Tener sesión iniciada con organización y ubicación seleccionadas; en el demo ES, Grupo Marea Demo y Marea Gran Via.
- Disponer de un `layoutId` válido para la ubicación y de un layout disponible en `GET /api/app/{orgId}/{locationId}/layouts/{layoutId}`.
- Poder entrar desde reservas o layouts; la carga efectiva del plano requiere `layout:view` en backend.
- Si se abre desde el editor de una reserva, debe existir `layoutId` y el modo de mesas no debe ser Indiferente.
- Pasar `sessionId` solo si se quiere conservar un borrador temporal dentro de la misma sesión JS.
Instrucciones
- 1.
Comprueba la ubicación
Antes de abrir el selector, confirma que trabajas en el local correcto. Si falta organización, ubicación o `layoutId`, la pantalla muestra que no encuentra el plano solicitado.
- 2.
Abre el selector
Desde una reserva, usa Seleccionar mesas cuando la reserva exige asignación explícita. También puede abrirse por la ruta dedicada `reservations/tables/select` pasando `layoutId`.
- 3.
Espera la carga del plano
La pantalla consulta el layout de la ubicación y prepara el canvas visual. Cuando termina, aparecen las zonas, mesas, etiquetas, controles de volver y zoom, y la tarjeta de capacidad en modo asignación.
- 4.
Interpreta zonas y combinaciones
Usa las etiquetas para localizar mesas y zonas. Los colores proceden del tipo de mesa, y las combinaciones configuradas determinan la capacidad cuando se selecciona más de una mesa.
- 5.
Usa la selección como borrador
Al tocar mesas, la selección cambia localmente. Si hay `sessionId`, el borrador se guarda en memoria para esa sesión; si no, solo vive en la pantalla actual.
- 6.
Vuelve sin guardar desde esta pantalla
El botón Volver cierra el selector. En la ruta dedicada, si hay `occurrenceId`, la app vuelve al detalle de esa reserva; el selector no tiene botón de guardar ni aplicar.
Validaciones y límites
- `layoutId`, `occurrenceId` y `sessionId` se aceptan solo como texto y se normalizan quitando espacios.
- La consulta del layout queda deshabilitada hasta que existen organización, ubicación, `layoutId` y permiso de entrada en frontend.
- El backend exige `layout:view`, rechaza ids vacíos, layouts borrados y layouts de otra ubicación.
- Si falta acceso, la pantalla informa que no hay permisos para ver el selector de mesas.
- Si la consulta falla o no devuelve datos, la pantalla informa que no pudo cargar el plano de mesas.
- El borrador de sesión elimina ids vacíos, recorta espacios y deduplica mesas antes de guardarlas.
- El selector descarta selecciones de mesas que no existan en el layout cargado.
- Un toque solo selecciona una mesa si no fue gesto de pan o zoom y si impacta una mesa renderizada.
- La pantalla dedicada no calcula disponibilidad, conflictos de reservas, double turn ni mesas con cuenta activa.
- En web, la apertura depende de que CanvasKit/Skia se inicialice correctamente.
Resultado esperado
El usuario queda dentro del selector visual con el plano cargado y, si interactúa con mesas, con una selección temporal lista para volver al flujo que corresponda. Ninguna asignación queda persistida por esta apertura.