Skip to content

F
formularioConformidad
Commit 5bac3d22 by Fernando José Palomino Aquino
Options

[ADD] CORRECCION Y VALIDACION Y ELIMINACION DE PASAJES

parent 90a6b03a
Showing with 248 additions and 75 deletions
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 0 → 100644
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 0 → 100644
module.exports = {
content: [
"./src/**/*.{html,ts}",
],
theme: {
extend: {},
},
plugins: [],
}
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