Merge branch 'devAldrick' of ITTEC/PlataformaEducativaWeb2 into unionCambios

Back/backendP-Educativa/.env

@@ -41,7 +41,7 @@ MAIL_FROM_NAME="${APP_NAME}"
 AWS_ACCESS_KEY_ID=4fcaae6da39a40198d8b4a27dc893a1a
 AWS_SECRET_ACCESS_KEY=aaaba8656aa91876038d77c362149689fb063e7c761ea47e
 AWS_DEFAULT_REGION=us-east-1
-AWS_BUCKET=pledu-dv-fjcm
+AWS_BUCKET=pledu-dv-aeci
 AWS_USE_PATH_STYLE_ENDPOINT=true
 AWS_ENDPOINT=https://s3.us-south.cloud-object-storage.appdomain.cloud
 AWS_USE_PATH_STYLE_ENDPOINT=true

Back/backendP-Educativa/app/Http/Controllers/Api/PeriodoController.php

@@ -31,14 +31,13 @@ class PeriodoController extends Controller
     {
         try {
             $validated = $request->validate([
-                'idEscuela' => 'required|string|max:10',
                 'idPeriodo' => 'required|string|max:10',
                 'nombrePeriodo' => 'required|string|max:100',
                 'fechaFinalizacion' => 'required|date',
             ]);
 
             DB::table('periodos')->insert([
-                'idEscuela' => $validated['idEscuela'],
+                'idEscuela' => 'COLEGIOABC',
                 'idPeriodo' => $validated['idPeriodo'],
                 'nombrePeriodo' => $validated['nombrePeriodo'],
                 'fechaFinalizacion' => $validated['fechaFinalizacion'],
@@ -46,8 +45,11 @@ class PeriodoController extends Controller
                 'ulActualizacion' => now(),
             ]);
 
-            $folderPath = 'periodos/' . $validated['nombrePeriodo'] . '/';
-            Storage::disk('s3')->put($folderPath . 'readme.txt', 'Carpeta creada para el periodo ' . $validated['nombrePeriodo']);
+            // Crear carpeta en S3 (la carpeta se crea al subir un archivo vacío o establecer un "prefix")
+            $folderPath = 'periodos/' . $validated['idPeriodo'] . '/';
+            Storage::disk('s3')->put($folderPath . 'readme.txt', 'Carpeta creada para el periodo ' . $validated['idPeriodo']);
+
+
 
             return response()->json([
                 'mensaje' => 'Periodo creado correctamente',
@@ -61,5 +63,103 @@ class PeriodoController extends Controller
         }
     }
 
-  
+    public function activarPeriodo(Request $request)
+    {
+        try {
+            $validated = $request->validate([
+                'idPeriodo' => 'required|string|max:10',
+            ]);
+
+            
+            DB::table('periodos')
+                ->where('estatus', '<>', 'Eliminado')
+                ->update(['estatus' => 'Inactivo']);
+
+            // Activar el periodo seleccionado
+            DB::table('periodos')
+                ->where('idPeriodo', $validated['idPeriodo'])
+                ->update([
+                    'estatus' => 'Activo',
+                    'ulActualizacion' => now(),
+                ]);
+
+            return response()->json([
+                'mensaje' => 'Periodo activado correctamente',
+                'idPeriodo' => $validated['idPeriodo']
+            ], 200);
+
+        } catch (\Exception $e) {
+            return response()->json([
+                'mensaje' => 'Error al activar el periodo: ' . $e->getMessage()
+            ], 500);
+        }
+    }
+
+    public function eliminarPeriodo(Request $request)
+    {
+        try {
+            $validated = $request->validate([
+                'idPeriodo' => 'required|string|max:10',
+            ]);
+
+            $updated = DB::table('periodos')
+                ->where('idPeriodo', $validated['idPeriodo'])
+                ->update([
+                    'estatus' => 'Eliminado',
+                    'ulActualizacion' => now(),
+                ]);
+
+            if ($updated) {
+                return response()->json([
+                    'mensaje' => 'Periodo eliminado correctamente',
+                    'idPeriodo' => $validated['idPeriodo']
+                ], 200);
+            } else {
+                return response()->json([
+                    'mensaje' => 'No se encontró el periodo para eliminar'
+                ], 404);
+            }
+
+        } catch (\Exception $e) {
+            return response()->json([
+                'mensaje' => 'Error al eliminar el periodo: ' . $e->getMessage()
+            ], 500);
+        }
+    }
+
+    public function habilitarPeriodo(Request $request)
+    {
+        try {
+            $validated = $request->validate([
+                'idPeriodo' => 'required|string|max:10',
+            ]);
+
+            $updated = DB::table('periodos')
+                ->where('idPeriodo', $validated['idPeriodo'])
+                ->update([
+                    'estatus' => 'Inactivo',
+                    'ulActualizacion' => now(),
+                ]);
+
+            if ($updated) {
+                return response()->json([
+                    'mensaje' => 'Periodo eliminado correctamente',
+                    'idPeriodo' => $validated['idPeriodo']
+                ], 200);
+            } else {
+                return response()->json([
+                    'mensaje' => 'No se encontró el periodo para eliminar'
+                ], 404);
+            }
+
+        } catch (\Exception $e) {
+            return response()->json([
+                'mensaje' => 'Error al eliminar el periodo: ' . $e->getMessage()
+            ], 500);
+        }
+    }
+
+
+
+
 }

Back/backendP-Educativa/routes/api.php

@@ -66,6 +66,10 @@ Route::middleware(['auth:sanctum'])->group(function () {
     // Rutas Periodos
     Route::post('crearPeriodo', [PeriodoController::class, 'crearPeriodo']);
     Route::get('getAllPeriodos', [PeriodoController::class, 'getAllPeriodos']);
+    Route::post('activarPeriodo', [PeriodoController::class, 'activarPeriodo']);
+    Route::post('deshabilitarPeriodo', [PeriodoController::class, 'eliminarPeriodo']);
+    Route::post('habilitarPeriodo', [PeriodoController::class, 'habilitarPeriodo']);
+
 
     //Rutas de Usuarios
     Route::get('count', [ActividadController::class, 'count']);
@@ -254,7 +258,7 @@ Route::middleware(['auth:sanctum'])->group(function () {
     Route::put('elminarEstadoCalificacion', [RegistroCalicaciones::class, 'eliminarEstado']);
     Route::put('habilitarEstadoCalificacion', [RegistroCalicaciones::class, 'habilitarEstado']);
 
-    Route::get('getAlumnosCalificacion',[RegistroCalicaciones::class,'getCalificacionesMateria']);
+    Route::get('getAlumnosCalificacion', [RegistroCalicaciones::class, 'getCalificacionesMateria']);
     Route::get('/personalizacion/nombre-colegio', [PersonalizarController::class, 'getNombreColegio']);
     Route::get('/personalizacion/eslogan-colegio', [PersonalizarController::class, 'getEsloganColegio']);
 
@@ -277,11 +281,11 @@ Route::middleware(['auth:sanctum'])->group(function () {
     Route::get('/respuestas/formulario', [RespuestasController::class, 'obtenerRespuesta']);
     Route::put('/actualizarRespuesta', [RespuestasController::class, 'actualizarRespuesta']);
 
-Route::post('/eliminarArchivo', [RegistroAcademico::class, 'eliminarArchivo']);
-Route::post('/eliminarPerlogo', [PersonalizarController::class, 'eliminarPerlogo']);
+    Route::post('/eliminarArchivo', [RegistroAcademico::class, 'eliminarArchivo']);
+    Route::post('/eliminarPerlogo', [PersonalizarController::class, 'eliminarPerlogo']);
 
-Route::get('/personalizar/perlogo1', [PersonalizarController::class, 'getPerLogo1']);
-Route::get('/personalizar/perlogo2', [PersonalizarController::class, 'getPerLogo2']);
+    Route::get('/personalizar/perlogo1', [PersonalizarController::class, 'getPerLogo1']);
+    Route::get('/personalizar/perlogo2', [PersonalizarController::class, 'getPerLogo2']);
 
 
 });

Front/src/app/modules/Administrador/administrador.module.ts

@@ -5,7 +5,7 @@ import { AdminRoutingModule } from './admin-routing.module';
 import { SharedModule } from '../../shared/shared.module';
 import { MaterialModule } from '../../material/material.module';
 import { CatalogoUsuariosComponent, ContrasenaModal, ModalUsuarioEdit } from './pages/catalogo-usuarios/catalogo-usuarios.component';
-import { ButtonDialogComponent, ModalCatalogoUsuarios, ModalCategoriasMaterias, ModalCirculares, ModalGradoEducativo, ModalGrupo, ModalMaterias, ModalNivelEducativo } from './components/button-dialog/button-dialog.component';
+import { ButtonDialogComponent, ModalCatalogoUsuarios, ModalCategoriasMaterias, ModalCirculares, ModalGradoEducativo, ModalGrupo, ModalMaterias, ModalNivelEducativo, ModalPeriodos } from './components/button-dialog/button-dialog.component';
 import { GradosEducativosComponent, ModalGradoeducativoEdit } from './pages/grados-educativos/grados-educativos.component';
 import { PersonalizarComponent } from './pages/personalizar/personalizar.component';
 import { GruposComponent, ModalGrupoEdit } from './pages/grupos/grupos.component';
@@ -48,6 +48,7 @@ import { PeriodosComponent } from './pages/periodos/periodos.component';
 
 
     ModalNivelEducativo,
+    ModalPeriodos,
     ModalGradoEducativo,
     ModalGrupo,
     ModalCatalogoUsuarios,

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;
+    }
+  }
+
+}

Front/src/app/modules/Administrador/pages/periodos/periodos.component.css

@@ -59,6 +59,32 @@
     width: 30px;
 }
 
+.action-publish {
+    margin-left: 5px;
+    background-color: #226d1f;
+    color: white;
+    height: 30px;
+    width: 30px;
+}
+
+.disabled-button {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.no-pointer {
+  pointer-events: none; /* evita que se pueda hacer clic */
+}
+
+
+.action-unpublish {
+    margin-left: 5px;
+    background-color: #d6885b;
+    color: white;
+    height: 30px;
+    width: 30px;
+}
+
 .action-delete {
     margin-left: 5px;
     background-color: #e43b3d;
@@ -103,14 +129,22 @@
 }
 
 .badge-active {
-    color: #026AA2;
+    color: #48794a;
+    font-weight: 500;
+    padding: 3px 7px;
+    background-color: #c3f3c5;
+    border-radius: 15px;
+}
+
+.badge-inactive{
+    color: #5a5a5a;
     font-weight: 500;
     padding: 3px 7px;
-    background-color: #E0F2FE;
+    background-color: #d3d3d3;
     border-radius: 15px;
 }
 
-.badge-inactive {
+.badge-disabled {
     color: #AC2722;
     font-weight: 500;
     padding: 3px 7px;

Front/src/app/modules/Administrador/pages/periodos/periodos.component.html

@@ -20,12 +20,12 @@
             <div class="flex-row items-center">
                 <mat-form-field style="width: 75%; margin-left: 20px; margin-right: 20px; margin-top: 5px;">
                     <mat-label>Mostrar:</mat-label>
-                    <mat-select value="Activos" (selectionChange)="option($event.value)">
-                        <mat-option value="Activos">Activos</mat-option>
+                    <mat-select value="Todos" (selectionChange)="option($event.value)">
+                        <mat-option value="Todos">Todos</mat-option>
                         <mat-option value="Eliminados">Eliminados</mat-option>
                     </mat-select>
                 </mat-form-field>
-                <app-button-dialog [vista]="'nivelEducativo'"></app-button-dialog>
+                <app-button-dialog [vista]="'periodos'"></app-button-dialog>
             </div>
             <button mat-button type="button" class="green" [matMenuTriggerFor]="menu">Exportar a Excel<mat-icon
                     svgIcon="excel" class="icono-blanco"></mat-icon></button>
@@ -75,8 +75,9 @@
                     <th mat-header-cell *matHeaderCellDef> Estado</th>
                     <td mat-cell *matCellDef="let periodo">
                         <span
-                            [ngClass]="{'badge-active': periodo.estatus == 'Activo' , 'badge-inactive' : periodo.estatus == 'Eliminado'}">
-                            {{periodo.estatus === 'Eliminado' ? 'Eliminado' : 'Activo'}}
+                            [ngClass]="{'badge-active': periodo.estatus == 'Activo' , 'badge-inactive' : periodo.estatus == 'Inactivo', 'badge-disabled' : periodo.estatus == 'Eliminado'}">
+                            {{periodo.estatus === 'Eliminado' ? 'Eliminado' : periodo.estatus === 'Inactivo' ?
+                            'Inactivo' : 'Activo'}}
                         </span>
                     </td>
 
@@ -88,15 +89,40 @@
                         <div class="flex-row items-center">
                             <!-- <button class="action-edit" mat-fab color="Primary"
                                 (click)="openDialog(periodo)"><mat-icon class="icon">edit</mat-icon></button> -->
-                            <!-- <button class="action-delete" mat-fab color="Primary" #tooltip="matTooltip" matTooltip="Cambiar estado a 'Eliminado'"
-                            matTooltipPosition="right"
-                                (click)="deleteLevel(periodo.idNivel)"><mat-icon class="icon">unpublished</mat-icon></button> -->
                             <p class="ml-10" #tooltip="matTooltip"
-                                [matTooltip]="periodo.estado === 'Activo' ? 'Cambiar estado a Eliminado' : 'Cambiar estado a Activo'"
+                                [matTooltip]="periodo.estatus === 'Activo' ? '' : 'Cambiar estado a Activo'"
+                                
                                 matTooltipPosition="right" style="transform: scale(1.2);">
-                                <mat-slide-toggle [checked]="periodo.estado === 'Activo'" (click)="periodo.estado === 'Activo' ?
-                                deleteLevel(periodo.idNivel): enableLevel(periodo.idNivel)"></mat-slide-toggle>
+                                <mat-slide-toggle
+                                
+                                    [disabled]="periodo.estatus === 'Eliminado' || periodo.estatus === 'Activo'"
+                                    [checked]="periodo.estatus === 'Activo'" (click)="periodo.estatus === 'Inactivo' ? activarPeriodo(periodo.idPeriodo) : ''"></mat-slide-toggle>
                             </p>
+
+
+                            <!-- Quiero que tenga un estilo deshabilitado si el status sea eliminado o activo -->
+                            <button class="action-edit" mat-fab color="Primary" #tooltip="matTooltip"
+                                matTooltip="Editar información" matTooltipPosition="right">
+                                <mat-icon class="icon">edit</mat-icon>
+                            </button>
+                            <!-- <button class="action-delete" mat-fab color="Primary" #tooltip="matTooltip"
+                                matTooltip="Cambiar estado a 'Eliminado'" matTooltipPosition="right"
+                                (click)="deleteLevel(periodo.idNivel)">
+                                <mat-icon class="icon">delete</mat-icon>
+                            </button> -->
+
+                            <button
+                                [ngClass]="{'action-delete': periodo.estatus === 'Inactivo' || periodo.estatus === 'Activo', 'action-publish': periodo.estatus === 'Eliminado' , 'disabled-button': periodo.estatus === 'Activo'}"
+                                mat-fab color="Primary"
+                                [disabled]="periodo.estatus === 'Activo'"
+                                #tooltip="matTooltip"
+                                [matTooltip]="periodo.estatus === 'Activo' ? 'No se puede eliminar un periodo activo' : periodo.estatus === 'Eliminado' ? 'Habilitar registro' : periodo.estatus === 'Inactivo' ? 'Cambiar estado a Eliminado' : ''"
+                                matTooltipPosition="right" (click)="periodo.estatus === 'Inactivo' ? deletePeriodo(periodo.idPeriodo): enablePeriodo(periodo.idPeriodo)">
+                                <mat-icon class="icon">
+                                    {{periodo.estatus === 'Inactivo' || periodo.estatus === 'Activo' ? 'delete' : 'check'}}
+                                </mat-icon>
+                            </button>
+
                         </div>
                     </td>
                 </ng-container>
@@ -112,4 +138,4 @@
         </div>
         <mat-paginator [pageSizeOptions]="[5, 10, 15]" showFirstLastButtons class="mat-elevation-z8"></mat-paginator>
     </div>
-</div>
+</div>

Front/src/app/modules/Administrador/pages/periodos/periodos.component.ts

@@ -73,19 +73,19 @@ export class PeriodosComponent {
 
     //suscribirse al subject que manda al servicio
     this._enviarInfo.tabla$.subscribe(() => {
-      this.getNiveles();
+      this.getPeriodos();
     });
 
-    this.getNiveles()
+    this.getPeriodos()
   }
   public allInfo: any;
 
   //Traer la información y mostrarla en la tabla
-  getNiveles() {
+  getPeriodos() {
     return this._periodoService.getAllPeriodos().subscribe((response: any) => {
       this.isLoading = false;
       this.allInfo = response.data
-      this.dataSource = new MatTableDataSource<any>(this.allInfo.filter((filtro: any) => filtro.estatus === 'Activo'));
+      this.dataSource = new MatTableDataSource<any>(this.allInfo.filter((filtro: any) => filtro.estatus === 'Activo' || filtro.estatus === 'Inactivo'));
       this.dataSource.paginator = this.paginator;
       console.log(response);
 
@@ -93,14 +93,47 @@ export class PeriodosComponent {
     })
   }
 
+  onToggleClick(periodo: any) {
+  if (periodo.estatus === 'Inactivo') {
+    this.activarPeriodo(periodo.idPeriodo);
+  }
+  // Si es "Eliminado" o "Activo", no hace nada (está "deshabilitado")
+}
+
+
+  activarPeriodo(id: string) {
+    this._periodoService.activarPeriodo(id).subscribe((response: any) => {
+      Swal.fire({
+        icon: 'success',
+        title: 'Periodo activado correctamente',
+        confirmButtonColor: 'rgb(237,46,56)',
+        confirmButtonText: 'Ok',
+      }).then((result: any) => {
+        if (result.isConfirmed) {
+          this.ngOnInit();
+          Swal.close();
+        }
+      });
+    }, (err: any) => {
+      console.log(err);
+      Swal.fire({
+        icon: 'error',
+        title: 'Error al activar el periodo',
+        text: `${err.error.message}`,
+      });
+      this.ngOnInit();
+    }
+    )
+  }
+
   option(event: string) {
     this.isLoading = true;
     let filteredData: any;
 
-    if (event === 'Activos') {
-      filteredData = this.allInfo.filter((filtro: any) => filtro.estado === 'Activo');
+    if (event === 'Todos') {
+      filteredData = this.allInfo.filter((filtro: any) => filtro.estatus === 'Activo' || filtro.estatus === 'Inactivo');
     } else if (event === 'Eliminados') {
-      filteredData = this.allInfo.filter((filtro: any) => filtro.estado === 'Eliminado');
+      filteredData = this.allInfo.filter((filtro: any) => filtro.estatus === 'Eliminado');
     }
 
     this.dataSource = new MatTableDataSource<any>(filteredData);
@@ -195,11 +228,11 @@ export class PeriodosComponent {
 
 
 
-  deleteLevel(id: string) {
+  deletePeriodo(id: string) {
 
     Swal.fire({
       icon: 'question',
-      title: '¿Desea cambiar el estado del nivel?',
+      title: '¿Desea deshabilitar el periodo?',
       showCancelButton: true,
       allowOutsideClick: false,
       allowEscapeKey: false,
@@ -209,11 +242,11 @@ export class PeriodosComponent {
     }).then((result: any) => {
       /* Read more about isConfirmed, isDenied below */
       if (result.isConfirmed) {
-        this._periodoService.eliminarPeriodo(id).subscribe((response: any) => {
+        this._periodoService.desactivarPeriodo(id).subscribe((response: any) => {
           console.log(response);
           Swal.fire({
             icon: 'success',
-            title: 'Nivel educativo eliminado',
+            title: 'Periodo eliminado',
             confirmButtonColor: 'rgb(237,46,56)',
             confirmButtonText: 'Ok',
           }).then((result: any) => {
@@ -240,10 +273,10 @@ export class PeriodosComponent {
 
   }
 
-  enableLevel(id: string) {
+  enablePeriodo(id: string) {
     Swal.fire({
       icon: 'question',
-      title: '¿Desea habilitar el nivel?',
+      title: '¿Desea habilitar el periodo?',
       showCancelButton: true,
       allowOutsideClick: false,
       allowEscapeKey: false,
@@ -256,7 +289,7 @@ export class PeriodosComponent {
         this._periodoService.habilitarPeriodo(id).subscribe((response: any) => {
           Swal.fire({
             icon: 'success',
-            title: 'Nivel educativo habilitado',
+            title: 'Periodo habilitado',
             confirmButtonColor: 'rgb(237,46,56)',
             confirmButtonText: 'Ok',
           }).then((result: any) => {

Front/src/app/modules/Administrador/services/periodos.service.ts

@@ -18,15 +18,23 @@ export class PeriodosService {
     });
   }
 
+  crearPeriodo(periodo: any) {
+    return this.http.post<any>(`${this.URL}/crearPeriodo`, periodo, { headers: this.getHeaders() });
+  }
+
   getAllPeriodos() {
     return this.http.get<any[]>(`${this.URL}/getAllPeriodos`, { headers: this.getHeaders() });
   }
 
-  eliminarPeriodo(id: string) {
-    return this.http.get<any[]>(`${this.URL}/getAllPeriodos`, { headers: this.getHeaders() });
+  activarPeriodo(id: string) {
+    return this.http.post<any>(`${this.URL}/activarPeriodo`, { idPeriodo: id }, { headers: this.getHeaders() });
+  }
+
+  desactivarPeriodo(id: string) {
+    return this.http.post<any>(`${this.URL}/deshabilitarPeriodo`, { idPeriodo: id }, { headers: this.getHeaders() });
   }
 
   habilitarPeriodo(id: string) {
-    return this.http.get<any[]>(`${this.URL}/getAllPeriodos`, { headers: this.getHeaders() });
+    return this.http.post<any[]>(`${this.URL}/habilitarPeriodo`, { idPeriodo: id }, { headers: this.getHeaders() });
   }
 }