From b81db7923729c5743772f5231e8d042683ccf542 Mon Sep 17 00:00:00 2001
From: Lucas Lara <llara@localhost>
Date: Fri, 31 Jan 2025 14:09:14 +0100
Subject: [PATCH] refs #1419 and #1420. Fix OU's path in clients' and OUs'
 form. Remove stepper from forms.

---
 .../groups/services/data.service.ts           |  10 +
 .../create-client.component.html              |   7 +-
 .../create-client/create-client.component.ts  |  11 +
 .../create-multiple-client.component.html     |   6 +-
 .../create-multiple-client.component.ts       |  16 +-
 .../edit-client/edit-client.component.html    |   8 +-
 .../edit-client/edit-client.component.ts      |  16 +-
 .../create-organizational-unit.component.html | 320 ++++++++----------
 .../create-organizational-unit.component.ts   |  16 +-
 .../edit-organizational-unit.component.html   | 298 ++++++++--------
 .../edit-organizational-unit.component.ts     |  18 +-
 11 files changed, 380 insertions(+), 346 deletions(-)

diff --git a/ogWebconsole/src/app/components/groups/services/data.service.ts b/ogWebconsole/src/app/components/groups/services/data.service.ts
index 997c149..34b0bc3 100644
--- a/ogWebconsole/src/app/components/groups/services/data.service.ts
+++ b/ogWebconsole/src/app/components/groups/services/data.service.ts
@@ -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(' / ');
+  }
 }
diff --git a/ogWebconsole/src/app/components/groups/shared/clients/create-client/create-client.component.html b/ogWebconsole/src/app/components/groups/shared/clients/create-client/create-client.component.html
index 84e406d..3ef6251 100644
--- a/ogWebconsole/src/app/components/groups/shared/clients/create-client/create-client.component.html
+++ b/ogWebconsole/src/app/components/groups/shared/clients/create-client/create-client.component.html
@@ -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>
diff --git a/ogWebconsole/src/app/components/groups/shared/clients/create-client/create-client.component.ts b/ogWebconsole/src/app/components/groups/shared/clients/create-client/create-client.component.ts
index eb6a5a4..514893b 100644
--- a/ogWebconsole/src/app/components/groups/shared/clients/create-client/create-client.component.ts
+++ b/ogWebconsole/src/app/components/groups/shared/clients/create-client/create-client.component.ts
@@ -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[]) => {
diff --git a/ogWebconsole/src/app/components/groups/shared/clients/create-multiple-client/create-multiple-client.component.html b/ogWebconsole/src/app/components/groups/shared/clients/create-multiple-client/create-multiple-client.component.html
index b0f956f..1b34d9c 100644
--- a/ogWebconsole/src/app/components/groups/shared/clients/create-multiple-client/create-multiple-client.component.html
+++ b/ogWebconsole/src/app/components/groups/shared/clients/create-multiple-client/create-multiple-client.component.html
@@ -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>
diff --git a/ogWebconsole/src/app/components/groups/shared/clients/create-multiple-client/create-multiple-client.component.ts b/ogWebconsole/src/app/components/groups/shared/clients/create-multiple-client/create-multiple-client.component.ts
index 9720054..2e1617e 100644
--- a/ogWebconsole/src/app/components/groups/shared/clients/create-multiple-client/create-multiple-client.component.ts
+++ b/ogWebconsole/src/app/components/groups/shared/clients/create-multiple-client/create-multiple-client.component.ts
@@ -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;
   }
 
