[EDIT] ACOMODANDO DISEÑO PARA CELULAR

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
     }