Cronogramas PrimeNG Application

Este proyecto es una aplicación Angular 19 utilizando PrimeNG para la gestión de cronogramas de concesiones.

Instalación

Requisitos Previos

• Node.js (versión 20.x recomendada)
• npm (incluido con Node.js)
• Git

Pasos de Instalación

1. Clonar el Repositorio

   git clone <URL-del-repositorio>
   cd cronogramas-primeng
   

2. Instalar Dependencias

   npm install
   

   Importante: Durante la instalación, se ejecutará automáticamente el script setup-project.js (definido como postinstall en package.json) que solicitará el nombre del nuevo proyecto para personalizar la configuración.

3. Iniciar el Servidor de Desarrollo

   npm start
   

   La aplicación estará disponible en http://localhost:4200/

Dependencias Principales

El proyecto utiliza las siguientes bibliotecas clave:

• Angular 19: Framework base

  npm install @angular/core @angular/common @angular/forms @angular/router @angular/compiler
  

• PrimeNG 19.1.0: Biblioteca de componentes UI

  npm install primeng @primeng/themes
  

• PrimeFlex 4.0.0: Sistema de CSS flexible

  npm install primeflex
  

• PrimeIcons 7.0.0: Conjunto de iconos

  npm install primeicons
  

• PDFMake 0.2.19: Para generación de PDFs

  npm install pdfmake @types/pdfmake
  

• ExcelJS 4.4.0: Para exportación a Excel

  npm install exceljs
  

• File-Saver 2.5.0: Para guardar archivos en el cliente

  npm install file-saver @types/file-saver
  

• Animate.css 4.1.1: Para animaciones CSS

  npm install animate.css
  

Configuración del Proyecto

Script de Configuración (setup-project.js)

El proyecto incluye un script de configuración post-instalación (setup-project.js) que se ejecuta automáticamente después de npm install. Este script realiza las siguientes tareas:

1. Solicita el nombre del nuevo proyecto
2. Actualiza package.json con el nuevo nombre
3. Modifica angular.json para actualizar todas las referencias al nombre del proyecto
4. Actualiza el título en src/index.html

Este script facilita la reutilización del template para crear nuevos proyectos basados en esta estructura.

Configuración de Estilos en angular.json

El proyecto está configurado para utilizar varios estilos externos a través del archivo angular.json:

"styles": [
  "src/styles.scss",
  {
    "input": "node_modules/animate.css/animate.min.css",
    "bundleName": "animate",
    "inject": true
  },
  {
    "input": "node_modules/primeflex/primeflex.css",
    "bundleName": "primeflex",
    "inject": true
  },
  {
    "input": "node_modules/primeicons/primeicons.css",
    "bundleName": "primeicons",
    "inject": true
  }
]

Para añadir nuevos estilos externos, sigue el mismo patrón en el archivo angular.json.

Estructura del Proyecto

/cronogramas-primeng/
├── src/                      # Código fuente
│   ├── app/                  # Componentes Angular
│   │   ├── components/       # Componentes compartidos 
│   │   │   ├── alert-dialog/ # Diálogo de alertas
│   │   │   ├── footer/       # Pie de página
│   │   │   ├── layout/       # Estructura principal
│   │   │   ├── navbar/       # Barra de navegación
│   │   │   ├── sidebar/      # Barra lateral
│   │   │   └── visor-pdf/    # Visualizador de PDF
│   │   ├── guards/           # Guardias de ruta
│   │   ├── interceptors/     # Interceptores HTTP
│   │   ├── models/           # Interfaces de datos
│   │   ├── pages/            # Componentes de página
│   │   ├── services/         # Servicios
│   │   └── utils/            # Utilidades
│   ├── pipes/                # Pipes personalizados
│   ├── index.html            # HTML principal
│   ├── main.ts               # Punto de entrada  
│   └── styles.scss           # Estilos globales
├── public/                   # Recursos estáticos
├── angular.json              # Configuración de Angular
├── package.json              # Dependencias y scripts
├── setup-project.js          # Script de configuración post-instalación
├── tsconfig.json             # Configuración TypeScript
└── sonar-project.properties  # Configuración para SonarQube

Modelos de Datos (Interfaces)

El proyecto define las siguientes interfaces para los modelos de datos:

