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

refs #1419 and #1420. Fix OU's path in clients' and OUs' form. Remove stepper from forms.
testing/ogGui-multibranch/pipeline/head This commit looks good Details

pull/12/head
Lucas Lara García 2025-01-31 14:09:14 +01:00
parent f092754464
commit b81db79237
11 changed files with 380 additions and 346 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ogWebconsole/src/app/components/groups/services/data.service.ts
View File

@ -231,5 +231,15 @@ export class DataService {
);
}
getOrganizationalUnitPath(unit: UnidadOrganizativa, units: UnidadOrganizativa[]): string {
const path: string[] = [];
let currentUnit: UnidadOrganizativa | undefined = unit;
while (currentUnit) {
path.unshift(currentUnit.name);
currentUnit = units.find(u => u['@id'] === currentUnit?.parent?.['@id']);
}
return path.join(' / ');
}
}

7
ogWebconsole/src/app/components/groups/shared/clients/create-client/create-client.component.html
View File

@ -6,9 +6,12 @@
<mat-form-field class="form-field">
<mat-label i18n="@@organizational-unit-label">Padre</mat-label>
<mat-select formControlName="organizationalUnit">
<mat-option *ngFor="let unit of parentUnits" [value]="unit['@id']">
<mat-select-trigger>
{{ getSelectedParentName() }}
</mat-select-trigger>
<mat-option *ngFor="let unit of parentUnitsWithPaths" [value]="unit.id">
<div class="unit-name">{{ unit.name }}</div>
<div class="unit-path">{{ unit.path }}</div>
<div style="font-size: smaller; color: gray;">{{ unit.path }}</div>
</mat-option>
</mat-select>
</mat-form-field>

11
ogWebconsole/src/app/components/groups/shared/clients/create-client/create-client.component.ts
View File

