update readme
This commit is contained in:
parent
ad653dbdb4
commit
ef7d02b3ff
230
README.md
230
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).
|
||||
- [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)
|
||||
Loading…
x
Reference in New Issue
Block a user