Documentación de Cambios y Mejoras del Formulario CV (profileForm.js)

Este documento detalla las modificaciones y optimizaciones realizadas en el código JavaScript principal (profileForm.js) que gestiona el formulario de perfil de usuario. Estos cambios buscan resolver errores, mejorar la funcionalidad y optimizar la experiencia del usuario.

1. Resolución de ReferenceError: firestoreService is not defined

Problema Original La aplicación intentaba hacer uso de la funcionalidad de Firebase Firestore (firestoreService) para guardar y cargar datos, pero la instancia de este servicio no estaba correctamente importada o definida en el scope del archivo profileForm.js, lo que resultaba en un error de referencia.

Solución Implementada Se añadió una sentencia import explícita para el módulo firestoreService al inicio del archivo profileForm.js, asegurando que la instancia del servicio estuviera disponible para su uso en toda la clase MultiStepForm.

// profileForm.js
import { firestoreService } from './firestore-service.js'; // Línea añadida al inicio del archivo.

Razón del Cambio Permitir que el formulario interactúe correctamente con la base de datos de Firebase Firestore para la persistencia de los datos del CV y del perfil del usuario.

2. Manejo de Campos Vacíos y Errores de Firebase al Guardar Datos

Problema Original Al intentar guardar los datos del formulario en Firebase, se producían errores debido a la inclusión de campos vacíos, nulos, indefinidos, o incluso claves de objeto vacías ("": "") en la carga útil de los datos.

Solución Implementada Se implementó una lógica de filtrado robusta dentro del método async submitForm() para sanear el objeto dataToSave. Esta lógica asegura que solo se incluyan en los datos a enviar a Firebase aquellos pares clave-valor que tengan una clave no vacía y un valor definido y no vacío. También se añadió una verificación para saltar arrays vacíos.

// profileForm.js (dentro de la clase MultiStepForm, método async submitForm())
async submitForm() {
    // ...
    const dataToSave = {};
    for (const key in this.formData) {
        const value = this.formData[key];
        // Se asegura que la clave no sea vacía y que el valor no sea null, undefined, o cadena vacía.
        if (key !== "" && value !== "" && value !== null && value !== undefined) {
            // Si el valor es un array, se salta si está vacío.
            if (Array.isArray(value) && value.length === 0) {
                continue;
            }
            dataToSave[key] = value; // Incluye el campo si cumple las condiciones.
        }
    }
    // ... Lógica para enviar 'dataToSave' a firestoreService.saveUserCV
}

Razón del Cambio Prevenir errores de validación por parte de Firebase, mejorar la integridad y limpieza de los datos almacenados en la base de datos, y asegurar un proceso de guardado más fiable.

3. Implementación de updateStepVisibility()

Problema Original El flujo del formulario de múltiples pasos requería una función para gestionar la visibilidad de los pasos y actualizar los indicadores de progreso y los botones de navegación, la cual no estaba definida en la clase MultiStepForm. Esto resultaba en un TypeError cuando se intentaba llamar a this.updateStepVisibility().

Solución Implementada Se añadió el método updateStepVisibility() a la clase MultiStepForm. Esta función controla qué form-section es visible basándose en this.currentStep, actualiza el texto y la visibilidad de los botones "Anterior" y "Siguiente" (cambiando "Siguiente" a "Enviar" en el último paso), y actualiza visualmente la barra de progreso.

// profileForm.js (dentro de la clase MultiStepForm)
updateStepVisibility() {
    const formSections = document.querySelectorAll('.form-section');
    formSections.forEach(section => {
        const step = parseInt(section.dataset.section, 10);
        section.style.display = (step === this.currentStep) ? 'block' : 'none';
    });

    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    prevBtn.style.display = (this.currentStep === 1) ? 'none' : 'inline-block';

    if (this.currentStep === this.totalSteps) {
        nextBtn.textContent = 'Enviar';
        nextBtn.innerHTML = 'Enviar <i class="fas fa-paper-plane"></i>';
    } else {
        nextBtn.textContent = 'Siguiente';
        nextBtn.innerHTML = 'Siguiente <i class="fas fa-arrow-right"></i>';
    }

    const progressBar = document.getElementById('progressBar');
    const progress = (this.currentStep - 1) / (this.totalSteps - 1) * 100;
    progressBar.style.width = `${progress}%`;
}

