# 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)