[ADD] CORRECCION Y VALIDACION Y ELIMINACION DE PASAJES

src/app/pages/conformidad/conformidad.componente.html

@@ -99,9 +99,6 @@
                     <th mat-header-cell *matHeaderCellDef> LUGAR DESTINO </th>
                     <td mat-cell *matCellDef="let element">
                       <ng-container *ngIf="element.isNew; else displayOrigen">
-                        <!--<mat-form-field [formGroup]="datos_personal"  style="width: 20rem" appearance="outline">
-                          <input matInput placeholder="[Lugar de Destino]" formControlName="lugarDestinoPasaje" readonly>
-                        </mat-form-field>-->
                         <mat-form-field style="width: 20rem" appearance="outline">
                           <input matInput placeholder="[Lugar de Destino]" [value]="lugarDestinoPasaje" readonly>
                         </mat-form-field>
@@ -116,7 +113,6 @@
                     <th mat-header-cell *matHeaderCellDef> MONTO </th>
                     <td mat-cell *matCellDef="let element">
                       <ng-container *ngIf="element.isNew; else displayOrigen">
-                        <!-- <input [(ngModel)]="element.monto" placeholder="Monto"> -->
                         <mat-form-field [formGroup]="datos_pasajeAcumulado"  style="width: 10rem" appearance="outline">
                           <input matInput formControlName="montoPasaje{{element.index}}" soloNumeros placeholder="[Monto]" value="">
                         </mat-form-field>
@@ -147,21 +143,25 @@
                   <ng-container matColumnDef="accion">
                     <th mat-header-cell *matHeaderCellDef> ACCIÓN </th>
                     <td mat-cell *matCellDef="let element">
-                      <ng-container *ngIf="element.isNew; else displayOrigen">
-                        <button mat-icon-button (click)="onEventoConfirmarPasaje($event, element)">
-                          <mat-icon>check_circle</mat-icon>
-                        </button>
-                        <button mat-icon-button (click)="onEventoCancelarPasaje($event, element)">
-                          <mat-icon>cancel</mat-icon>
-                        </button>
+                      <ng-container *ngIf="element.acciones; else sinAcciones">
+                        <ng-container *ngIf="element.isNew; else accionesEditar">
+                          <button mat-icon-button (click)="onEventoConfirmarPasaje($event, element)">
+                            <mat-icon>check_circle</mat-icon>
+                          </button>
+                          <button mat-icon-button (click)="onEventoCancelarPasaje($event, element)">
+                            <mat-icon>cancel</mat-icon>
+                          </button>
+                        </ng-container>
+                        <ng-template #accionesEditar>
+                            <button mat-icon-button (click)="onEventoEditarPasaje($event, element)">
+                              <mat-icon>edit</mat-icon>
+                            </button>
+                            <button mat-icon-button (click)="onEventoEliminarPasaje($event, element)">
+                              <mat-icon>delete</mat-icon>
+                            </button>
+                        </ng-template>
                       </ng-container>
-                      <ng-template #displayOrigen>
-                        <button mat-icon-button (click)="onEventoEditarPasaje($event, element)">
-                          <mat-icon>edit</mat-icon>
-                        </button>
-                        <button mat-icon-button (click)="onEventoEliminarPasaje($event, element)">
-                          <mat-icon>delete</mat-icon>
-                        </button>
+                      <ng-template #sinAcciones>
                       </ng-template>
                     </td>
                   </ng-container>
@@ -188,7 +188,7 @@
         <div class="servicio-descripcion">
           <div style="display: flex;align-items: center">
 
-            <mat-form-field style="width: 20rem" appearance="outline" floatLabel="always">
+            <mat-form-field style="width: 15rem" appearance="outline" floatLabel="always">
               <mat-label>Listado de Requerimientos</mat-label>
               <input type="text" placeholder="Buscar requerimiento" matInput #inputBusqueda formControlName="selectedOption" [matAutocomplete]="auto" maxlength="9"
                      (input)="onBusquedaRequerimiento($event)">
@@ -199,23 +199,23 @@
               </mat-autocomplete>
             </mat-form-field>
 
