Editor de Plantillas PDF y Reportes

Axol Systems incorpora un entorno visual completo e interactivo para crear, editar, probar y asignar plantillas de reportes en PDF directamente desde la interfaz de la aplicación, sin necesidad de manipular tablas de base de datos de forma manual.

Acceso al Editor de Plantillas

Para acceder al editor:

Dirígete a la barra de navegación principal y selecciona Configuración (icono de engranaje).
En el menú lateral de configuración, haz clic en el botón Plantillas (icono de documento).

Interfaz de Trabajo

La pantalla de configuración de plantillas está organizada en dos paneles principales:

flowchart LR
    A[Panel Izquierdo: Lista de Plantillas] --> B[Panel Derecho: Detalle y Trabajo]
    B --> C[Pestaña Editor de Código]
    B --> D[Pestaña Vista Previa en Vivo]

1. Panel Izquierdo: Catálogo y Búsqueda

Barra de Búsqueda: Permite filtrar rápidamente entre todas las plantillas registradas por su nombre.
Lista de Plantillas: Muestra el nombre de cada plantilla y un contador de las vistas a las que se encuentra vinculada.
Botón “Nueva Plantilla”: Crea un borrador en blanco listo para comenzar a estructurar.
Eliminación: Cada tarjeta cuenta con un botón para eliminar la plantilla con confirmación de seguridad.

2. Barra Superior de Acciones

En la cabecera del panel de trabajo encontrarás:

Nombre de la Plantilla: Campo de texto para nombrar o renombrar la plantilla en cualquier momento.
Vistas Asignadas: Botón interactivo que despliega una ventana para seleccionar en qué vistas de la aplicación estará disponible esta plantilla para los usuarios operativos.
Botón Guardar: Almacena la estructura JSON y las asociaciones en el sistema.

Pestaña: Editor de Código

El editor de plantillas cuenta con herramientas avanzadas para agilizar la maquetación y prevenir errores antes de generar documentos:

1. Indicador de Sintaxis en Tiempo Real

En la esquina superior del editor verás un indicador visual del estado de tu JSON:

🟢 Válido: La sintaxis es correcta y el documento está listo para renderizarse.
🔴 Error de Sintaxis: Si falta una coma, una llave o comillas, el indicador cambiará a rojo. Al hacer clic sobre él, se abre un diálogo descriptivo indicando la línea y el motivo exacto del error.

2. Botón de Formateo Automático

Al pulsar el botón “Formatear”, el editor reorganiza, indenta y embellece automáticamente todo el código JSON para mantenerlo limpio y legible.

3. Expansión a Pantalla Completa (`JsonCodeEditor`)

El componente JsonCodeEditor incluye un botón de expansión a pantalla completa en su barra de herramientas superior. Esta función maximiza el editor ocupando todo el área de la pantalla para eliminar distracciones, facilitando la visualización, navegación y edición de estructuras JSON complejas o con múltiples niveles de anidación. Al pulsar nuevamente el botón de restaurar (o presionar la tecla Esc), se vuelve a la interfaz dividida habitual conservando intacto todo el contenido editado.

4. Menú de Fragmentos Rápidos (Snippets)

Para no tener que memorizar la estructura de cada widget, el menú desplegable “Insertar” permite inyectar bloques preconfigurados directamente en la posición de tu cursor:

Texto: Plantilla con tipografía y estilo básico.
Fila (Row): Estructura horizontal con espaciado uniforme.
Columna (Column): Contenedor vertical.
Divisor: Línea separadora personalizable.
Tabla: Cuadrícula con columnas y mapeo para partidas.
Repetir (Repeat): Bloque de duplicación para vales y recibos.
Imagen: Estructura con etiqueta para fotos o firmas.

5. Paleta de Variables de la Entidad

En la parte inferior o lateral del editor, dispones de una paleta con todas las propiedades registradas para la entidad asignada. Al hacer clic en cualquier propiedad, se copia o inserta automáticamente su identificador (ej. {{t0c2}}), evitando errores tipográficos en los nombres de las columnas.

Pestaña: Vista Previa en Vivo

La pestaña de Vista Previa permite verificar exactamente cómo saldrá impreso el documento sin tener que descargarlo ni salir de la pantalla de configuración.

Flujo de Previsualización:

Selector de Registro de Prueba: Puedes elegir cualquier registro real existente en tu base de datos (por ejemplo, seleccionar la Factura FAC-0012 o la Orden ORD-503).
Generación Inmediata: El motor de Axol toma los datos del registro seleccionado, reemplaza las variables dinámicas {{columna}}, calcula las uniones {{join:...}}, procesa las tablas de partidas y dibuja el documento.
Botón de Refrescar: Si realizas un ajuste en el editor JSON y vuelves a la vista previa, puedes presionar el botón de refrescar para actualizar el renderizado al instante.

Asignación de Plantillas a Vistas

Para que una plantilla aparezca disponible en el menú de exportación de una pantalla operativa:

Haz clic en el botón “Vistas asignadas” en la cabecera de la plantilla.
Marca las casillas de las vistas donde los usuarios podrán emitir este reporte (por ejemplo: “Listado de Facturación”, “Detalle de Embarques” o “Kardex de Almacén”).
Guarda los cambios. A partir de ese momento, cuando un usuario presione el botón de exportar o imprimir en esa pantalla, el sistema le ofrecerá esta plantilla como opción.

Descarga con Previsualizador Interactivo (`DownloadTemplateDialog`)

Al exportar o imprimir un reporte desde la vista de detalles de un objeto en las pantallas operativas, el sistema abre la ventana modal interactiva DownloadTemplateDialog:

flowchart TD
    A["Detalle del Objeto (Botón Exportar / PDF)"] --> B["Modal DownloadTemplateDialog"]
    B --> C["1. Seleccionar Plantilla Asignada"]
    B --> D["2. Personalizar Nombre del Archivo"]
    B --> E["3. Renderizado en Vivo (PdfPreview)"]
    E --> F["Descargar Archivo o Enviar a Impresión"]

Capacidades del Diálogo:

Selector Dinámico de Plantilla: Despliega las plantillas asociadas a la entidad activa, permitiendo alternar al instante entre diferentes formatos de salida (por ejemplo, cambiar entre un ticket resumido y una factura detallada).
Personalización del Nombre de Salida: Campo de texto editable para renombrar el archivo final antes de descargarlo (por defecto propone el nombre de la plantilla junto a identificadores del objeto).
Previsualizador Interactivo en Tiempo Real (PdfPreview): Renderiza el documento PDF compilado con los datos reales del registro seleccionado directamente dentro del modal. Permite navegar entre páginas, hacer zoom y verificar la fidelidad del documento antes de guardarlo.
Descarga e Impresión Directa: Proporciona botones dedicados para descargar el archivo PDF generado en el almacenamiento local o enviarlo directamente a la impresora predeterminada.