alerta al enviar pdf

This commit is contained in:
luis cespedes 2025-05-08 16:27:11 -04:00
parent 6115bda555
commit 7d75fb1df7
12 changed files with 510 additions and 200 deletions

View File

@ -3,7 +3,7 @@
"version": 1,
"newProjectRoot": "projects",
"projects": {
"cronogramas-primeng": {
"cronogramas": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
@ -17,7 +17,7 @@
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "dist/cronogramas-primeng",
"outputPath": "dist/cronogramas",
"index": "src/index.html",
"browser": "src/main.ts",
"polyfills": [
@ -80,10 +80,10 @@
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "cronogramas-primeng:build:production"
"buildTarget": "cronogramas:build:production"
},
"development": {
"buildTarget": "cronogramas-primeng:build:development"
"buildTarget": "cronogramas:build:development"
}
},
"defaultConfiguration": "development"

View File

@ -1,6 +1,6 @@
{
"name": "cronogramas-primeng",
"version": "0.0.0",
"name": "cronogramas",
"version": "0.1.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
@ -37,6 +37,7 @@
"@angular/compiler-cli": "^19.2.0",
"@types/file-saver": "^2.0.7",
"@types/jasmine": "~5.1.0",
"@types/pdfmake": "^0.2.11",
"@types/xlsx": "^0.0.35",
"jasmine-core": "~5.6.0",
"karma": "~6.4.0",

View File

@ -7,6 +7,7 @@ import { provideAnimations } from '@angular/platform-browser/animations';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeng/themes/aura';
import { authInterceptor } from './interceptors/auth.interceptor';
import { MessageService } from 'primeng/api';
export const appConfig: ApplicationConfig = {
providers: [
@ -24,6 +25,7 @@ export const appConfig: ApplicationConfig = {
darkModeSelector: false || 'none'
}
}
})
}),
MessageService
]
};

View File

@ -0,0 +1,28 @@
<p-dialog
[(visible)]="visible"
[modal]="true"
[draggable]="false"
[resizable]="false"
[closeOnEscape]="true"
[style]="{width: '400px'}"
[contentStyle]="{'text-align': 'center', 'padding': '20px'}"
styleClass="alert-dialog"
[header]="title">
<div class="flex flex-column align-items-center">
<i class="pi text-8xl mb-4" [ngClass]="getIconClass()"></i>
<div class="text-xl font-semibold mb-3" *ngIf="title">{{ title }}</div>
<div class="text-center mb-5">{{ message }}</div>
<div class="flex justify-content-center gap-2">
<button *ngIf="showCancelButton" pButton (click)="cancel()"
class="p-button-outlined p-button-secondary"
[label]="cancelButtonText">
</button>
<button *ngIf="showConfirmButton" pButton (click)="confirm()"
class="p-button-primary"
[label]="confirmButtonText">
</button>
</div>
</div>
</p-dialog>

View File

@ -0,0 +1,11 @@
:host ::ng-deep {
.alert-dialog {
.p-dialog-header {
padding-bottom: 0.5rem;
}
.p-dialog-content {
overflow-y: visible;
}
}
}

View File

