318 lines
9.4 KiB
Markdown
318 lines
9.4 KiB
Markdown
# 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**
|
|
|
|
```bash
|
|
git clone <URL-del-repositorio>
|
|
cd cronogramas-primeng
|
|
```
|
|
|
|
2. **Instalar Dependencias**
|
|
|
|
```bash
|
|
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
|
|
npm start
|
|
```
|
|
|
|
La aplicación estará disponible en `http://localhost:4200/`
|
|
|
|
## Dependencias Principales
|
|
|
|
El proyecto utiliza las siguientes bibliotecas clave:
|
|
|
|
- **Angular 19**: Framework base
|
|
```bash
|
|
npm install @angular/core @angular/common @angular/forms @angular/router @angular/compiler
|
|
```
|
|
|
|
- **PrimeNG 19.1.0**: Biblioteca de componentes UI
|
|
```bash
|
|
npm install primeng @primeng/themes
|
|
```
|
|
|
|
- **PrimeFlex 4.0.0**: Sistema de CSS flexible
|
|
```bash
|
|
npm install primeflex
|
|
```
|
|
|
|
- **PrimeIcons 7.0.0**: Conjunto de iconos
|
|
```bash
|
|
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.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
|
|
|
|
```
|
|
/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**:
|
|
|
|
```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:
|
|
|
|
- **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](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) |