-            <div class="contenedorRequerimiento" *ngFor="let card of cards" style="display: flex">
-              <mat-card>
-                <mat-card-content>
-                    <mat-card-subtitle style="font-size: 1rem;font-weight: bold;align-content: center">{{ card.titulo }}</mat-card-subtitle>
-                    <div class="contenedor-botones">
-                      <button mat-fab aria-label="Eliminar"  matTooltip="Eliminar" matTooltipPosition="above" (click)="deleteRequerimiento(card.id)">
-                        <mat-icon class="mat-icon-small">delete</mat-icon>
-                      </button>
-                    </div>
-                    <div class="contenedor-botones">
-                      <button mat-fab aria-label="Información" matTooltip="Información" matTooltipPosition="above" (click)="infoRequerimiento(card.codigo)">
-                        <mat-icon class="mat-icon-small">info</mat-icon>
-                      </button>
-                    </div>
-                </mat-card-content>
-              </mat-card>
-              <br>
+            <div class="grid grid-cols-5 gap-4">
+              <div class="contenedorRequerimiento" *ngFor="let card of cards" style="display: flex">
+                <mat-card>
+                  <mat-card-content>
+                      <mat-card-subtitle style="font-size: 1rem;font-weight: bold;align-content: center">{{ card.titulo }}</mat-card-subtitle>
+                      <div class="w-fit py-2 px-3 flex space-x-4">
+                        <button mat-fab aria-label="Eliminar"  matTooltip="Eliminar" matTooltipPosition="above" (click)="deleteRequerimiento(card.id)">
+                          <mat-icon class="mat-icon-small">delete</mat-icon>
+                        </button>
+
+                        <button mat-fab aria-label="Información" matTooltip="Información" matTooltipPosition="above" (click)="infoRequerimiento(card.codigo)">
+                          <mat-icon class="mat-icon-small">info</mat-icon>
+                        </button>
+                      </div>
+                  </mat-card-content>
+                </mat-card>
+              </div>
             </div>
             <br>
             <mat-label [ngClass]="{'fade-out': isFading}" [innerText]="labelText"></mat-label>
@@ -224,17 +224,26 @@
 
           <br>
 
-          <mat-form-field class="example-full-width">
-            <mat-label>DESCRIPCIÓN DEL PROBLEMA : </mat-label>
-            <textarea matInput placeholder="Breve descripciòn sobrel los problemas encontrados en la sede" formControlName="descripcionServicio"></textarea>
-          </mat-form-field>
-
-          <br>
-
-          <mat-form-field class="example-full-width">
-            <mat-label>CAUSA : </mat-label>
-            <textarea matInput placeholder="Breve descripciòn sobre las causas del problema" formControlName="causaServicio"></textarea>
-          </mat-form-field>
+          <div class="grid grid-flow-col md:grid-cols-2 gap-5" >
+            <div>
+              <mat-form-field class="example-full-width">
+                <mat-label>DESCRIPCIÓN DEL PROBLEMA : </mat-label>
+                <textarea matInput placeholder="Breve descripciòn sobrel los problemas encontrados en la sede" formControlName="descripcionServicio"
+                          cdkTextareaAutosize
+                          cdkAutosizeMinRows="3"
+                          cdkAutosizeMaxRows="10"></textarea>
+              </mat-form-field>
+            </div>
+            <div>
+              <mat-form-field class="example-full-width">
+                <mat-label>CAUSA : </mat-label>
+                <textarea matInput placeholder="Breve descripciòn sobre las causas del problema" formControlName="causaServicio"
+                          cdkTextareaAutosize
+                          cdkAutosizeMinRows="3"
+                          cdkAutosizeMaxRows="10"></textarea>
+              </mat-form-field>
+            </div>
+          </div>
         </div>
 
         <div class="grid grid-flow-col md:grid-cols-2 gap-5">
@@ -275,6 +284,7 @@
       </div>
     </mat-card-content>
   </mat-card>
+  <!---------------------------------------------------------------------- SERVICIOS PRESTADOS  ---------------------------------------------------------------------->
 
 
   <mat-card appearance="outlined" class="mt-4 flex flex-col gap-2.5 text-[#222] !shadow-xl w-[90vw] md:w-[75vw]">

src/app/pages/conformidad/conformidad.componente.ts

@@ -15,7 +15,6 @@ import {NgClass, NgForOf, NgIf, DatePipe, AsyncPipe, NgStyle} from "@angular/com
 import {MatCard, MatCardContent, MatCardFooter, MatCardHeader, MatCardTitle , MatCardModule} from '@angular/material/card';
 import {Observable, from, min} from 'rxjs';
 import {switchMap, map, startWith , debounceTime } from 'rxjs/operators';