@ -0,0 +1,75 @@
import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DialogModule } from 'primeng/dialog';
import { ButtonModule } from 'primeng/button';
import { Subject } from 'rxjs';
export interface AlertDialogOptions {
visible: boolean;
title: string;
message: string;
icon: 'success' | 'error' | 'warning' | 'info' | 'question';
showConfirmButton: boolean;
confirmButtonText: string;
showCancelButton: boolean;
cancelButtonText: string;
}
@Component({
selector: 'app-alert-dialog',
standalone: true,
imports: [CommonModule, DialogModule, ButtonModule],
templateUrl: './alert-dialog.component.html',
styleUrls: ['./alert-dialog.component.scss']
})
export class AlertDialogComponent {
visible = false;
title = '';
message = '';
icon: 'success' | 'error' | 'warning' | 'info' | 'question' = 'success';
showConfirmButton = true;
confirmButtonText = 'Aceptar';
showCancelButton = false;
cancelButtonText = 'Cancelar';
private confirmSubject = new Subject<boolean>();
public onConfirm = this.confirmSubject.asObservable();
show(options: Partial<AlertDialogOptions> = {}): void {
this.visible = true;
this.title = options.title || this.title;
this.message = options.message || this.message;
this.icon = options.icon || this.icon;
this.showConfirmButton = options.showConfirmButton !== undefined ? options.showConfirmButton : this.showConfirmButton;
this.confirmButtonText = options.confirmButtonText || this.confirmButtonText;
this.showCancelButton = options.showCancelButton !== undefined ? options.showCancelButton : this.showCancelButton;
this.cancelButtonText = options.cancelButtonText || this.cancelButtonText;
}
confirm(): void {
this.visible = false;
this.confirmSubject.next(true);
}
cancel(): void {
this.visible = false;
this.confirmSubject.next(false);
}
getIconClass(): string {
switch (this.icon) {
case 'success':
return 'pi-check-circle text-green-500';
case 'error':
return 'pi-times-circle text-red-500';
case 'warning':
return 'pi-exclamation-triangle text-yellow-500';
case 'info':
return 'pi-info-circle text-blue-500';
case 'question':
return 'pi-question-circle text-purple-500';
default:
return 'pi-check-circle text-green-500';
}
}
}

View File

