Skip to content

F
formularioConformidad
Commit 1055001d by Fernando José Palomino Aquino
Options

[ADD] AVANCE FORMULARIO

parent 393c6e23
Showing with 438 additions and 62 deletions
src/app/pages/conformidad/conformidad.componente.css
......@@ -4,6 +4,10 @@
width: 100%;
}
.divRequerimientos{
width: 15%;
}
.example-full-width {
width: 100%;
}
......@@ -19,3 +23,27 @@
.select-tipoTrabajo{
width: 20rem;
}
.contenedorRequerimiento{
padding: 0 20px;
}
.contenedor-general-botones {
display: flex;
}
.contenedor-botones{
display: flex;
justify-content: center;
padding: 0 10px;
}
.fade-out {
transition: opacity 1s ease-in-out; /* Hacer que la opacidad cambie gradualmente */
opacity: 0; /* El objetivo es que la opacidad llegue a 0 (completamente transparente) */
}
mat-label {
opacity: 1; /* Por defecto, el label será completamente visible */
}
src/app/pages/conformidad/conformidad.componente.html
......@@ -22,7 +22,7 @@
<div style="display: flex;">
<div style="width: 100%">
<label style="font-weight: bold; font-size: 1.2rem; font-family: 'inherit'">TÉCNICO : </label>
<mat-form-field style="width: 20rem">
<mat-form-field appearance="outline" floatLabel="always">
<mat-label>Técnico responsable</mat-label>
<mat-select formControlName="tecnicoPersonal" placeholder="TECNICOS" (selectionChange)="onEventTecnico($event)" required>
<mat-option *ngFor="let option of this.personal_list" [value]="option?.codper">
......@@ -78,32 +78,43 @@
</mat-form-field>
</div>
<div>
<table>
<tr>
<th>ORIGEN</th>
<th>DESTINO</th>
<th>MONTO</th>
<th>FECHA</th>
</tr>
<tr>
<td>LINCE</td>
<td>JAVIER PRADO</td>
<td>4</td>
<td>01/09/2024</td>
</tr>
<tr>
<td>ATE</td>
<td>JAVIER PRADO</td>
<td>20</td>
<td>02/09/2024</td>
</tr>
<tr>
<td>LINCE</td>
<td>JAVIER PRADO</td>
<td>5</td>
<td>03/09/2024</td>
</tr>
</table>
<div style="display: flex ; width:100%;">
<h6 class="panel-title" id="panel-title-tabla-asistencia">LISTADO DE PASAJES<mat-icon class="mat-icon-small">attach_money</mat-icon></h6>
<button mat-fab >
<mat-icon>add</mat-icon>
Agregar pasaje
</button>
</div>
<div>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="lugarOrigen">
<th mat-header-cell *matHeaderCellDef> LUGAR DE ORIGEN </th>
<td mat-cell *matCellDef="let element"> {{element.lugarOrigen}} </td>
</ng-container>
<ng-container matColumnDef="lugarDestino">
<th mat-header-cell *matHeaderCellDef> LUGAR DESTINO </th>
<td mat-cell *matCellDef="let element"> {{element.lugarDestino}} </td>
</ng-container>
<ng-container matColumnDef="monto">
<th mat-header-cell *matHeaderCellDef> MONTO </th>
<td mat-cell *matCellDef="let element"> {{element.monto}} </td>
</ng-container>
<ng-container matColumnDef="fecha">
<th mat-header-cell *matHeaderCellDef> FECHA </th>
<td mat-cell *matCellDef="let element"> {{element.fecha}} </td>
</ng-container>
<ng-container matColumnDef="accion">
<th mat-header-cell *matHeaderCellDef> ACCIÓN </th>
<td mat-cell *matCellDef="let element"> {{element.lugarDestino}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnasPasaje"></tr>
<tr mat-row *matRowDef="let row; columns: columnasPasaje;"></tr>
</table>
</div>
</div>
</div>
</div>
......@@ -117,18 +128,49 @@
<div class="servicio-descripcion">
<label style="font-weight: bold; font-size: 1.2rem; font-family: 'inherit'">REQUERIMIENTOS : </label>
<mat-form-field>
<mat-label>Select an option</mat-label>
<mat-select [(value)]="selected" formControlName="requerimientoServicio">
<mat-option>None</mat-option>
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2">Option 2</mat-option>
<mat-option value="option3">Option 3</mat-option>
</mat-select>
</mat-form-field>
<div style="display: flex;align-items: center">
<label style="font-weight: bold; font-size: 1.2rem; font-family: 'inherit' ; padding: 0 10px">REQUERIMIENTOS : </label>
<mat-form-field class="divRequerimientos">
<mat-label>Listado de Requerimientos</mat-label>
<input
type="text"
placeholder="Buscar requerimiento"
matInput
#inputBusqueda
formControlName="selectedOption"
[matAutocomplete]="auto"
(input)="onBusquedaRequerimiento($event)"
>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="onEventSeleccion($event)" >
<mat-option *ngFor="let option of filteredOptions" [value]="option.codigo">
{{ option.numero }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<div class="contenedorRequerimiento" *ngFor="let card of cards">
<mat-card >
<mat-card-content>
<div class="contenedor-general-botones">
<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>
</div>
</mat-card-content>
</mat-card>
<br>
</div>
<br>
<mat-label [ngClass]="{'fade-out': isFading}" [innerText]="labelText"></mat-label>
<p>You selected: {{selected}}</p>
</div>
<br>
......@@ -152,13 +194,13 @@
<div class="example-button-row" style=" display: flex; width:100%;justify-content: center">
<div class="example-flex-container" style="display: flex; width: 50%;justify-content: space-between" >
<div class="example-button-container">
<button mat-fab extended formControlName="btnEvidenciaProblema">
<button mat-fab extended >
<mat-icon>upload_file</mat-icon>
EVIDENCIA DEL PROBLEMA
</button>
</div>
<div class="example-button-container">
<button mat-fab extended formControlName="btnEvidenciaSolucion">
<button mat-fab extended >
<mat-icon>upload_file</mat-icon>
EVIDENCIA DE LA SOLUCIÓN
</button>
......
src/app/pages/conformidad/conformidad.componente.ts
import { Component, OnInit , ChangeDetectionStrategy , Renderer2 } from '@angular/core';
import { Component, OnInit , ChangeDetectionStrategy , ChangeDetectorRef , Renderer2 , ElementRef, ViewChild , inject } from '@angular/core';
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule , Validators} from '@angular/forms';
import {MatIconModule} from '@angular/material/icon';
import {MatDividerModule} from '@angular/material/divider';
......@@ -11,14 +11,37 @@ import {MatSelectModule} from '@angular/material/select';
import {MatButtonToggleModule} from '@angular/material/button-toggle';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {ConformidadHelper} from "./helper/conformidad.helper";
import {NgForOf} from "@angular/common";
import {NgClass, NgForOf} from "@angular/common";
import {MatCardModule} from '@angular/material/card';
import {Observable,from } 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';
import {modalRequerimientoComponent} from "./modalRequerimiento/modalRequerimiento.componente";
import {MatTableModule} from '@angular/material/table';
import { MatCell, MatCellDef, MatColumnDef, MatHeaderCell, MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef, MatTable
} from "@angular/material/table";
interface tiposTrabajo {
value: string;
viewValue: string;
}
interface interRequerimientos {
codigo: string;
serie : string;
numero: string;
}
interface interDetallePasaje {
lugarOrigen: string;
lugarDestino : string;
monto: string;
fecha: Date;
}
@Component({
imports: [
MatDatepickerModule,
......@@ -33,18 +56,40 @@ interface tiposTrabajo {
MatCardModule,
MatButtonModule,
MatDividerModule,
MatIconModule
MatIconModule,
MatAutocompleteModule,
AsyncPipe,
MatTooltipModule,
NgClass,
MatCell,
MatCellDef,
MatColumnDef,
MatHeaderCell,
MatHeaderRow,
MatHeaderRowDef,
MatRow,
MatRowDef,
MatTable,
MatTableModule,
],
providers: [provideNativeDateAdapter()],
selector: 'app-conformidad',
standalone: true,
templateUrl: './conformidad.componente.html',
styleUrls: ['./conformidad.componente.css'],
changeDetection: ChangeDetectionStrategy.OnPush,
//changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ConformidadComponent implements OnInit {
// VIEWCHILD
@ViewChild('labelAdvertencia', { static: false }) labelAdvertencia!: ElementRef;
@ViewChild('inputBusqueda', { static: false }) inputBusqueda!: ElementRef;
// VIEWCHILD
//INICIALIZACION DE LISTADO DE TIPOS DE TRABAJO
listTipoTrabajo: tiposTrabajo[] = [
{value: '1', viewValue: 'Instalaciòn-Revisión'},
{value: '2', viewValue: 'Instalaciòn-Ampliación'},
......@@ -54,6 +99,7 @@ export class ConformidadComponent implements OnInit {
{value: '6', viewValue: 'Reinstalación'},
];
//INICIALIZACION DE LISTADO DE TIPOS DE TRABAJO
// INICIALIZACION DEL RANGO DE FECHAS
readonly range = new FormGroup({
......@@ -61,46 +107,58 @@ export class ConformidadComponent implements OnInit {
fechaFin: new FormControl<Date | null>(null),
})
selected = 'option2';
// INICIALIZACION DEL RANGO DE FECHAS
// DATALIST
personal_list: any = [];
sede_list: any = [];
filteredOptions: any[];
cards: { id: number; titulo: string; codigo: string}[] = [];
idBotones: number = 0;
labelText: string = ''; // Texto que se muestra inicialmente
isFading: boolean = false; // Controla si la animación de desvanecimiento debe activarse
selectedOption: string = ''; // Variable para enlazar con el input
columnasPasaje: string[] = ['lugarOrigen', 'lugarDestino', 'monto', 'fecha','accion'];
dataSource: interDetallePasaje[] = [];
// DATALIST
// GROUPO DE FORMULARIO
datos_personal = new FormGroup({
tecnicoPersonal : new FormControl(null ,Validators.required),
sedePersonal : new FormControl(null,Validators.required),
areaPersonal : new FormControl<String | null>(null ,Validators.required),
pasajePersonal : new FormControl(null ,Validators.required)
pasajePersonal : new FormControl(null ,Validators.required),
});
datos_servicio = new FormGroup({
requerimientoServicio : new FormControl(null ,Validators.required),
descripcionServicio : new FormControl(null ,Validators.required),
causaServicio : new FormControl(null ,Validators.required),
btnEvidenciaProblema : new FormControl(null ,Validators.required),
btnEvidenciaSolucion : new FormControl(null ,Validators.required)
selectedOption : new FormControl<String | null>(null ,[Validators.maxLength(12)]),
});
datos_trabajo = new FormGroup({
tipoTrabajo : new FormControl(null ,Validators.required),
descripcionTrabajo : new FormControl(null ,Validators.required)
descripcionTrabajo : new FormControl(null ,Validators.required),
});
datos_material = new FormGroup({
materialSobrante : new FormControl(null ,Validators.required)
materialSobrante : new FormControl(null ,Validators.required),
});
// GROUPO DE FORMULARIO
constructor(
private conformidadHelper: ConformidadHelper,
private renderer: Renderer2
private renderer: Renderer2,
private detectorChage : ChangeDetectorRef,
public dialog: MatDialog
) {
this.filteredOptions = [];
renderer.setStyle(document.body, 'background', 'var(--light-theme-bg)');
}
......@@ -110,6 +168,18 @@ export class ConformidadComponent implements OnInit {
return this.datos_personal.controls;
}
accesoDS(){
return this.datos_servicio.controls;
}
accesoDT(){
return this.datos_trabajo.controls;
}
accesoDM(){
return this.datos_material.controls;
}
//ACCESOS RAPIDOS A GRUPOS DE FORMULARIOS
async ngOnInit(): Promise<void> {
......@@ -119,19 +189,40 @@ export class ConformidadComponent implements OnInit {
sede
] = await Promise.all([
this.conformidadHelper.cargarPersonal(),
this.conformidadHelper.cargarSede(),
this.conformidadHelper.listadoGeneralHorizon({accion: 1}),
]);
this.personal_list = personal;
this.sede_list = sede;
this.dataSource = [{ lugarOrigen: 'Lima', lugarDestino: 'Cusco', monto: 'S/. 100.00', fecha: new Date() }];
}
onEventSeleccion(event : any){
const valor = event.option.value;
if(this.cards.find((item) => item.codigo === valor)){
this.labelText = 'Ya existe el requerimiento ' + valor + ' en el listado'; // Cambia el texto
this.isFading = false; // Resetea el estado de opacidad para mostrar el texto
// Después de 2 segundos, comienza a desvanecer el texto
setTimeout(() => {
this.isFading = true;
}, 2000); // 2000 ms = 2 segundos
}else{
this.cards.push({ titulo: `Requerimiento ${valor}`, id: this.idBotones++ , codigo: valor });
this.labelText = '';
}
this.datos_servicio.get('selectedOption')?.setValue('');
this.inputBusqueda.nativeElement.blur();
this.detectorChage.detectChanges();
this.filteredOptions = [];
console.log(personal, sede);
}
onEventTecnico(event: any) { // IMPRIMER EL ÁREA DEL TÉCNICO AL SELECCIONARLO
const areaControl = this.accesoDP().areaPersonal;
const areaElemento = this.renderer.selectRootElement('[formControlName="areaPersonal"]');
const codigoPer = event.value;
const personal_list = this.personal_list;
......@@ -146,8 +237,40 @@ export class ConformidadComponent implements OnInit {
areaControl.updateValueAndValidity();
}
onBusquedaRequerimiento(event: any){
async onBusquedaRequerimiento(event: any) {
const codigoSede = this.accesoDP().sedePersonal.value;
const busquedaReq = event.target.value;
const jsonParametrosReq = {
accion : 2,
nroRequerimiento : busquedaReq,
sede : codigoSede
};
const requerimiento_list = await this.conformidadHelper.listadoGeneralHorizon(jsonParametrosReq) ;
const mapeoResultado = requerimiento_list.map((item: any) => ({
codigo: item.CODIGONUM,
serie : item.CSERIE_DOC,
numero: item.CODIGONUM
}));
this.filteredOptions = mapeoResultado;
}
deleteRequerimiento(valor : any){
this.cards = this.cards.filter((item) => item.id !== valor);
}
async infoRequerimiento(valor: any){
const requerimientoInfo = await this.conformidadHelper.listadoGeneralHorizon({accion: 3, nroRequerimiento: valor, sede: ''});
const dialogRef = this.dialog.open(modalRequerimientoComponent,{
width: '300rem',
data: { requerimientoInfo }
});
dialogRef.afterClosed().subscribe(result => {
console.log(`Dialog result: ${result}`);
});
}
}
......
src/app/pages/conformidad/helper/conformidad.helper.ts
......@@ -17,8 +17,8 @@ export class ConformidadHelper {
}
}
async cargarSede(){
const respuesta = await this.ConformidadService.listadoGeneral(2);
/*async cargarSede(){
const respuesta = await this.ConformidadService.listadoGeneralHorizon({accion: 1});
if(respuesta?.status){
return respuesta.data;
}else{
......@@ -26,8 +26,23 @@ export class ConformidadHelper {
}
}
async registrarPostulanteADM(json: any) {
async cargarRequerimientos(json : any){
const respuesta = await this.ConformidadService.listadoRequerimientos(json);
if (respuesta?.status) {
return respuesta.data;
}else{
return [];
}
}*/
async listadoGeneralHorizon(json: any){
const respuesta = await this.ConformidadService.listadoGeneralHorizon(json);
if (respuesta?.status) {
return respuesta.data;
}else{
return [];
}
}
}
src/app/pages/conformidad/modalRequerimiento/modalRequerimiento.componente.html 0 → 100644
<h2 mat-dialog-title>Detalle requerimiento</h2>
<mat-dialog-content >
<mat-label [innerHTML]="'REQUERIMIENTO : ' + (detalleRequerimiento[0].numeroDoc || 'Sin Requerimiento') "></mat-label><br>
<mat-label [innerHTML]="'SEDE : ' + (detalleRequerimiento[0].sede || 'Sin Sede') "></mat-label><br>
<mat-label [innerHTML]="'EMPLEADO : ' + (detalleRequerimiento[0].empleado || 'Sin Empleado') "></mat-label><br>
<mat-label [innerHTML]="'OBSERVACIÓN : ' + (detalleRequerimiento[0].observacion || 'Sin Observacion') "></mat-label><br>
<mat-label [innerHTML]="'DESCRIPCIÓN : ' + (detalleRequerimiento[0].descripcion || 'Sin descripcion') "></mat-label><br>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!--- Note that these columns can be defined in any order.
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>
<td mat-cell *matCellDef="let element"> {{element.posicion}} </td>
</ng-container>
<ng-container matColumnDef="nombre">
<th mat-header-cell *matHeaderCellDef> NOMBRE ARTÌCULO </th>
<td mat-cell *matCellDef="let element"> {{element.nombre}} </td>
</ng-container>
<ng-container matColumnDef="unidad">
<th mat-header-cell *matHeaderCellDef> UNIDAD </th>
<td mat-cell *matCellDef="let element"> {{element.unidad}} </td>
</ng-container>
<ng-container matColumnDef="cantidad">
<th mat-header-cell *matHeaderCellDef> CANTIDAD </th>
<td mat-cell *matCellDef="let element"> {{element.cantidad}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnasArticulos"></tr>
<tr mat-row *matRowDef="let row; columns: columnasArticulos;"></tr>
</table>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button [mat-dialog-close]="false">Cerrar</button>
</mat-dialog-actions>
src/app/pages/conformidad/modalRequerimiento/modalRequerimiento.componente.ts 0 → 100644
import {Component, Inject, OnInit} from '@angular/core';
import {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} 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';
export interface PeriodicElement {
position: number;
name: string;
weight: number;
symbol: string;
}
export interface interDetalleRequerimiento {
posicion: string;
nombre : string;
unidad: string;
cantidad: number;
}
//const ARTICULOS_DATA : detalleRequerimiento[] = [];
@Component({
selector: 'app-modalRequerimiento',
standalone: true,
providers: [provideNativeDateAdapter()],
templateUrl: './modalRequerimiento.componente.html',
styleUrls: ['./modalRequerimiento.componente.css'],
imports: [
MatDialogActions,
MatDialogClose,
MatDialogContent,
JsonPipe,
MatLabel,
ReactiveFormsModule,
MatFormField,
MatDialogTitle,
MatTableModule,
MatButtonModule,
MatDividerModule,
MatIconModule,
]
})
export class modalRequerimientoComponent implements OnInit{
detalleRequerimiento: any;
filasRequerimientos: any;
//displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
columnasArticulos: string[] = ['posicion', 'nombre', 'unidad', 'cantidad'];
dataSource: interDetalleRequerimiento[] = [];
constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
// Puedes acceder a los datos pasados a través de 'data'
this.detalleRequerimiento = data.requerimientoInfo
this.filasRequerimientos = data.requerimientoInfo.map((item: any) => ({
posicion: item.numeral,
nombre: item.producto,
unidad: item.codUnidad,
cantidad: item.cantidad
}));
console.log(this.detalleRequerimiento);
}
ngOnInit(): void {
//ARTICULOS_DATA.push(this.detalleRequerimiento);
this.dataSource = this.filasRequerimientos;
}
}
src/app/service/conformidad_service/conformidad.service.ts
......@@ -26,6 +26,33 @@ export class ConformidadService {
}
}
async listadoGeneralHorizon(json: any) {
const parametros =[
json.accion || 0,
json.nroRequerimiento || '',
json.sede || '',
]
try {
const respuesta = await axios.post(this.t_horizon_rest_link + '/api/procedure/Procedimiento',
{
database: "sqlserver",
procedure :"USP_GENERAL_FORMULARIO",
params : parametros
},
{
headers: {
'Content-Type': 'application/json'
}
}
);
return respuesta.data;
} catch (e) {
return e;
}
}
async registroConformidad(json: any) {
try {
const respuesta = await axios.post(this.t_asistencia_rest_link + '/api/v1/Conformidad/registroConformidad', json);
......@@ -35,12 +62,28 @@ export class ConformidadService {
}
}
async listadoRequerimientos(json: any) {
/*async listadoRequerimientos(json: any) {
const parametros =[
json.accion || 0,
json.nroRequerimiento || '',
json.sede || '',
]
try {
const respuesta = await axios.post(this.t_horizon_rest_link + '/api/procedure/Procedimiento', json);
const respuesta = await axios.post(this.t_horizon_rest_link + '/api/procedure/Procedimiento',
{
database: "sqlserver",
procedure :"USP_GENERAL_FORMULARIO",
params : parametros
},
{
headers: {
'Content-Type': 'application/json'
}
});
return respuesta.data;
} catch (e) {
return e;
}
}
}*/
}
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