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
+17
View File
@@ -471,6 +471,23 @@
* **Batería de Pruebas Automatizadas:**
* Creación de tests unitarios y de integración en `tests/test_services_and_dto.py`, `tests/test_jwt_and_api.py` y `tests/test_security_chain.py` (18/18 pruebas aprobadas).
---
## 28. Selector de Vista Universal: Tabla / Grilla vs. Tarjetas / Mosaico (2026-09-05)
* **Arquitectura Extensible de Visualización (`app/static/js/view_switcher.js` y `app/templates/partials/view_switcher.html`):**
* Desarrollo del módulo `ViewSwitcherManager` que desacopla la lógica de presentación de los registros. Permite añadir futuras vistas (ej. kanban, timeline, compacta) mediante atributos de datos `data-view` y `data-view-container` sin tocar el backend.
* **Conmutación Inmediata:** Cambio instantáneo de vista en el cliente sin recarga de página.
* **Persistencia de Preferencias:** Almacenamiento local mediante `localStorage` (`view_preference_{context}`) para conservar la elección del usuario entre sesiones.
* **Preservación de Estado y Filtros:** Inyección reactiva del parámetro `display` en formularios de búsqueda/filtro y actualización silenciosa de la URL (`window.history.replaceState`), garantizando que búsquedas, ordenamientos y paginaciones conserven la vista activa.
* **Integración en Módulo de Aulas y Espacios (`app/templates/classrooms/list.html`):**
* **Vista de Tabla / Grilla:** Columnas detalladas (Código, Edificio/Sede, Piso, Capacidad, Equipamiento, Ocupación D/S/M, Estado y Acciones).
* **Vista de Tarjetas / Mosaico:** Cuadrícula responsive (1 a 4 columnas) con badges semánticos, indicadores de piso y barras de porcentaje de uso.
* **Integración en Módulo de Reservas y Cronograma (`app/templates/schedule/list.html`):**
* **Vista de Tabla:** Análisis denso de reservas con estado, comisión, horario y aula.
* **Vista de Tarjetas:** Fichas visuales con badges destacados de fecha/hora, materia, turno, docente a cargo y enlaces a aulas virtuales.
* **Pruebas y Verificación:**
* Incorporación de tests en `tests/test_view_switcher.py`, validando renderizado de selectores y contenedores en ambas rutas (20/20 pruebas aprobadas).