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

vacaciones/src/app/components/mes/mesmsv/mesmsv.component.css

@@ -2,3 +2,28 @@ mat-form-field.mat-form-field {
   width: 90%;
   font-size: 16px;
 }
+
+.example-custom-date-class {
+}
+
+.example-custom-date-class:disabled {
+}
+
+.text {
+  color: white;
+}
+
+.weekendsDays {
+  border-radius: 100%;
+
+  background-color: aqua !important;
+}
+
+/* .mat-calendar-body-cell-content,
+.mat-date-range-input-separator {
+  color: white;
+} */
+
+.mat-calendar-body-cell-content .mat-focus-indicator {
+  color: white;
+}

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

@@ -1,4 +1,6 @@
 <mat-card class="card-small mat-elevation-z8 animated fadeIn fast centre">
+  <mat-progress-bar *ngIf="loading" mode="indeterminate"></mat-progress-bar>
+
   <mat-grid-list cols="12" rowHeight="85px">
     <mat-grid-tile colspan="12">
       <mat-card-title>Solicitud de Vacaciones</mat-card-title>
@@ -8,11 +10,7 @@
       <mat-grid-tile colspan="12">
         <mat-form-field appearance="standard">
           <mat-label>Número de Empleado</mat-label>
-          <input
-            matInput
-            placeholder="Ingrese el nombre"
-            formControlName="numero_empleado"
-          />
+          <input matInput placeholder="Ingrese el nombre" formControlName="numero_empleado" />
           <mat-icon matSuffix>tag</mat-icon>
         </mat-form-field>
       </mat-grid-tile>
@@ -21,30 +19,16 @@
         <mat-form-field appearance="standard">
           <mat-label>Fechas solicitadas </mat-label>
           <mat-date-range-input [min]="minDate" [rangePicker]="picker" required>
-            <input
-              matStartDate
-              placeholder="Fecha Inicial"
-              [value]="fecha_inicio"
-              formControlName="fecha_inicio"
-            />
+            <input matStartDate placeholder="Fecha Inicial" [value]="fecha_inicio" formControlName="fecha_inicio" />
 
-            <input
-              matEndDate
-              placeholder="Fecha Final"
-              [value]="fecha_fin"
-              formControlName="fecha_fin"
-            />
+            <input matEndDate placeholder="Fecha Final" [value]="fecha_fin" formControlName="fecha_fin" />
           </mat-date-range-input>
-          <mat-datepicker-toggle
-            matSuffix
-            [for]="picker"
-          ></mat-datepicker-toggle>
-          <mat-date-range-picker #picker></mat-date-range-picker>
-          <mat-error *ngIf="fecha_inicio!.invalid && fecha_fin!.invalid"
-            >{{
-              fecha_inicio!.hasError("required")
-                ? "Debe ingresar este campo"
-                : ""
+          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+          <mat-date-range-picker class="text" #picker [dateClass]="dateClass"></mat-date-range-picker>
+          <mat-error *ngIf="fecha_inicio!.invalid && fecha_fin!.invalid">{{
+            fecha_inicio!.hasError("required")
+            ? "Debe ingresar este campo"
+            : ""
             }}
           </mat-error>
         </mat-form-field>
@@ -53,28 +37,18 @@
       <mat-grid-tile colspan="12">
         <mat-form-field appearance="standard">
           <mat-label>Días Vacacionales</mat-label>
-          <input
-            matInput
-            type="number"
-            min="1"
-            formControlName="dias_vacacionales"
-            [value]="calcular_dias()"
-            (keyup)="applyFilter($event)"
-          />
+          <input matInput type="number" min="1" formControlName="dias_vacacionales" [value]="calcular_dias()"
+            (keyup)="applyFilter($event)" />
           <mat-icon matSuffix>date_range</mat-icon>
         </mat-form-field>
       </mat-grid-tile>
 
       <mat-grid-tile colspan="12">
-        <button
-          mat-raised-button
-          (click)="openDialog()"
-          class="secondary"
-          [disabled]="formGroup.invalid || envioForm.status"
-        >
+        <button mat-raised-button (click)="openDialog()" class="secondary"
+          [disabled]="formGroup.invalid || envioForm.status">
           {{ envioForm.text }}
         </button>
       </mat-grid-tile>
     </form>
   </mat-grid-list>
-</mat-card>
+</mat-card>

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

@@ -1,4 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import {
+  Component,
+  Input,
+  OnInit,
+  ViewEncapsulation,
+  AfterViewInit,
+} from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
@@ -15,17 +21,17 @@ import {
   MAT_DATE_FORMATS,
   MAT_DATE_LOCALE,
 } from '@angular/material/core';
-import 'moment/locale/es';
+import {
+  MatCalendarCellClassFunction,
+  MatCalendarCellCssClasses,
+} from '@angular/material/datepicker';
+
 import { AlertaComponent } from '../../resources/dialogos/alerta/alerta.component';
 import { USERInterface } from 'src/app/interfaces/user-interface';
-import { ThisReceiver } from '@angular/compiler';
-import { threadId } from 'worker_threads';
-import { throws } from 'assert';
 import { ENCService } from 'src/app/services/enc/enc.service';
 import { MCOMDFService } from 'src/app/services/mco/mcomdf/mcomdf.service';
 import { MCOMPVService } from 'src/app/services/mco/mcompv/mcompv.service';
-import { MCOMDFInterface } from 'src/app/interfaces/mco/mcomdf/mcomdf-interface';
-import { ValidationsService } from 'src/app/services/validations.service';
+import { Call } from '@angular/compiler';
 
 @Component({
   selector: 'app-mesmsv',
@@ -40,8 +46,13 @@ import { ValidationsService } from 'src/app/services/validations.service';
     },
     { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
   ],
+  encapsulation: ViewEncapsulation.None,
 })
 export class MESMSVComponent implements OnInit {
+  newData = new Date();
+  array_disables: any[] = [];
+  dates_disable: any = [];
+  days_week_disable: any = [];
   formGroup: FormGroup;
   dias: number = 0;
   fechaActual = new Date();
@@ -49,7 +60,13 @@ export class MESMSVComponent implements OnInit {
     text: 'Enviar',
     status: false,
   };
-  minDate = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 1);
+  loading = false;
+
+  minDate = new Date(
+    new Date().getFullYear(),
+    new Date().getMonth(),
+    new Date().getDate() + 1
+  );
   todayDate = new Date();
   dias_feriados: any[] = null!;
   politica: string = null!;
@@ -72,8 +89,7 @@ export class MESMSVComponent implements OnInit {
     private _mcomdfService: MCOMDFService,
     private _mcompvService: MCOMPVService,
     private _snackBar: MatSnackBar,
-    private _mesmsv: MESMSVService,
-    private _validationService: ValidationsService
+    private _mesmsv: MESMSVService
   ) {
     this.formGroup = this.createFormGroup();
   }
@@ -82,6 +98,63 @@ export class MESMSVComponent implements OnInit {
     this.obtenerDiasFeriados();
   }
 
+  dateClass: MatCalendarCellClassFunction<Date> = (cellDate, view) => {
+    let dateToString = cellDate?.toString();
+    cellDate = new Date(dateToString!);
+
+    if (view === 'month') {
+      return this.filterDays(cellDate);
+    }
+    return '';
+  };
+
+  async filterDays(cellDate: any) {
+    const sleep = (ms: number) =>
+      new Promise((resolve) => setTimeout(resolve, ms));
+    const collection = document.getElementsByClassName(
+      'mat-calendar-body-cell-content'
+    ) as HTMLCollectionOf<HTMLElement>;
+
+    await sleep(100);
+
+    let dateToString = cellDate?.toString();
+    let lastPosition = this.dates_disable[this.dates_disable.length - 1];
+    cellDate = new Date(dateToString!);
+
+    for (let index = 0; index < this.dates_disable.length; index++) {
+      if (
+        cellDate.getDate() == this.dates_disable[index].getDate() &&
+        cellDate.getMonth() == this.dates_disable[index].getMonth() &&
+        cellDate.getFullYear() == lastPosition.getFullYear()
+      ) {
+        collection[cellDate.getDate() - 1].style.color = 'white';
+        collection[cellDate.getDate() - 1].style.background = 'orange';
+
+        return 'example-custom-date-class';
+      }
+
+      if (
+        cellDate.getDay() == this.days_week_disable[0] ||
+        cellDate.getDay() == this.days_week_disable[1] ||
+        cellDate.getDay() == this.days_week_disable[2] ||
+        cellDate.getDay() == this.days_week_disable[3] ||
+        cellDate.getDay() == this.days_week_disable[4] ||
+        cellDate.getDay() == this.days_week_disable[5] ||
+        cellDate.getDay() == this.days_week_disable[6]
+      ) {
+        if (cellDate.getFullYear() == lastPosition.getFullYear()) {
+          collection[cellDate.getDate() - 1].style.background = '';
+
+          collection[cellDate.getDate() - 1].style.fontWeight = 'bold';
+
+          return 'weekendsDays';
+        }
+      }
+    }
+
+    return '';
+  }
+
   private createFormGroup() {
     return new FormGroup({
       numero_empleado: new FormControl({
@@ -116,22 +189,22 @@ export class MESMSVComponent implements OnInit {
     this._mesmsv.crear(insertar).subscribe(
       (data) => {
         if (!data.error) {
-          this._validationService.openSnackBar('¡Solicitud enviada!');
+          this.snackAlert('¡Solicitud enviada!');
         } else {
-          this._validationService.openSnackBar(data.msg);
+          this.snackAlert(data.msg);
         }
         this.envioForm.text = 'Enviar';
         this.envioForm.status = false;
       },
       (error) => {
         if (!error.ok) {
-          this._validationService.openSnackBar('Ocurrió un error inesperado');
+          this.snackAlert('Ocurrió un error inesperado');
         }
         if (error.error.msg != undefined) {
-          this._validationService.openSnackBar(error.error.msg);
+          this.snackAlert(error.error.msg);
         }
         if (error.status == 408) {
-          this._validationService.openSnackBar('Conexion lenta');
+          this.snackAlert('Conexion lenta');
         }
         this.envioForm.text = 'Enviar';
         this.envioForm.status = false;
@@ -367,16 +440,21 @@ export class MESMSVComponent implements OnInit {
     this._mcomdfService.obtener().subscribe(
       (response) => {
         this.dias_feriados = response.response;
+        this.dates_disable = response.response.map((object: any) => {
+          return new Date(object.ANIO, object.MES - 1, object.DIA);
+        });
+
+        console.log(this.dates_disable);
       },
       (error) => {
         if (!error.ok) {
-          this._validationService.openSnackBar('Ocurrió un error inesperado');
+          this.snackAlert('Ocurrió un error inesperado');
         }
         if (error.error.msg != undefined) {
-          this._validationService.openSnackBar(error.error.msg);
+          this.snackAlert(error.error.msg);
         }
         if (error.status == 408) {
-          this._validationService.openSnackBar('Conexion lenta');
+          this.snackAlert('Conexion lenta');
         }
       }
     );
@@ -384,21 +462,53 @@ export class MESMSVComponent implements OnInit {
     this._mcompvService.obtenerPolitica().subscribe(
       (response) => {
         this.politica = response.response.DIASDESCANSO;
+        let convert = JSON.parse(response.response.DIASDESCANSO);
+        this.getDaysPolitician(convert);
       },
       (error) => {
         if (!error.ok) {
-          this._validationService.openSnackBar('Ocurrió un error inesperado');
+          this.snackAlert('Ocurrió un error inesperado');
         }
         if (error.error.msg != undefined) {
-          this._validationService.openSnackBar(error.error.msg);
+          this.snackAlert(error.error.msg);
         }
         if (error.status == 408) {
-          this._validationService.openSnackBar('Conexion lenta');
+          this.snackAlert('Conexion lenta');
         }
       }
     );
   }
 
+  getDaysPolitician(convert: any) {
+    if (convert.Do == 'Si') {
+      this.days_week_disable.push(0);
+    }
+
+    if (convert.Lu == 'Si') {
+      this.days_week_disable.push(1);
+    }
+
+    if (convert.Ma == 'Si') {
+      this.days_week_disable.push(2);
+    }
+
+    if (convert.Mi == 'Si') {
+      this.days_week_disable.push(3);
+    }
+
+    if (convert.Ju == 'Si') {
+      this.days_week_disable.push(4);
+    }
+
+    if (convert.Vi == 'Si') {
+      this.days_week_disable.push(5);
+    }
+
+    if (convert.Sa == 'Si') {
+      this.days_week_disable.push(6);
+    }
+  }
+
   get numero_empleado() {
     return this.formGroup.get('numero_empleado');
   }
@@ -429,4 +539,10 @@ export class MESMSVComponent implements OnInit {
     let day = 1000 * 60 * 60 * 24;
     return (date2utc - date1utc) / day;
   }
+
+  private snackAlert(mensaje: string) {
+    this._snackBar.open(mensaje, 'Cerrar', {
+      duration: 4000,
+    });
+  }
 }