• Cronograma: Modelo base para todos los cronogramas
• Empresa: Modelo para empresas
• TipoCarga: Modelo para tipos de carga
• EstadoAprobacion: Modelo para estados de aprobación
• ActualizacionPd: Modelo para actualizaciones de Plan de Desarrollo
• AjustePd: Modelo para ajustes de Plan de Desarrollo
• UnidadInformacion: Modelo para unidades de información

Servicios

Los servicios implementados permiten conectarse a un backend mediante HTTP:

• CronogramaService: CRUD para cronogramas
• EmpresaService: CRUD para empresas
• ActualizacionPdService: CRUD para actualizaciones de PD
• AjustePdService: CRUD para ajustes de PD
• UnidadInformacionService: CRUD para unidades de información
• TipoCargaService: Consulta de tipos de carga
• EstadoAprobacionService: Consulta de estados de aprobación
• AuthService: Autenticación y gestión de tokens
• PdfService: Generación y manejo de PDFs
• AlertService: Gestión de alertas

Generación de PDFs con PDFMake

El proyecto utiliza PDFMake para la generación dinámica de PDFs. La configuración básica se realiza así:

1. Importar pdfMake en el servicio:

import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';

pdfMake.vfs = pdfFonts.vfs;

2. Definir el documento PDF usando la estructura de pdfMake:

const docDefinition = {
  content: [
    { text: 'Título del Documento', style: 'header' },
    // Contenido del documento
  ],
  styles: {
    header: {
      fontSize: 18,
      bold: true
    }
  }
};

3. Generar o descargar el PDF:

// Generar como URL de datos
const pdfDocGenerator = pdfMake.createPdf(docDefinition);
pdfDocGenerator.getDataUrl((dataUrl) => {
  // Usar dataUrl para mostrar el PDF en un iframe
});

// Descargar el PDF
pdfMake.createPdf(docDefinition).download('nombre-archivo.pdf');

4. Visualizar el PDF usando el componente visor-pdf:

// En el componente que necesita mostrar el PDF
import { DialogService } from 'primeng/dynamicdialog';
import { VisorPdfComponent } from 'path/to/visor-pdf.component';

constructor(private dialogService: DialogService) {}

mostrarPDF() {
  this.dialogService.open(VisorPdfComponent, {
    header: 'Cronograma PDF',
    width: '80%',
    data: {
      product: this.item // Datos para el PDF
    }
  });
}

Seguridad

La aplicación incluye:

• AuthInterceptor: Interceptor HTTP para añadir tokens de autenticación a las solicitudes
• AuthGuard: Guard para proteger rutas que requieren autenticación
• Login: Componente para autenticación de usuarios

Animaciones de Ruta

El proyecto implementa animaciones de transición entre rutas usando:

• RouteAnimationsComponent: Define las animaciones para las transiciones de ruta
• Animate.css: Proporciona clases CSS predefinidas para animaciones

Componentes Principales

Layout Component

Define la estructura principal de la aplicación, incluyendo:

• Barra de navegación (navbar)
• Barra lateral (sidebar)
• Contenido principal con soporte para animaciones de ruta
• Pie de página (footer)

VisorPDF Component

Componente standalone que permite:

• Visualizar PDFs generados dinámicamente
• Descargar el PDF visualizado
• Enviar el PDF a través del sistema

Comandos Disponibles

Comando	Descripción
npm start	Inicia servidor de desarrollo
npm run build	Compila el proyecto
npm run build:prod	Compila para producción
npm run watch	Compila en modo observador
npm test	Ejecuta pruebas unitarias

Extendiendo el Proyecto

Para extender este proyecto como base para un nuevo desarrollo:

1. Clona el repositorio
2. Ejecuta npm install (esto iniciará automáticamente el script setup-project.js)
3. Proporciona el nombre del nuevo proyecto cuando se te solicite
4. El script actualizará automáticamente la configuración con el nuevo nombre
5. Comienza a desarrollar tu aplicación personalizada

Buenas Prácticas

1. Organización de Componentes:

   • Componentes de página en la carpeta pages/
   • Componentes reutilizables en components/

2. Modelo de Datos:

   • Definir interfaces para todos los modelos en models/
   • Exportar todas las interfaces desde models/index.ts

3. Servicios:

   • Mantener la responsabilidad única para cada servicio
   • Centralizar la lógica de negocio en los servicios

4. Gestión de Estado:

   • Utilizar servicios para compartir estado entre componentes

Recursos Adicionales

• Documentación de Angular
• Documentación de PrimeNG
• Documentación de PrimeFlex
• Documentación de PDFMake
• Documentación de ExcelJS