@ -21,8 +21,7 @@ import { MessageService } from 'primeng/api';
],
templateUrl: './layout.component.html',
styleUrl: './layout.component.scss',
standalone: true,
providers : [MessageService]
standalone: true
})
export class LayoutComponent implements OnInit {
isSidebarVisible: boolean = true;

View File

@ -1,15 +1,21 @@
<div class="pdf-container">
<div class="pdf-viewer">
<iframe [src]="pdfSrc | safe" width="100%" height="100%"></iframe>
</div>
<div class="toolbar">
<button pButton type="button" class="p-button p-button-danger" (click)="descargarPDF()">
<i class="pi pi-file-pdf" style="margin-right: 8px;"></i>
Descargar PDF
</button>
<button pButton type="button" class="p-button p-button-success ml-2" (click)="enviarPDF()">
<div class="pdf-viewer">
<iframe [src]="pdfSrc | safe" width="100%" height="100%"></iframe>
</div>
<div class="toolbar">
<button pButton type="button" class="p-button p-button-danger" (click)="descargarPDF()">
<i class="pi pi-file-pdf" style="margin-right: 8px;"></i>
Descargar PDF
</button>
<button pButton type="button" class="p-button p-button-success ml-2" (click)="enviarPDF()" [disabled]="enviando">
<ng-container *ngIf="!enviando; else cargando">
<i class="pi pi-send" style="margin-right: 8px;"></i>
Enviar
</button>
</div>
</div>
</ng-container>
<ng-template #cargando>
<p-progressSpinner [style]="{width: '20px', height: '20px'}" styleClass="custom-spinner" strokeWidth="4" fill="var(--surface-ground)" animationDuration=".5s"></p-progressSpinner>
<span style="margin-left: 8px;">Enviando...</span>
</ng-template>
</button>
</div>
</div>

View File

@ -2,21 +2,26 @@ import { Component, OnInit, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DynamicDialogRef, DynamicDialogConfig } from 'primeng/dynamicdialog';
import { SafePipe } from '../../../pipes/safe.pipe';
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
import { TDocumentDefinitions } from 'pdfmake/interfaces';
import { ButtonModule } from 'primeng/button';
import { ToastModule } from 'primeng/toast';
import { ProgressSpinnerModule } from 'primeng/progressspinner';
import { MessageService } from 'primeng/api';
pdfMake.vfs = pdfFonts.vfs;
import { PdfService } from '../../services/pdf.service';
import { AlertService } from '../../services/alert.service';
@Component({
selector: 'app-visor-pdf',
standalone: true,
imports: [CommonModule, SafePipe],
imports: [
CommonModule,
SafePipe,
ButtonModule,
ToastModule,
ProgressSpinnerModule
],
templateUrl: './visor-pdf.component.html',
styleUrls: ['./visor-pdf.component.scss'],
providers: [MessageService]
styleUrls: ['./visor-pdf.component.scss']
})
export class VisorPdfComponent implements OnInit {
product: any;
@ -27,165 +32,8 @@ export class VisorPdfComponent implements OnInit {
private dialogRef = inject(DynamicDialogRef);
private config = inject(DynamicDialogConfig);
private messageService = inject(MessageService);
docDefinition: TDocumentDefinitions = {
content: [
// Encabezado con información de empresa y cronograma
{
columns: [
{
width: '50%',
text: 'Empresa: Constructora Los Andes S.A.',
margin: [0, 0, 0, 5]
},
{
width: '50%',
text: [
{ text: 'Cronograma: SC-23-45\n' },
{ text: 'Nombre sistema: Terminal Portuario Norte' }
],
alignment: 'right',
margin: [0, 0, 0, 5]
}
]
},
// Título y subtítulo
{
text: 'CRONOGRAMA BASE DE OBRAS E INVERSIONES',
alignment: 'center',
bold: true,
fontSize: 12,
margin: [0, 10, 0, 0]
},
{
text: 'ACTUALIZACIÓN PLAN DE DESARROLLO O NUEVA CONCESIÓN',
alignment: 'center',
bold: true,
fontSize: 11,
margin: [0, 0, 0, 10]
},
// Tabla principal
{
table: {
headerRows: 1,
widths: ['10%', '12%', '23%', '12%', '10%', '10%', '10%', '13%'],
body: [
[
{ text: 'ETAPA', style: 'tableHeader', alignment: 'center' },
{ text: 'CÓDIGO GLOSA', style: 'tableHeader', alignment: 'center' },
{ text: 'DESCRIPCIÓN GLOSA', style: 'tableHeader', alignment: 'center' },
{ text: 'MONTO INVERSIÓN UF', style: 'tableHeader', alignment: 'center' },
{ text: 'AÑO INICIO', style: 'tableHeader', alignment: 'center' },
{ text: 'AÑO TERMINO', style: 'tableHeader', alignment: 'center' },
{ text: 'MES TERMINO', style: 'tableHeader', alignment: 'center' },
{ text: 'NOTA', style: 'tableHeader', alignment: 'center' }
],
[
{ text: '1', alignment: 'center' },
{ text: 'INF-001', alignment: 'center' },
{ text: 'Estudios preliminares', alignment: 'left' },
{ text: '2,500', alignment: 'right' },
{ text: '2025', alignment: 'center' },
{ text: '2025', alignment: 'center' },
{ text: 'Julio', alignment: 'center' },
{ text: 'Fase inicial', alignment: 'left' }
],
[
{ text: '2', alignment: 'center' },
{ text: 'MOV-102', alignment: 'center' },
{ text: 'Movimiento de tierras', alignment: 'left' },
{ text: '15,750', alignment: 'right' },
{ text: '2025', alignment: 'center' },
{ text: '2026', alignment: 'center' },
{ text: 'Enero', alignment: 'center' },
{ text: 'En terreno', alignment: 'left' }
],
[
{ text: '3', alignment: 'center' },
{ text: 'CIM-203', alignment: 'center' },
{ text: 'Construcción de cimientos', alignment: 'left' },
{ text: '32,800', alignment: 'right' },
{ text: '2026', alignment: 'center' },
{ text: '2026', alignment: 'center' },
{ text: 'Mayo', alignment: 'center' },
{ text: 'Crítico', alignment: 'left' }
],
[
{ text: '4', alignment: 'center' },
{ text: 'EST-304', alignment: 'center' },
{ text: 'Estructura principal', alignment: 'left' },
{ text: '65,420', alignment: 'right' },
{ text: '2026', alignment: 'center' },
{ text: '2027', alignment: 'center' },
{ text: 'Febrero', alignment: 'center' },
{ text: 'Alta inversión', alignment: 'left' }
],
[
{ text: '5', alignment: 'center' },
{ text: 'TER-405', alignment: 'center' },
{ text: 'Terminaciones y acabados', alignment: 'left' },
{ text: '18,300', alignment: 'right' },
{ text: '2027', alignment: 'center' },
{ text: '2027', alignment: 'center' },
{ text: 'Octubre', alignment: 'center' },
{ text: 'Etapa final', alignment: 'left' }
]
]
}
},
// Total
{
columns: [
{
width: '80%',
text: 'TOTAL:',
alignment: 'right',
bold: true,
margin: [0, 15, 10, 20]
},
{
width: '20%',
text: '134,770 UF',
alignment: 'left',
bold: true,
margin: [0, 15, 0, 20]
}
]
},
// Firma
{
text: 'X',
alignment: 'center',
bold: true,
fontSize: 14,
margin: [0, 15, 0, 0]
},
{
text: 'Firma SSS',
alignment: 'center',
fontSize: 10,
margin: [0, 0, 0, 10]
}
],
// Estilos
styles: {
tableHeader: {
bold: true,
fontSize: 10,
fillColor: '#f2f2f2'
}
},
// Definiciones de página
pageSize: 'A4',
pageOrientation: 'portrait',
pageMargins: [40, 40, 40, 40]
};
private pdfService = inject(PdfService);
private alertService = inject(AlertService);
ngOnInit() {
// Obtener el producto pasado a través del servicio de diálogo
@ -196,33 +44,29 @@ export class VisorPdfComponent implements OnInit {
}
generarPDF() {
const pdfDocGenerator = pdfMake.createPdf(this.docDefinition);
pdfDocGenerator.getDataUrl((dataUrl) => {
this.pdfService.generateCronogramaPdf(this.product).then(dataUrl => {
this.pdfSrc = dataUrl;
});
}
descargarPDF() {
pdfMake.createPdf(this.docDefinition).download('cronogramaspdf');
this.pdfService.downloadCronogramaPdf('cronograma', this.product);
}
enviarPDF() {
this.enviando = true;
console.log('Enviando PDF...');
setTimeout(() => {
this.enviando = false;
console.log('Mostrando mensaje de envio...')
this.messageService.add({
severity: 'success',
summary: '¡Enviado con éxito!',
detail: 'El cronograma ha sido enviado correctamente',
life: 30000,
});
this.alertService.success(
'El cronograma ha sido enviado correctamente a la plataforma.',
'¡Enviado con éxito!'
);
}, 2000);
}
cerrar() {
this.dialogRef.close();
}

View File

@ -0,0 +1,128 @@
import { Injectable, ComponentRef, createComponent, EnvironmentInjector, ApplicationRef } from '@angular/core';
import { AlertDialogComponent, AlertDialogOptions } from '../components/alert-dialog/alert-dialog.component';
@Injectable({
providedIn: 'root'
})
export class AlertService {
private alertRef: ComponentRef<AlertDialogComponent> | null = null;
constructor(
private injector: EnvironmentInjector,
private appRef: ApplicationRef
) {}
/**
* Muestra un mensaje de alerta tipo Sweet Alert
* @param options Opciones de configuración del alert
* @returns Una promesa que se resuelve con true (confirmar) o false (cancelar)
*/
show(options: Partial<AlertDialogOptions> = {}): Promise<boolean> {
return new Promise((resolve) => {
// Si ya existe un alert, lo eliminamos
this.closeCurrentAlert();
// Creamos el componente dinámicamente
this.alertRef = createComponent(AlertDialogComponent, {
environmentInjector: this.injector,
});
// Agregamos a la aplicación y al DOM
document.body.appendChild(this.alertRef.location.nativeElement);
this.appRef.attachView(this.alertRef.hostView);
// Configuramos las opciones y mostramos
this.alertRef.instance.show(options);
// Manejamos la respuesta
const subscription = this.alertRef.instance.onConfirm.subscribe((result) => {
subscription.unsubscribe();
this.closeCurrentAlert();
resolve(result);
});
});
}
/**
* Muestra un mensaje de éxito
* @param message Mensaje a mostrar
* @param title Título del alert (opcional)
*/
success(message: string, title: string = '¡Operación exitosa!'): Promise<boolean> {
return this.show({
title,
message,
icon: 'success',
showCancelButton: false
});
}
/**
* Muestra un mensaje de error
* @param message Mensaje a mostrar
* @param title Título del alert (opcional)
*/
error(message: string, title: string = 'Error'): Promise<boolean> {
return this.show({
title,
message,
icon: 'error',
showCancelButton: false
});
}
/**
* Muestra un mensaje de advertencia
* @param message Mensaje a mostrar
* @param title Título del alert (opcional)
*/
warning(message: string, title: string = 'Advertencia'): Promise<boolean> {
return this.show({
title,
message,
icon: 'warning',
showCancelButton: false
});
}
/**
* Muestra un mensaje informativo
* @param message Mensaje a mostrar
* @param title Título del alert (opcional)
*/
info(message: string, title: string = 'Información'): Promise<boolean> {
return this.show({
title,
message,
icon: 'info',
showCancelButton: false
});
}
/**
* Muestra un diálogo de confirmación
* @param message Mensaje a mostrar
* @param title Título del alert (opcional)
*/
confirm(message: string, title: string = '¿Está seguro?'): Promise<boolean> {
return this.show({
title,
message,
icon: 'question',
showCancelButton: true,
confirmButtonText: 'Sí, confirmar',
cancelButtonText: 'Cancelar'
});
}
/**
* Cierra el alert actual si existe
*/
private closeCurrentAlert(): void {
if (this.alertRef) {
this.appRef.detachView(this.alertRef.hostView);
this.alertRef.location.nativeElement.remove();
this.alertRef = null;
}
}
}

View File

@ -5,3 +5,5 @@ export * from './ajuste-pd.service';
export * from './unidad-informacion.service';
export * from './tipo-carga.service';
export * from './estado-aprobacion.service';
export * from './pdf.service';
export * from './alert.service';

View File

@ -0,0 +1,214 @@
import { Injectable } from '@angular/core';
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
import { TDocumentDefinitions } from 'pdfmake/interfaces';
pdfMake.vfs = pdfFonts.vfs;
@Injectable({
providedIn: 'root'
})
export class PdfService {
constructor() { }
/**
* Genera un PDF con la definición por defecto para cronogramas
* @param data Datos opcionales para personalizar el documento
* @returns Promise con la URL de datos del PDF generado
*/
generateCronogramaPdf(data?: any): Promise<string> {
const docDefinition = this.getCronogramaDocDefinition(data);
return this.generatePdfDataUrl(docDefinition);
}
/**
* Descarga un PDF con la definición de cronograma
* @param filename Nombre del archivo a descargar
* @param data Datos opcionales para personalizar el documento
*/
downloadCronogramaPdf(filename: string = 'cronograma', data?: any): void {
const docDefinition = this.getCronogramaDocDefinition(data);
pdfMake.createPdf(docDefinition).download(filename);
}
/**
* Genera una URL de datos a partir de la definición del documento
* @param docDefinition Definición del documento PDF
* @returns Promise con la URL de datos del PDF
*/
private generatePdfDataUrl(docDefinition: TDocumentDefinitions): Promise<string> {
return new Promise((resolve) => {
const pdfDocGenerator = pdfMake.createPdf(docDefinition);
pdfDocGenerator.getDataUrl((dataUrl) => {
resolve(dataUrl);
});
});
}
/**
* Obtiene la definición del documento para un cronograma
* @param data Datos opcionales para personalizar el documento
* @returns Definición del documento PDF
*/
private getCronogramaDocDefinition(data?: any): TDocumentDefinitions {
return {
content: [
// Encabezado con información de empresa y cronograma
{
columns: [
{
width: '50%',
text: 'Empresa: Constructora Los Andes S.A.',
margin: [0, 0, 0, 5]
},
{
width: '50%',
text: [
{ text: 'Cronograma: SC-23-45\n' },
{ text: 'Nombre sistema: Terminal Portuario Norte' }
],
alignment: 'right',
margin: [0, 0, 0, 5]
}
]
},
// Título y subtítulo
{
text: 'CRONOGRAMA BASE DE OBRAS E INVERSIONES',
alignment: 'center',
bold: true,
fontSize: 12,
margin: [0, 10, 0, 0]
},
{
text: 'ACTUALIZACIÓN PLAN DE DESARROLLO O NUEVA CONCESIÓN',
alignment: 'center',
bold: true,
fontSize: 11,
margin: [0, 0, 0, 10]
},
// Tabla principal
{
table: {
headerRows: 1,
widths: ['10%', '12%', '23%', '12%', '10%', '10%', '10%', '13%'],
body: [
[
{ text: 'ETAPA', style: 'tableHeader', alignment: 'center' },
{ text: 'CÓDIGO GLOSA', style: 'tableHeader', alignment: 'center' },
{ text: 'DESCRIPCIÓN GLOSA', style: 'tableHeader', alignment: 'center' },
{ text: 'MONTO INVERSIÓN UF', style: 'tableHeader', alignment: 'center' },
{ text: 'AÑO INICIO', style: 'tableHeader', alignment: 'center' },
{ text: 'AÑO TERMINO', style: 'tableHeader', alignment: 'center' },
{ text: 'MES TERMINO', style: 'tableHeader', alignment: 'center' },
{ text: 'NOTA', style: 'tableHeader', alignment: 'center' }
],
[
{ text: '1', alignment: 'center' },
{ text: 'INF-001', alignment: 'center' },
{ text: 'Estudios preliminares', alignment: 'left' },
{ text: '2,500', alignment: 'right' },
{ text: '2025', alignment: 'center' },
{ text: '2025', alignment: 'center' },
{ text: 'Julio', alignment: 'center' },
{ text: 'Fase inicial', alignment: 'left' }
],
[
{ text: '2', alignment: 'center' },
{ text: 'MOV-102', alignment: 'center' },
{ text: 'Movimiento de tierras', alignment: 'left' },
{ text: '15,750', alignment: 'right' },
{ text: '2025', alignment: 'center' },
{ text: '2026', alignment: 'center' },
{ text: 'Enero', alignment: 'center' },
{ text: 'En terreno', alignment: 'left' }
],
[
{ text: '3', alignment: 'center' },
{ text: 'CIM-203', alignment: 'center' },
{ text: 'Construcción de cimientos', alignment: 'left' },
{ text: '32,800', alignment: 'right' },
{ text: '2026', alignment: 'center' },
{ text: '2026', alignment: 'center' },
{ text: 'Mayo', alignment: 'center' },
{ text: 'Crítico', alignment: 'left' }
],
[
{ text: '4', alignment: 'center' },
{ text: 'EST-304', alignment: 'center' },
{ text: 'Estructura principal', alignment: 'left' },
{ text: '65,420', alignment: 'right' },
{ text: '2026', alignment: 'center' },
{ text: '2027', alignment: 'center' },
{ text: 'Febrero', alignment: 'center' },
{ text: 'Alta inversión', alignment: 'left' }
],
[
{ text: '5', alignment: 'center' },
{ text: 'TER-405', alignment: 'center' },
{ text: 'Terminaciones y acabados', alignment: 'left' },
{ text: '18,300', alignment: 'right' },
{ text: '2027', alignment: 'center' },
{ text: '2027', alignment: 'center' },
{ text: 'Octubre', alignment: 'center' },
{ text: 'Etapa final', alignment: 'left' }
]
]
}
},
// Total
{
columns: [
{
width: '80%',
text: 'TOTAL:',
alignment: 'right',
bold: true,
margin: [0, 15, 10, 20]
},
{
width: '20%',
text: '134,770 UF',
alignment: 'left',
bold: true,
margin: [0, 15, 0, 20]
}
]
},
// Firma
{
text: 'X',
alignment: 'center',
bold: true,
fontSize: 14,
margin: [0, 15, 0, 0]
},
{
text: 'Firma SSS',
alignment: 'center',
fontSize: 10,
margin: [0, 0, 0, 10]
}
],
// Estilos
styles: {
tableHeader: {
bold: true,
fontSize: 10,
fillColor: '#f2f2f2'
}
},
// Definiciones de página
pageSize: 'A4',
pageOrientation: 'portrait',
pageMargins: [40, 40, 40, 40]
};
}
}