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>
<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>
<app-loading [isLoading]="loading"></app-loading>
<mat-form-field class="form-field description-form-field" appearance="fill">
<mat-label>Descripción</mat-label>
<textarea matInput formControlName="description"></textarea>
</mat-form-field>
<div *ngIf="!loading">
<h1 mat-dialog-title>{{ isEditMode ? 'Editar' : 'Crear' }} Unidad Organizativa</h1>
<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-checkbox formControlName="excludeParentChanges">
{{ 'excludeParentChanges' | translate }}
</mat-checkbox>
</form>
<mat-form-field class="form-field description-form-field" appearance="fill">
<mat-label>Descripción</mat-label>
<textarea matInput formControlName="description"></textarea>
</mat-form-field>
<!-- 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">
<mat-form-field class="form-field">
<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>
<mat-checkbox formControlName="excludeParentChanges">
{{ 'excludeParentChanges' | translate }}
</mat-checkbox>
</form>
<!-- Paso 3: Configuración de Red -->
<span class="step-title">Configuración de Red</span>
<form [formGroup]="networkSettingsFormGroup" class="grid-form">
<mat-form-field class="form-field">
<mat-label>OgLive</mat-label>
<mat-select formControlName="ogLive" (selectionChange)="onOgLiveChange($event)">
<mat-option *ngFor="let oglive of ogLives" [value]="oglive['@id']">
{{ oglive.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Repositorio</mat-label>
<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 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">
<mat-form-field class="form-field">
<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 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>
<!-- Paso 3: Configuración de Red -->
<span class="step-title">Configuración de Red</span>
<form [formGroup]="networkSettingsFormGroup" class="grid-form">
<mat-form-field class="form-field">
<mat-label>OgLive</mat-label>
<mat-select formControlName="ogLive" (selectionChange)="onOgLiveChange($event)">
<mat-option *ngFor="let oglive of ogLives" [value]="oglive['@id']">
{{ oglive.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="form-field">
<mat-label>Repositorio</mat-label>
<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>

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 { 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;

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();
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();
}
);