Skip to content

F
formularioConformidad
Commit 0934b5f7 by Fernando José Palomino Aquino
Options

[ADD] NUEVA FORMA DE REGISTRO OS

parent 12f9daea
Showing with 313 additions and 235 deletions
src/app/pages/conformidad/conformidad.componente.css
......@@ -14,10 +14,6 @@
width: 20rem;
}
.contenedorRequerimiento{
padding: 0 20px;
}
.contenedor-general-botones {
display: flex;
}
......
src/app/pages/conformidad/conformidad.componente.html
......@@ -14,9 +14,9 @@
<mat-card-content class="w-full my-2.5" [formGroup]="datos_personal">
<!------------------------------------------------------------------------- DATOS GENERALES ------------------------------------------------------------------------------>
<div class="flex gap-4 mb-4">
<mat-form-field class="basis-1/4" appearance="outline" floatLabel="always">
<mat-label>TIPO TRABAJADOR</mat-label>
<mat-select formControlName="tipoCargoPersonal" placeholder="[Seleccionar zona]" required>
<mat-form-field class="lg:basis-1/4 sm:basis-2/4" appearance="outline" floatLabel="always">
<mat-label>Especialidad</mat-label>
<mat-select formControlName="tipoCargoPersonal" placeholder="[Seleccionar especialidad]" required>
<mat-option *ngFor="let option of this.cargosU_list" [value]="option.cargou">
{{option.tipocargo}}
</mat-option>
......@@ -35,7 +35,7 @@
</mat-select>
</mat-form-field>
<mat-form-field class="w-full" appearance="outline" floatLabel="always">
<mat-label>Especialidad</mat-label>
<mat-label>Especialidad del técnico</mat-label>
<input formControlName="areaPersonal{{personal.index}}" matInput placeholder="[Área designada]" value="" readonly>
</mat-form-field>
</div>
......@@ -61,7 +61,7 @@
<div class="w-full gap-4 mb-4">
<!-- <div class="basis-3/4"> -->
<div class="flex flex-row gap-x-2">
<div class="flex lg:flex-row sm:flex-col gap-x-2">
<mat-form-field class="w-full" appearance="outline" floatLabel="always">
<mat-label>Zona</mat-label>
<mat-select formControlName="zonaPersonal" placeholder="[Seleccionar zona]" required>
......@@ -115,7 +115,6 @@
<ngx-mat-timepicker #timepicker2></ngx-mat-timepicker>
</mat-form-field>
</div>
</div>
<!--</div>-->
</div>
......@@ -253,8 +252,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 flex-col md:flex-row gap-5 pb-5">
<div class="w-full md:w-1/5">
<div class="flex md:flex-col lg:flex-row gap-5 pb-5">
<div class="lg:w-1/5 md:w-full">
<mat-form-field class="w-full" appearance="outline" floatLabel="always">
<mat-label>Listado de Requerimientos</mat-label>
<input type="text" placeholder="Buscar requerimiento" matInput #inputBusqueda formControlName="busquedaReq" [matAutocomplete]="auto" maxlength="9"
......@@ -269,13 +268,13 @@
</div>
<!-- <div class="grid grid-cols-2 md:grid-cols-5 gap-4 w-full md:w-4/5">-->
<div class="grid grid-cols-5 gap-4 basis-4/5">
<div class="contenedorRequerimiento" *ngFor="let card of listRequerimientos" style="display: flex">
<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 card of listRequerimientos" style="display: flex">
<mat-card>
<mat-card-content>
<!-- <mat-card-subtitle class="text-base font-bold">{{ card.titulo }}</mat-card-subtitle> -->
<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">
<div class="w-fit py-2 lg: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>
......@@ -290,7 +289,7 @@
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
<div class="grid md:grid-cols-1 lg:grid-cols-2 gap-5">
<div>
<mat-form-field class="w-full">
<mat-label>DESCRIPCIÓN DEL PROBLEMA</mat-label>
......@@ -308,7 +307,7 @@
</div>
</div>
<div class="grid grid-flow-col md:grid-cols-2 gap-5">
<div class="grid lg:grid-cols-2 gap-5">
<div>
<div><b class="md:text-[1rem] text-[1em] text-black/60">EVIDENCIAS DEL PROBLEMA: *</b></div>
<button mat-fab class="!w-full" [color]="'blue'" (click)="file1.click()">
......@@ -363,18 +362,18 @@
</mat-card-header>
<mat-card-content class="w-full my-2.5">
<div class="div-trabajosPrestados divisionGeneral" [formGroup]="datos_trabajo">
<label class="font-bold text-[1.2rem] pr-6">TIPO DE TRABAJO:</label>
<mat-form-field class="w-full md:w-1/2">
<mat-label>Seleccionar tipo de trabajo</mat-label>
<mat-select formControlName="tipoTrabajo">
<div>
<mat-form-field class="md: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) {
<mat-option [value]="tipoT.codtipo">{{ tipoT.desctipo }}</mat-option>
}
</mat-select>
</mat-form-field>
</div>
<div class="w-full mt-5">
<mat-form-field class="w-full">
<mat-form-field class="w-full" >
<mat-label>DESCRIPCIÓN DEL TRABAJO</mat-label>
<textarea matInput placeholder="Breve descripción del trabajo realizado" formControlName="descripcionTrabajo"
cdkTextareaAutosize cdkAutosizeMinRows="3" cdkAutosizeMaxRows="10" [required]="false"></textarea>
......@@ -399,7 +398,7 @@
<ng-container *ngIf="existeMaterialS.get('existeMaterial')?.value === '1'">
<!-- Componente a mostrar -->
<mat-card-content class="w-full">
<ordensalida-component></ordensalida-component>
<ordensalida-component [datosDesdeConformidad]="unidades_list"></ordensalida-component>
</mat-card-content>
</ng-container>
</mat-card>
......@@ -413,14 +412,16 @@
</mat-card-header>
<mat-card-content class="w-full my-2.5">
<div class="div-serviocisPrestados divisionGeneral">
<div class="grid grid-flow-col md:grid-cols-2 gap-5">
<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>
<button mat-fab class="!w-full" [color]="'blue'" (click)="fotoATC.click()">
<mat-label>SUBIR FOTO DE LA ATC</mat-label>
<mat-icon>file_open</mat-icon>
</button>
<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">
......
src/app/pages/conformidad/conformidad.componente.ts
......@@ -153,6 +153,7 @@ export class ConformidadComponent implements AfterViewInit {
sede_list: any = [];
cargosU_list : any = [];
zona_list: any = [];
unidades_list : any = [];
requerimientosFiltrados: any[] = [];
listSedesAtencion : lugaresTrabajo[] = [];
listRequerimientos: interRequerimientos[] = [];
......@@ -210,15 +211,16 @@ export class ConformidadComponent implements AfterViewInit {
descripcionTrabajo : new FormControl<string>('' ,Validators.required),
});
existeMaterialS : FormGroup = new FormGroup({
existeMaterial : new FormControl(null ,Validators.required),
});
/*datos_pasajeAcumulado = new FormGroup<any>({});
datos_lugarOrigen : FormGroup = new FormGroup<any>({}) ;
datos_fechaPasaje : FormGroup = new FormGroup<any>({}) ;*/
existeMaterialS : FormGroup = new FormGroup({
existeMaterial : new FormControl(null ,Validators.required),
});
// GROUPO DE FORMULARIO
......@@ -270,20 +272,24 @@ export class ConformidadComponent implements AfterViewInit {
personal,
sede,
tipoTrabajo,
cargosUnidos
cargosUnidos,
unidades
] = await Promise.all([
this.conformidadHelper.cargarPersonal(),
this.conformidadHelper.cargarSedes(),
this.conformidadHelper.gestionConformidad({opcion: 9}),
this.conformidadHelper.cargarCargosU()
this.conformidadHelper.cargarCargosU(),
this.conformidadHelper.listadoGeneralHorizon({accion : 5})
]);
//this.personal_list = personal;
this.sede_list = sede;
this.cargosU_list = cargosUnidos;
this.zona_list = [{ value: 1, viewValue: 'NORTE' },{ value: 2, viewValue: 'SUR' },{ value: 3, viewValue: 'ESTE' },{ value: 4, viewValue: 'CENTRO' }];
this.unidades_list = unidades;
//this.dataSource = []; // Inicializa la tabla de pasajes
this.activarPasajes = false;
//this.activarPasajes = false;
const jsonTipoTrabajo = JSON.parse(tipoTrabajo);
this.listTipoTrabajo = jsonTipoTrabajo.data;
......@@ -394,6 +400,8 @@ export class ConformidadComponent implements AfterViewInit {
});*/
}
});
}
//AL SELECCIONAR UN REQUERIMIENTO
......@@ -970,7 +978,7 @@ export class ConformidadComponent implements AfterViewInit {
return {
accion: 2,
codOrdenSalida: respuestaOrdenSalida.data.codordensalida,
codArticulo: item.codigoArticulo,
codArticulo: item.codigo,
nombreArticulo: item.nombre,
unidad: item.unidad,
cantidad: item.cantidad,
......
src/app/pages/conformidad/modalArticuloOC/modalArticuloOC.componente.html 0 → 100644
<h1 mat-dialog-title>Detalle Articulo</h1>
<mat-dialog-content [formGroup]="datos_Articulo" >
<mat-card appearance="outlined" >
<mat-card-content class="flex items-center gap-4 p-4 rounded-lg shadow-lg bg-blue-50" >
<div>
<mat-label>NOMBRE ARTÍCULO: </mat-label>
<mat-form-field class="w-full">
<mat-label>Ingrese artículo</mat-label>
<input type="text" formControlName="nombreArticulo" placeholder="" matInput>
</mat-form-field>
</div>
<div>
<mat-form-field appearance="outline" floatLabel="always" class="w-full">
<mat-label>Unidad de medida</mat-label>
<mat-select formControlName="unidadArticulo" placeholder="[Seleccionar Unidad]" required>
<mat-option *ngFor="let option of this.Unidades" [value]="option?.codigo">{{option?.nombre}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-label>CANTIDAD : </mat-label>
<mat-form-field class="w-full">
<mat-label>Ingrese cantidad</mat-label>
<input formControlName="cantidadArticulo" matInput soloNumeros="entero" maxlength="2" placeholder="Máx. 2 dígitos">
</mat-form-field>
</div>
<div>
<mat-form-field appearance="outline" floatLabel="always" class="w-full">
<mat-label>Estado del artículo</mat-label>
<mat-select formControlName="estadoArticulo" placeholder="[Seleccionar estado del artículo]" required>
<mat-option *ngFor="let tipoT of Estados" [value]="tipoT.codigo">{{ tipoT.nombre }}</mat-option>
</mat-select>
</mat-form-field>
</div>
</mat-card-content>
</mat-card>
</mat-dialog-content>
<div mat-dialog-actions align="center">
<button mat-button (click)="onCancelar()">Cancelar</button>
<ng-container *ngIf="!Editar; else displayEditar">
<button mat-button color="green" (click)="onConfirmar()">Registrar</button>
</ng-container>
<ng-template #displayEditar>
<button mat-button color="green" (click)="onConfirmar()">Editar</button>
</ng-template>
</div>
src/app/pages/conformidad/modalArticuloOC/modalArticuloOC.componente.ts 0 → 100644
import {Component, ElementRef, inject, Inject, OnInit, ViewChild} from '@angular/core';
import {MatOption, provideNativeDateAdapter} from '@angular/material/core';
import {MatTableModule} from '@angular/material/table';
import { MatDialogActions, MatDialogClose, MatDialogContent, MatDialogTitle, MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
import {JsonPipe, NgForOf, NgIf} from "@angular/common";
import {Observable} from "rxjs";
import {MatFormField, MatLabel,MatFormFieldModule } from "@angular/material/form-field";
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
import {MatIconModule} from '@angular/material/icon';
import {MatDividerModule} from '@angular/material/divider';
import {MatButtonModule} from '@angular/material/button';
import {MatCard, MatCardContent} from "@angular/material/card";
import {MatInput} from "@angular/material/input";
import {MatSelect} from "@angular/material/select";
import {SoloNumerosDirective} from "../../../service/directivas_service/soloNumeros/solo-numeros.directive";
import Notiflix from "notiflix";
import {MatSnackBar, MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition} from "@angular/material/snack-bar";
interface listadoComun {
codigo: string;
nombre: string;
}
@Component({
selector: 'app-modalArticuloOC',
standalone: true,
providers: [provideNativeDateAdapter()],
templateUrl: './modalArticuloOC.componente.html',
imports: [
MatDialogActions,
MatDialogClose,
MatDialogContent,
JsonPipe,
MatLabel,
ReactiveFormsModule,
MatFormField,
MatDialogTitle,
MatTableModule,
MatButtonModule,
MatDividerModule,
MatIconModule,
MatCard,
MatCardContent,
MatInput,
MatOption,
MatSelect,
NgForOf,
NgIf,
SoloNumerosDirective,
MatFormFieldModule
],
})
export class modalArticuloOC {
//INICIALIZANDO VARIABLES
private barraAlerta = inject(MatSnackBar);
alertaPosicionHorizontal: MatSnackBarHorizontalPosition = 'center';
alertaPosicionVertical: MatSnackBarVerticalPosition = 'bottom';
alertaDuracion : number = 3;
Estados : listadoComun[] = [];
Unidades : listadoComun[] = [];
Articulo : any = {};
Editar : boolean = false;
datos_Articulo = new FormGroup({
nombreArticulo : new FormControl<string>('' ,Validators.required),
unidadArticulo : new FormControl<string>('' ,Validators.required),
cantidadArticulo : new FormControl<number | null >(null,Validators.required),
estadoArticulo : new FormControl<string>('' ,Validators.required)
});
constructor(@Inject(MAT_DIALOG_DATA) public data: any ,public dialogRef: MatDialogRef<modalArticuloOC>) {
this.Estados = data.Estados;
this.Unidades = data.Unidades;
this.Articulo = data.DatoArticulo || {};
this.Editar = data.Editar || false;
if(this.Editar){
this.datos_Articulo.get('nombreArticulo')?.setValue(this.Articulo.nombre);
this.datos_Articulo.get('unidadArticulo')?.setValue(this.Articulo.unidad);
this.datos_Articulo.get('cantidadArticulo')?.setValue(this.Articulo.cantidad);
this.datos_Articulo.get('estadoArticulo')?.setValue(this.Articulo.estado);
}
}
onCancelar(): void {
this.Articulo = {};
this.dialogRef.close(this.Articulo);
}
onConfirmar(): void {
this.Articulo = {
codigoArticulo : '',
nombreArticulo : this.datos_Articulo.get('nombreArticulo')?.value,
unidadArticulo : this.datos_Articulo.get('unidadArticulo')?.value,
cantidadArticulo : this.datos_Articulo.get('cantidadArticulo')?.value,
estadoArticulo : this.datos_Articulo.get('estadoArticulo')?.value
}
const validacion = this.validarRegistroArticulo(this.Articulo) ;
if(validacion){
this.dialogRef.close(this.Articulo);
}else{
this.mostrarAlerta('VALIDAR DATOS INGRESADOS');
return;
}
}
validarRegistroArticulo(valores: any): boolean {
if (valores.nombreArticulo && valores.unidadArticulo && valores.cantidadArticulo && valores.estadoArticulo) {
return true;
} else {
return false;
}
}
mostrarAlerta(mensaje: string): void {
Notiflix.Loading.remove();
this.barraAlerta.open(mensaje, '', {
horizontalPosition: this.alertaPosicionHorizontal,
verticalPosition: this.alertaPosicionVertical,
duration: this.alertaDuracion * 1000,
panelClass: ['custom-snackbar'],
});
}
}
src/app/pages/conformidad/modalEliminarPasaje/eliminarPasaje.componente.ts
......@@ -27,9 +27,9 @@ import {MatTableModule} from "@angular/material/table";
],
standalone: true,
template: `
<h1 mat-dialog-title>Confirmar eliminación pasaje</h1>
<h1 mat-dialog-title>Confirmar eliminación de articulo</h1>
<div mat-dialog-content>
<p>¿Estás seguro de que deseas eliminar este pasaje?</p>
<p>¿Estás seguro de que deseas quitar este artículo de la lista?</p>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onCancelar()">Cancelar</button>
......
src/app/pages/conformidad/modalRequerimiento/modalRequerimiento.componente.ts
......@@ -11,14 +11,6 @@ import {MatDividerModule} from '@angular/material/divider';
import {MatButtonModule} from '@angular/material/button';
import {MatCard, MatCardContent} from "@angular/material/card";
export interface PeriodicElement {
position: number;
name: string;
weight: number;
symbol: string;
}
export interface interDetalleRequerimiento {
posicion: string;
nombre : string;
......@@ -26,10 +18,6 @@ export interface interDetalleRequerimiento {
cantidad: number;
}
//const ARTICULOS_DATA : detalleRequerimiento[] = [];
@Component({
selector: 'app-modalRequerimiento',
standalone: true,
......@@ -54,18 +42,14 @@ export interface interDetalleRequerimiento {
]
})
export class modalRequerimientoComponent implements OnInit{
@ViewChild('datosPrincipales') datosPrincipales!: ElementRef;
export class modalRequerimientoComponent{
detalleRequerimiento: any;
//filasRequerimientos: any;
columnasArticulos: string[] = ['posicion', 'nombre', 'unidad', 'cantidad'];
dataSource: interDetalleRequerimiento[] = [];
constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
const datosPrincipales = data.requerimientoInfo?.map((item: any) => {
return {
numeroDoc : item.numeroDoc,
......@@ -84,6 +68,7 @@ export class modalRequerimientoComponent implements OnInit{
if(datosPrincipales[0]){
//Obtener los valores de descripcion, observacion, sede y empleado por separado y en un solo objeto
this.detalleRequerimiento = {
numeroDoc : datosPrincipales[0].numeroDoc,
tipoRequerimiento : datosPrincipales[0].tipoRequerimiento,
......@@ -95,16 +80,5 @@ export class modalRequerimientoComponent implements OnInit{
this.dataSource = datosPrincipales;
}
//this.detalleRequerimiento = data.requerimientoInfo
//this.filasRequerimientos =
}
ngOnInit(): void {
//ARTICULOS_DATA.push(this.detalleRequerimiento);
}
}
src/app/pages/ordensalida/ordensalida.componente.html
......@@ -13,10 +13,10 @@
<!-- Título y botón de agregar artículo -->
<div class="grid gap-4 grid-cols-1 sm:grid-cols-2 items-center">
<mat-label class="text-[1.1em] font-bold mb-4 flex items-center">
LISTADO DE ARTÍCULOS
<mat-icon class="ml-2">attach_money</mat-icon>
LISTADO DE MATERIAL SOBRANTE
<mat-icon>deployed_code_update</mat-icon>
</mat-label>
<button [ngStyle]="{'visibility': activarNuevoArticulo ? 'visible' : 'hidden'}" [disabled]="!activarNuevoArticulo" mat-raised-button (click)="onAgregarArticulo($event)">
<button [ngStyle]="{'visibility': activarNuevoArticulo ? 'visible' : 'hidden'}" [disabled]="!activarNuevoArticulo" mat-raised-button (click)="onEventoAgregarArticulo($event)">
<mat-icon>add</mat-icon>
<b>Agregar material</b>
</button>
......@@ -29,26 +29,14 @@
<ng-container matColumnDef="nombre">
<th mat-header-cell *matHeaderCellDef> NOMBRE DE ARTÍCULO </th>
<td mat-cell *matCellDef="let element">
<!-- DESBLOQUEAR DESPUES -->
<!-- <ng-container *ngIf="element.isNew; else displayOrigen">
<mat-form-field class="w-[25rem]">
<input type="text" placeholder="Buscar artículos" matInput formControlName="articulo{{element.index}}" [matAutocomplete]="auto" maxlength="9"
(input)="onBusquedaArticulo($event,element.index)">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="onSeleccionArticulo($event,element.index)">
<mat-option *ngFor="let option of articulosList" [value]="option.codigo">
{{ option.nombre }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</ng-container> -->
<ng-container *ngIf="element.isNew; else displayOrigen">
<!--<ng-container *ngIf="element.isNew; else displayOrigen">
<mat-form-field class="w-[25rem]">
<input type="text" placeholder="Buscar artículos" matInput formControlName="articulo{{element.index}}">
</mat-form-field>
</ng-container>
<ng-template #displayOrigen>
<ng-template #displayOrigen> -->
{{ element.nombre }}
</ng-template>
<!--</ng-template>-->
</td>
</ng-container>
......@@ -56,10 +44,7 @@
<ng-container matColumnDef="unidad">
<th mat-header-cell *matHeaderCellDef> UNIDAD </th>
<td mat-cell *matCellDef="let element">
<!-- <ng-container *ngIf="element.isNew; else displayOrigen">
<mat-label>{{formGroupMS(2,'unidad'+element.index)?.value}}</mat-label>
</ng-container> -->
<ng-container *ngIf="element.isNew; else displayOrigen">
<!--<ng-container *ngIf="element.isNew; else displayOrigen">
<mat-form-field appearance="outline">
<mat-select formControlName="unidad{{element.index}}" required>
<mat-option *ngFor="let option of this.listUnidades" [value]="option?.codigo">
......@@ -68,9 +53,9 @@
</mat-select>
</mat-form-field>
</ng-container>
<ng-template #displayOrigen>
<ng-template #displayOrigen>-->
{{ element.unidad }}
</ng-template>
<!--</ng-template>-->
</td>
</ng-container>
......@@ -78,14 +63,14 @@
<ng-container matColumnDef="cantidad">
<th mat-header-cell *matHeaderCellDef> CANTIDAD </th>
<td mat-cell *matCellDef="let element">
<ng-container *ngIf="element.isNew; else displayOrigen">
<!--<ng-container *ngIf="element.isNew; else displayOrigen">
<mat-form-field class="w-[10rem]" appearance="outline">
<input matInput formControlName="cantidad{{element.index}}" soloNumeros="entero" maxlength="2">
</mat-form-field>
</ng-container>
<ng-template #displayOrigen>
<ng-template #displayOrigen>-->
{{ element.cantidad }}
</ng-template>
<!--</ng-template>-->
</td>
</ng-container>
......@@ -93,17 +78,17 @@
<ng-container matColumnDef="estado">
<th mat-header-cell *matHeaderCellDef> ESTADO ARTÍCULO </th>
<td mat-cell *matCellDef="let element">
<ng-container *ngIf="element.isNew; else displayOrigen">
<!--<ng-container *ngIf="element.isNew; else displayOrigen">
<mat-form-field class="w-full select-tipoTrabajo">
<mat-label>Seleccionar tipo de trabajo</mat-label>
<mat-select formControlName="estado{{element.index}}">
<mat-option *ngFor="let tipoT of listEstadoArticulo" [value]="tipoT.valor">{{ tipoT.nombre }}</mat-option>
<mat-option *ngFor="let tipoT of listEstadoArticulo" [value]="tipoT.codigo">{{ tipoT.nombre }}</mat-option>
</mat-select>
</mat-form-field>
</ng-container>
<ng-template #displayOrigen>
<ng-template #displayOrigen> -->
{{ formatoEstado(element.estado) }}
</ng-template>
<!--</ng-template>-->
</td>
</ng-container>
......@@ -111,7 +96,13 @@
<ng-container matColumnDef="accion">
<th mat-header-cell *matHeaderCellDef> ACCIÓN </th>
<td mat-cell *matCellDef="let element">
<ng-container *ngIf="element.acciones; else sinAcciones">
<button mat-icon-button (click)="onEventoEditarArticulo($event, element)">
<mat-icon>edit</mat-icon>
</button>
<button mat-icon-button (click)="onEventoEliminarArticulo($event, element)">
<mat-icon>delete</mat-icon>
</button>
<!--<ng-container *ngIf="element.acciones; else sinAcciones">
<ng-container *ngIf="element.isNew; else accionesEditar">
<button mat-icon-button (click)="onEventoConfirmarArticulo($event, element)">
<mat-icon>check_circle</mat-icon>
......@@ -129,7 +120,7 @@
</button>
</ng-template>
</ng-container>
<ng-template #sinAcciones></ng-template>
<ng-template #sinAcciones></ng-template> -->
</td>
</ng-container>
......
src/app/pages/ordensalida/ordensalida.componente.ts
import { Component, OnInit, ChangeDetectorRef, Renderer2, ElementRef, ViewChild, inject, QueryList, ViewChildren } from '@angular/core';
import { Component, OnInit, ChangeDetectorRef, Renderer2, ElementRef, ViewChild, inject, QueryList, ViewChildren , Input } from '@angular/core';
import {MatOption, provideNativeDateAdapter} from "@angular/material/core";
import {MatIconModule} from '@angular/material/icon';
import {FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms';
......@@ -27,7 +27,8 @@ import {MatSnackBar, MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition}
import {ConformidadHelper} from "../conformidad/helper/conformidad.helper";
import {MatDialog} from "@angular/material/dialog";
import { ConfirmarEliminacionComponent } from '../conformidad/modalEliminarPasaje/eliminarPasaje.componente';
import { modalArticuloOC } from '../conformidad/modalArticuloOC/modalArticuloOC.componente'
import {modalRequerimientoComponent} from "../conformidad/modalRequerimiento/modalRequerimiento.componente";
interface interArticulo{
index: number;
......@@ -41,12 +42,16 @@ interface interArticulo{
acciones: boolean;
}
interface interEstados {
valor: string;
nombre: string;
interface listaArticulos{
index: number,
codigo : string,
nombre: string,
unidad: string,
cantidad: number,
estado: number,
}
interface interUnidad {
interface listadoComun {
codigo: string;
nombre: string;
}
......@@ -106,6 +111,8 @@ interface interUnidad {
export class ordenSalidaComponent implements OnInit {
@Input() datosDesdeConformidad: any; // Variable para recibir datos
private barraAlerta = inject(MatSnackBar);
alertaPosicionHorizontal: MatSnackBarHorizontalPosition = 'center';
alertaPosicionVertical: MatSnackBarVerticalPosition = 'bottom';
......@@ -119,13 +126,13 @@ export class ordenSalidaComponent implements OnInit {
//FORM GROUP
// INICIALIZACION DATOS
columnasArticulos: string[] = ['nombre', 'unidad', 'cantidad', 'estado', 'accion'];
articulosList: any[] = [];
listUnidades : interUnidad[] = [];
activarNuevoArticulo: boolean = true;
indexArticulo: number = 0;
public dataSource: interArticulo[] = [];
listEstadoArticulo: interEstados[] = [{ valor: '1', nombre: 'BUENO'}, { valor: '2', nombre: 'OBSERVACIÓN' },{ valor: '3', nombre: 'MAL ESTADO' } ]
public dataSource: listaArticulos[] = [];
listUnidades : listadoComun[] = [];
listEstadoArticulo: listadoComun[] = [];
columnasArticulos: string[] = ['nombre', 'unidad', 'cantidad', 'estado', 'accion'];
articulosList: any[] = [];
// INICIALIZACION DATOS
// OBTENER DATOS DEL FORM GROUP
......@@ -153,152 +160,75 @@ export class ordenSalidaComponent implements OnInit {
async ngOnInit(): Promise<void> {
this.dataSource = [];
const jsonParametrosArti = {
accion : 5
};
const unidadList = await this.conformidadHelper.listadoGeneralHorizon(jsonParametrosArti) ;
this.listUnidades = unidadList.map((item: any) => ({codigo: item.CODIGO , nombre: item.NOMBRE}));
this.listUnidades = this.datosDesdeConformidad.map((item: any) => ({codigo: item.CODIGO , nombre: item.NOMBRE}));
this.listEstadoArticulo = [{ codigo: '1', nombre: 'VERDE'}, { codigo: '2', nombre: 'AMARILLO' },{ codigo: '3', nombre: 'ROJO' } ];
}
onAgregarArticulo(event : any){
const NuevaFila : interArticulo = {
index: this.indexArticulo++,
codigoArticulo: '',
nombre: '',
unidad: '',
cantidad: 0,
estado: 1,
isNew: true,
isEdit: false,
acciones: true
};
this.formGroupMS(1,'articulo'+NuevaFila.index, new FormControl<String | null>(null,[Validators.maxLength(12)]));
this.formGroupMS(1,'codigoArticulo'+NuevaFila.index, new FormControl<String | null>(null));
this.formGroupMS(1,'unidad'+NuevaFila.index, new FormControl<String | null>(null));
this.formGroupMS(1,'cantidad'+NuevaFila.index, new FormControl<String | null>(null,[Validators.maxLength(2)]));
this.formGroupMS(1,'estado'+NuevaFila.index, new FormControl<String | null>(null ,[Validators.maxLength(1)]));
this.dataSource.forEach((item) => {
if (item.index !== NuevaFila.index) {
item.isEdit = false;
item.isNew = false;
item.acciones = false;
}
onEventoAgregarArticulo(event : any){
const dialogRef = this.dialog.open(modalArticuloOC,{
//width: '100%',
//height: '80%',
data: { Unidades : this.listUnidades , Estados : this.listEstadoArticulo , Editar: false }
});
this.dataSource = [...this.dataSource,NuevaFila];
this.activarNuevoArticulo = false;
this.articulosList = [];
}
onEventoConfirmarArticulo($event: MouseEvent, elemento : any) {
const articulo = this.formGroupMS(2,'articulo'+elemento.index)?.value;
const codigoArticulo = this.formGroupMS(2,'codigoArticulo'+elemento.index)?.value;
const unidad = this.formGroupMS(2,'unidad'+elemento.index)?.value;
const cantidad = this.formGroupMS(2,'cantidad'+elemento.index)?.value;
const estado = this.formGroupMS(2,'estado'+elemento.index)?.value;
//VALIDAR LOS VALORES OBTENIDOS ANTES DE REALIZAR UN REGISTRO
if(this.validarRegistroArticulo({articulo,cantidad,estado})){
// 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,
codigoArticulo : codigoArticulo,
nombre: articulo,
unidad: unidad,
cantidad: cantidad,
estado: estado,
isNew: false,
isEdit : false,
acciones: true
dialogRef.afterClosed().subscribe(result => {
console.log(result);
if(result){
const NuevaFila : listaArticulos = {
index : this.indexArticulo++,
codigo: result.codigoArticulo,
nombre: result.nombreArticulo,
unidad: result.unidadArticulo,
cantidad: result.cantidadArticulo,
estado: result.estadoArticulo
};
this.dataSource = [...this.dataSource,NuevaFila];
}
//console.log(this.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.activarNuevoArticulo = true;
this.barraAlerta.open( 'REGISTRO INGRESADO' , '' , {
horizontalPosition: this.alertaPosicionHorizontal,
verticalPosition: this.alertaPosicionVertical,
duration: this.alertaDuracion * 1000
});
}else{
this.barraAlerta.open( 'VALIDAR DATOS INGRESADOS' , '' , {
horizontalPosition: this.alertaPosicionHorizontal,
verticalPosition: this.alertaPosicionVertical,
duration: this.alertaDuracion * 1000
});
}
}
onEventoEditarArticulo(event: any, elemento : any) {
validarRegistroArticulo(valores: any): boolean {
const DatoArticulo = this.dataSource.find((item) => item.index === elemento.index);
if (valores.articulo && valores.cantidad && valores.estado) {
return true;
} else {
return false;
}
}
onEventoCancelarArticulo(event: any, elemento : any) {
const index = this.dataSource.findIndex((item) => item.index === elemento.index);//Descubriendo el index
const dialogRef = this.dialog.open(modalArticuloOC, {
//width: '100%',
//height: '80%',
data: {Unidades: this.listUnidades, Estados: this.listEstadoArticulo , DatoArticulo , Editar: true}
});
this.dataSource.forEach((item) => { item.acciones = true; }); // Que todas las filas vuelvan a tener las acciones
dialogRef.afterClosed().subscribe(result => {
console.log(result);
if(result){
const NuevaFila : listaArticulos = {
index : elemento.index,
codigo: result.codigoArticulo,
nombre: result.nombreArticulo,
unidad: result.unidadArticulo,
cantidad: result.cantidadArticulo,
estado: result.estadoArticulo
};
if(this.dataSource[index].isEdit){
this.dataSource[elemento.index] = {
index: NuevaFila.index,
codigo : NuevaFila.codigo,
nombre: NuevaFila.nombre,
unidad: NuevaFila.unidad,
cantidad: NuevaFila.cantidad,
estado: NuevaFila.estado
};
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.formGroupMS(3,'articulo'+elemento.index);
this.formGroupMS(3,'cantidad'+elemento.index);
this.formGroupMS(3,'estado'+elemento.index);
}
this.activarNuevoArticulo = true
}
onEventoEditarArticulo(event: any, elemento : any) {
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 = [...this.dataSource]; // Volviendo a ingresar los datos para que la tabla se actualice y la fila cambie con las condiciones del HTML
this.activarNuevoArticulo = false;
}
onEventoEliminarArticulo(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 => {
......@@ -306,10 +236,6 @@ export class ordenSalidaComponent implements OnInit {
const index = elemento.index;
if (index >= 0) {
this.dataSource = this.dataSource.filter((item) => item.index !== elemento.index);
this.formGroupMS(3,'articulo'+elemento.index);
this.formGroupMS(3,'cantidad'+elemento.index);
this.formGroupMS(3,'estado'+elemento.index);
}
}
});
......@@ -355,6 +281,6 @@ export class ordenSalidaComponent implements OnInit {
}
formatoEstado(estado: any) {
return this.listEstadoArticulo.find((item) => item.valor === estado)?.nombre;
return this.listEstadoArticulo.find((item) => item.codigo === estado)?.nombre;
}
}
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