Merge branch 'master' of http://209.50.56.224/git/ITTEC/SistemaIntegralRecursosHumanos

vacaciones/src/app/components/mes/mesmhs/mesmhs.component.html

@@ -6,49 +6,53 @@
     <mat-grid-tile colspan="4" class="card-title">
       <mat-form-field appearance="standard" *ngIf="isAdmin">
         <mat-label>Filtro</mat-label>
-        <mat-select>
-          <mat-option (click)="obtenerMiHistorial()" value="Mi Historial" selected >Mi historial [{{ usuario_session.NOMBRE}}]</mat-option>
+        <!--         <mat-select>
+          <mat-option (click)="obtenerMiHistorial()" value="Mi Historial" selected>Mi historial [{{
+            usuario_session.NOMBRE}}]</mat-option>
           <mat-option (click)="obtenerTodosHistorial()" value="Mi Historial">Todos</mat-option>
           <mat-option style="background-color: #071d49; color: #FFF; cursor: default;">Usuarios</mat-option>
-          <mat-option
-            *ngFor="let item of subordinados; let i = index"
-            [value]="item"
-            (click)="obtenerHistorialSubordinado(item.IDUSUARIO)"
-          >
+          <mat-option *ngFor="let item of subordinados; let i = index" [value]="item"
+            (click)="obtenerHistorialSubordinado(item.IDUSUARIO)">
             {{ item.USUARIO }} ({{ item.IDUSUARIO }})
           </mat-option>
         </mat-select>
-        <mat-icon matSuffix>perm_contact_calendar</mat-icon>
+        <mat-icon matSuffix>perm_contact_calendar</mat-icon> -->
+
+        <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="controlUsuarioAdmin"
+          [matAutocomplete]="auto">
+
+        <mat-autocomplete #auto="matAutocomplete">
+          <mat-option (click)="obtenerMiHistorial()" value="Mi Historial" selected>Mi historial [{{
+            usuario_session.NOMBRE}}]</mat-option>
+          <mat-option (click)="obtenerTodosHistorial()" value="Mi Historial">Todos</mat-option>
+          <mat-option style="background-color: #071d49; color: #FFF; cursor: default;">Usuarios</mat-option>
+          <mat-option *ngFor="let item of filteredOptions | async ; let i = index" [value]="item"
+            (click)="obtenerHistorialSubordinado(item)">
+            {{ item }}
+          </mat-option>
+        </mat-autocomplete>
       </mat-form-field>
 
       <mat-form-field appearance="standard" *ngIf="!isAdmin">
         <mat-label>Filtro</mat-label>
-        <mat-select>
-          <mat-option (click)="obtenerMiHistorial()" value="Mi Historial">Mi historial [{{ usuario_session.NOMBRE}}]</mat-option>
+        <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="controlUsuarioEstandar"
+          [matAutocomplete]="auto">
+        <mat-autocomplete #auto="matAutocomplete">
+          <mat-option (click)="obtenerMiHistorial()" value="Mi Historial">Mi historial [{{ usuario_session.NOMBRE}}]
+          </mat-option>
           <mat-option style="background-color: #071d49; color: #FFF; cursor: default;">Usuarios</mat-option>
-          <mat-option
-            (click)="obtenerHistorialSubordinado( obtenerIDUsuario(item.USUARIO) )"
-            *ngFor="let item of subordinados; let i = index"
-            [value]="item"
-          >
-          {{ item.USUARIO }}
+          <mat-option *ngFor="let item of filteredOptionsAux | async; let i = index" [value]="item"
+            (click)="obtenerHistorialSubordinado(item)">
+            {{ item }}
           </mat-option>
-        </mat-select>
+        </mat-autocomplete>
         <mat-icon matSuffix>perm_contact_calendar</mat-icon>
       </mat-form-field>
     </mat-grid-tile>
-    <mat-grid-tile
-      colspan="8"
-      class="card-title"
-      *ngIf="dataSource.data.length != 0"
-    >
+    <mat-grid-tile colspan="8" class="card-title" *ngIf="dataSource.data.length != 0">
       <mat-form-field appearance="legacy" class="searcher">
         <mat-label>Buscador</mat-label>
