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

refs #1901. Fixed manage-ou component. Added spinner
testing/ogGui-multibranch/pipeline/head There was a failure building this commit Details

pull/19/head
Manuel Aranda Rosales 2025-04-11 11:14:04 +02:00
parent c365ef2a14
commit 2958e05c98
3 changed files with 205 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,6 +6,10 @@ h1 {
margin-top: 20px; margin-top: 20px;
} }
.create-ou-container {
position: relative;
}
.form-field { .form-field {
width: 100%; width: 100%;
} }
@ -20,6 +24,13 @@ h1 {
overflow-y: auto; overflow-y: auto;
} }
.loading-spinner {
display: block;
margin: 0 auto;
align-items: center;
justify-content: center;
}
.mat-dialog-actions { .mat-dialog-actions {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@ -55,4 +66,4 @@ h1 {
align-items: center; align-items: center;
grid-column: span 2; grid-column: span 2;
margin-bottom: 10px; margin-bottom: 10px;
} }

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

@ -1,11 +1,10 @@
<app-loading [isLoading]="loading"></app-loading> <div class="create-ou-container">
<div *ngIf="!loading">
<h1 mat-dialog-title>{{ isEditMode ? 'Editar' : 'Crear' }} Unidad Organizativa</h1> <h1 mat-dialog-title>{{ isEditMode ? 'Editar' : 'Crear' }} Unidad Organizativa</h1>
<div class="mat-dialog-content"> <div class="mat-dialog-content" [ngClass]="{'loading': loading}">
<!-- Paso 1: General --> <!-- Paso 1: General -->
<span class="step-title">General</span> <mat-spinner class="loading-spinner" *ngIf="loading"></mat-spinner>
<form [formGroup]="generalFormGroup" class="grid-form"> <span *ngIf="!loading" class="step-title">General</span>
<form *ngIf="generalFormGroup && !loading" [formGroup]="generalFormGroup" class="grid-form">
<mat-form-field class="form-field" appearance="fill"> <mat-form-field class="form-field" appearance="fill">
<mat-label>Tipo</mat-label> <mat-label>Tipo</mat-label>
<mat-select formControlName="type" required> <mat-select formControlName="type" required>
@ -42,8 +41,8 @@
</form> </form>
<!-- Paso 2: Información del Aula --> <!-- Paso 2: Información del Aula -->
<span *ngIf="generalFormGroup.value.type === 'classroom'" class="step-title">Información del aula</span> <span *ngIf="generalFormGroup.value.type === 'classroom' && !loading" class="step-title">Información del aula</span>
<form *ngIf="generalFormGroup.value.type === 'classroom'" class="grid-form" <form *ngIf="generalFormGroup.value.type === 'classroom' && !loading" class="grid-form"
[formGroup]="classroomInfoFormGroup"> [formGroup]="classroomInfoFormGroup">
<mat-form-field class="form-field"> <mat-form-field class="form-field">
<mat-label>Localización</mat-label> <mat-label>Localización</mat-label>
@ -71,8 +70,8 @@
</form> </form>
<!-- Paso 3: Configuración de Red --> <!-- Paso 3: Configuración de Red -->
<span class="step-title">Configuración de Red</span> <span *ngIf="!loading" class="step-title">Configuración de Red</span>
<form [formGroup]="networkSettingsFormGroup" class="grid-form"> <form *ngIf="networkSettingsFormGroup && !loading" [formGroup]="networkSettingsFormGroup" class="grid-form">
<mat-form-field class="form-field"> <mat-form-field class="form-field">
<mat-label>OgLive</mat-label> <mat-label>OgLive</mat-label>
<mat-select formControlName="ogLive" (selectionChange)="onOgLiveChange($event)"> <mat-select formControlName="ogLive" (selectionChange)="onOgLiveChange($event)">
@ -168,8 +167,8 @@
</form> </form>
<!-- Paso 4: Información Adicional --> <!-- Paso 4: Información Adicional -->
<span class="step-title">Información Adicional</span> <span *ngIf="!loading" class="step-title">Información Adicional</span>
<form [formGroup]="additionalInfoFormGroup"> <form *ngIf="additionalInfoFormGroup && !loading" [formGroup]="additionalInfoFormGroup">
<mat-form-field class="form-field"> <mat-form-field class="form-field">
<mat-label>Comentarios</mat-label> <mat-label>Comentarios</mat-label>
<textarea matInput formControlName="comments"></textarea> <textarea matInput formControlName="comments"></textarea>

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

@ -100,63 +100,76 @@ export class ManageOrganizationalUnitComponent implements OnInit {
capacity: [null, [Validators.required, Validators.min(0)]], capacity: [null, [Validators.required, Validators.min(0)]],
remoteCalendar: [null] remoteCalendar: [null]
}); });
if (this.isEditMode) {
this.loadData(data.uuid);
}
} }
ngOnInit() { ngOnInit(): void {
this.loadParentUnits(); this.loading = true;
this.loadHardwareProfiles(); const observables = [
this.loadCalendars(); this.loadParentUnits(),
this.loadOgLives(); this.loadHardwareProfiles(),
this.loadRepositories(); this.loadCalendars(),
this.loadMenus() this.loadOgLives(),
this.loadRepositories(),
this.loadMenus(),
];
Promise.all(observables).then(() => {
if (this.isEditMode) {
this.loadData(this.data.uuid).then(() => {
this.loading = false;
});
} else {
this.loading = false;
}
}).catch(error => {
console.error('Error loading data:', error);
this.loading = false;
});
} }
get filteredTypes(): string[] { get filteredTypes(): string[] {
return this.generalFormGroup.get('parent')?.value ? this.types.filter(type => type !== 'organizational-unit') : this.types; return this.generalFormGroup.get('parent')?.value ? this.types.filter(type => type !== 'organizational-unit') : this.types;
} }
loadParentUnits() { loadParentUnits(): Promise<void> {
this.loading = true; return new Promise((resolve, reject) => {
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 => {
this.parentUnits = response['hydra:member']; this.parentUnits = response['hydra:member'];
this.parentUnitsWithPaths = this.parentUnits.map(unit => ({ this.parentUnitsWithPaths = this.parentUnits.map(unit => ({
id: unit['@id'], id: unit['@id'],
name: unit.name, name: unit.name,
path: this.dataService.getOrganizationalUnitPath(unit, this.parentUnits), path: this.dataService.getOrganizationalUnitPath(unit, this.parentUnits),
repository: unit.networkSettings?.repository?.['@id'], repository: unit.networkSettings?.repository?.['@id'],
hardwareProfile: unit.networkSettings?.hardwareProfile?.['@id'], hardwareProfile: unit.networkSettings?.hardwareProfile?.['@id'],
ogLive: unit.networkSettings?.ogLive?.['@id'], ogLive: unit.networkSettings?.ogLive?.['@id'],
menu: unit.networkSettings?.menu?.['@id'], menu: unit.networkSettings?.menu?.['@id'],
mcastIp: unit.networkSettings?.mcastIp, mcastIp: unit.networkSettings?.mcastIp,
mcastSpeed: unit.networkSettings?.mcastSpeed, mcastSpeed: unit.networkSettings?.mcastSpeed,
mcastPort: unit.networkSettings?.mcastPort, mcastPort: unit.networkSettings?.mcastPort,
mcastMode: unit.networkSettings?.mcastMode, mcastMode: unit.networkSettings?.mcastMode,
netiface: unit.networkSettings?.netiface, netiface: unit.networkSettings?.netiface,
p2pMode: unit.networkSettings?.p2pMode, p2pMode: unit.networkSettings?.p2pMode,
p2pTime: unit.networkSettings?.p2pTime, p2pTime: unit.networkSettings?.p2pTime,
dns: unit.networkSettings?.dns, dns: unit.networkSettings?.dns,
netmask: unit.networkSettings?.netmask, netmask: unit.networkSettings?.netmask,
router: unit.networkSettings?.router, router: unit.networkSettings?.router,
ntp: unit.networkSettings?.ntp ntp: unit.networkSettings?.ntp
})); }));
const initialUnitId = this.generalFormGroup.get('parent')?.value; const initialUnitId = this.generalFormGroup.get('parent')?.value;
if (initialUnitId) { if (initialUnitId) {
this.setOrganizationalUnitDefaults(initialUnitId); this.setOrganizationalUnitDefaults(initialUnitId);
}
resolve();
},
error => {
console.error('Error fetching parent units:', error);
reject(error);
} }
this.loading = false; );
}, });
error => {
console.error('Error fetching parent units:', error);
this.loading = false;
}
);
} }
onParentChange(event: any): void { onParentChange(event: any): void {
@ -191,78 +204,87 @@ export class ManageOrganizationalUnitComponent implements OnInit {
return this.parentUnitsWithPaths.find(unit => unit.id === parentId)?.name; return this.parentUnitsWithPaths.find(unit => unit.id === parentId)?.name;
} }
loadHardwareProfiles(): void { loadHardwareProfiles(): Promise<void> {
this.loading = true; return new Promise((resolve, reject) => {
this.dataService.getHardwareProfiles().subscribe( this.dataService.getHardwareProfiles().subscribe(
(data: any[]) => { (data: any[]) => {
this.hardwareProfiles = data; this.hardwareProfiles = data;
this.loading = false; resolve();
}, },
(error: any) => { error => {
console.error('Error fetching hardware profiles', error); console.error('Error fetching hardware profiles:', error);
this.loading = false; reject(error);
} }
); );
});
} }
loadMenus(): void { loadOgLives(): Promise<void> {
this.loading = true; return new Promise((resolve, reject) => {
const url = `${this.baseUrl}/menus?page=1&itemsPerPage=10000`; const url = `${this.baseUrl}/og-lives?page=1&itemsPerPage=30`;
this.http.get<any>(url).subscribe( this.http.get<any>(url).subscribe(
response => { response => {
this.menus = response['hydra:member']; this.ogLives = response['hydra:member'];
this.loading = false; resolve();
}, },
error => { error => {
console.error('Error fetching menus:', error); console.error('Error fetching ogLives:', error);
this.loading = false; reject(error);
} }
); );
});
} }
loadOgLives() { loadMenus(): Promise<void> {
this.loading = true; return new Promise((resolve, reject) => {
this.dataService.getOgLives().subscribe( const url = `${this.baseUrl}/menus?page=1&itemsPerPage=10000`;
(data: any[]) => {
this.ogLives = data; this.http.get<any>(url).subscribe(
this.loading = false; response => {
}, this.menus = response['hydra:member'];
error => { resolve();
console.error('Error fetching ogLives', error); },
this.loading = false; error => {
} console.error('Error fetching menus:', error);
); reject(error);
}
);
});
} }
loadRepositories() { loadRepositories(): Promise<void> {
this.loading = true; return new Promise((resolve, reject) => {
this.dataService.getRepositories().subscribe( const url = `${this.baseUrl}/image-repositories?page=1&itemsPerPage=10000`;
(data: any[]) => {
this.repositories = data; this.http.get<any>(url).subscribe(
this.loading = false; response => {
}, this.repositories = response['hydra:member'];
error => { resolve();
console.error('Error fetching repositories', error); },
this.loading = false; error => {
} console.error('Error fetching ogLives:', error);
); reject(error);
}
);
});
} }
loadCalendars() { loadCalendars(): Promise<void> {
this.loading = true; return new Promise((resolve, reject) => {
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 => { response => {
this.calendars = response['hydra:member']; this.calendars = response['hydra:member'];
this.loading = false; resolve();
}, },
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; reject(error);
} }
); );
});
} }
loadCurrentCalendar(uuid: string): void { loadCurrentCalendar(uuid: string): void {
@ -293,57 +315,58 @@ export class ManageOrganizationalUnitComponent implements OnInit {
this.networkSettingsFormGroup.value.repository = event.value; this.networkSettingsFormGroup.value.repository = event.value;
} }
loadData(uuid: string) { loadData(uuid: string): Promise<void> {
this.loading = true; return new Promise((resolve, reject) => {
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(
data => { data => {
this.generalFormGroup.patchValue({ this.generalFormGroup.patchValue({
name: data.name, name: data.name,
parent: data.parent ? data.parent['@id'] : '', parent: data.parent ? data.parent['@id'] : '',
description: data.description, description: data.description,
type: data.type, type: data.type,
excludeParentChanges: data.excludeParentChanges excludeParentChanges: data.excludeParentChanges
}); });
this.additionalInfoFormGroup.patchValue({ this.additionalInfoFormGroup.patchValue({
comments: data.comments comments: data.comments
}); });
this.networkSettingsFormGroup.patchValue({ this.networkSettingsFormGroup.patchValue({
proxy: data.networkSettings.proxy, proxy: data.networkSettings?.proxy,
dns: data.networkSettings.dns, dns: data.networkSettings?.dns,
netmask: data.networkSettings.netmask, netmask: data.networkSettings?.netmask,
router: data.networkSettings.router, router: data.networkSettings?.router,
ntp: data.networkSettings.ntp, ntp: data.networkSettings?.ntp,
netiface: data.networkSettings.netiface, netiface: data.networkSettings?.netiface,
p2pMode: data.networkSettings.p2pMode, p2pMode: data.networkSettings?.p2pMode,
p2pTime: data.networkSettings.p2pTime, p2pTime: data.networkSettings?.p2pTime,
mcastIp: data.networkSettings.mcastIp, mcastIp: data.networkSettings?.mcastIp,
mcastSpeed: data.networkSettings.mcastSpeed, mcastSpeed: data.networkSettings?.mcastSpeed,
mcastPort: data.networkSettings.mcastPort, mcastPort: data.networkSettings?.mcastPort,
mcastMode: data.networkSettings.mcastMode, mcastMode: data.networkSettings?.mcastMode,
menu: data.networkSettings.menu ? data.networkSettings.menu['@id'] : null, menu: data.networkSettings?.menu ? data.networkSettings.menu['@id'] : null,
hardwareProfile: data.networkSettings.hardwareProfile ? data.networkSettings.hardwareProfile['@id'] : null, hardwareProfile: data.networkSettings?.hardwareProfile ? data.networkSettings.hardwareProfile['@id'] : null,
ogLive: data.networkSettings.ogLive ? data.networkSettings.ogLive['@id'] : null, ogLive: data.networkSettings?.ogLive ? data.networkSettings.ogLive['@id'] : null,
repository: data.networkSettings.repository ? data.networkSettings.repository['@id'] : null repository: data.networkSettings?.repository ? data.networkSettings.repository['@id'] : null
}); });
this.classroomInfoFormGroup.patchValue({ this.classroomInfoFormGroup.patchValue({
location: data.location, location: data.location,
projector: data.projector, projector: data.projector,
board: data.board, board: data.board,
capacity: data.capacity, capacity: data.capacity,
remoteCalendar: data.remoteCalendar ? data.remoteCalendar['@id'] : null remoteCalendar: data.remoteCalendar ? data.remoteCalendar['@id'] : null
}); });
this.loading = false; resolve();
}, },
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; reject(error);
this.onNoClick(); this.onNoClick();
} }
); );
});
} }
onSubmit() { onSubmit() {