-//import {AsyncPipe} from '@angular/common';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {MatDialog, MatDialogModule} from '@angular/material/dialog';
@@ -24,6 +23,9 @@ import {MatTableModule} from '@angular/material/table';
 import { MatCell, MatCellDef, MatColumnDef, MatHeaderCell, MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef, MatTable } from "@angular/material/table";
 import { SoloNumerosDirective } from '../../service/directivas_service/soloNumeros/solo-numeros.directive'; // Importa la directiva
 import { MY_DATE_FORMATS } from "../../service/directivas_service/formatoFecha/date-format"; // Asegúrate de ajustar la ruta
+import { MatSnackBar, MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition,} from '@angular/material/snack-bar';
+import { ConfirmarEliminacionComponent  } from './modalEliminarPasaje/eliminarPasaje.componente';
+
 
 interface tiposTrabajo {
   value: string;
@@ -43,6 +45,8 @@ interface interDetallePasaje {
   monto: string;
   fecha: Date;
   isNew: boolean;
+  isEdit : boolean;
+  acciones: boolean;
 }
 
 @Component({
@@ -93,7 +97,7 @@ interface interDetallePasaje {
 })
 
 export class ConformidadComponent implements OnInit {
-
+  private barraAlerta = inject(MatSnackBar);
 
   // VIEWCHILD
   @ViewChild('labelAdvertencia', { static: false }) labelAdvertencia!: ElementRef;
@@ -133,8 +137,12 @@ export class ConformidadComponent implements OnInit {
     botonSolucion : { texto : 'EVIDENCIA DE SOLUCIÓN' , estado : false}
   }
 
-  minFechaLimite: Date | null = new Date(); // 10 de septiembre de 2024 (meses empiezan en 0)
-  maxFechaLimite: Date | null = new Date();
+  alertaPosicionHorizontal: MatSnackBarHorizontalPosition = 'center';
+  alertaPosicionVertical: MatSnackBarVerticalPosition = 'bottom';
+  alertaDuracion : number = 3;
+
+  minFechaLimite: Date | null = new Date();
+  maxFechaLimite: Date  | null = new Date();
 
   // DATALIST
 
@@ -227,7 +235,7 @@ export class ConformidadComponent implements OnInit {
 
       const controlesInvalidos = Object.keys(this.datos_personal.controls)
         .filter(controlName => this.datos_personal.get(controlName)?.invalid);
-      console.log('Controles inválidos con errores:', controlesInvalidos);
+      //console.log('Controles inválidos con errores:', controlesInvalidos);
 
       this.activarPasajes = controlesInvalidos.length === 0 ? true : false;
 
@@ -425,11 +433,22 @@ export class ConformidadComponent implements OnInit {
       lugarDestino: '',
       monto: '',
       fecha: new Date(),
-      isNew: true
+      isNew: true,
+      isEdit : false,
+      acciones: true
     };
     this.datos_pasajeAcumulado.addControl('montoPasaje'+NuevaFila.index, new FormControl<number | null>(null,[Validators.maxLength(12)]));
     this.datos_fechaPasaje.addControl('fechaPasaje'+NuevaFila.index, new FormControl<Date | null>(null,[Validators.maxLength(12)]));
     this.datos_lugarOrigen.addControl('lugarOrigen'+NuevaFila.index, new FormControl<String | null>(null ,[Validators.maxLength(12)]));
+
+    this.dataSource.forEach((item) => {
+      if (item.index !== NuevaFila.index) {
+        item.isEdit = false;
+        item.isNew = false;
+        item.acciones = false;
+      }
+    });
+
     this.dataSource = [...this.dataSource,NuevaFila];
 
     this.activarPasajes = false;
@@ -445,32 +464,81 @@ export class ConformidadComponent implements OnInit {
 
     //VALIDAR LOS VALORES OBTENIDOS ANTES DE REALIZAR UN REGISTRO
 
+    if(this.validarRegistroPasaje(elemento.index)){
+      // Agregar los datos recogidos de la fila para agregarlos en dataSource y actualizar la tabla
+      const index = this.dataSource.findIndex((item) => item.index === elemento.index);
+      this.dataSource[index] = {
+        index: elemento.index,
+        lugarOrigen: this.sede_list.find((item: any) => item.codlocal === lugarOrigen)?.deslocal || '' ,
+        lugarDestino: this.sede_list.find((item: any) => item.codlocal === lugarDestino)?.deslocal || '' ,
+        monto: pasaje,
+        fecha: fechaPasaje,
+        isNew: false,
+        isEdit : false,
+        acciones: true
+      };
+
+      console.log(this.dataSource , 'DATASOURCE');
+      //console.log(lugarOrigen , lugarDestino, pasaje, fechaPasaje)
+
+      this.dataSource.forEach((item) => {item.acciones = true; }); // VUELVE A ACTIVAR TODAS LAS ACCION
+
+      this.dataSource = [...this.dataSource];
+      this.activarPasajes = true;
+      this.habilitarSeccionPersonal(true);
+
+      this.barraAlerta.open( 'REGISTRO INGRESADO' ,  '' , {
+        horizontalPosition: this.alertaPosicionHorizontal,
+        verticalPosition: this.alertaPosicionVertical,
+        duration: this.alertaDuracion * 1000
+      });
 
-    // Agregar los datos recogidos de la fila para agregarlos en dataSource y actualizar la tabla
-    const index = this.dataSource.findIndex((item) => item.index === elemento.index);
-    this.dataSource[index] = {
-      index: elemento.index,
-      lugarOrigen: this.sede_list.find((item: any) => item.codlocal === lugarOrigen)?.deslocal || '' ,
-      lugarDestino: this.sede_list.find((item: any) => item.codlocal === lugarDestino)?.deslocal || '' ,
-      monto: pasaje,
-      fecha: fechaPasaje,
-      isNew: false
-    };
+    }else{
 
-    console.log(this.dataSource , 'DATASOURCE');
-    console.log(lugarOrigen , lugarDestino, pasaje, fechaPasaje)
+      this.barraAlerta.open( 'VALIDAR DATOS INGRESADOS' ,  '' , {
+        horizontalPosition: this.alertaPosicionHorizontal,
+        verticalPosition: this.alertaPosicionVertical,
+        duration: this.alertaDuracion * 1000
+      });
 
-    this.dataSource = [...this.dataSource];
-    this.activarPasajes = true;
-    this.habilitarSeccionPersonal(true);
+    }
+
+  }
+
+  validarRegistroPasaje(index : number){
+    const lugarOrigen = this.datos_lugarOrigen.get('lugarOrigen'+index)?.value;
+    const lugarDestino = this.datos_personal.get('sedePersonal')?.value;
+    const fechaPasaje = this.datos_fechaPasaje.get('fechaPasaje'+index)?.value;
+    const montoPasaje = this.datos_pasajeAcumulado.get('montoPasaje'+index)?.value;
+
+
+    this.datos_lugarOrigen.get('lugarOrigen'+index)?.setErrors({'incorrect': !(lugarOrigen && lugarOrigen !== lugarDestino) , emitEvent: true});
+    this.datos_fechaPasaje.get('fechaPasaje'+index)?.setErrors({'incorrect': !fechaPasaje , emitEvent: true });
+    this.datos_pasajeAcumulado.get('montoPasaje'+index)?.setErrors({'incorrect': !(montoPasaje && montoPasaje > 0) , emitEvent: true });
+
+
+    return lugarOrigen && lugarDestino && fechaPasaje && montoPasaje && montoPasaje > 0 && lugarOrigen !== lugarDestino;
 
   }
 
   onEventoCancelarPasaje(event: any, elemento: any){
-    this.dataSource = this.dataSource.filter((item) => item.index !== elemento.index);
-    this.datos_pasajeAcumulado.removeControl('montoPasaje'+elemento.index);
-    this.datos_fechaPasaje.removeControl('fechaPasaje'+elemento.index);
-    this.datos_lugarOrigen.removeControl('lugarOrigen'+elemento.index);
+    const index = this.dataSource.findIndex((item) => item.index === elemento.index);//Descubriendo el index
+
+    this.dataSource.forEach((item) => { item.acciones = true; }); // Que todas las filas vuelvan a tener las acciones
+
+    if(this.dataSource[index].isEdit){
+      this.dataSource[index].isEdit = false;
+      this.dataSource[index].isNew = false;
+      this.dataSource = [...this.dataSource];
+
+    }else{
+
+      this.dataSource = this.dataSource.filter((item) => item.index !== elemento.index);
+      this.datos_pasajeAcumulado.removeControl('montoPasaje'+elemento.index);
+      this.datos_fechaPasaje.removeControl('fechaPasaje'+elemento.index);
+      this.datos_lugarOrigen.removeControl('lugarOrigen'+elemento.index);
+    }
+
 
     this.habilitarSeccionPersonal(true);
     this.activarPasajes = true
@@ -482,11 +550,46 @@ export class ConformidadComponent implements OnInit {
     console.log(materialSobrante);
   }
 
-  onEventoEditarPasaje(event: any, elemento: any){
+  //Editar una fila de pasaje
+  onEventoEditarPasaje(event: any, elemento: any) {
+
+    const index = this.dataSource.findIndex((item) => item.index === elemento.index);//Descubriendo el index
+
+    this.dataSource.forEach((item) => {
+      if (item.index === elemento.index) {
+        item.isEdit = true;
+        item.isNew = true;
+        item.acciones = true;
+      } else {
+        item.isEdit = false;
+        item.isNew = false;
+        item.acciones = false;
+      }
+    });
+
+    //this.dataSource[index].isNew = true; //Obteniendo la fila del dataSource y cambiando el estado a nuevo
+    //this.dataSource[index].isEdit = true;
+    this.dataSource = [...this.dataSource]; // Volviendo a ingresar los datos para que la tabla se actualice y la fila cambie con las condiciones del HTML
 
+    this.activarPasajes = false;
   }
 
   onEventoEliminarPasaje(event: any, elemento: any){
+    //Al presionar el boton aparecerá un Dialog confirmando si desea eliminar el registro, al aceptar la fila del registro se eliminará.
+    const dialogRef = this.dialog.open(ConfirmarEliminacionComponent);
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        const index = elemento.index;
+        if (index >= 0) {
+          this.dataSource = this.dataSource.filter((item) => item.index !== elemento.index);
+          this.datos_pasajeAcumulado.removeControl('montoPasaje'+elemento.index);
+          this.datos_fechaPasaje.removeControl('fechaPasaje'+elemento.index);
+          this.datos_lugarOrigen.removeControl('lugarOrigen'+elemento.index);
+        }
+      }
+    });
+
 
   }
 

src/app/pages/conformidad/modalEliminarPasaje/eliminarPasaje.componente.ts

+import { Component } from '@angular/core';
+import { MatDialogActions, MatDialogClose, MatDialogContent, MatDialogTitle, MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
+import {JsonPipe} from "@angular/common";
+import {Observable} from "rxjs";
+import {MatFormField, MatLabel} from "@angular/material/form-field";
+import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms";
+import {MatIconModule} from '@angular/material/icon';
+import {MatDividerModule} from '@angular/material/divider';
+import {MatButtonModule} from '@angular/material/button';
+import {MatTableModule} from "@angular/material/table";
+
+@Component({
+  selector: 'app-confirmar-eliminacion',
+  imports: [
+    MatDialogActions,
+    MatDialogClose,
+    MatDialogContent,
+    JsonPipe,
+    MatLabel,
+    ReactiveFormsModule,
+    MatFormField,
+    MatDialogTitle,
+    MatTableModule,
+    MatButtonModule,
+    MatDividerModule,
+    MatIconModule,
+  ],
+  standalone: true,
+  template: `
+    <h1 mat-dialog-title>Confirmar Eliminación</h1>
+    <div mat-dialog-content>
+      <p>¿Estás seguro de que deseas eliminar este pasaje?</p>
+    </div>
+    <div mat-dialog-actions>
+      <button mat-button (click)="onCancelar()">Cancelar</button>
+      <button mat-button color="warn" (click)="onConfirmar()">Eliminar</button>
+    </div>
+  `
+})
+export class ConfirmarEliminacionComponent {
+  constructor(public dialogRef: MatDialogRef<ConfirmarEliminacionComponent>) {}
+
+  onCancelar(): void {
+    this.dialogRef.close(false);
+  }
+
+  onConfirmar(): void {
+    this.dialogRef.close(true);
+  }
+}

src/app/pages/conformidad/modalRequerimiento/modalRequerimiento.componente.html

@@ -14,12 +14,12 @@
           The actual rendered columns are set as a property on the row definition" -->
 
     <ng-container matColumnDef="posicion">
-      <th mat-header-cell *matHeaderCellDef> POSICIÒN </th>
+      <th mat-header-cell *matHeaderCellDef> POSICIÓN </th>
       <td mat-cell *matCellDef="let element"> {{element.posicion}} </td>
     </ng-container>
 
     <ng-container matColumnDef="nombre">
-      <th mat-header-cell *matHeaderCellDef> NOMBRE ARTÌCULO </th>
+      <th mat-header-cell *matHeaderCellDef> NOMBRE ARTÍCULO </th>
       <td mat-cell *matCellDef="let element"> {{element.nombre}} </td>
     </ng-container>
 

tailwind.config.js

+
+module.exports = {
+  content: [
+    "./src/**/*.{html,ts}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}