diff --git a/ogWebconsole/src/app/components/groups/shared/clients/edit-client/edit-client.component.html b/ogWebconsole/src/app/components/groups/shared/clients/edit-client/edit-client.component.html
index 663e8e0..7fb4fcc 100644
--- a/ogWebconsole/src/app/components/groups/shared/clients/edit-client/edit-client.component.html
+++ b/ogWebconsole/src/app/components/groups/shared/clients/edit-client/edit-client.component.html
@@ -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>
diff --git a/ogWebconsole/src/app/components/groups/shared/clients/edit-client/edit-client.component.ts b/ogWebconsole/src/app/components/groups/shared/clients/edit-client/edit-client.component.ts
index 1b05c2c..e53dd47 100644
--- a/ogWebconsole/src/app/components/groups/shared/clients/edit-client/edit-client.component.ts
+++ b/ogWebconsole/src/app/components/groups/shared/clients/edit-client/edit-client.component.ts
@@ -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[]) => {
diff --git a/ogWebconsole/src/app/components/groups/shared/organizational-units/create-organizational-unit/create-organizational-unit.component.html b/ogWebconsole/src/app/components/groups/shared/organizational-units/create-organizational-unit/create-organizational-unit.component.html
index 8375fd9..675c34c 100644
--- a/ogWebconsole/src/app/components/groups/shared/organizational-units/create-organizational-unit/create-organizational-unit.component.html
+++ b/ogWebconsole/src/app/components/groups/shared/organizational-units/create-organizational-unit/create-organizational-unit.component.html
@@ -1,180 +1,158 @@
 <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>
-            <mat-option *ngFor="let type of filteredTypes" [value]="type">
-              {{ typeTranslations[type] }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'nameLabel' | translate }}</mat-label>
-          <input matInput formControlName="name" required>
-        </mat-form-field>
-        <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>
-        </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 1: General -->
+  <form [formGroup]="generalFormGroup">
+    <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-select>
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'nameLabel' | translate }}</mat-label>
+      <input matInput formControlName="name" required>
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'createOrgUnitparentLabel' | translate }}</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">
+      <mat-label>{{ 'descriptionLabel' | translate }}</mat-label>
+      <textarea matInput formControlName="description"></textarea>
+    </mat-form-field>
+  </form>
 
-    <!-- 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>
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'locationLabel' | translate }}</mat-label>
-          <input matInput formControlName="location">
-        </mat-form-field>
-        <mat-slide-toggle formControlName="projector">{{ 'projectorToggle' | translate }}</mat-slide-toggle>
-        <mat-slide-toggle formControlName="board">{{ 'boardToggle' | translate }}</mat-slide-toggle>
-        <mat-form-field class="form-field">
-          <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)">
-            <mat-option *ngFor="let calendar of calendars" [value]="calendar['@id']">
-              {{ calendar.name }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
+  <!-- Paso 2: Información del Aula -->
+  <form *ngIf="generalFormGroup.value.type === 'classroom'" [formGroup]="classroomInfoFormGroup">
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'locationLabel' | translate }}</mat-label>
+      <input matInput formControlName="location">
+    </mat-form-field>
+    <mat-slide-toggle formControlName="projector">{{ 'projectorToggle' | translate }}</mat-slide-toggle>
+    <mat-slide-toggle formControlName="board">{{ 'boardToggle' | translate }}</mat-slide-toggle>
+    <mat-form-field class="form-field">
+      <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)">
+        <mat-option *ngFor="let calendar of calendars" [value]="calendar['@id']">
+          {{ calendar.name }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+  </form>
 
-        <div>
-          <button mat-button matStepperPrevious>{{ 'backButton' | translate }}</button>
-          <button mat-button matStepperNext>{{ 'nextButton' | translate }}</button>
-        </div>
-      </form>
-    </mat-step>
+  <!-- Paso 3: Información Adicional -->
+  <form [formGroup]="additionalInfoFormGroup">
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'commentsLabel' | translate }}</mat-label>
+      <textarea matInput formControlName="comments"></textarea>
+    </mat-form-field>
+  </form>
 
-    <!-- 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 -->
+  <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)">
+        <mat-option *ngFor="let oglive of ogLives" [value]="oglive['@id']">
+          {{ oglive.filename }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'repositoryLabel' | translate }}</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>{{ 'nextServerLabel' | translate }}</mat-label>
+      <input matInput formControlName="nextServer">
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'bootFileNameLabel' | translate }}</mat-label>
+      <input matInput formControlName="bootFileName">
+    </mat-form-field>
 