Razón del Cambio Habilitar una navegación fluida y un feedback visual claro para el usuario a medida que avanza a través de los diferentes pasos del formulario.

4. Implementación de resetValidation()

Problema Original Después de enviar o avanzar en el formulario, los mensajes de error de validación previos y los estilos visuales (is-invalid) permanecían en los campos, lo que podría confundir al usuario. Se producía un TypeError al intentar llamar a this.resetValidation().

Solución Implementada Se añadió el método resetValidation() a la clase MultiStepForm. Este método itera sobre los campos de la sección actual, elimina la clase is-invalid y limpia el contenido de los elementos de mensaje de validación asociados (

).

// profileForm.js (dentro de la clase MultiStepForm)
resetValidation() {
    const currentSection = document.querySelector(`.form-section[data-section="${this.currentStep}"]`);
    if (!currentSection) return;

    const inputs = currentSection.querySelectorAll('input, select, textarea');
    inputs.forEach(input => {
        input.classList.remove('is-invalid'); // Elimina la clase de error visual
        const errorElement = document.getElementById(`${input.id}Error`);
        if (errorElement) {
            errorElement.textContent = '';     // Limpia el mensaje de error
            errorElement.style.display = 'none'; // Oculta el contenedor del mensaje
        }
    });
}

Razón del Cambio Mejorar la experiencia de usuario asegurando que los indicadores de validación se limpien adecuadamente después de que los problemas hayan sido resueltos o el usuario avance a un nuevo paso.

5. Gestión de la Persistencia Local (localStorage) y Reinicio del Formulario

Problema Observado Aunque los datos en Firebase (Firestore y Auth) fueran eliminados, el formulario en el navegador seguía mostrando información antigua (incluyendo posibles saltos en los índices de las secciones dinámicas, como experiencia_0 y experiencia_7 sin los intermedios). Esto se debía a que profileForm.js utiliza localStorage para guardar y cargar formData entre sesiones.

Solución y Recomendación

1. Manejo de localStorage: Se confirmó que los métodos loadFormData() y saveFormData() utilizan localStorage.getItem() y localStorage.setItem() respectivamente para persistir los datos del formulario directamente en el navegador del usuario.

2. Reinicio "Forzado": Para asegurar un estado completamente limpio del formulario después de borrar datos en Firebase, se debe limpiar manualmente el localStorage del navegador para la URL de la aplicación. Esto se realiza usualmente a través de las herramientas de desarrollador del navegador (pestaña "Application" -> "Local Storage").

3. Mejora en addInitialSections y addDynamicSection (Recomendación): Se propuso una refactorización de estos métodos para que addInitialSections solo cree secciones HTML para los índices que realmente tienen datos cargados desde formData, y para que addDynamicSection pueda aceptar un índice específico al crear una sección (sin incrementar el contador) o automáticamente generar el siguiente índice disponible cuando se añade una nueva sección por acción del usuario. Esto evitaría la creación de "huecos" en los índices si los datos cargados no son secuenciales.

Razón del Cambio Proporcionar claridad sobre el comportamiento de la persistencia de datos del lado del cliente y ofrecer al desarrollador las herramientas para restablecer completamente el estado del formulario, alineándolo con el estado del backend de Firebase.

6. Modularización y Mantenimiento del Código

Mejora General Se ha incentivado la separación de responsabilidades, como la extracción de la generación de HTML de las secciones dinámicas en una función auxiliar (generateDynamicSectionHTML).

Razón del Cambio Aumentar la legibilidad del código, facilitar el mantenimiento y la escalabilidad, y permitir una gestión más limpia de la lógica de creación de elementos del DOM.

Estos cambios han contribuido significativamente a la estabilidad, funcionalidad y experiencia de desarrollo de tu aplicación.