-        <input
-          matInput
-          placeholder="Ingrese lo que necesite buscar"
-          (keyup)="applyFilter($event)"
-        />
+        <input matInput placeholder="Ingrese lo que necesite buscar" (keyup)="applyFilter($event)" />
         <mat-icon matSuffix>search</mat-icon>
       </mat-form-field>
     </mat-grid-tile>
@@ -58,12 +62,7 @@
 
   <mat-progress-bar *ngIf="loading" mode="indeterminate"></mat-progress-bar>
 
-  <table
-    mat-table
-    [dataSource]="dataSource"
-    class="animated fadeIn"
-    *ngIf="dataSource.data.length != 0"
-  >
+  <table mat-table [dataSource]="dataSource" class="animated fadeIn" *ngIf="dataSource.data.length != 0">
     <ng-container matColumnDef="no">
       <th mat-header-cell *matHeaderCellDef>No</th>
       <td mat-cell *matCellDef="let element; let i = index">{{ i + 1 }}</td>
@@ -107,13 +106,8 @@
     <ng-container matColumnDef="agregarFecha" *ngIf="isAdmin">
       <th mat-header-cell *matHeaderCellDef class="centre">Días vacacionales</th>
       <td mat-cell *matCellDef="let element" class="centre">
-        <button
-          mat-mini-fab
-          class="mr-1 success"
-          matTooltip="Agregar días vacacionales"
-          (click)="openDialogAddDays(element)"
-          [disabled]="element.ISDISABLED"
-        >
+        <button mat-mini-fab class="mr-1 success" matTooltip="Agregar días vacacionales"
+          (click)="openDialogAddDays(element)" [disabled]="element.ISDISABLED">
           <mat-icon>add</mat-icon>
         </button>
       </td>
@@ -122,12 +116,8 @@
     <ng-container matColumnDef="detalles">
       <th mat-header-cell *matHeaderCellDef class="centre">Detalles</th>
       <td mat-cell *matCellDef="let element" class="centre">
-        <button
-          mat-mini-fab
-          class="mr-1 secondary"
-          matTooltip="Ver detalles de la solicitud"
-          (click)="obtenerDetalleSolicitud(element)"
-        >
+        <button mat-mini-fab class="mr-1 secondary" matTooltip="Ver detalles de la solicitud"
+          (click)="obtenerDetalleSolicitud(element)">
           <mat-icon>remove_red_eye</mat-icon>
         </button>
       </td>
@@ -136,10 +126,6 @@
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
   </table>
-  <mat-paginator
-    [pageSizeOptions]="[10, 20, 50]"
-    showFirstLastButtons
-    aria-label="Seleccione"
-  >
+  <mat-paginator [pageSizeOptions]="[10, 20, 50]" showFirstLastButtons aria-label="Seleccione">
   </mat-paginator>
-</mat-card>
+</mat-card>

vacaciones/src/app/components/mes/mesmhs/mesmhs.component.ts

@@ -13,6 +13,8 @@ import { USERInterface } from '../../../interfaces/user-interface';
 import { ENCService } from 'src/app/services/enc/enc.service';
 import { MCOMAUService } from 'src/app/services/mco/mcomau/mcomau.service';
 import { ValidationsService } from 'src/app/services/validations.service';