@ -15,6 +15,7 @@ export class CreateClientComponent implements OnInit {
baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
clientForm!: FormGroup;
parentUnits: any[] = [];
parentUnitsWithPaths: { id: string, name: string, path: string }[] = [];
hardwareProfiles: any[] = [];
ogLives: any[] = [];
menus: any[] = [];
@ -80,6 +81,11 @@ export class CreateClientComponent implements OnInit {
this.http.get<any>(url).subscribe(
response => {
this.parentUnits = response['hydra:member'];
this.parentUnitsWithPaths = this.parentUnits.map(unit => ({
id: unit['@id'],
name: unit.name,
path: this.dataService.getOrganizationalUnitPath(unit, this.parentUnits)
}));
this.loading = false;
},
error => {
@ -89,6 +95,11 @@ export class CreateClientComponent implements OnInit {
);
}
getSelectedParentName(): string | undefined {
const parentId = this.clientForm.get('organizationalUnit')?.value;
return this.parentUnitsWithPaths.find(unit => unit.id === parentId)?.name;
}
loadHardwareProfiles(): void {
this.dataService.getHardwareProfiles().subscribe(
(data: any[]) => {

6
ogWebconsole/src/app/components/groups/shared/clients/create-multiple-client/create-multiple-client.component.html
View File

@ -7,8 +7,12 @@
<mat-form-field class="form-field">
<mat-label>{{ 'organizationalUnitLabel' | translate }}</mat-label>
<mat-select (selectionChange)="setOrganizationalUnit($event)" [value]="organizationalUnit">
<mat-option *ngFor="let unit of parentUnits" [value]="unit['@id']">
<mat-select-trigger>
{{ getSelectedParentName() }}
</mat-select-trigger>
<mat-option *ngFor="let unit of parentUnitsWithPaths" [value]="unit.id">
<div class="unit-name">{{ unit.name }}</div>
<div style="font-size: smaller; color: gray;">{{ unit.path }}</div>
</mat-option>
</mat-select>
</mat-form-field>

16
ogWebconsole/src/app/components/groups/shared/clients/create-multiple-client/create-multiple-client.component.ts
View File

@ -4,6 +4,7 @@ import {HttpClient} from "@angular/common/http";
import {MatSnackBar} from "@angular/material/snack-bar";
import {ToastrService} from "ngx-toastr";
import {MAT_DIALOG_DATA} from "@angular/material/dialog";
import { DataService } from '../../../services/data.service';
@Component({
selector: 'app-create-multiple-client',
@ -13,6 +14,7 @@ import {MAT_DIALOG_DATA} from "@angular/material/dialog";
export class CreateMultipleClientComponent implements OnInit{
baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
parentUnits: any[] = [];
parentUnitsWithPaths: { id: string, name: string, path: string }[] = [];
uploadedClients: any[] = [];
loading: boolean = false;
displayedColumns: string[] = ['name', 'ip', 'mac'];
@ -25,7 +27,8 @@ export class CreateMultipleClientComponent implements OnInit{
@Inject(MAT_DIALOG_DATA) private data: any,
private http: HttpClient,
private snackBar: MatSnackBar,
private toastService: ToastrService
private toastService: ToastrService,
private dataService: DataService
) {}
ngOnInit(): void {
@ -43,6 +46,11 @@ export class CreateMultipleClientComponent implements OnInit{
this.http.get<any>(url).subscribe(
response => {
this.parentUnits = response['hydra:member'];
this.parentUnitsWithPaths = this.parentUnits.map(unit => ({
id: unit['@id'],
name: unit.name,
path: this.dataService.getOrganizationalUnitPath(unit, this.parentUnits)
}));
this.loading = false;
},
error => {
@ -52,8 +60,12 @@ export class CreateMultipleClientComponent implements OnInit{
);
}
getSelectedParentName(): string | undefined {
const parentId = this.organizationalUnit;
return this.parentUnitsWithPaths.find(unit => unit.id === parentId)?.name;
}
setOrganizationalUnit(organizationalUnit: any): void {
console.log('Organizational unit selected:', organizationalUnit.value);
this.organizationalUnit = organizationalUnit.value;
}

8
ogWebconsole/src/app/components/groups/shared/clients/edit-client/edit-client.component.html
View File

@ -6,8 +6,12 @@
<mat-form-field class="form-field">
<mat-label>{{ 'organizationalUnitLabel' | translate }}</mat-label>
<mat-select formControlName="organizationalUnit">
<mat-option *ngFor="let unit of parentUnits" [value]="unit['@id']">
{{ unit.name }}
<mat-select-trigger>
{{ getSelectedParentName() }}
</mat-select-trigger>
<mat-option *ngFor="let unit of parentUnitsWithPaths" [value]="unit.id">
<div class="unit-name">{{ unit.name }}</div>
<div style="font-size: smaller; color: gray;">{{ unit.path }}</div>
</mat-option>
</mat-select>
</mat-form-field>

16
ogWebconsole/src/app/components/groups/shared/clients/edit-client/edit-client.component.ts
View File

@ -15,6 +15,7 @@ export class EditClientComponent {
baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
clientForm!: FormGroup;
parentUnits: any[] = [];
parentUnitsWithPaths: { id: string, name: string, path: string }[] = [];
hardwareProfiles: any[] = [];
repositories: any[] = [];
ogLives: any[] = [];
@ -68,19 +69,32 @@ export class EditClientComponent {
});
}
loadParentUnits() {
loadParentUnits(): void {
this.loading = true;
const url = `${this.baseUrl}/organizational-units?page=1&itemsPerPage=10000`;
this.http.get<any>(url).subscribe(
response => {
this.parentUnits = response['hydra:member'];
this.parentUnitsWithPaths = this.parentUnits.map(unit => ({
id: unit['@id'],
name: unit.name,
path: this.dataService.getOrganizationalUnitPath(unit, this.parentUnits)
}));
this.loading = false;
},
error => {
console.error('Error fetching parent units:', error);
this.loading = false;
}
);
}
getSelectedParentName(): string | undefined {
const parentId = this.clientForm.get('organizationalUnit')?.value;
return this.parentUnitsWithPaths.find(unit => unit.id === parentId)?.name;
}
loadHardwareProfiles(): void {
this.dataService.getHardwareProfiles().subscribe(
(data: any[]) => {

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

@ -1,11 +1,7 @@
<h1 mat-dialog-title>{{ 'addOrgUnitTitle' | translate }}</h1>
<div mat-dialog-content>
<mat-stepper orientation="vertical" [linear]="isLinear">
<!-- Paso 1: General -->
<mat-step [stepControl]="generalFormGroup">
<form [formGroup]="generalFormGroup">
<ng-template matStepLabel>{{ 'generalStepLabel' | translate }}</ng-template>
<mat-form-field class="form-field">
<mat-label>{{ 'typeLabel' | translate }}</mat-label>
<mat-select formControlName="type" required>
@ -21,24 +17,23 @@
<mat-form-field class="form-field">
<mat-label>{{ 'createOrgUnitparentLabel' | translate }}</mat-label>
<mat-select formControlName="parent">
<mat-option>{{ 'noParentOption' | translate }}</mat-option>
<mat-option *ngFor="let unit of parentUnits" [value]="unit['@id']">{{ unit.name }}</mat-option>
<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">
<mat-label>{{ 'descriptionLabel' | translate }}</mat-label>
<textarea matInput formControlName="description"></textarea>
</mat-form-field>
<div>
<button mat-button matStepperNext>{{ 'nextButton' | translate }}</button>
</div>
</form>
</mat-step>
<!-- Paso 2: Información del Aula -->
<mat-step *ngIf="generalFormGroup.value.type === 'classroom'" [stepControl]="classroomInfoFormGroup">
<form [formGroup]="classroomInfoFormGroup">
<ng-template matStepLabel>{{ 'classroomInfoStepLabel' | translate }}</ng-template>
<form *ngIf="generalFormGroup.value.type === 'classroom'" [formGroup]="classroomInfoFormGroup">
<mat-form-field class="form-field">
<mat-label>{{ 'locationLabel' | translate }}</mat-label>
<input matInput formControlName="location">
@ -57,33 +52,18 @@
</mat-option>
</mat-select>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>{{ 'backButton' | translate }}</button>
<button mat-button matStepperNext>{{ 'nextButton' | translate }}</button>
</div>
</form>
</mat-step>
<!-- Paso 3: Información Adicional -->
<mat-step [stepControl]="additionalInfoFormGroup">
<form [formGroup]="additionalInfoFormGroup">
<ng-template matStepLabel>{{ 'additionalInfoStepLabel' | translate }}</ng-template>
<mat-form-field class="form-field">
<mat-label>{{ 'commentsLabel' | translate }}</mat-label>
<textarea matInput formControlName="comments"></textarea>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>{{ 'backButton' | translate }}</button>
<button mat-button matStepperNext>{{ 'nextButton' | translate }}</button>
</div>
</form>
</mat-step>
<!-- Paso 4: Configuración de Red -->
<mat-step *ngIf="generalFormGroup.value.type === 'classroom'" [stepControl]="networkSettingsFormGroup">
<form [formGroup]="networkSettingsFormGroup">
<ng-template matStepLabel>{{ 'networkSettingsStepLabel' | translate }}</ng-template>
<form *ngIf="generalFormGroup.value.type === 'classroom' || generalFormGroup.value.type === 'clients-group'" [formGroup]="networkSettingsFormGroup">
<mat-form-field class="form-field">
<mat-label>{{ 'ogLiveLabel' | translate }}</mat-label>
<mat-select formControlName="oglive" (selectionChange)="onOgLiveChange($event)">
@ -173,8 +153,6 @@
<mat-error>{{ 'urlFormatError' | translate }}</mat-error>
</mat-form-field>
</form>
</mat-step>
</mat-stepper>
</div>
<div mat-dialog-actions align="end">
<button mat-button (click)="onNoClick()">{{ 'cancelButton' | translate }}</button>

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

@ -39,7 +39,7 @@ export class CreateOrganizationalUnitComponent implements OnInit {
ogLives: any[] = [];
repositories: any[] = [];
selectedCalendarUuid: string | null = null;
parentUnitsWithPaths: { id: string, name: string, path: string }[] = [];
@Output() unitAdded = new EventEmitter<{ uuid: string; name: string }>();
@ -104,11 +104,23 @@ export class CreateOrganizationalUnitComponent implements OnInit {
loadParentUnits() {
const url = `${this.baseUrl}/organizational-units?page=1&itemsPerPage=1000`;
this.http.get<any>(url).subscribe(
response => this.parentUnits = response['hydra:member'],
response => {
this.parentUnits = response['hydra:member'];
this.parentUnitsWithPaths = this.parentUnits.map(unit => ({
id: unit['@id'],
name: unit.name,
path: this.dataService.getOrganizationalUnitPath(unit, this.parentUnits)
}));
},
error => console.error('Error fetching parent units:', error)
);
}
getSelectedParentName(): string | undefined {
const parentId = this.generalFormGroup.get('parent')?.value;
return this.parentUnitsWithPaths.find(unit => unit.id === parentId)?.name;
}
loadHardwareProfiles(): void {
this.dataService.getHardwareProfiles().subscribe(
(data: any[]) => this.hardwareProfiles = data,

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

@ -1,14 +1,13 @@
<h1 mat-dialog-title>{{ 'editOrgUnitTitle' | translate }}</h1>
<div mat-dialog-content>
<mat-stepper orientation="vertical" [linear]="isLinear">
<!-- Paso 1: General -->
<mat-step [stepControl]="generalFormGroup">
<form [formGroup]="generalFormGroup">
<ng-template matStepLabel>{{ 'generalStepLabel' | translate }}</ng-template>
<mat-form-field class="form-field">
<mat-label>{{ 'typeLabel' | translate }}</mat-label>
<mat-select formControlName="type" required>
<mat-option *ngFor="let type of filteredTypes" [value]="type">{{ typeTranslations[type] }}</mat-option>
<mat-option *ngFor="let type of filteredTypes" [value]="type">
{{ typeTranslations[type] }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="form-field">
@ -18,23 +17,23 @@
<mat-form-field class="form-field">
<mat-label>{{ 'editOrgUnitParentLabel' | translate }}</mat-label>
<mat-select formControlName="parent">
<mat-option *ngFor="let unit of parentUnits" [value]="unit['@id']">{{ unit.name }}</mat-option>
<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">
<mat-label>{{ 'descriptionLabel' | translate }}</mat-label>
<textarea matInput formControlName="description"></textarea>
</mat-form-field>
<div>
<button mat-button matStepperNext>{{ 'nextButton' | translate }}</button>
</div>
</form>
</mat-step>
<!-- Paso 2: Información del Aula -->
<mat-step *ngIf="generalFormGroup.value.type === 'classroom'" [stepControl]="classroomInfoFormGroup">
<form [formGroup]="classroomInfoFormGroup">
<ng-template matStepLabel>{{ 'classroomInfoStepLabel' | translate }}</ng-template>
<form *ngIf="generalFormGroup.value.type === 'classroom'" [formGroup]="classroomInfoFormGroup">
<mat-form-field class="form-field">
<mat-label>{{ 'locationLabel' | translate }}</mat-label>
<input matInput formControlName="location">
@ -45,7 +44,6 @@
<mat-label>{{ 'capacityLabel' | translate }}</mat-label>
<input matInput formControlName="capacity" type="number">
</mat-form-field>
<mat-form-field class="form-field" appearance="fill">
<mat-label>{{ 'associatedCalendarLabel' | translate }}</mat-label>
<mat-select formControlName="remoteCalendar" (selectionChange)="onCalendarChange($event)">
@ -54,33 +52,18 @@
</mat-option>
</mat-select>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>{{ 'backButton' | translate }}</button>
<button mat-button matStepperNext>{{ 'nextButton' | translate }}</button>
</div>
</form>
</mat-step>
<!-- Paso 3: Información Adicional -->
<mat-step [stepControl]="additionalInfoFormGroup">
<form [formGroup]="additionalInfoFormGroup">
<ng-template matStepLabel>{{ 'additionalInfoStepLabel' | translate }}</ng-template>
<mat-form-field class="form-field">
<mat-label>{{ 'commentsLabel' | translate }}</mat-label>
<textarea matInput formControlName="comments"></textarea>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>{{ 'backButton' | translate }}</button>
<button mat-button matStepperNext>{{ 'nextButton' | translate }}</button>
</div>
</form>
</mat-step>
<!-- Paso 4: Configuración de Red -->
<mat-step *ngIf="generalFormGroup.value.type === 'classroom' || generalFormGroup.value.type === 'clients-group'" [stepControl]="networkSettingsFormGroup">
<form [formGroup]="networkSettingsFormGroup">
<ng-template matStepLabel>{{ 'networkSettingsStepLabel' | translate }}</ng-template>
<form *ngIf="generalFormGroup.value.type === 'classroom' || generalFormGroup.value.type === 'clients-group'" [formGroup]="networkSettingsFormGroup">
<mat-form-field class="form-field">
<mat-label>{{ 'ogLiveLabel' | translate }}</mat-label>
<mat-select formControlName="ogLive" (selectionChange)="onOgLiveChange($event)">
@ -157,12 +140,7 @@
<mat-error>{{ 'urlFormatError' | translate }}</mat-error>
</mat-form-field>
<mat-slide-toggle formControlName="validation">{{ 'validationToggle' | translate }}</mat-slide-toggle>
<div>
<button mat-button matStepperPrevious>{{ 'backButton' | translate }}</button>
</div>
</form>
</mat-step>
</mat-stepper>
</div>
<div mat-dialog-actions align="end">
<button mat-button (click)="onNoClick()">{{ 'cancelButton' | translate }}</button>

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

@ -31,6 +31,7 @@ export class EditOrganizationalUnitComponent implements OnInit {
currentCalendar: any = [];
ogLives: any[] = [];
repositories: any[] = [];
parentUnitsWithPaths: { id: string, name: string, path: string }[] = [];
protected p2pModeOptions = [
{"name": 'Leecher', "value": "leecher"},
{"name": 'Peer', "value": "peer"},
@ -109,18 +110,25 @@ export class EditOrganizationalUnitComponent implements OnInit {
}
loadParentUnits() {
const url = `${this.baseUrl}/organizational-units?page=1&itemsPerPage=10000`;
const url = `${this.baseUrl}/organizational-units?page=1&itemsPerPage=1000`;
this.http.get<any>(url).subscribe(
response => {
this.parentUnits = response['hydra:member'];
this.parentUnitsWithPaths = this.parentUnits.map(unit => ({
id: unit['@id'],
name: unit.name,
path: this.dataService.getOrganizationalUnitPath(unit, this.parentUnits)
}));
},
error => {
console.error('Error fetching parent units:', error);
}
error => console.error('Error fetching parent units:', error)
);
}
getSelectedParentName(): string | undefined {
const parentId = this.generalFormGroup.get('parent')?.value;
return this.parentUnitsWithPaths.find(unit => unit.id === parentId)?.name;
}
loadHardwareProfiles(): void {
this.dataService.getHardwareProfiles().subscribe(
(data: any[]) => {