From 1c4343bb48fa130917c1f56b46dccd84bc44b156 Mon Sep 17 00:00:00 2001 From: llara Date: Mon, 24 Feb 2025 16:13:29 +0100 Subject: [PATCH] refs #1549. Add loading state management to ManageOrganizationalUnitComponent for improved user experience during data fetching --- .../manage-organizational-unit.component.html | 337 +++++++++--------- ...nage-organizational-unit.component.spec.ts | 9 +- .../manage-organizational-unit.component.ts | 52 ++- 3 files changed, 221 insertions(+), 177 deletions(-) diff --git a/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.html b/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.html index 52d1291..c5a785f 100644 --- a/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.html +++ b/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.html @@ -1,172 +1,177 @@ -

{{ isEditMode ? 'Editar' : 'Crear' }} Unidad Organizativa

-
- - General -
- - Tipo - - - {{ typeTranslations[type] }} - - - - - Nombre - - - - Padre - - - {{ getSelectedParentName() }} - - -
{{ unit.name }}
-
{{ unit.path }}
- - - + - - Descripción - - +
+

{{ isEditMode ? 'Editar' : 'Crear' }} Unidad Organizativa

+
+ + General + + + Tipo + + + {{ typeTranslations[type] }} + + + + + Nombre + + + + Padre + + + {{ getSelectedParentName() }} + + +
{{ unit.name }}
+
{{ unit.path }}
+ + + - - {{ 'excludeParentChanges' | translate }} - - + + Descripción + + - - Información del aula -
- - Localización - - - - Aforo - - - El aforo no puede ser negativo - - - - Calendario Asociado - - - {{ calendar.name }} - - - -
- Proyector - Pizarra -
-
+ + {{ 'excludeParentChanges' | translate }} + + - - Configuración de Red -
- - OgLive - - - {{ oglive.name }} - - - - - Repositorio - - - {{ repository.name }} - - - - - Proxy - - - - DNS - - - - Máscara de Red - - - - Router - - - - NTP - - - - Modo P2P - - - {{ option.name }} - - - - - Tiempo P2P - - - - Mcast IP - - - - Mcast Speed - - - - Mcast Port - - - - Mcast Mode - - - {{ option.name }} - - - - - Menu - - - {{ menu.name }} - - - - - Perfil de Hardware - - {{ unit.description - }} - - Formato de URL incorrecto - -
+ + Información del aula +
+ + Localización + + + + Aforo + + + El aforo no puede ser negativo + + + + Calendario Asociado + + + {{ calendar.name }} + + + +
+ Proyector + Pizarra +
+
- - Información Adicional -
- - Comentarios - - -
-
-
- - + + Configuración de Red +
+ + OgLive + + + {{ oglive.name }} + + + + + Repositorio + + + {{ repository.name }} + + + + + Proxy + + + + DNS + + + + Máscara de Red + + + + Router + + + + NTP + + + + Modo P2P + + + {{ option.name }} + + + + + Tiempo P2P + + + + Mcast IP + + + + Mcast Speed + + + + Mcast Port + + + + Mcast Mode + + + {{ option.name }} + + + + + Menu + + + {{ menu.name }} + + + + + Perfil de Hardware + + {{ unit.description + }} + + Formato de URL incorrecto + +
+ + + Información Adicional +
+ + Comentarios + + +
+
+
+ + +
\ No newline at end of file diff --git a/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.spec.ts b/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.spec.ts index 53a8360..1e1ea2a 100644 --- a/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.spec.ts +++ b/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,14 +31,15 @@ describe('ManageOrganizationalUnitComponent', () => { MatSlideToggleModule, MatCheckboxModule, TranslateModule.forRoot(), - BrowserAnimationsModule + BrowserAnimationsModule, + MatProgressSpinnerModule ], providers: [ { provide: MatDialogRef, useValue: {} }, { provide: MAT_DIALOG_DATA, useValue: {} } ] }) - .compileComponents(); + .compileComponents(); fixture = TestBed.createComponent(ManageOrganizationalUnitComponent); component = fixture.componentInstance; diff --git a/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.ts b/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.ts index b64a9a9..e99f7d3 100644 --- a/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.ts +++ b/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(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(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(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(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(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(); } );