refs #1549. Add loading state management to ManageOrganizationalUnitComponent for improved user experience during data fetching

ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.html

@@ -1,3 +1,6 @@
+<app-loading [isLoading]="loading"></app-loading>
+
+<div *ngIf="!loading">
     <h1 mat-dialog-title>{{ isEditMode ? 'Editar' : 'Crear' }} Unidad Organizativa</h1>
     <div class="mat-dialog-content">
         <!-- Paso 1: General -->
@@ -40,7 +43,8 @@
 
         <!-- Paso 2: Información del Aula -->
         <span *ngIf="generalFormGroup.value.type === 'classroom'" class="step-title">Información del aula</span>
-    <form *ngIf="generalFormGroup.value.type === 'classroom'" class="grid-form" [formGroup]="classroomInfoFormGroup">
+        <form *ngIf="generalFormGroup.value.type === 'classroom'" class="grid-form"
+            [formGroup]="classroomInfoFormGroup">
             <mat-form-field class="form-field">
                 <mat-label>Localización</mat-label>
                 <input matInput formControlName="location">
@@ -170,3 +174,4 @@
             [disabled]="!generalFormGroup.valid || !additionalInfoFormGroup.valid || !networkSettingsFormGroup.valid">{{
             isEditMode ? 'Editar' : 'Crear' }}</button>
     </div>
+</div>

ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.spec.ts

@@ -11,6 +11,8 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TranslateModule } from '@ngx-translate/core';
+import { LoadingComponent } from '../../../../../shared/loading/loading.component';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; 
 
 describe('ManageOrganizationalUnitComponent', () => {
   let component: ManageOrganizationalUnitComponent;
@@ -18,7 +20,7 @@ describe('ManageOrganizationalUnitComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ManageOrganizationalUnitComponent],
+      declarations: [ManageOrganizationalUnitComponent, LoadingComponent],
       imports: [
         HttpClientTestingModule,
         ReactiveFormsModule,
@@ -29,7 +31,8 @@ describe('ManageOrganizationalUnitComponent', () => {
         MatSlideToggleModule,
         MatCheckboxModule,
         TranslateModule.forRoot(),
-        BrowserAnimationsModule
+        BrowserAnimationsModule,
+        MatProgressSpinnerModule
       ],
       providers: [
         { provide: MatDialogRef, useValue: {} },

ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.ts

@@ -43,6 +43,7 @@ export class ManageOrganizationalUnitComponent implements OnInit {
   ];
   @Output() unitAdded = new EventEmitter();
   calendars: any;
+  loading: boolean = false;
 
   constructor(
     private _formBuilder: FormBuilder,
@@ -111,6 +112,7 @@ export class ManageOrganizationalUnitComponent implements OnInit {
   }
 
   loadParentUnits() {
+    this.loading = true;
     const url = `${this.baseUrl}/organizational-units?page=1&itemsPerPage=1000`;
     this.http.get<any>(url).subscribe(
       response => {
@@ -120,8 +122,12 @@ export class ManageOrganizationalUnitComponent implements OnInit {
           name: unit.name,
           path: this.dataService.getOrganizationalUnitPath(unit, this.parentUnits)
         }));
+        this.loading = false;
       },
-      error => console.error('Error fetching parent units:', error)
+      error => {
+        console.error('Error fetching parent units:', error);
+        this.loading = false;
+      }
     );
   }
 
@@ -131,64 +137,91 @@ export class ManageOrganizationalUnitComponent implements OnInit {
   }
 
   loadHardwareProfiles(): void {
+    this.loading = true;
     this.dataService.getHardwareProfiles().subscribe(
       (data: any[]) => {
         this.hardwareProfiles = data;
+        this.loading = false;
       },
       (error: any) => {
         console.error('Error fetching hardware profiles', error);
+        this.loading = false;
       }
     );
   }
 
   loadMenus(): void {
+    this.loading = true;
     const url = `${this.baseUrl}/menus?page=1&itemsPerPage=10000`;
 
     this.http.get<any>(url).subscribe(
       response => {
         this.menus = response['hydra:member'];
+        this.loading = false;
       },
       error => {
         console.error('Error fetching menus:', error);
+        this.loading = false;
       }
     );
   }
 
-
   loadOgLives() {
+    this.loading = true;
     this.dataService.getOgLives().subscribe(
       (data: any[]) => {
-        this.ogLives = data
+        this.ogLives = data;
+        this.loading = false;
       },
-      error => console.error('Error fetching ogLives', error)
+      error => {
+        console.error('Error fetching ogLives', error);
+        this.loading = false;
+      }
     );
   }
 
   loadRepositories() {
+    this.loading = true;
     this.dataService.getRepositories().subscribe(
-      (data: any[]) => this.repositories = data,
-      error => console.error('Error fetching repositories', error)
+      (data: any[]) => {
+        this.repositories = data;
+        this.loading = false;
+      },
+      error => {
+        console.error('Error fetching repositories', error);
+        this.loading = false;
+      }
     );
   }
 
   loadCalendars() {
+    this.loading = true;
     const apiUrl = `${this.baseUrl}/remote-calendars?page=1&itemsPerPage=30`;
     this.http.get<any>(apiUrl).subscribe(
-      response => this.calendars = response['hydra:member'],
+      response => {
+        this.calendars = response['hydra:member'];
+        this.loading = false;
+      },
       error => {
         console.error('Error loading calendars', error);
         this.toastService.error('Error loading current calendar');
+        this.loading = false;
       }
     );
   }
 
   loadCurrentCalendar(uuid: string): void {
+    this.loading = true;
     const apiUrl = `${this.baseUrl}/remote-calendars/${uuid}`;
     this.http.get<any>(apiUrl).subscribe(
-      response => this.currentCalendar = response,
+      response => {
+        this.currentCalendar = response;
+        this.loading = false;
+      },
       error => {
         console.error('Error loading current calendar', error);
         this.toastService.error('Error loading current calendar');
+        this.loading = false;
       }
     );
   }
@@ -206,6 +239,7 @@ export class ManageOrganizationalUnitComponent implements OnInit {
   }
 
   loadData(uuid: string) {
+    this.loading = true;
     const url = `${this.baseUrl}/organizational-units/${uuid}`;
 
     this.http.get<any>(url).subscribe(
@@ -244,11 +278,13 @@ export class ManageOrganizationalUnitComponent implements OnInit {
           capacity: data.capacity,
           remoteCalendar: data.remoteCalendar ? data.remoteCalendar['@id'] : null
         });
+        this.loading = false;
       },
 
       error => {
         console.error('Error fetching data for edit:', error);
         this.toastService.error('Error fetching data');
+        this.loading = false;
         this.onNoClick();
       }
     );