+import { map, Observable, startWith } from 'rxjs';
+import { FormControl } from '@angular/forms';
 
 @Component({
   selector: 'app-mesmhs',
@@ -32,10 +34,17 @@ export class MESMHSComponent implements AfterViewInit {
   displayedColumns: string[] = [];
   dataSource = new MatTableDataSource<any>(this.solicitudes);
   subordinados: any;
+  subordinadosAux: any = [];
   isAdmin = false;
   today = new Date();
   @ViewChild(MatPaginator) paginator!: MatPaginator;
 
+  controlUsuarioAdmin = new FormControl();
+  controlUsuarioEstandar = new FormControl();
+
+  filteredOptions!: Observable<any>;
+  filteredOptionsAux!: Observable<any>;
+
   constructor(
     public dialog: MatDialog,
     private _mesmhsService: MESMHSService,
@@ -47,10 +56,11 @@ export class MESMHSComponent implements AfterViewInit {
   ) {
     this.usuario_session = JSON.parse(localStorage.getItem('TIMUSERENC')!);
 
-    this.isAdmin = this._encService.desencriptar(
+    this.isAdmin =
+      this._encService.desencriptar(
         JSON.parse(localStorage.getItem('TIMUSERENC')!).PERFIL
-      ) == "1";
-      
+      ) == '1';
+
     if (this.isAdmin) {
       this.displayedColumns = [
         'no',
@@ -86,8 +96,29 @@ export class MESMHSComponent implements AfterViewInit {
     }
   }
 
-  OnInit() {
-    this.dataSource.data = [];
+  private _filter(value: any): Observable<string> {
+    const filterValue =
+      this.isAdmin == true
+        ? value.toLowerCase()
+        : value.toString().toLowerCase();
+
+    if (this.isAdmin) {
+      return this.subordinados
+        .map((option: any) => {
+          return option.USUARIO + ' (' + option.IDUSUARIO + ')';
+        })
+        .filter((option: any) =>
+          option.toString().toLowerCase().includes(filterValue)
+        );
+    } else {
+      return this.subordinados
+        .map((option: any) => {
+          return option.USUARIO;
+        })
+        .filter((option: any) =>
+          option.toString().toLowerCase().includes(filterValue)
+        );
+    }
   }
 
   applyFilter(filterValue: any) {
@@ -134,6 +165,15 @@ export class MESMHSComponent implements AfterViewInit {
   }
 
   obtenerHistorialSubordinado(numero_empleado: string) {
+    let position = this.subordinadosAux.findIndex((object: any) => {
+      return object == numero_empleado;
+    });
+
+    numero_empleado =
+      this.isAdmin == true
+        ? this.subordinados[position].IDUSUARIO
+        : this.obtenerIDUsuario(this.subordinados[position].USUARIO);
+
     this._mesmhsService.obtenerHistorial(numero_empleado).subscribe(
       (res) => {
         if (res.status == 'Token is Expired') {
@@ -194,10 +234,12 @@ export class MESMHSComponent implements AfterViewInit {
             );
             this.dataSource.data = mi_historial;
             this.cargarTabla(mi_historial);
+            this.data_empty = mi_historial.length > 0 ? false : true;
           } else {
             this._validationService.openSnackBar(
               res.response.length > 0 ? res.msg : 'No hay datos para mostrar'
             );
+
             this.data_empty = true;
             this.dataSource.data = [];
           }
@@ -271,6 +313,7 @@ export class MESMHSComponent implements AfterViewInit {
       hash[current.IDUSUARIO] = true;
       return exists;
     });
+
     let arr_user: any[] = [];
     usuarios.forEach((element) => {
       if (
@@ -282,9 +325,21 @@ export class MESMHSComponent implements AfterViewInit {
     });
 
     this.subordinados = arr_user;
+
+    this.subordinadosAux = arr_user.map((option: any) => {
+      return option.USUARIO + ' (' + option.IDUSUARIO + ')';
+    });
+
+    this.filteredOptions = this.controlUsuarioAdmin.valueChanges.pipe(
+      startWith(''),
+      map((value: any) => this._filter(value))
+    );
   }
 
-  private cargarSubordiandos() {
+  private async cargarSubordiandos() {
+    const sleep = (ms: number) =>
+      new Promise((resolve) => setTimeout(resolve, ms));
+    await sleep(1000);
     this._mesmhsService
       .obtenerSubordinados(
         this._encService.desencriptar(this.usuario_session.IDUSUARIO)
@@ -298,6 +353,16 @@ export class MESMHSComponent implements AfterViewInit {
             );
           } else if (!res.status) {
             this.subordinados = res;
+            this.subordinadosAux = res.map((option: any) => {
+              return option.USUARIO;
+            });
+
+            this.filteredOptionsAux =
+              this.controlUsuarioEstandar.valueChanges.pipe(
+                startWith(''),
+                map((value: any) => this._filter(value))
+              );
+
             this.data_empty = false;
           } else {
             this._validationService.openSnackBar(