feat: activarPeriodo service added in periodos component

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

@@ -59,6 +59,28 @@
     width: 30px;
 }
 
+.action-publish {
+    margin-left: 5px;
+    background-color: #226d1f;
+    color: white;
+    height: 30px;
+    width: 30px;
+}
+
+.disabled-button {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+
+.action-unpublish {
+    margin-left: 5px;
+    background-color: #d6885b;
+    color: white;
+    height: 30px;
+    width: 30px;
+}
+
 .action-delete {
     margin-left: 5px;
     background-color: #e43b3d;
@@ -103,14 +125,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,8 +20,8 @@
             <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>
@@ -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,34 @@
                         <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"
+                            <button
+                                [ngClass]="{'action-publish': periodo.estatus === 'Inactivo' || periodo.estatus === 'Eliminado' || periodo.estatus === 'Activo', 'disabled-button': periodo.estatus === 'Eliminado' || periodo.estatus === 'Activo'}"
+                                mat-fab color="Primary"
+                                [disabled]="periodo.estatus === 'Eliminado' || periodo.estatus === 'Activo'"
+                                #tooltip="matTooltip"
+                                [matTooltip]="periodo.estatus === 'Activo' ? 'Colocar como periodo Inactivo' : periodo.estatus === 'Eliminado' ? 'No se puede activar si el estatus es Eliminado' : 'Colocar como periodo Activo'"
+                                matTooltipPosition="right" (click)="activarPeriodo(periodo.idPeriodo)">
+                                <mat-icon class="icon">
+                                    check
+                                </mat-icon>
+                            </button>
+
+                            <!-- 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>
+                            <!-- <p class="ml-10" #tooltip="matTooltip"
                                 [matTooltip]="periodo.estado === 'Activo' ? 'Cambiar estado a Eliminado' : '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>
-                            </p>
+                            </p> -->
                         </div>
                     </td>
                 </ng-container>
@@ -112,4 +132,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);
       this.dataSource.paginator = this.paginator;
       console.log(response);
 
@@ -93,14 +93,39 @@ export class PeriodosComponent {
     })
   }
 
+  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') {
+    if (event === 'Todos') {
+      filteredData = this.allInfo;
+    } else if (event === 'Activos') {
       filteredData = this.allInfo.filter((filtro: any) => filtro.estado === 'Activo');
-    } else if (event === 'Eliminados') {
-      filteredData = this.allInfo.filter((filtro: any) => filtro.estado === 'Eliminado');
     }
 
     this.dataSource = new MatTableDataSource<any>(filteredData);

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

@@ -26,6 +26,10 @@ export class PeriodosService {
     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() });
+  }
+
   eliminarPeriodo(id: string) {
     return this.http.get<any[]>(`${this.URL}/getAllPeriodos`, { headers: this.getHeaders() });
   }