Sprint 6: Modales CRUD y Filtros Desplegables

1. Objetivo del Sprint

Unificar la experiencia de usuario en todas las vistas CRUD reemplazando formularios inline por modales, agregar filtros desplegables en todas las tablas de datos, y corregir inconsistencias entre formularios y base de datos.

2. Planificación de Historias de Usuario

3. Criterios de Éxito

• Todas las vistas CRUD usan modales unificados para crear y editar.
• Ninguna tabla CRUD queda sin filtros desplegables.
• Los filtros usan <select> con opciones reales de la BD (no inputs de texto).
• Los campos correo_personal y direccion_domicilio son editables en el modal de docentes.
• Los campos de hora se cargan correctamente al editar (sin segundos).
• El JSON de datos para edición incluye todos los campos necesarios.

4. Estado de Implementación

5. Notas Técnicas

5.1 Patrón Modal Unificado

Cada vista CRUD sigue el mismo patrón:

<!-- Botón en header -->
<button id="btn-nuevo-X">Nuevo X</button>

<!-- Modal (mismo para crear/editar) -->
<div id="modal-X" class="fixed inset-0 z-50 hidden">
  <form id="form-X" method="post">
    <!-- campos del formulario -->
  </form>
</div>

<script>
(function() {
  // Variables locales
  var modal = document.getElementById('modal-X');
  var form = document.getElementById('form-X');
  var storeUrl = '<?= url_to("admin.X.store") ?>';
  var data = <?= $XJson ?>;

  function abrirModalParaCrear() { /* ... */ }
  function abrirModalParaEditar(id) { /* ... */ }
  function cerrarModal() { /* ... */ }

  // Event listeners: overlay, close, cancel, Escape
})();
</script>

5.2 Filtros Desplegables

Cada tabla CRUD tiene una barra de filtros sobre el encabezado:

<div class="p-4 border-b border-slate-100 flex flex-col sm:flex-row gap-3 flex-wrap">
  <select id="filtro-X">
    <option value="">Todas las X</option>
    <?php foreach (array_unique(array_map(fn($item) => $item['campo'] ?? '', $data)) as $valor): ?>
      <?php if ($valor !== ''): ?>
        <option value="<?= esc($valor) ?>"><?= esc($valor) ?></option>
      <?php endif; ?>
    <?php endforeach; ?>
  </select>
  <select id="filtro-estado">
    <option value="">Todos</option>
    <option value="Activo">Activo</option>
    <option value="Inactivo">Inactivo</option>
  </select>
</div>

El JS de filtrado compara el valor seleccionado con el contenido de la celda correspondiente:

function aplicarFiltros() {
    var valor = filtro.value;
    filas.forEach(function(fila) {
        var celda = fila.children[indiceColumna].textContent.trim();
        fila.style.display = (!valor || celda === valor) ? '' : 'none';
    });
}
filtro.addEventListener('change', aplicarFiltros);

5.3 Campos Faltantes Corregidos

• admin/docentes.php y coordinador/docentes.php: Agregados inputs correo_personal (email) y direccion_domicilio (text) al modal, con populate en JS.
• Coordinador/DocentesController.php: Agregados correo_personal y direccion_domicilio al array docentesData que genera el JSON.
• Formato de hora: En admin/franjas.php, el JS usa .substring(0, 5) para convertir HH:MM:SS (MySQL TIME) a HH:MM (HTML input time).

5.4 Vistas con Filtros por Vista

6. Archivos Modificados

7. Impacto

• Vistas con modales: 6 (antes usaban formularios inline)
• Vistas con filtros desplegables: 10 (todas las tablas CRUD)
• Campos recuperados: 2 (correo_personal, direccion_domicilio)
• Bugfixes: 2 (formato hora, JSON incompleto)
• Archivos modificados: 11

• Regresar al Inicio