opengnsys
/
oggui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refs #1549. Add loading state management to ManageOrganizationalUnitComponent for improved user experience during data fetching
testing/ogGui-multibranch/pipeline/head This commit looks good Details

deb-pkg
Lucas Lara García 2025-02-24 16:13:29 +01:00
parent f1ddf20d0c
commit 1c4343bb48
3 changed files with 221 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,172 +1,177 @@
<h1 mat-dialog-title>{{ isEditMode ? 'Editar' : 'Crear' }} Unidad Organizativa</h1> <app-loading [isLoading]="loading"></app-loading>
<div class="mat-dialog-content">
<!-- Paso 1: General -->
<span class="step-title">General</span>
<form [formGroup]="generalFormGroup" class="grid-form">
<mat-form-field class="form-field" appearance="fill">
<mat-label>Tipo</mat-label>
<mat-select formControlName="type" required>
<mat-option *ngFor="let type of filteredTypes" [value]="type">
{{ typeTranslations[type] }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="form-field" appearance="fill">
<mat-label>Nombre</mat-label>
<input matInput formControlName="name" required>
</mat-form-field>
<mat-form-field class="form-field" appearance="fill">
<mat-label>Padre</mat-label>
<mat-select formControlName="parent">
<mat-select-trigger>
{{ getSelectedParentName() }}
</mat-select-trigger>
<mat-option *ngFor="let unit of parentUnitsWithPaths" [value]="unit.id">
<div>{{ unit.name }}</div>
<div style="font-size: smaller; color: gray;">{{ unit.path }}</div>
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="form-field description-form-field" appearance="fill"> <div *ngIf="!loading">
<mat-label>Descripción</mat-label> <h1 mat-dialog-title>{{ isEditMode ? 'Editar' : 'Crear' }} Unidad Organizativa</h1>
<textarea matInput formControlName="description"></textarea> <div class="mat-dialog-content">
</mat-form-field> <!-- Paso 1: General -->
<span class="step-title">General</span>
<form [formGroup]="generalFormGroup" class="grid-form">
<mat-form-field class="form-field" appearance="fill">
<mat-label>Tipo</mat-label>
<mat-select formControlName="type" required>
<mat-option *ngFor="let type of filteredTypes" [value]="type">
{{ typeTranslations[type] }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="form-field" appearance="fill">
<mat-label>Nombre</mat-label>
<input matInput formControlName="name" required>
</mat-form-field>
<mat-form-field class="form-field" appearance="fill">
<mat-label>Padre</mat-label>
<mat-select formControlName="parent">
<mat-select-trigger>
{{ getSelectedParentName() }}
</mat-select-trigger>
<mat-option *ngFor="let unit of parentUnitsWithPaths" [value]="unit.id">
<div>{{ unit.name }}</div>
<div style="font-size: smaller; color: gray;">{{ unit.path }}</div>
</mat-option>
</mat-select>
</mat-form-field>
<mat-checkbox formControlName="excludeParentChanges"> <mat-form-field class="form-field description-form-field" appearance="fill">
{{ 'excludeParentChanges' | translate }} <mat-label>Descripción</mat-label>
</mat-checkbox> <textarea matInput formControlName="description"></textarea>
</form> </mat-form-field>
<!-- Paso 2: Información del Aula --> <mat-checkbox formControlName="excludeParentChanges">
<span *ngIf="generalFormGroup.value.type === 'classroom'" class="step-title">Información del aula</span> {{ 'excludeParentChanges' | translate }}
<form *ngIf="generalFormGroup.value.type === 'classroom'" class="grid-form" [formGroup]="classroomInfoFormGroup"> </mat-checkbox>
<mat-form-field class="form-field"> </form>
<mat-label>Localización</mat-label>
<input matInput formControlName="location">
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Aforo</mat-label>
<input matInput formControlName="capacity" type="number" min="0">
<mat-error *ngIf="classroomInfoFormGroup.get('capacity')?.hasError('min')">
El aforo no puede ser negativo
</mat-error>
</mat-form-field>
<mat-form-field class="form-field" appearance="fill" style="grid-column: span 1;">
<mat-label>Calendario Asociado</mat-label>
<mat-select formControlName="remoteCalendar" (selectionChange)="onCalendarChange($event)">
<mat-option *ngFor="let calendar of calendars" [value]="calendar['@id']">
{{ calendar.name }}
</mat-option>
</mat-select>
</mat-form-field>
<div class="projector-board-field">
<mat-slide-toggle formControlName="projector">Proyector</mat-slide-toggle>
<mat-slide-toggle formControlName="board">Pizarra</mat-slide-toggle>
</div>
</form>
<!-- Paso 3: Configuración de Red --> <!-- Paso 2: Información del Aula -->
<span class="step-title">Configuración de Red</span> <span *ngIf="generalFormGroup.value.type === 'classroom'" class="step-title">Información del aula</span>
<form [formGroup]="networkSettingsFormGroup" class="grid-form"> <form *ngIf="generalFormGroup.value.type === 'classroom'" class="grid-form"
<mat-form-field class="form-field"> [formGroup]="classroomInfoFormGroup">
<mat-label>OgLive</mat-label> <mat-form-field class="form-field">
<mat-select formControlName="ogLive" (selectionChange)="onOgLiveChange($event)"> <mat-label>Localización</mat-label>
<mat-option *ngFor="let oglive of ogLives" [value]="oglive['@id']"> <input matInput formControlName="location">
{{ oglive.name }} </mat-form-field>
</mat-option> <mat-form-field class="form-field">
</mat-select> <mat-label>Aforo</mat-label>
</mat-form-field> <input matInput formControlName="capacity" type="number" min="0">
<mat-form-field class="form-field"> <mat-error *ngIf="classroomInfoFormGroup.get('capacity')?.hasError('min')">
<mat-label>Repositorio</mat-label> El aforo no puede ser negativo
<mat-select formControlName="repository" (selectionChange)="onRepositoryChange($event)"> </mat-error>
<mat-option *ngFor="let repository of repositories" [value]="repository['@id']"> </mat-form-field>
{{ repository.name }} <mat-form-field class="form-field" appearance="fill" style="grid-column: span 1;">
</mat-option> <mat-label>Calendario Asociado</mat-label>
</mat-select> <mat-select formControlName="remoteCalendar" (selectionChange)="onCalendarChange($event)">
</mat-form-field> <mat-option *ngFor="let calendar of calendars" [value]="calendar['@id']">
<mat-form-field class="form-field"> {{ calendar.name }}
<mat-label>Proxy</mat-label> </mat-option>
<input matInput formControlName="proxy"> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field class="form-field"> <div class="projector-board-field">
<mat-label>DNS</mat-label> <mat-slide-toggle formControlName="projector">Proyector</mat-slide-toggle>
<input matInput formControlName="dns"> <mat-slide-toggle formControlName="board">Pizarra</mat-slide-toggle>
</mat-form-field> </div>
<mat-form-field class="form-field"> </form>
<mat-label>Máscara de Red</mat-label>
<input matInput formControlName="netmask">
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Router</mat-label>
<input matInput formControlName="router">
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>NTP</mat-label>
<input matInput formControlName="ntp">
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Modo P2P</mat-label>
<mat-select formControlName="p2pMode">
<mat-option *ngFor="let option of p2pModeOptions" [value]="option.value">
{{ option.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Tiempo P2P</mat-label>
<input matInput formControlName="p2pTime" type="number">
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Mcast IP</mat-label>
<input matInput formControlName="mcastIp">
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Mcast Speed</mat-label>
<input matInput formControlName="mcastSpeed" type="number">
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Mcast Port</mat-label>
<input matInput formControlName="mcastPort" type="number">
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Mcast Mode</mat-label>
<mat-select formControlName="mcastMode">
<mat-option *ngFor="let option of multicastModeOptions" [value]="option.value">
{{ option.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Menu</mat-label>
<mat-select formControlName="menu">
<mat-option *ngFor="let menu of menus" [value]="menu['@id']">
{{ menu.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Perfil de Hardware</mat-label>
<mat-select formControlName="hardwareProfile">
<mat-option *ngFor="let unit of hardwareProfiles" [value]="unit['@id']">{{ unit.description
}}</mat-option>
</mat-select>
<mat-error>Formato de URL incorrecto</mat-error>
</mat-form-field>
</form>
<!-- Paso 4: Información Adicional --> <!-- Paso 3: Configuración de Red -->
<span class="step-title">Información Adicional</span> <span class="step-title">Configuración de Red</span>
<form [formGroup]="additionalInfoFormGroup"> <form [formGroup]="networkSettingsFormGroup" class="grid-form">
<mat-form-field class="form-field"> <mat-form-field class="form-field">
<mat-label>Comentarios</mat-label> <mat-label>OgLive</mat-label>
<textarea matInput formControlName="comments"></textarea> <mat-select formControlName="ogLive" (selectionChange)="onOgLiveChange($event)">
</mat-form-field> <mat-option *ngFor="let oglive of ogLives" [value]="oglive['@id']">
</form> {{ oglive.name }}
</div> </mat-option>
<div class="mat-dialog-actions"> </mat-select>
<button class="ordinary-button" (click)="onNoClick()">Cancelar</button> </mat-form-field>
<button class="submit-button" (click)="onSubmit()" <mat-form-field class="form-field">
[disabled]="!generalFormGroup.valid || !additionalInfoFormGroup.valid || !networkSettingsFormGroup.valid">{{ <mat-label>Repositorio</mat-label>
isEditMode ? 'Editar' : 'Crear' }}</button> <mat-select formControlName="repository" (selectionChange)="onRepositoryChange($event)">
<mat-option *ngFor="let repository of repositories" [value]="repository['@id']">
{{ repository.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Proxy</mat-label>
<input matInput formControlName="proxy">
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>DNS</mat-label>
<input matInput formControlName="dns">
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Máscara de Red</mat-label>
<input matInput formControlName="netmask">
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Router</mat-label>
<input matInput formControlName="router">
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>NTP</mat-label>
<input matInput formControlName="ntp">
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Modo P2P</mat-label>
<mat-select formControlName="p2pMode">
<mat-option *ngFor="let option of p2pModeOptions" [value]="option.value">
{{ option.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Tiempo P2P</mat-label>
<input matInput formControlName="p2pTime" type="number">
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Mcast IP</mat-label>
<input matInput formControlName="mcastIp">
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Mcast Speed</mat-label>
<input matInput formControlName="mcastSpeed" type="number">
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Mcast Port</mat-label>
<input matInput formControlName="mcastPort" type="number">
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Mcast Mode</mat-label>
<mat-select formControlName="mcastMode">
<mat-option *ngFor="let option of multicastModeOptions" [value]="option.value">
{{ option.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Menu</mat-label>
<mat-select formControlName="menu">
<mat-option *ngFor="let menu of menus" [value]="menu['@id']">
{{ menu.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Perfil de Hardware</mat-label>
<mat-select formControlName="hardwareProfile">
<mat-option *ngFor="let unit of hardwareProfiles" [value]="unit['@id']">{{ unit.description
}}</mat-option>
</mat-select>
<mat-error>Formato de URL incorrecto</mat-error>
</mat-form-field>
</form>
<!-- Paso 4: Información Adicional -->
<span class="step-title">Información Adicional</span>
<form [formGroup]="additionalInfoFormGroup">
<mat-form-field class="form-field">
<mat-label>Comentarios</mat-label>
<textarea matInput formControlName="comments"></textarea>
</mat-form-field>
</form>
</div>
<div class="mat-dialog-actions">
<button class="ordinary-button" (click)="onNoClick()">Cancelar</button>
<button class="submit-button" (click)="onSubmit()"
[disabled]="!generalFormGroup.valid || !additionalInfoFormGroup.valid || !networkSettingsFormGroup.valid">{{
isEditMode ? 'Editar' : 'Crear' }}</button>
</div>
</div> </div>

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

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

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

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