From f35ba106bab5a7c561a01f5ffe1ae79b75bdbdac Mon Sep 17 00:00:00 2001
From: Lucas Lara <llara@localhost>
Date: Wed, 7 May 2025 13:45:40 +0200
Subject: [PATCH] refs #1953 Refactor manage organizational unit component:
 replace hardcoded strings with translation keys and update localization files

---
 .../manage-organizational-unit.component.html | 114 +++++++++---------
 ogWebconsole/src/locale/en.json               |   3 +-
 ogWebconsole/src/locale/es.json               |   3 +-
 3 files changed, 62 insertions(+), 58 deletions(-)

diff --git a/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.html b/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.html
index a72d549..739256b 100644
--- a/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.html
+++ b/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.html
@@ -1,12 +1,13 @@
 <div class="create-ou-container">
-    <h1 mat-dialog-title>{{ isEditMode ? 'Editar' : 'Crear' }} Unidad Organizativa</h1>
-  <div class="mat-dialog-content" [ngClass]="{'loading': loading}">
+    <h1 mat-dialog-title>{{ isEditMode ? ('edit' | translate) : ('createButton' | translate) }} {{
+        'labelOrganizationalUnit' | translate }}</h1>
+    <div class="mat-dialog-content" [ngClass]="{'loading': loading}">
         <!-- Paso 1: General -->
-      <mat-spinner class="loading-spinner" *ngIf="loading"></mat-spinner>
-      <span *ngIf="!loading" class="step-title">General</span>
+        <mat-spinner class="loading-spinner" *ngIf="loading"></mat-spinner>
+        <span *ngIf="!loading" class="step-title">{{ 'generalTabLabel' | translate }}</span>
         <form *ngIf="generalFormGroup && !loading" [formGroup]="generalFormGroup" class="grid-form">
             <mat-form-field class="form-field" appearance="fill">
-                <mat-label>Tipo</mat-label>
+                <mat-label>{{ 'typeLabel' | translate }}</mat-label>
                 <mat-select formControlName="type" required>
                     <mat-option *ngFor="let type of filteredTypes" [value]="type">
                         {{ typeTranslations[type] }}
@@ -14,11 +15,11 @@
                 </mat-select>
             </mat-form-field>
             <mat-form-field class="form-field" appearance="fill">
-                <mat-label>Nombre</mat-label>
+                <mat-label>{{ 'nameColumnHeader' | translate }}</mat-label>
                 <input matInput formControlName="name" required>
             </mat-form-field>
             <mat-form-field class="form-field" appearance="fill">
-                <mat-label>Unidad organizativa superior</mat-label>
+                <mat-label>{{ 'createOrgUnitparentLabel' | translate }}</mat-label>
                 <mat-select formControlName="parent" (selectionChange)="onParentChange($event)">
                     <mat-select-trigger>
                         {{ getSelectedParentName() }}
@@ -31,7 +32,7 @@
             </mat-form-field>
 
             <mat-form-field class="form-field description-form-field" appearance="fill">
-                <mat-label>Descripción</mat-label>
+                <mat-label>{{ 'descriptionLabel' |translate }}</mat-label>
                 <textarea matInput formControlName="description"></textarea>
             </mat-form-field>
 
@@ -41,22 +42,23 @@
         </form>
 
         <!-- Paso 2: Información del Aula -->
-        <span *ngIf="generalFormGroup.value.type === 'classroom' && !loading" class="step-title">Información del aula</span>
+        <span *ngIf="generalFormGroup.value.type === 'classroom' && !loading"
+            class="step-title">{{'classroomInfoStepLabel' | translate}}</span>
         <form *ngIf="generalFormGroup.value.type === 'classroom' && !loading" class="grid-form"
             [formGroup]="classroomInfoFormGroup">
             <mat-form-field class="form-field">
-                <mat-label>Localización</mat-label>
+                <mat-label>{{ 'locationLabel' | translate }}</mat-label>
                 <input matInput formControlName="location">
             </mat-form-field>
             <mat-form-field class="form-field">
