Cronogramas PrimeNG Application

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

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
   

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
  

• ExcelJS 4.4.0: Para exportación a Excel

  npm install exceljs
  

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

  npm install file-saver @types/file-saver
  

Estructura del Proyecto

/cronogramas-primeng/
├── src/                      # Código fuente
│   ├── app/                  # Componentes Angular
│   │   ├── components/       # Componentes compartidos 
│   │   ├── guards/           # Guardias de ruta
│   │   ├── interceptors/     # Interceptores HTTP
│   │   ├── models/           # Interfaces de datos
│   │   ├── pages/            # Componentes de página
│   │   ├── services/         # Servicios
│   │   └── utils/            # Utilidades
│   ├── 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
├── tsconfig.json             # Configuración TypeScript
├── Dockerfile                # Configuración de Docker
└── docker-compose.yml        # Configuración Docker Compose

Estructura de Interfaces

Se han creado 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
• 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

Seguridad

La aplicación incluye:

• Interceptor HTTP para añadir tokens de autenticación
• Guard para proteger rutas
• Login y sistema de autenticación

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

Despliegue con Docker

El proyecto incluye archivos Docker para facilitar el despliegue:

1. Construir y ejecutar con Docker Compose:

docker-compose up --build

Esto expone la aplicación en http://localhost:80.

2. Construir manualmente con Docker:

docker build -t cronogramas-primeng .
docker run -p 80:80 cronogramas-primeng

Development server

Para iniciar un servidor de desarrollo local, ejecute:

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:

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.