From ef7d02b3ff477552c13d4f6822e6b9fd6c4de714 Mon Sep 17 00:00:00 2001 From: luis cespedes Date: Thu, 8 May 2025 17:28:24 -0400 Subject: [PATCH] update readme --- README.md | 230 +++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 185 insertions(+), 45 deletions(-) diff --git a/README.md b/README.md index c119f1c..dfc1394 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Cronogramas PrimeNG Application -Este proyecto es una aplicación Angular 19 utilizando PrimeNG para la gestión de cronogramas. +Este proyecto es una aplicación Angular 19 utilizando PrimeNG para la gestión de cronogramas de concesiones. ## Instalación @@ -25,6 +25,8 @@ Este proyecto es una aplicación Angular 19 utilizando PrimeNG para la gestión 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** ```bash @@ -33,7 +35,7 @@ Este proyecto es una aplicación Angular 19 utilizando PrimeNG para la gestión La aplicación estará disponible en `http://localhost:4200/` -### Dependencias Principales +## Dependencias Principales El proyecto utiliza las siguientes bibliotecas clave: @@ -57,16 +59,66 @@ El proyecto utiliza las siguientes bibliotecas clave: npm install primeicons ``` +- **PDFMake 0.2.19**: Para generación de PDFs + ```bash + npm install pdfmake @types/pdfmake + ``` + - **ExcelJS 4.4.0**: Para exportación a Excel ```bash npm install exceljs ``` -- **File-Saver 2.0.5**: Para guardar archivos en el cliente +- **File-Saver 2.5.0**: Para guardar archivos en el cliente ```bash npm install file-saver @types/file-saver ``` +- **Animate.css 4.1.1**: Para animaciones CSS + ```bash + 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`: + +```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 ``` @@ -74,33 +126,40 @@ El proyecto utiliza las siguientes bibliotecas clave: ├── 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 -├── Dockerfile # Configuración de Docker -└── docker-compose.yml # Configuración Docker Compose +└── sonar-project.properties # Configuración para SonarQube ``` -## Estructura de Interfaces +## Modelos de Datos (Interfaces) -Se han creado las siguientes interfaces para los modelos de datos: +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 PD -- **AjustePd**: Modelo para ajustes de PD +- **ActualizacionPd**: Modelo para actualizaciones de Plan de Desarrollo +- **AjustePd**: Modelo para ajustes de Plan de Desarrollo - **UnidadInformacion**: Modelo para unidades de información ## Servicios @@ -115,14 +174,103 @@ Los servicios implementados permiten conectarse a un backend mediante HTTP: - **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**: + +```typescript +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: + +```typescript +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**: + +```typescript +// 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`: + +```typescript +// 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: -- Interceptor HTTP para añadir tokens de autenticación -- Guard para proteger rutas -- Login y sistema de autenticación +- **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 @@ -134,45 +282,37 @@ La aplicación incluye: | `npm run watch` | Compila en modo observador | | `npm test` | Ejecuta pruebas unitarias | -## Despliegue con Docker +## Extendiendo el Proyecto -El proyecto incluye archivos Docker para facilitar el despliegue: +Para extender este proyecto como base para un nuevo desarrollo: -1. Construir y ejecutar con Docker Compose: +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 -```bash -docker-compose up --build -``` +## Buenas Prácticas -Esto expone la aplicación en `http://localhost:80`. +1. **Organización de Componentes**: + - Componentes de página en la carpeta `pages/` + - Componentes reutilizables en `components/` -2. Construir manualmente con Docker: +2. **Modelo de Datos**: + - Definir interfaces para todos los modelos en `models/` + - Exportar todas las interfaces desde `models/index.ts` -```bash -docker build -t cronogramas-primeng . -docker run -p 80:80 cronogramas-primeng -``` +3. **Servicios**: + - Mantener la responsabilidad única para cada servicio + - Centralizar la lógica de negocio en los servicios -## Development server +4. **Gestión de Estado**: + - Utilizar servicios para compartir estado entre componentes -Para iniciar un servidor de desarrollo local, ejecute: +## Recursos Adicionales -```bash -ng serve -``` - -Una vez que el servidor esté en funcionamiento, abra su navegador y navegue a `http://localhost:4200/`. La aplicación se recargará automáticamente cuando modifique cualquiera de los archivos fuente. - -## Building - -Para compilar el proyecto ejecute: - -```bash -ng build -``` - -Esto compilará su proyecto y almacenará los artefactos de compilación en el directorio `dist/`. Por defecto, la compilación para producción optimiza su aplicación para el rendimiento y la velocidad. - -## Additional Resources - -Para más información sobre el uso de Angular CLI, incluyendo referencias detalladas de comandos, visite la página [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli). \ No newline at end of file +- [Documentación de Angular](https://angular.dev/) +- [Documentación de PrimeNG](https://primeng.org/installation) +- [Documentación de PrimeFlex](https://primeflex.org/) +- [Documentación de PDFMake](http://pdfmake.org/) +- [Documentación de ExcelJS](https://github.com/exceljs/exceljs) \ No newline at end of file