Skip to content

F
formularioConformidad
Commit ed6695f8 by Fernando José Palomino Aquino
Options

[ADD] CONDICION PARA REGISTRO DE CONFORMIDAD

parent 0934b5f7
Showing with 230 additions and 69 deletions
package-lock.json
......@@ -8,6 +8,7 @@
"name": "angular-formulario-hr",
"version": "0.0.0",
"dependencies": {
"@alexfriesen/ngx-mat-timepicker": "^18.0.2",
"@angular/animations": "^18.2.0",
"@angular/cdk": "^18.2.3",
"@angular/common": "^18.2.0",
......@@ -19,9 +20,9 @@
"@angular/platform-browser-dynamic": "^18.2.0",
"@angular/router": "^18.2.0",
"axios": "^1.7.7",
"ngx-mat-timepicker": "^19.0.0",
"notiflix": "^3.2.8",
"rxjs": "~7.8.0",
"signature_pad": "^5.0.4",
"tslib": "^2.3.0",
"zone.js": "~0.14.10"
},
......@@ -43,6 +44,26 @@
"typescript": "~5.5.2"
}
},
"node_modules/@alexfriesen/ngx-mat-timepicker": {
"version": "18.0.2",
"resolved": "https://registry.npmjs.org/@alexfriesen/ngx-mat-timepicker/-/ngx-mat-timepicker-18.0.2.tgz",
"integrity": "sha512-zwx6S+dnZlvzJTOGXOde+XhdLDSdbalo2speOCy0AFdYKIDDXJFHAnNHwn1qpk/XPs1wvdanRQS9Le3GOuLQKQ==",
"license": "MIT",
"dependencies": {
"luxon": "^3.4.4",
"tslib": "^2.5.2"
},
"peerDependencies": {
"@angular/animations": "^18.0.0",
"@angular/cdk": "^18.0.0",
"@angular/common": "^18.0.0",
"@angular/compiler": "^18.0.0",
"@angular/core": "^18.0.0",
"@angular/forms": "^18.0.0",
"@angular/material": "^18.0.0",
"@angular/platform-browser": "^18.0.0"
}
},
"node_modules/@alloc/quick-lru": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
......@@ -9586,6 +9607,15 @@
"yallist": "^3.0.2"
}
},
"node_modules/luxon": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/luxon/-/luxon-3.5.0.tgz",
"integrity": "sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==",
"license": "MIT",
"engines": {
"node": ">=12"
}
},
"node_modules/magic-string": {
"version": "0.30.11",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
......@@ -10179,26 +10209,6 @@
"dev": true,
"license": "MIT"
},
"node_modules/ngx-mat-timepicker": {
"version": "19.0.0",
"resolved": "https://registry.npmjs.org/ngx-mat-timepicker/-/ngx-mat-timepicker-19.0.0.tgz",
"integrity": "sha512-r40jia6koyxwPRU8vG7XyeqfZrKI7tMnwcF6a4EqYiX5cM8CODpLeAq686fQteFD00dBc+t57+pCC1MMDp36Kw==",
"license": "MIT",
"dependencies": {
"ts-luxon": "^5.0.6",
"tslib": "^2.5.3"
},
"peerDependencies": {
"@angular/animations": "^19.0.0",
"@angular/cdk": "^19.0.0",
"@angular/common": "^19.0.0",
"@angular/compiler": "^19.0.0",
"@angular/core": "^19.0.0",
"@angular/forms": "^19.0.0",
"@angular/material": "^19.0.0",
"@angular/platform-browser": "^19.0.0"
}
},
"node_modules/nice-napi": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",
......@@ -12473,6 +12483,12 @@
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/signature_pad": {
"version": "5.0.4",
"resolved": "https://registry.npmjs.org/signature_pad/-/signature_pad-5.0.4.tgz",
"integrity": "sha512-nngOixbwLAUOuH3QnZwlgwmynQblxmo4iWacKFwfymJfiY+Qt+9icNtcIe/okqXKun4hJ5QTFmHyC7dmv6lf2w==",
"license": "MIT"
},
"node_modules/sigstore": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/sigstore/-/sigstore-2.3.1.tgz",
......@@ -13427,19 +13443,10 @@
"dev": true,
"license": "Apache-2.0"
},
"node_modules/ts-luxon": {
"version": "5.0.6",
"resolved": "https://registry.npmjs.org/ts-luxon/-/ts-luxon-5.0.6.tgz",
"integrity": "sha512-FFSi0UKcQ8lgCBBTl6OMGcp26cANEV67cwJyXi4pTHuxa28wJUDtjBwcgDGn04a+wqtnHqdNaMnor2UDicmPDQ==",
"license": "MIT",
"engines": {
"node": ">=13"
}
},
"node_modules/tslib": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
"integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==",
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
"license": "0BSD"
},
"node_modules/tuf-js": {
......
package.json
......@@ -10,6 +10,7 @@
},
"private": true,
"dependencies": {
"@alexfriesen/ngx-mat-timepicker": "^18.0.2",
"@angular/animations": "^18.2.0",
"@angular/cdk": "^18.2.3",
"@angular/common": "^18.2.0",
......@@ -21,9 +22,9 @@
"@angular/platform-browser-dynamic": "^18.2.0",
"@angular/router": "^18.2.0",
"axios": "^1.7.7",
"ngx-mat-timepicker": "^19.0.0",
"notiflix": "^3.2.8",
"rxjs": "~7.8.0",
"signature_pad": "^5.0.4",
"tslib": "^2.3.0",
"zone.js": "~0.14.10"
},
......
src/app/app.component.spec.ts
import { TestBed } from '@angular/core/testing';
/*import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
......@@ -26,4 +26,4 @@ describe('AppComponent', () => {
const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('h1')?.textContent).toContain('Hello, angular-formularioHR');
});
});
});*/
src/app/pages/conformidad/conformidad.componente.html
......@@ -316,9 +316,9 @@
</button>
<input type="file" #file1 (change)="onEventoSubirArchivo($event)" class="hidden" multiple accept="image/png, image/jpeg">
<br>
<div *ngFor="let archivo of archivosEvidencia; let i = index" class="flex mt-2">
<div *ngIf="archivo.tipoEvidencia === 1" class="flex w-full">
<p class="w-2/4">{{ (archivo.file.name + ' (' + (archivo.file.size / 1000) + ' KB)') | truncate:30:true }}</p>
<div *ngFor="let archivo of archivosEvidencia; let i = index">
<div *ngIf="archivo.tipoEvidencia === 1" class="flex w-full mt-2">
<p class="w-2/4" matTooltip="{{ (archivo.file.name + ' (' + (archivo.file.size / 1000) + ' KB)')}}" matTooltipPosition="above">{{ (archivo.file.name + ' (' + (archivo.file.size / 1000) + ' KB)') | truncate:30:true }}</p>
<div class="w-2/4 grid grid-cols-3 gap-4">
<button (click)="gestionArchivos(i,1,archivo.file)"><mat-icon>info</mat-icon></button>
<button (click)="seleccionarInput(archivo,1)"><mat-icon>edit</mat-icon></button>
......@@ -337,9 +337,9 @@
</button>
<input type="file" #file2 (change)="onEventoSubirArchivo($event,2)" class="hidden" multiple accept="image/png, image/jpeg">
<br>
<div *ngFor="let archivo of archivosEvidencia; let i = index" class="flex mt-2">
<div *ngIf="archivo.tipoEvidencia === 2" class="flex w-full">
<p class="w-2/4">{{ (archivo.file.name + ' (' + (archivo.file.size / 1000) + ' KB)') | truncate:30:true }}</p>
<div *ngFor="let archivo of archivosEvidencia; let i = index">
<div *ngIf="archivo.tipoEvidencia === 2" class="flex w-full mt-2">
<p class="w-2/4" matTooltip="{{ (archivo.file.name + ' (' + (archivo.file.size / 1000) + ' KB)')}}" matTooltipPosition="above">{{ (archivo.file.name + ' (' + (archivo.file.size / 1000) + ' KB)') | truncate:30:true }}</p>
<div class="w-2/4 grid grid-cols-3 gap-4">
<button (click)="gestionArchivos(i,1,archivo.file,2)"><mat-icon>info</mat-icon></button>
<button (click)="seleccionarInput(archivo,2)"><mat-icon>edit</mat-icon></button>
......@@ -414,18 +414,17 @@
<div class="div-serviocisPrestados divisionGeneral">
<div class="grid lg:grid-cols-2 gap-5">
<div>
<div><b class="md:text-[1rem] text-[1em] text-black/60">EVIDENCIA DE ATC: *</b></div>
<div><b class="md:text-[1rem] text-[1em] text-black/60">EVIDENCIA DE ATS: *</b></div>
<div>
<button mat-fab class="!w-full" [color]="'blue'" (click)="fotoATC.click()">
<mat-label>SUBIR FOTO DE LA ATC</mat-label>
<mat-label>SUBIR FOTO DE LA ATS</mat-label>
<mat-icon>file_open</mat-icon>
</button>
<input type="file" #fotoATC (change)="onEventoSubirArchivo($event,3)" class="hidden" accept="image/png, image/jpeg">
<input type="file" #fotoATC (change)="onEventoSubirArchivo($event,3)" class="hidden" accept="image/png, image/jpeg">
</div>
<br>
<div *ngFor="let archivo of archivosEvidencia; let i = index" class="flex mt-2">
<div *ngIf="archivo.tipoEvidencia === 3" class="flex w-full">
<p class="w-2/4">{{ (archivo.file.name + ' (' + (archivo.file.size / 1000) + ' KB)') | truncate:30:true }}</p>
<div *ngFor="let archivo of archivosEvidencia; let i = index">
<div *ngIf="archivo.tipoEvidencia === 3" class="flex w-full mt-2">
<p class="w-2/4" matTooltip="{{ (archivo.file.name + ' (' + (archivo.file.size / 1000) + ' KB)')}}" matTooltipPosition="above">{{ (archivo.file.name + ' (' + (archivo.file.size / 1000) + ' KB)') | truncate:30:true }}</p>
<div class="w-2/4 grid grid-cols-3 gap-4">
<button (click)="gestionArchivos(i,1,archivo.file)"><mat-icon>info</mat-icon></button>
<button (click)="gestionArchivos(i,3)"><mat-icon>delete</mat-icon></button>
......@@ -435,19 +434,19 @@
</div>
<div>
<div><b class="md:text-[1rem] text-[1em] text-black/60">FIRMA DEL ENCARGADO: *</b></div>
<button mat-fab class="!w-full" [color]="'blue'" (click)="fotoFirma.click()">
<mat-label>SUBIR EVIDENCIA DE LA FIRMA</mat-label>
<mat-icon>file_open</mat-icon>
</button>
<input type="file" #fotoFirma (change)="onEventoSubirArchivo($event,4)" class="hidden" accept="image/png, image/jpeg">
<br>
<div *ngFor="let archivo of archivosEvidencia; let i = index" class="flex mt-2">
<div *ngIf="archivo.tipoEvidencia === 4" class="flex w-full">
<p class="w-2/4">{{ (archivo.file.name + ' (' + (archivo.file.size / 1000) + ' KB)') | truncate:30:true }}</p>
<div><b class="md:text-[1rem] text-black/60">FIRMA DEL ENCARGADO: *</b></div>
<div>
<button mat-fab class="!w-full" [color]="'blue'" (click)="mostrarFirma({accion : 1})">
<mat-label>SUBIR FIRMA</mat-label>
<mat-icon>file_open</mat-icon>
</button>
</div>
<div *ngFor="let archivo of archivosEvidencia; let i = index">
<div *ngIf="archivo.tipoEvidencia === 4" class="flex w-full mt-2">
<p class="w-2/4" matTooltip="{{ (archivo.file.name + ' (' + (archivo.file.size / 1000) + ' KB)')}}" matTooltipPosition="above">{{ (archivo.file.name + ' (' + (archivo.file.size / 1000) + ' KB)') | truncate:30:true }}</p>
<div class="w-2/4 grid grid-cols-3 gap-4">
<button (click)="gestionArchivos(i,1,archivo.file)"><mat-icon>info</mat-icon></button>
<button (click)="gestionArchivos(i,3,2)"><mat-icon>delete</mat-icon></button>
<button (click)="gestionArchivos(i,3)"><mat-icon>delete</mat-icon></button>
</div>
</div>
</div>
......@@ -463,6 +462,8 @@
REGISTRO CONFORMIDAD
</button>
</div>
<!-- <signature-pad #signature [options]="signaturePadOptions" (drawStart)="drawStart($event)" (drawEnd)="drawComplete($event)"></signature-pad> -->
</div>
......
src/app/pages/conformidad/modalFirma/modalFirma.componente.css 0 → 100644
.singpad {
border: 1px solid #000;
margin: auto;
margin-top: 5px;
width: 500px;
height: 300px;
}
src/app/pages/conformidad/modalFirma/modalFirma.componente.ts 0 → 100644
import {Component, Inject, EventEmitter, ViewChild, NgModule, AfterViewInit, Output, ElementRef} from '@angular/core';
import { MatDialogActions, MatDialogClose, MatDialogContent, MatDialogTitle, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import {MatButtonModule} from '@angular/material/button';
import {NgIf} from "@angular/common";
import SignaturePad from 'signature_pad';
@Component({
selector: 'app-file-preview-dialog',
imports: [MatButtonModule,
MatDialogActions,
MatDialogClose,
MatDialogContent,
MatDialogTitle,
NgIf,
],
standalone: true,
styleUrls: ['./modalFirma.componente.css'],
template:`
<h1 mat-dialog-title>Firma de conformidad</h1>
<div #division class="singpad" align="center">
<!-- <signature-pad #signature (drawStart)="drawStart($event)" (drawEnd)="drawComplete($event)"></signature-pad> -->
<canvas
#canvas
(touchstart)="drawStart($event)"
(touchmove)="drawComplete($event)"
></canvas>
</div>
<mat-dialog-actions align="center">
<button mat-button (click)="onClear()">Limpiar</button>
<button mat-button (click)="onCancelar()">Cancelar</button>
<button mat-button (click)="onGuardar()" cdkFocusInitial>Guardar</button>
</mat-dialog-actions>
`
})
export class modalFirmaComponent implements AfterViewInit {
//@ViewChild('signature') public signaturePad!: SignaturePadComponent;
signaturePad!: SignaturePad;
@ViewChild('canvas') canvasEl!: ElementRef;
@ViewChild('division') divisionEl!: ElementRef;
@Output() signImage: EventEmitter<string> = new EventEmitter();
constructor(
@Inject(MAT_DIALOG_DATA)
public data: any,
public dialogRef: MatDialogRef<modalFirmaComponent>
) {
console.log(data);
}
async ngAfterViewInit(): Promise<void> {
this.signaturePad = new SignaturePad(this.canvasEl.nativeElement);
this.canvasResize();
}
/*async ngAfterViewInit(): Promise<void> {
this.signaturePad.set('minWidth', 2); // set szimek/signature_pad options at runtime
this.signaturePad.set('velocityFilterWeight', 0.7); // set szimek/signature_pad options at runtime
this.signaturePad.set('minPointDistance', 0.5); // set szimek/signature_pad options at runtime
this.signaturePad.set('throttle', 16); // set szimek/signature_pad options at runtime
this.signaturePad.clear(); // invoke functions from szimek/signature_pad API
this.canvasResize();
this.signaturePad.fromData([]);
const canvas = this.signaturePad.getCanvas();
const ctx = canvas.getContext('2d');
if(ctx) {
ctx.fillStyle = 'black';
const text = "FIRMA________________________________________________________";
const x=20;
const y= canvas.height-40;
ctx.font = '10px Arial';
ctx.fillStyle = 'black';
ctx.fillText(text, x, y);
// const backgroundImage = new Image();
// backgroundImage.src = 'https://www.w3schools.com/html/img_chania.jpg';
// backgroundImage.onload = () => {
// if (backgroundImage) {
// ctx.drawImage(backgroundImage, 0, 0, 500, 300);
// }
// }
}
}*/
canvasResize(){
this.canvasEl.nativeElement.width = this.divisionEl.nativeElement.offsetWidth;
this.canvasEl.nativeElement.height = this.divisionEl.nativeElement.offsetHeight;
}
/*canvasResize(): void {
let canvas = document.querySelector('canvas');
if(canvas){
canvas.width= window.innerWidth;
canvas.height= window.innerHeight - (window.innerHeight * 0.19);
}
}*/
onClear(): void {
this.signaturePad.clear();
}
onCancelar(): void {
this.dialogRef.close(0);
}
onGuardar(){
const sign = this.signaturePad.toDataURL();
const blob = this.dataURLToBlob(sign);
const size = blob.size;
const nombre = 'FirmaConformidad.jpg';
this.dialogRef.close({blob, nombre, size});
//this.dialogRef.close(sign);
console.log(blob);
}
dataURLToBlob(dataURL: string): Blob {
const parts: string[] = dataURL.split(";base64,");
const contentType: string = parts[0].split(":")[1];
const raw: string = window.atob(parts[1]);
const rawLength: number = raw.length;
const uInt8Array: Uint8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: contentType });
}
drawComplete(event: TouchEvent) {
const sign = this.signaturePad.toDataURL();
console.log(sign);
//this.signImage.emit(sign);
}
drawStart(event: TouchEvent) {
//console.log('Start drawing', event);
}
}
src/app/service/conformidad_service/conformidad.service.ts
......@@ -140,19 +140,19 @@ export class ConformidadService {
formData.append('app_nombre', 'ORDEN_COMPRA'); // USANDO ESTE NOMBRE DE APP(ORDEN_COMPRA) YA QUE NO CUENTA CON LA CONFIGURACION DE SUBCARPETAS
formData.append('carpeta_nombre', datos.tipoEvidencia === 1 ? 'EVIDENCIAS_PROBLEMAS' :
datos.tipoEvidencia === 2 ? 'EVIDENCIAS_SOLUCIONES' : 'EVIDENCIAS_EXTRAS' );
const controller = new AbortController();
const timeout = setTimeout(() => controller.abort(), 30000); // 30 segundos
//const controller = new AbortController();
//const timeout = setTimeout(() => controller.abort(), 60000); // 30 segundos
try {
const response = await fetch(url, {
method: 'POST',
body: formData,
signal: controller.signal, // 30 segundos de timeout
//signal: controller.signal, // 30 segundos de timeout
});
const statusCode = response.status;
const responseBody = await response.json();
clearTimeout(timeout); // Limpiar, REVISA SI ESTO ESTA BIEN O QUITARLO
console.log(response)
//clearTimeout(timeout); // Limpiar, REVISA SI ESTO ESTA BIEN O QUITARLO
if (statusCode === 200) {
......@@ -173,7 +173,7 @@ export class ConformidadService {
}
} else {
respuesta = {status: false, message: "Fallo en subir imagene"};
respuesta = {status: false, message: "Fallo en subir imagene " + response};
break;
}
......
src/environment/env.prod.ts
......@@ -4,10 +4,7 @@ export const environment = {
t_asistencia_rest_link: 'https://tp-rest.sacooliveros.edu.pe',
redireccionamiento: 'https://fichaonline.sacooliveros.edu.pe:8000/trismegisto-apis/api/v1',
facturacion_electronica_link: 'https://fichaonline.sacooliveros.edu.pe:8080/FacturacionElectronicaSIIAA',
//facturacion_electronica_link: 'http://pruebaintranet.sacooliveros.pe:8080/FacturacionElectronicaSIIAA',
//facturacion_electronica_link: 'https://prueba-intranet.sacooliveros.edu.pe:8443/FacturacionElectronicaSIIAA',
horizon_services_link: 'https://api-horizon.sacooliveros.edu.pe',
//horizon_services_link: 'http://prueba-intranet.sacooliveros.edu.pe:8080/trismegisto-api-horizons',
ID_CARPETA_DRIVE_LOGISTICA:'13mGZo3AnFqgkNRyiVAgJoW9mUoQdABdC',
CORREO_DRIVE_LOGISTICA : 'trismegisto.logistica@sacooliveros.edu.pe',
opcion : 2
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment