feat: Added PeriodosModal and connected with save method

Front/src/app/modules/Administrador/components/button-dialog/ModalPeriodos.component.html

@@ -0,0 +1,68 @@
+<div class="close ">
+    <button class="cerrar-b cursor-pointer" mat-dialog-close><mat-icon>close</mat-icon></button>
+</div>
+<!--
+<div class="titulo-modal">
+</div>-->
+<span class="center">Registrar Periodo</span>
+<!-- --------------------------------------------------------------------------------- -->
+<!-- form -->
+
+<mat-dialog-content class="mat-typography space items-center">
+    <form (ngSubmit)="crearPeriodo()" [formGroup]="form">
+        <div class="mt-20 items-center responsive">
+            <mat-form-field class="input">
+                <mat-label>Clave del Nivel</mat-label>
+                <input matInput name="idPeriodo" formControlName="idPeriodo" 
+                    style="padding-left: 0;">
+                <mat-icon [class.is-invalid-icon]="campoVacio('idPeriodo')" matSuffix>badge</mat-icon>
+
+                <mat-hint *ngIf="campoVacio('idPeriodo')" class="is-invalid">El campo es obligatorio</mat-hint>
+
+            </mat-form-field>
+
+            <mat-form-field class="input">
+                <mat-label>Nombre del Nivel</mat-label>
+                <input matInput maxlength="50" name="nombrePeriodo" formControlName="nombrePeriodo" style="padding-left: 0;">
+                <mat-icon [class.is-invalid-icon]="campoVacio('nombrePeriodo')" matSuffix>badge</mat-icon>
+                <mat-hint *ngIf="campoVacio('nombrePeriodo')" class="is-invalid">El campo es obligatorio</mat-hint>
+            </mat-form-field>
+
+            
+
+            <mat-form-field class="input">
+                <mat-label>Fecha de finalización:</mat-label>
+                <input matInput [matDatepicker]="pickerStart1" [min]="todayDate" name="fechaFinalizacion"
+                    id="fechaFinalizacion" formControlName="fechaFinalizacion" readonly>
+                <!-- <mat-hint>MM/DD/YYYY</mat-hint> -->
+                <mat-datepicker-toggle matIconSuffix [for]="pickerStart1"></mat-datepicker-toggle>
+                <mat-datepicker #pickerStart1></mat-datepicker>
+                <mat-hint *ngIf="isValidField('fechaFinalizacion', 'required')"
+                    style="color: red; width: 200px; position: absolute;">El campo es obligatorio</mat-hint>
+                <mat-hint
+                    *ngIf="isValidField('fechaFinalizacion', 'fechaInvalida') && !isValidField('fechaFinalizacion', 'required')"
+                    style="color: red; width: 380px; position: absolute;">La fecha de caducidad debe ser mayor o igual a
+                    la fecha de inicio</mat-hint>
+            </mat-form-field>
+        </div>
+
+        <div class="align">
+            <div class="align-items">
+                <button type="button" class="yellow" (click)="crearPeriodo()">Ingresar <mat-icon class="icon"
+                        matSuffix>description</mat-icon></button>
+            </div>
+            <div class="align-items">
+                <button class="orange" (click)="limpiar()">Limpiar <mat-icon class="icon"
+                        matSuffix>delete</mat-icon></button>
+            </div>
+            <div class="align-items">
+                <button class="red" mat-dialog-close>Cerrar <mat-icon class="icon" matSuffix>cancel</mat-icon></button>
+            </div>
+        </div>
+    </form>
+
+</mat-dialog-content>
+
+
+
+<!-- -------------------------------------- -->

Front/src/app/modules/Administrador/components/button-dialog/button-dialog.component.ts

@@ -25,6 +25,7 @@ import { CircularService } from '../../services/circular.service';
 import { parseJSON } from 'date-fns';
 import { HttpEventType } from '@angular/common/http';
 import { v4 as uuidv4 } from 'uuid';
+import { PeriodosService } from '../../services/periodos.service';
 
 /**
  * @title Dialog with header, scrollable content and actions
@@ -89,6 +90,11 @@ export class ButtonDialogComponent implements OnInit {
           autoFocus: false
         });
         break;
+      case 'periodos':
+        dialogRef = this.dialog.open(ModalPeriodos, {
+          autoFocus: false
+        });
+        break;
     }
     // dialogRef.afterClosed().subscribe(result => {
     //   console.log(`Dialog result: ${result}`);
@@ -1029,6 +1035,7 @@ export class ModalCirculares {
 
 
 
+
   deleteIndex(i: number) {
     if (i !== -1) {
       this.archivosData.splice(i, 1);
@@ -1037,7 +1044,7 @@ export class ModalCirculares {
 
 
 
-  
+
 
 
   // cancelUpload() {
@@ -1180,3 +1187,106 @@ export class ModalCirculares {
 }
 
 
+@Component({
+  selector: 'dialog-content-example-dialog',
+  templateUrl: 'ModalPeriodos.component.html',
+  styleUrl: './button-dialog.component.css',
+  providers: [provideNativeDateAdapter(),
+  { provide: MAT_DATE_LOCALE, useValue: 'en-GB' }
+  ],
+
+})
+export class ModalPeriodos {
+
+  public todayDate: Date = new Date();
+
+  constructor(public dialog: MatDialog,
+    private _periodoService: PeriodosService,
+    private _enviarInfoService: EnviarInfoService,
+    private fb: FormBuilder
+  ) { }
+
+  get currentPeriodo(): any {
+    const nivel = this.form.value as any;
+
+    const fechaFormateada = moment(nivel.fechaFinalizacion).format('YYYY-MM-DD');
+
+    return {
+      ...nivel,
+      fechaFinalizacion: fechaFormateada
+    };
+  }
+
+  public form = this.fb.group({
+    idPeriodo: ['', [Validators.required, Validators.pattern('^[a-zA-Z0-9áéíóúÁÉÍÓÚñÑ,.][a-zA-Z0-9\\sáéíóúÁÉÍÓÚñÑ,.]*$')]],
+    nombrePeriodo: ['', [Validators.required, Validators.pattern('^[a-zA-Z0-9áéíóúÁÉÍÓÚñÑ,.][a-zA-Z0-9\\sáéíóúÁÉÍÓÚñÑ,.]*$')]],
+    fechaFinalizacion: ['', Validators.required],
+  })
+
+  crearPeriodo() {
+
+    console.log(this.currentPeriodo);
+
+    if (this.form.invalid) {
+      return Object.values(this.form.controls).forEach(control => {
+        control.markAllAsTouched();
+        Swal.fire({
+          icon: 'error',
+          title: `Por favor, ingrese información válida en el formulario.`
+        })
+      });
+    }
+
+    return this._periodoService.crearPeriodo(this.currentPeriodo).subscribe((response: any) => {
+      console.log(response);
+      Swal.fire({
+        icon: 'success',
+        title: `${response.mensaje}`
+      })
+
+      this.dialog.closeAll();
+
+      //envía la actualización al servicio
+      this._enviarInfoService.notifyCambioTabla();
+    }, (err) => {
+      console.log(err);
+      Swal.fire({
+        icon: 'error',
+        title: `${err.error.mensaje}`
+      })
+    }
+    )
+
+
+  }
+
+  isValidField(field: string, errorType: string) {
+    const control = this.form.get(field);
+    return control?.hasError(errorType) && control?.touched;
+  }
+
+  close() {
+    this.dialog.closeAll()
+  }
+
+  limpiar() {
+    this.form.reset();
+  }
+
+  campoNoValido(campo: string): boolean {
+    if (this.form.get(campo)?.invalid && this.form.get(campo)?.touched) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  campoVacio(campo: string): boolean {
+    if ((this.form.get(campo)?.value === '' || this.form.get(campo)?.invalid) && this.form.get(campo)?.touched) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+}