Skip to content

F
formularioConformidad
Commit 3398213a by Fernando José Palomino Aquino
Options

[EDIT] ACOMODANDO DISEÑO PARA CELULAR

parent 9caec978
Showing with 40 additions and 40 deletions
src/app/pages/conformidad/conformidad.componente.html
......@@ -129,8 +129,8 @@
<mat-card-content class="w-full my-2.5">
<div class="div-serviocisPrestados divisionGeneral" [formGroup]="datos_servicio">
<div class="servicio-descripcion">
<div class="flex md:flex-col lg:flex-row gap-5 pb-5">
<div class="lg:w-1/5 md:w-full">
<div class="flex flex-col lg:flex-row gap-5 pb-5">
<div class="w-full lg:w-1/5 ">
<mat-form-field class="w-full" appearance="outline" floatLabel="always">
<mat-label>Listado de Requerimientos</mat-label>
<input soloNumeros="entero" type="text" placeholder="Buscar requerimiento" matInput #inputBusquedaReq formControlName="busquedaReq" [matAutocomplete]="autorequerimiento" maxlength="9"
......@@ -144,7 +144,7 @@
<mat-label class="flex justify-center items-center h-full text-center font-bold text-blue-600 text-lg" [ngClass]="{'fade-out': isFading}" [innerText]="labelText"></mat-label>
</div>
<div class="grid lg:grid-cols-5 md:grid-cols-3 lg:gap-4 md:gap-y-3">
<div class="flex flex-col lg:flex-row grid lg:grid-cols-5 md:grid-cols-3 lg:gap-4 gap-y-3">
<div class="lg:px-5 md:px-0.5 w-fit" *ngFor="let card of listRequerimientos" style="display: flex">
<mat-card>
<mat-card-content>
......@@ -167,7 +167,7 @@
<mat-divider style="padding: 20px 0"></mat-divider>
<div class="flex md:flex-col lg:flex-row gap-5 pb-5">
<div class="lg:w-1/5 md:w-full">
<div class="w-full lg:w-1/5 ">
<mat-form-field class="w-full" appearance="outline" floatLabel="always">
<mat-label>Listado de Tickets</mat-label>
<input soloNumeros="entero" type="text" placeholder="Buscar Ticket" matInput #inputBusquedaTicket formControlName="busquedaTickets" [matAutocomplete]="autotickets" maxlength="9"
......@@ -181,8 +181,8 @@
<mat-label class="flex justify-center items-center h-full text-center font-bold text-blue-600 text-lg" [ngClass]="{'fade-out': isFading}" [innerText]="labelText"></mat-label>
</div>
<div class="grid lg:grid-cols-5 md:grid-cols-3 lg:gap-4 md:gap-y-3">
<div class="lg:px-5 md:px-0.5 w-fit" *ngFor="let ticket of listTickets" style="display: flex">
<div class="flex flex-col lg:flex-row grid lg:grid-cols-5 md:grid-cols-3 lg:gap-4 gap-y-3">
<div class="lg:px-5 px-0.5 lg:w-fit w-full md:justify-center" *ngFor="let ticket of listTickets" style="display: flex">
<mat-card>
<mat-card-content>
<mat-card-subtitle style="font-size: 1rem;font-weight: bold;align-content: center">{{ ticket.titulo }}</mat-card-subtitle>
......@@ -233,7 +233,7 @@
<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>
<!--<button (click)="seleccionarInput(archivo,1)"><mat-icon>edit</mat-icon></button>-->
<input type="file" #fileEditar1 (change)="gestionArchivos(i,2,$event)" class="hidden" multiple accept="image/png, image/jpeg">
<button (click)="gestionArchivos(i,3)"><mat-icon>delete</mat-icon></button>
</div>
......@@ -254,7 +254,7 @@
<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>
<!--<button (click)="seleccionarInput(archivo,2)"><mat-icon>edit</mat-icon></button> -->
<input type="file" #fileEditar2 (change)="gestionArchivos(i,2,$event,2)" class="hidden" multiple accept="image/png, image/jpeg">
<button (click)="gestionArchivos(i,3)"><mat-icon>delete</mat-icon></button>
</div>
......@@ -274,8 +274,8 @@
</mat-card-header>
<mat-card-content class="w-full my-2.5">
<div class="div-trabajosPrestados divisionGeneral" [formGroup]="datos_trabajo">
<div class="flex flex-row gap-x-2">
<mat-form-field class="md:w-1/2 lg:w-1/3" appearance="outline" floatLabel="always">
<div class="flex flex-col lg:flex-row gap-y-2 lg:gap-x-2">
<mat-form-field class="w-full lg:w-1/3" appearance="outline" floatLabel="always">
<mat-label>Tipo de trabajo</mat-label>
<mat-select formControlName="tipoTrabajo" placeholder="[Seleccionar tipo de trabajo]">
@for (tipoT of listTipoTrabajo; track tipoT) {
......@@ -285,7 +285,7 @@
</mat-form-field>
<mat-form-field class="md:w-1/2 lg:w-1/3" appearance="outline" floatLabel="always">
<mat-form-field class="w-full lg:w-1/3" appearance="outline" floatLabel="always">
<mat-label>Ingresar porcentaje de avance</mat-label>
<input soloNumeros="entero" type="text" placeholder="Avance realizado 1 - 100" matInput formControlName="avanceTrabajo" maxlength="3">
</mat-form-field>
......@@ -319,7 +319,11 @@
<ng-container *ngIf="existeMaterialS.get('existeMaterial')?.value === '1'">
<!-- Componente a mostrar -->
<mat-card-content class="w-full">
<ordensalida-component [datosDesdeConformidad]="unidades_list"></ordensalida-component>
<ordensalida-component
[unidadesConformidad]="unidades_list"
[itemAdjuntosConformidad]="archivosItem"
></ordensalida-component>
</mat-card-content>
</ng-container>
</mat-card>
......
src/app/pages/conformidad/conformidad.componente.ts
......@@ -57,6 +57,7 @@ interface interPersonal {
interface interFile{
tipoEvidencia: number;
file: File;
item: number; // index que tendrà los archivos para visualizarlos o eliminarlos
}
@Component({
......@@ -134,7 +135,7 @@ export class ConformidadComponent implements AfterViewInit {
ID_CARPETA_DRIVE_LOGISTICA_ELECTRICISTA = environment.ID_CARPETA_DRIVE_LOGISTICA_ELECTRICISTA;
ID_CARPETA_DRIVE_LOGISTICA_GASFITERIA = environment.ID_CARPETA_DRIVE_LOGISTICA_GASFITERIA;
opcionEnvironmnet : boolean = environment.isProduction;
personal_list: any = [];
sede_list: any = [];
cargosU_list : any = [];
......@@ -160,6 +161,7 @@ export class ConformidadComponent implements AfterViewInit {
alertaPosicionVertical: MatSnackBarVerticalPosition = 'bottom';
alertaDuracion : number = 3;
archivosItem : number = 0;
archivosEvidencia : interFile[] = [];
archivosProblema : interFile[] = [];
archivosSolucion : interFile[] = [];
......@@ -528,14 +530,16 @@ export class ConformidadComponent implements AfterViewInit {
nuevosArchivos.forEach( async (file) => {
if (!this.archivosEvidencia.find((item) => item.file.name === file.name)) {
if (tipo !== 6 && tipo !== 3) {
// SI ES DIFERENTE DE EVIDENCIA DE CONFORMIDAD Y ATS
this.archivosEvidencia.push({tipoEvidencia: tipo, file: file});
this.archivosEvidencia.push({tipoEvidencia: tipo, file: file, item: this.archivosItem});
} else { // SINO, SOLO SE DEBE PERMITIR 2 IMAGENES DE CADA TIPO
} else {
// SINO, SOLO SE DEBE PERMITIR 2 IMAGENES DE CADA TIPO
const contador = this.archivosEvidencia.filter((item) => item.tipoEvidencia === tipo).length;
if (contador < 2) {
this.archivosEvidencia.push({tipoEvidencia: tipo, file: file});
this.archivosEvidencia.push({tipoEvidencia: tipo, file: file, item: this.archivosItem});
} else {
this.barraAlerta.open('SOLO SE PERMITE HASTA 2 IMAGENES', '', {
horizontalPosition: this.alertaPosicionHorizontal,
......@@ -546,6 +550,9 @@ export class ConformidadComponent implements AfterViewInit {
}
}
console.log(this.archivosItem);
this.archivosItem++;
});
//ACTUALIZA AMBOS VALORES PARA EL EDIT ENTRE ELLOS
......@@ -554,7 +561,7 @@ export class ConformidadComponent implements AfterViewInit {
}
seleccionarInput(archivo : any, tipo : number){
/*seleccionarInput(archivo : any, tipo : number){
if(tipo === 1){
const index = this.archivosProblema.findIndex((item) => item.file.name === archivo.file.name);
......@@ -566,7 +573,7 @@ export class ConformidadComponent implements AfterViewInit {
input.nativeElement.click(); // Simula el clic en el input file correspondiente
}
}
}*/
async gestionArchivos(index: number, accion : number, file : any = [], tipo : number = 1){
......@@ -969,7 +976,9 @@ export class ConformidadComponent implements AfterViewInit {
}else{
const Archivo = this.blobToFile(result.blob, result.nombre);
this.archivosEvidencia.push({tipoEvidencia: 4, file: Archivo});
this.archivosEvidencia.push({tipoEvidencia: 4, file: Archivo, item: this.archivosItem});
console.log(this.archivosItem);
this.archivosItem++;
}
this.obtenerFirma = true;
......
src/app/pages/ordensalida/ordensalida.componente.ts
......@@ -49,6 +49,7 @@ interface listadoComun {
interface interFile{
tipoEvidencia: number;
file: File;
item: number;
}
@Component({
......@@ -107,7 +108,8 @@ interface interFile{
export class ordenSalidaComponent implements OnInit {
@Input() datosDesdeConformidad: any; // Variable para recibir datos
@Input() unidadesConformidad: any; // Variable para recibir datos
@Input() itemAdjuntosConformidad: any;
private barraAlerta = inject(MatSnackBar);
//FORM GROUP
......@@ -154,7 +156,7 @@ export class ordenSalidaComponent implements OnInit {
async ngOnInit(): Promise<void> {
this.dataSource = [];
this.archivosMaterial = [];
this.listUnidades = this.datosDesdeConformidad.map((item: any) => ({codigo: item.CODIGO , nombre: item.NOMBRE}));
this.listUnidades = this.unidadesConformidad.map((item: any) => ({codigo: item.CODIGO , nombre: item.NOMBRE}));
this.listEstadoArticulo = [{ codigo: '1', nombre: 'VERDE'}, { codigo: '2', nombre: 'AMARILLO' },{ codigo: '3', nombre: 'ROJO' } ];
}
......@@ -234,14 +236,16 @@ export class ordenSalidaComponent implements OnInit {
const nuevosArchivos = Array.from(archivosSeleccionados).filter(file => file.type === 'image/png' || file.type === 'image/jpeg');
nuevosArchivos.forEach(async (file) => {
if (!this.archivosMaterial.find((item) => item.file.name === file.name)) {
this.archivosMaterial.push({tipoEvidencia: tipo, file: file});
this.archivosMaterial.push({tipoEvidencia: tipo, file: file,item: this.itemAdjuntosConformidad});
}
console.log(this.itemAdjuntosConformidad);
this.itemAdjuntosConformidad++;
});
}
async gestionArchivos(index: number, accion : number, file : any = [], tipo : number = 1){
if(accion === 1){
if(accion === 1){ //VISUALIZAR
const fileReader = new FileReader();
fileReader.onload = () => {
this.dialog.open(modalEvidenciaComponent, {
......@@ -252,23 +256,6 @@ export class ordenSalidaComponent implements OnInit {
};
fileReader.readAsDataURL(file); // Convertir el archivo a URL para mostrarlo
}else if(accion === 2){
const archivoSeleccionado = file.target.files[0]; // Obteniendo el File
//OBTENER EL ARCHIVO FILE Y UBICARLO EN EL ARRAY DE archivosEP EN EL MISMO INDEX
if(archivoSeleccionado) {
//COMPRAR EL NOMBRE DEL ARCHIVOS CON TODA LA LISTA EXISTENTE PARA EVITAR REPETICIONES
if(!this.archivosMaterial.find((item) => item.file.name === archivoSeleccionado.name && item.tipoEvidencia === tipo)){
this.archivosMaterial[index].file = archivoSeleccionado;
}else{
this.barraAlerta.open( 'ARCHIVO YA SE ENCUENTRA EN LA LISTA' , '' , {
horizontalPosition: this.alertaPosicionHorizontal,
verticalPosition: this.alertaPosicionVertical,
duration: this.alertaDuracion * 1000
});
}
}
}else{
this.archivosMaterial.splice(index, 1); // Eliminar el archivo del array de archivosEP
}
......
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