Entrada 11: inicio del el front y back

Bitácora de Sesión

Fecha: 09/06/2026

Inicio: [18:00] | Fin: [20:30] || Total: [2 hora 30 minutos]

Presente: Matías Benavides Sandoval

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

¿QUÉ HICIMOS HOY?

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Esta sesión tuvo como objetivo principal validar end-to-end todo el trabajo de las sesiones anteriores: el flujo completo Login → Lista de empleados → Impersonar un empleado → Vista de empleado impersonado → Regresar a admin. Este flujo involucraba cambios en backend (SPs, controladores, rutas) y frontend (TS compilado a JS, HTML, CSS) .

Con ambos problemas resueltos, se validó el flujo completo exitosamente: Login → Lista empleados (3 botones por fila: Consultar, Editar, Impersonar) → clic "Impersonar" → redirige a html con datos del empleado → clic "Regresar a admin" → vuelve a la lista.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

PROBLEMAS DETECTADOS Y CÓMO SE RESOLVIERON

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Problema 1 — Botones de tabla no funcionan ni se renderizan bien.

Causa: merge conflict sin resolver en public/js/empleados.js (JS compilado). El template literal de renderTabla() tenía <<<<<<< HEAD, =======, >>>>>>> 6a88b97 que se renderizaban como texto. La sección HEAD tenía botones "Movimientos" y "Borrar" con data-documento="${empleado.ValorDocumentoIdentidad}" (propiedad incorrecta), y la sección entrante tenía el botón "Impersonar" con data-documento="${empleado.ValorDocumento}". El merge conflict nunca se resolvió en el JS compilado, solo en el TS fuente.

Solución: recompilar frontend con npx tsc --project tsconfigFronted.json. El TS fuente (src/frontend/empleados.ts) estaba limpio, por lo que la compilación produjo el JS correcto con 3 botones (Consultar, Editar, Impersonar), todos con data-documento="${empleado.ValorDocumento}" y el handler delegado único para data-accion === "impersonar".

Problema 2 — API devuelve "error interno del servidor".

Causa: el proceso Node.js en ejecución usaba dist/ compilado el 20/05/2026 — antes de la creación de sp_ImpersonarEmpleado, sp_RegresarAdmin, sp_GetTiposMovimiento, sp_GetEmpleadoByIdInt, y antes de las rutas nuevas y controladores adaptados. La base sí tenía los SPs (desplegados en sesiones anteriores), pero el backend no podía llamarlos porque el código compilado en dist/ no los referenciaba.

Solución: recompilar backend con npx tsc (produce dist/ desde src/), matar proceso Node viejo y reiniciar. Verificar con Get-ChildItem dist/ -Recurse | Sort LastWriteTime que todos los .js tengan fecha actual.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

AVANCE DEL CÓDIGO

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

class EmpleadoPage {
    constructor() {
        this.btnRegresarAdmin = document.getElementById('btnRegresarAdmin');
        this.logoutBtn = document.getElementById('logoutBtn');
        this.estado = document.getElementById('estado');
        this.nombreSpan = document.getElementById('empleadoNombre');
        this.documentoP = document.getElementById('empleadoDocumento');
        this.bindEvents();
        this.pintarContexto();
    }
    bindEvents() {
        if (this.btnRegresarAdmin) {
            this.btnRegresarAdmin.addEventListener('click', () => {
                void this.regresarAdmin();
            });
        }
        if (this.logoutBtn) {
            this.logoutBtn.addEventListener('click', () => {
                localStorage.removeItem('authToken');
                localStorage.removeItem('username');
                localStorage.removeItem('impersonatedIdEmpleado');
                localStorage.removeItem('impersonatedDocumento');
                localStorage.removeItem('impersonatedNombre');
                window.location.href = '/login.html';
            });
        }
    }
    pintarContexto() {
        const documento = localStorage.getItem('impersonatedDocumento') || this.queryParam('documento') || '';
        const nombre = localStorage.getItem('impersonatedNombre') || '';
        if (this.documentoP) {
            this.documentoP.textContent = documento ? `Documento: ${documento}` : '';
        }
        if (this.nombreSpan) {
            this.nombreSpan.textContent = nombre || documento || 'Empleado';
        }
    }
    queryParam(nombre) {
        const url = new URL(window.location.href);
        return url.searchParams.get(nombre) || '';
    }
    setEstado(texto, tipo) {
        if (!this.estado) {
            return;
        }
        this.estado.textContent = texto;
        this.estado.className = `status ${tipo || 'info'}`;
    }
    async regresarAdmin() {
        const username = localStorage.getItem('username');
        if (!username) {
            window.location.href = '/login.html';
            return;
        }
        if (this.btnRegresarAdmin) {
            this.btnRegresarAdmin.disabled = true;
        }
        this.setEstado('Regresando a interfaz de administrador...', 'info');
        try {
            const response = await fetch('/api/auth/regresar-admin', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'x-username': username,
                },
            });
            const payload = await response.json().catch(() => null);
            if (!response.ok || !payload || !payload.success) {
                this.setEstado((payload && payload.message) || 'No se pudo regresar a la interfaz de administrador.', 'error');
                if (this.btnRegresarAdmin) {
                    this.btnRegresarAdmin.disabled = false;
                }
                return;
            }
            localStorage.removeItem('impersonatedIdEmpleado');
            localStorage.removeItem('impersonatedDocumento');
            localStorage.removeItem('impersonatedNombre');
            window.location.href = '/empleados.html';
        }
        catch (error) {
            console.error('Error regresando a admin:', error);
            this.setEstado('Error de conexión con el servidor.', 'error');
            if (this.btnRegresarAdmin) {
                this.btnRegresarAdmin.disabled = false;
            }
        }
    }
}

document.addEventListener('DOMContentLoaded', () => {
    new EmpleadoPage();
});

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

MORALEJAS / BUENAS PRÁCTICAS

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  • Después de un merge (incluso si se resuelven los conflictos en los fuentes), recompilar siempre tanto frontend como backend. Los archivos compilados pueden quedar con artefactos del merge aunque el .ts esté limpio.
  • Cuando la API devuelve "error interno del servidor" pero la base de datos está online, lo primero es verificar la fecha de los archivos en dist/. Si son anteriores a los cambios en src/, ese es el problema.
  • El package.json tiene "build": "tsc" y "start": "node dist/index.js" — usarlos consistentemente evita confusiones entre desarrollo y producción.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

PRÓXIMA SESIÓN: ¿QUÉ SIGUE?

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  • Persona B (Sebastián): conectar sus SPs de planilla (sp_GetPlanillaSemanal, sp_GetPlanillaMensual) a empleado-view.html/ts.
  • Ejecutar sp_CargarCatalogosXML con el XML actualizado para popular la BD.
  • Implementar visor de bitácora (R07 admin) si aplica.

Comentarios

Publicar un comentario