-    <!-- 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>
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'ogLiveLabel' | translate }}</mat-label>
-          <mat-select formControlName="oglive" (selectionChange)="onOgLiveChange($event)">
-            <mat-option *ngFor="let oglive of ogLives" [value]="oglive['@id']">
-              {{ oglive.filename }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'repositoryLabel' | translate }}</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>{{ 'nextServerLabel' | translate }}</mat-label>
-          <input matInput formControlName="nextServer">
-        </mat-form-field>
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'bootFileNameLabel' | translate }}</mat-label>
-          <input matInput formControlName="bootFileName">
-        </mat-form-field>
-
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'proxyUrlLabel' | translate }}</mat-label>
-          <input matInput formControlName="proxy">
-        </mat-form-field>
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'dnsIpLabel' | translate }}</mat-label>
-          <input matInput formControlName="dns">
-        </mat-form-field>
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'netmaskLabel' | translate }}</mat-label>
-          <input matInput formControlName="netmask">
-        </mat-form-field>
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'routerLabel' | translate }}</mat-label>
-          <input matInput formControlName="router">
-        </mat-form-field>
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'ntpIpLabel' | translate }}</mat-label>
-          <input matInput formControlName="ntp">
-        </mat-form-field>
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'p2pModeLabel' | translate }}</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>{{ 'p2pTimeLabel' | translate }}</mat-label>
-          <input matInput formControlName="p2pTime" type="number">
-        </mat-form-field>
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'mcastIpLabel' | translate }}</mat-label>
-          <input matInput formControlName="mcastIp">
-        </mat-form-field>
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'mcastSpeedLabel' | translate }}</mat-label>
-          <input matInput formControlName="mcastSpeed" type="number">
-        </mat-form-field>
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'mcastPortLabel' | translate }}</mat-label>
-          <input matInput formControlName="mcastPort" type="number">
-        </mat-form-field>
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'mcastModeLabel' | translate }}</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>{{ 'menuUrlLabel' | translate }}</mat-label>
-          <input matInput formControlName="menu" type="url">
-        </mat-form-field>
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'hardwareProfileLabel' | translate }}</mat-label>
-          <mat-select formControlName="hardwareProfile">
-            <mat-option *ngFor="let unit of hardwareProfiles" [value]="unit['@id']">{{ unit.description }}</mat-option>
-          </mat-select>
-          <mat-error>{{ 'urlFormatError' | translate }}</mat-error>
-        </mat-form-field>
-      </form>
-    </mat-step>
-  </mat-stepper>
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'proxyUrlLabel' | translate }}</mat-label>
+      <input matInput formControlName="proxy">
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'dnsIpLabel' | translate }}</mat-label>
+      <input matInput formControlName="dns">
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'netmaskLabel' | translate }}</mat-label>
+      <input matInput formControlName="netmask">
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'routerLabel' | translate }}</mat-label>
+      <input matInput formControlName="router">
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'ntpIpLabel' | translate }}</mat-label>
+      <input matInput formControlName="ntp">
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'p2pModeLabel' | translate }}</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>{{ 'p2pTimeLabel' | translate }}</mat-label>
+      <input matInput formControlName="p2pTime" type="number">
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'mcastIpLabel' | translate }}</mat-label>
+      <input matInput formControlName="mcastIp">
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'mcastSpeedLabel' | translate }}</mat-label>
+      <input matInput formControlName="mcastSpeed" type="number">
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'mcastPortLabel' | translate }}</mat-label>
+      <input matInput formControlName="mcastPort" type="number">
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'mcastModeLabel' | translate }}</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>{{ 'menuUrlLabel' | translate }}</mat-label>
+      <input matInput formControlName="menu" type="url">
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'hardwareProfileLabel' | translate }}</mat-label>
+      <mat-select formControlName="hardwareProfile">
+        <mat-option *ngFor="let unit of hardwareProfiles" [value]="unit['@id']">{{ unit.description }}</mat-option>
+      </mat-select>
+      <mat-error>{{ 'urlFormatError' | translate }}</mat-error>
+    </mat-form-field>
+  </form>
 </div>
 <div mat-dialog-actions align="end">
   <button mat-button (click)="onNoClick()">{{ 'cancelButton' | translate }}</button>
diff --git a/ogWebconsole/src/app/components/groups/shared/organizational-units/create-organizational-unit/create-organizational-unit.component.ts b/ogWebconsole/src/app/components/groups/shared/organizational-units/create-organizational-unit/create-organizational-unit.component.ts
index c9b45c1..ec2a96f 100644
--- a/ogWebconsole/src/app/components/groups/shared/organizational-units/create-organizational-unit/create-organizational-unit.component.ts
+++ b/ogWebconsole/src/app/components/groups/shared/organizational-units/create-organizational-unit/create-organizational-unit.component.ts
@@ -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,
diff --git a/ogWebconsole/src/app/components/groups/shared/organizational-units/edit-organizational-unit/edit-organizational-unit.component.html b/ogWebconsole/src/app/components/groups/shared/organizational-units/edit-organizational-unit/edit-organizational-unit.component.html
index 1ffc68a..4e7c86c 100644
--- a/ogWebconsole/src/app/components/groups/shared/organizational-units/edit-organizational-unit/edit-organizational-unit.component.html
+++ b/ogWebconsole/src/app/components/groups/shared/organizational-units/edit-organizational-unit/edit-organizational-unit.component.html
@@ -1,168 +1,146 @@
 <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-select>
-        </mat-form-field>
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'nameLabel' | translate }}</mat-label>
-          <input matInput formControlName="name" required>
-        </mat-form-field>
-        <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>
-        </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 1: General -->
+  <form [formGroup]="generalFormGroup">
+    <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-select>
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'nameLabel' | translate }}</mat-label>
+      <input matInput formControlName="name" required>
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'editOrgUnitParentLabel' | translate }}</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">
+      <mat-label>{{ 'descriptionLabel' | translate }}</mat-label>
+      <textarea matInput formControlName="description"></textarea>
+    </mat-form-field>
+  </form>
 
-    <!-- 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>
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'locationLabel' | translate }}</mat-label>
-          <input matInput formControlName="location">
-        </mat-form-field>
-        <mat-slide-toggle formControlName="projector">{{ 'projectorToggle' | translate }}</mat-slide-toggle>
-        <mat-slide-toggle formControlName="board">{{ 'boardToggle' | translate }}</mat-slide-toggle>
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'capacityLabel' | translate }}</mat-label>
-          <input matInput formControlName="capacity" type="number">
-        </mat-form-field>
+  <!-- Paso 2: Información del Aula -->
+  <form *ngIf="generalFormGroup.value.type === 'classroom'" [formGroup]="classroomInfoFormGroup">    
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'locationLabel' | translate }}</mat-label>
+      <input matInput formControlName="location">
+    </mat-form-field>
+    <mat-slide-toggle formControlName="projector">{{ 'projectorToggle' | translate }}</mat-slide-toggle>
+    <mat-slide-toggle formControlName="board">{{ 'boardToggle' | translate }}</mat-slide-toggle>
+    <mat-form-field class="form-field">
+      <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)">
+        <mat-option *ngFor="let calendar of calendars" [value]="calendar['@id']">
+          {{ calendar.name }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+  </form>
 
-        <mat-form-field class="form-field" appearance="fill">
-          <mat-label>{{ 'associatedCalendarLabel' | translate }}</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>
+  <!-- Paso 3: Información Adicional -->
+  <form [formGroup]="additionalInfoFormGroup">
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'commentsLabel' | translate }}</mat-label>
+      <textarea matInput formControlName="comments"></textarea>
+    </mat-form-field>
+  </form>
 
-        <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>
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'ogLiveLabel' | translate }}</mat-label>
-          <mat-select formControlName="ogLive" (selectionChange)="onOgLiveChange($event)">
-            <mat-option *ngFor="let oglive of ogLives" [value]="oglive['@id']">
-              {{ oglive.filename }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'repositoryLabel' | translate }}</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>{{ 'proxyUrlLabel' | translate }}</mat-label>
-          <input matInput formControlName="proxy">
-        </mat-form-field>
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'dnsIpLabel' | translate }}</mat-label>
-          <input matInput formControlName="dns">
-        </mat-form-field>
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'netmaskLabel' | translate }}</mat-label>
-          <input matInput formControlName="netmask">
-        </mat-form-field>
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'routerLabel' | translate }}</mat-label>
-          <input matInput formControlName="router">
-        </mat-form-field>
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'ntpIpLabel' | translate }}</mat-label>
-          <input matInput formControlName="ntp">
-        </mat-form-field>
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'p2pModeLabel' | translate }}</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>{{ 'p2pTimeLabel' | translate }}</mat-label>
-          <input matInput formControlName="p2pTime" type="number">
-        </mat-form-field>
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'mcastIpLabel' | translate }}</mat-label>
-          <input matInput formControlName="mcastIp">
-        </mat-form-field>
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'mcastSpeedLabel' | translate }}</mat-label>
-          <input matInput formControlName="mcastSpeed" type="number">
-        </mat-form-field>
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'mcastPortLabel' | translate }}</mat-label>
-          <input matInput formControlName="mcastPort" type="number">
-        </mat-form-field>
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'mcastModeLabel' | translate }}</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>{{ 'menuUrlLabel' | translate }}</mat-label>
-          <input matInput formControlName="menu" type="url">
-        </mat-form-field>
-        <mat-form-field class="form-field">
-          <mat-label>{{ 'hardwareProfileLabel' | translate }}</mat-label>
-          <mat-select formControlName="hardwareProfile">
-            <mat-option *ngFor="let unit of hardwareProfiles" [value]="unit['@id']">{{ unit.description }}</mat-option>
-          </mat-select>
-          <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>
+  <!-- Paso 4: Configuración de Red -->
+  <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)">
+        <mat-option *ngFor="let oglive of ogLives" [value]="oglive['@id']">
+          {{ oglive.filename }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'repositoryLabel' | translate }}</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>{{ 'proxyUrlLabel' | translate }}</mat-label>
+      <input matInput formControlName="proxy">
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'dnsIpLabel' | translate }}</mat-label>
+      <input matInput formControlName="dns">
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'netmaskLabel' | translate }}</mat-label>
+      <input matInput formControlName="netmask">
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'routerLabel' | translate }}</mat-label>
+      <input matInput formControlName="router">
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'ntpIpLabel' | translate }}</mat-label>
+      <input matInput formControlName="ntp">
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'p2pModeLabel' | translate }}</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>{{ 'p2pTimeLabel' | translate }}</mat-label>
+      <input matInput formControlName="p2pTime" type="number">
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'mcastIpLabel' | translate }}</mat-label>
+      <input matInput formControlName="mcastIp">
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'mcastSpeedLabel' | translate }}</mat-label>
+      <input matInput formControlName="mcastSpeed" type="number">
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'mcastPortLabel' | translate }}</mat-label>
+      <input matInput formControlName="mcastPort" type="number">
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'mcastModeLabel' | translate }}</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>{{ 'menuUrlLabel' | translate }}</mat-label>
+      <input matInput formControlName="menu" type="url">
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>{{ 'hardwareProfileLabel' | translate }}</mat-label>
+      <mat-select formControlName="hardwareProfile">
+        <mat-option *ngFor="let unit of hardwareProfiles" [value]="unit['@id']">{{ unit.description }}</mat-option>
+      </mat-select>
+      <mat-error>{{ 'urlFormatError' | translate }}</mat-error>
+    </mat-form-field>
+    <mat-slide-toggle formControlName="validation">{{ 'validationToggle' | translate }}</mat-slide-toggle>
+  </form>
 </div>
 <div mat-dialog-actions align="end">
   <button mat-button (click)="onNoClick()">{{ 'cancelButton' | translate }}</button>
diff --git a/ogWebconsole/src/app/components/groups/shared/organizational-units/edit-organizational-unit/edit-organizational-unit.component.ts b/ogWebconsole/src/app/components/groups/shared/organizational-units/edit-organizational-unit/edit-organizational-unit.component.ts
index 859edc6..251e2b1 100644
--- a/ogWebconsole/src/app/components/groups/shared/organizational-units/edit-organizational-unit/edit-organizational-unit.component.ts
+++ b/ogWebconsole/src/app/components/groups/shared/organizational-units/edit-organizational-unit/edit-organizational-unit.component.ts
@@ -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[]) => {