-                <mat-label>Aforo</mat-label>
+                <mat-label>{{ 'capacityLabel' | translate }}</mat-label>
                 <input matInput formControlName="capacity" type="number" min="0">
                 <mat-error *ngIf="classroomInfoFormGroup.get('capacity')?.hasError('min')">
-                    El aforo no puede ser negativo
+                    {{ 'capacityWarning' | translate }}
                 </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-label>{{ 'associatedCalendarLabel' | translate }}</mat-label>
                 <mat-select formControlName="remoteCalendar" (selectionChange)="onCalendarChange($event)">
                     <mat-option *ngFor="let calendar of calendars" [value]="calendar['@id']">
                         {{ calendar.name }}
@@ -64,32 +66,32 @@
                 </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>
+                <mat-slide-toggle formControlName="projector">{{ 'projectorAlt' | translate }}</mat-slide-toggle>
+                <mat-slide-toggle formControlName="board">{{ 'boardToggle' | translate }}</mat-slide-toggle>
             </div>
         </form>
 
         <!-- Paso 3: Configuración de Red -->
-        <span *ngIf="!loading" class="step-title">Configuración de Red</span>
+        <span *ngIf="!loading" class="step-title">{{ 'networkSettingsStepLabel' | translate }}</span>
         <form *ngIf="networkSettingsFormGroup && !loading" [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>Plantilla PXE</mat-label>
-            <mat-select formControlName="pxeTemplate" (selectionChange)="onPxeTemplateChange($event)">
-              <mat-option *ngFor="let template of pxeTemplates" [value]="template['@id']">
-                {{ template.name }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
             <mat-form-field class="form-field">
-                <mat-label>Repositorio</mat-label>
+                <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>{{ 'templateLabel' | translate }}</mat-label>
+                <mat-select formControlName="pxeTemplate" (selectionChange)="onPxeTemplateChange($event)">
+                    <mat-option *ngFor="let template of pxeTemplates" [value]="template['@id']">
+                        {{ template.name }}
+                    </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 }}
@@ -105,17 +107,17 @@
                 <input matInput formControlName="dns">
             </mat-form-field>
             <mat-form-field class="form-field">
-                <mat-label>Máscara de Red</mat-label>
+                <mat-label>{{ 'netmaskLabel' | translate }}</mat-label>
                 <input matInput formControlName="netmask">
             </mat-form-field>
-          <mat-form-field class="form-field">
-            <mat-label i18n="@@netiface-label">Interfaz de red</mat-label>
-            <mat-select formControlName="netiface">
-              <mat-option *ngFor="let type of netifaceTypes" [value]="type.value">
-                {{ type.name }}
-              </mat-option>
-            </mat-select>
-          </mat-form-field>
+            <mat-form-field class="form-field">
+                <mat-label i18n="@@netiface-label">{{ 'netifaceLabel' | translate }}</mat-label>
+                <mat-select formControlName="netiface">
+                    <mat-option *ngFor="let type of netifaceTypes" [value]="type.value">
+                        {{ type.name }}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
             <mat-form-field class="form-field">
                 <mat-label>Router</mat-label>
                 <input matInput formControlName="router">
@@ -125,7 +127,7 @@
                 <input matInput formControlName="ntp">
             </mat-form-field>
             <mat-form-field class="form-field">
-                <mat-label>Modo P2P</mat-label>
+                <mat-label>{{ 'p2pModeLabel' | translate }}</mat-label>
                 <mat-select formControlName="p2pMode">
                     <mat-option *ngFor="let option of p2pModeOptions" [value]="option.value">
                         {{ option.name }}
@@ -133,23 +135,23 @@
                 </mat-select>
             </mat-form-field>
             <mat-form-field class="form-field">
-                <mat-label>Tiempo P2P</mat-label>
+                <mat-label>{{ 'p2pTimeLabel' | translate }}</mat-label>
                 <input matInput formControlName="p2pTime" type="number">
             </mat-form-field>
             <mat-form-field class="form-field">
