feat(ui): implementar selector de vista universal (tabla/grilla vs tarjetas/mosaico) con persistencia

This commit is contained in:
Carlos Tello
2026-09-05 01:54:55 -03:00
parent 69b8b7ccef
commit 7d342bf8cc
9 changed files with 637 additions and 141 deletions
+15
View File
@@ -88,6 +88,21 @@ El menú desplegable **Gestión** en la barra de navegación organiza las áreas
* **Tipificaciones de Hitos:** Catálogo de tipos de hitos de evaluación académica.
* **Sincronización Sheets:** Integración con Google Sheets para actualización en lote.
### 🔀 9. Selector de Vista Universal (Tabla / Grilla vs. Tarjetas / Mosaico)
La plataforma implementa una arquitectura desacoplada de visualización (`app/static/js/view_switcher.js` y `app/templates/partials/view_switcher.html`) que permite al usuario alternar instantáneamente entre diferentes formatos de presentación sin modificar los datos ni perder los filtros o búsquedas activas:
* **Vista de Tabla / Grilla (`▤ Tabla`):**
* Presentación tabular en filas y columnas de alta densidad informativa.
* Muestra múltiples atributos simultáneamente (edificio, piso, aforo, métricas de ocupación, estado, acciones).
* Ideal para consulta y comparación masiva de registros.
* **Vista de Tarjetas / Mosaico (`▦ Tarjetas`):**
* Presentación visual en tarjetas independientes distribuidas automáticamente según el ancho de pantalla (1 a 4 columnas).
* Enfoque en la información destacada con badges semánticos, barras de uso y botones de acceso rápido.
* **Características del Selector:**
* **Cambio Inmediato:** Conmutación instantánea en el cliente sin recarga de página (`d-none` / manipulación de DOM).
* **Persistencia de Preferencia:** Memorización automática mediante `localStorage` para conservar la elección del usuario en futuras visitas.
* **Preservación de Filtros:** Inyección automática del parámetro `display` en formularios y sincronización de URL sin recarga (`history.replaceState`).
* **Arquitectura Extensible:** Permite registrar futuras vistas (kanban, calendario, compacta) mediante atributos `data-view` y `data-view-container` sin alterar la lógica de negocio.
---
## 🛠️ Stack Tecnológico