Added global loading

ogWebconsole/src/app/app.module.ts

@@ -126,6 +126,7 @@ import { CreateMenuComponent } from './components/menus/create-menu/create-menu.
 import { CreateMultipleClientComponent } from './components/groups/shared/clients/create-multiple-client/create-multiple-client.component';
 import { ExportImageComponent } from './components/images/export-image/export-image.component';
 import {ImportImageComponent} from "./components/repositories/import-image/import-image.component";
+import { LoadingComponent } from './shared/loading/loading.component';
 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http, './locale/', '.json');
 }
@@ -210,6 +211,7 @@ export function HttpLoaderFactory(http: HttpClient) {
     CreateMultipleClientComponent,
     ExportImageComponent,
     ImportImageComponent,
+    LoadingComponent,
   ],
   bootstrap: [AppComponent],
     imports: [BrowserModule,

ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.html

@@ -1,3 +1,5 @@
+<app-loading [isLoading]="loading"></app-loading>
+
 <div class="header-container">
   <div class="header-container-title">
     <h2 >

ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.ts

@@ -21,6 +21,7 @@ export class CreateClientImageComponent {
   selectedPartition: any = null;
   name: string = '';
   client: any = null;
+  loading: boolean = false;
   dataSource = new MatTableDataSource<any>();
   columns = [
     {
@@ -99,6 +100,8 @@ export class CreateClientImageComponent {
   }
 
   save(): void {
+    this.loading = true;
+
     const payload = {
       client: `/clients/${this.clientId}`,
       name: this.name,
@@ -111,10 +114,12 @@ export class CreateClientImageComponent {
       .subscribe({
           next: (response) => {
             this.toastService.success('Petición de creación de imagen enviada');
+            this.loading = false;
             this.router.navigate(['/images']);
           },
           error: (error) => {
             this.toastService.error(error.error['hydra:description']);
+            this.loading = false;
           }
         }
       );

ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.html

@@ -1,3 +1,5 @@
+<app-loading [isLoading]="loading"></app-loading>
+
 <div class="header-container">
   <div class="header-container-title">
     <h2>

ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.ts

@@ -34,6 +34,7 @@ export class DeployImageComponent {
   name: string = '';
   client: any = null;
   clientData: any = [];
+  loading: boolean = false;
 
   protected p2pModeOptions = [
     { name: 'Leecher', value: 'leecher' },
@@ -150,6 +151,8 @@ export class DeployImageComponent {
   }
 
   save(): void {
+    this.loading = true;
+
     if (!this.selectedImage) {
       this.toastService.error('Debe seleccionar una imagen');
       return;
@@ -188,6 +191,7 @@ export class DeployImageComponent {
       .subscribe({
           next: (response) => {
             this.toastService.success('Petición de despliegue enviada correctamente');
+            this.loading = false;
             this.router.navigate(['/commands-logs']);
           },
           error: (error) => {
@@ -201,6 +205,7 @@ export class DeployImageComponent {
               "extendedTimeOut": 0,
               "tapToDismiss": false
             });
+            this.loading = false;
           }
         }
       );

ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.html

@@ -1,3 +1,5 @@
+<app-loading [isLoading]="loading"></app-loading>
+
 <div class="header-container">
   <div class="header-container-title">
     <h2 joyrideStep="groupsTitleStepText" text="{{ 'groupsTitleStepText' | translate }}">

ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.ts

@@ -40,6 +40,7 @@ export class PartitionAssistantComponent {
   data: any = {};
   disks: { diskNumber: number; totalDiskSize: number; partitions: Partition[]; chartData: any[]; used: number; percentage: number }[] = [];
   clientData: any = [];
+  loading: boolean = false;
 
   private apiUrl: string = this.baseUrl + '/partitions';
 
@@ -258,6 +259,8 @@ export class PartitionAssistantComponent {
       return;
     }
 
+    this.loading = true;
+
     const totalPartitionSize = this.selectedDisk.partitions.reduce((sum: any, partition: { size: any; }) => sum + partition.size, 0);
 
     if (totalPartitionSize > this.selectedDisk.totalDiskSize) {
@@ -295,10 +298,12 @@ export class PartitionAssistantComponent {
       this.http.post(this.apiUrl, bulkPayload).subscribe(
         (response) => {
           this.toastService.success('Particiones creadas exitosamente para el disco seleccionado.');
+          this.loading = false;
           this.router.navigate(['/commands-logs']);
         },
         (error) => {
           console.error('Error al crear las particiones:', error);
+          this.loading = false;
           this.toastService.error('Error al crear las particiones.');
         }
       );

ogWebconsole/src/app/layout/main-layout/main-layout.component.css

@@ -4,15 +4,16 @@
 
 .container {
   width: 100vw;
-  height: calc(100vh - 10vh); 
+  height: calc(100vh - 10vh);
 }
 
 .sidebar {
-  width: 250px; 
+  width: 250px;
+  z-index: auto !important;
 }
 
 .content {
   margin: 0px 10px 10px 10px;
   padding: 0px 10px 10px 10px;
-  box-sizing: border-box; 
-}
+  box-sizing: border-box;
+}

ogWebconsole/src/app/shared/loading/loading.component.css

@@ -0,0 +1,12 @@
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 99999;
+}

ogWebconsole/src/app/shared/loading/loading.component.html

@@ -0,0 +1,3 @@
+<div *ngIf="isLoading" class="overlay">
+  <mat-spinner></mat-spinner>
+</div>

ogWebconsole/src/app/shared/loading/loading.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoadingComponent } from './loading.component';
+
+describe('LoadingComponent', () => {
+  let component: LoadingComponent;
+  let fixture: ComponentFixture<LoadingComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [LoadingComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LoadingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ogWebconsole/src/app/shared/loading/loading.component.ts

@@ -0,0 +1,10 @@
+import {Component, Input} from '@angular/core';
+
+@Component({
+  selector: 'app-loading',
+  templateUrl: './loading.component.html',
+  styleUrl: './loading.component.css'
+})
+export class LoadingComponent {
+  @Input() isLoading: boolean = false;
+}