-                <mat-label>Mcast IP</mat-label>
+                <mat-label>{{ 'mcastIpLabel' | translate }}</mat-label>
                 <input matInput formControlName="mcastIp">
             </mat-form-field>
             <mat-form-field class="form-field">
-                <mat-label>Mcast Speed</mat-label>
+                <mat-label>{{ 'mcastSpeedLabel' | translate }}</mat-label>
                 <input matInput formControlName="mcastSpeed" type="number">
             </mat-form-field>
             <mat-form-field class="form-field">
-                <mat-label>Mcast Port</mat-label>
+                <mat-label>{{ 'mcastPortLabel' | translate }}</mat-label>
                 <input matInput formControlName="mcastPort" type="number">
             </mat-form-field>
             <mat-form-field class="form-field">
-                <mat-label>Mcast Mode</mat-label>
+                <mat-label>{{ 'mcastModeLabel' | translate }}</mat-label>
                 <mat-select formControlName="mcastMode">
                     <mat-option *ngFor="let option of multicastModeOptions" [value]="option.value">
                         {{ option.name }}
@@ -157,7 +159,7 @@
                 </mat-select>
             </mat-form-field>
             <mat-form-field class="form-field">
-                <mat-label>Menu</mat-label>
+                <mat-label>{{ 'menuLabel' | translate }}</mat-label>
                 <mat-select formControlName="menu">
                     <mat-option *ngFor="let menu of menus" [value]="menu['@id']">
                         {{ menu.name }}
@@ -165,28 +167,28 @@
                 </mat-select>
             </mat-form-field>
             <mat-form-field class="form-field">
-                <mat-label>Perfil de Hardware</mat-label>
+                <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>Formato de URL incorrecto</mat-error>
+                <mat-error>{{ 'urlFormatError' | translate }}</mat-error>
             </mat-form-field>
         </form>
 
         <!-- Paso 4: Información Adicional -->
-        <span *ngIf="!loading" class="step-title">Información Adicional</span>
+        <span *ngIf="!loading" class="step-title">{{ 'additionalInfoStepLabel' | translate }}</span>
         <form *ngIf="additionalInfoFormGroup && !loading" [formGroup]="additionalInfoFormGroup">
             <mat-form-field class="form-field">
-                <mat-label>Comentarios</mat-label>
+                <mat-label>{{ 'commentsLabel' | translate }}</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="ordinary-button" (click)="onNoClick()">{{ 'cancelButton' | translate }}</button>
         <button class="submit-button" (click)="onSubmit()"
             [disabled]="!generalFormGroup.valid || !additionalInfoFormGroup.valid || !networkSettingsFormGroup.valid">{{
-            isEditMode ? 'Editar' : 'Crear' }}</button>
+            isEditMode ? ('edit' | translate) : ('createButton' | translate) }}</button>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/ogWebconsole/src/locale/en.json b/ogWebconsole/src/locale/en.json
index 7b4239a..e829ced 100644
--- a/ogWebconsole/src/locale/en.json
+++ b/ogWebconsole/src/locale/en.json
@@ -509,5 +509,6 @@
     "runScript": "Run Script"
   },
   "remoteAccess": "Remote access available",
-  "noRemoteAccess": "Remote access not available"
+  "noRemoteAccess": "Remote access not available",
+  "capacityWarning": "The capacity cannot be negative"
 }
\ No newline at end of file
diff --git a/ogWebconsole/src/locale/es.json b/ogWebconsole/src/locale/es.json
index 9f9bedf..92d37a3 100644
--- a/ogWebconsole/src/locale/es.json
+++ b/ogWebconsole/src/locale/es.json
@@ -511,5 +511,6 @@
     "runScript": "Ejecutar script"
   },
   "remoteAccess": "Disponible acceso remoto",
-  "noRemoteAccess": "No disponible acceso remoto"
+  "noRemoteAccess": "No disponible acceso remoto",
+  "capacityWarning": "El aforo no puede ser"
 }
\ No newline at end of file