From a770ccdb4673540c05e55e3247f7861773526030 Mon Sep 17 00:00:00 2001
From: apuente <apuente@qindel.com>
Date: Mon, 29 Jul 2024 17:19:58 +0200
Subject: [PATCH] New internacionalization mode

---
 ogWebconsole/angular.json                     | 26 +++++-
 ogWebconsole/package-lock.json                | 66 ++++++++++++++
 ogWebconsole/package.json                     |  1 +
 .../dashboard/dashboard.component.html        |  2 +-
 .../components/groups/groups.component.html   | 85 +++++++------------
 ogWebconsole/src/main.ts                      |  2 +
 ogWebconsole/tsconfig.app.json                |  4 +-
 ogWebconsole/tsconfig.spec.json               |  3 +-
 8 files changed, 128 insertions(+), 61 deletions(-)

diff --git a/ogWebconsole/angular.json b/ogWebconsole/angular.json
index f9f3df9..163f14c 100644
--- a/ogWebconsole/angular.json
+++ b/ogWebconsole/angular.json
@@ -4,6 +4,12 @@
   "newProjectRoot": "projects",
   "projects": {
     "ogWebconsole": {
+      "i18n": {
+        "sourceLocale": "es",
+        "locales": {
+          "en-US": "src/locale/messages.en.json"
+        }
+      },
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
@@ -23,11 +29,14 @@
         "build": {
           "builder": "@angular-devkit/build-angular:application",
           "options": {
+            "localize": true,
+            "aot": true,
             "outputPath": "dist/og-webconsole",
             "index": "src/index.html",
             "browser": "src/main.ts",
             "polyfills": [
-              "zone.js"
+              "zone.js",
+              "@angular/localize/init"
             ],
             "tsConfig": "tsconfig.app.json",
             "assets": [
@@ -61,6 +70,12 @@
               "optimization": false,
               "extractLicenses": false,
               "sourceMap": true
+            },
+            "es": {
+              "localize": ["es-ES"]
+            },
+            "en": {
+              "localize": ["en-US"]
             }
           },
           "defaultConfiguration": "production"
@@ -73,6 +88,12 @@
             },
             "development": {
               "buildTarget": "ogWebconsole:build:development"
+            },
+            "es": {
+              "buildTarget": "ogWebconsole:build:es"
+            },
+            "en": {
+              "buildTarget": "ogWebconsole:build:en"
             }
           },
           "defaultConfiguration": "development"
@@ -88,7 +109,8 @@
           "options": {
             "polyfills": [
               "zone.js",
-              "zone.js/testing"
+              "zone.js/testing",
+              "@angular/localize/init"
             ],
             "tsConfig": "tsconfig.spec.json",
             "assets": [
diff --git a/ogWebconsole/package-lock.json b/ogWebconsole/package-lock.json
index 1610f0f..3c83606 100644
--- a/ogWebconsole/package-lock.json
+++ b/ogWebconsole/package-lock.json
@@ -28,6 +28,7 @@
         "@angular-devkit/build-angular": "^18.0.1",
         "@angular/cli": "^18.0.1",
         "@angular/compiler-cli": "^18.0.0",
+        "@angular/localize": "^18.1.0",
         "@types/jasmine": "~5.1.0",
         "jasmine-core": "~5.1.0",
         "karma": "~6.4.0",
@@ -486,6 +487,30 @@
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
+    "node_modules/@angular/localize": {
+      "version": "18.1.0",
+      "resolved": "https://registry.npmjs.org/@angular/localize/-/localize-18.1.0.tgz",
+      "integrity": "sha512-84D06p2Th5NxoJZzsSIn4FkTJGImj7rtNnvyTrHvHdomzzUKwiBOXDB2FiCLDstND0DsCtgjD/uBJivg77z9tg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "7.24.7",
+        "@types/babel__core": "7.20.5",
+        "fast-glob": "3.3.2",
+        "yargs": "^17.2.1"
+      },
+      "bin": {
+        "localize-extract": "tools/bundles/src/extract/cli.js",
+        "localize-migrate": "tools/bundles/src/migrate/cli.js",
+        "localize-translate": "tools/bundles/src/translate/cli.js"
+      },
+      "engines": {
+        "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
+      },
+      "peerDependencies": {
+        "@angular/compiler": "18.1.0",
+        "@angular/compiler-cli": "18.1.0"
+      }
+    },
     "node_modules/@angular/material": {
       "version": "18.0.6",
       "resolved": "https://registry.npmjs.org/@angular/material/-/material-18.0.6.tgz",
@@ -4938,6 +4963,47 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz",
+      "integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.20.6",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.6.tgz",
+      "integrity": "sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.20.7"
+      }
+    },
     "node_modules/@types/body-parser": {
       "version": "1.19.5",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz",
diff --git a/ogWebconsole/package.json b/ogWebconsole/package.json
index ad2a0a8..9a5ed71 100644
--- a/ogWebconsole/package.json
+++ b/ogWebconsole/package.json
@@ -30,6 +30,7 @@
     "@angular-devkit/build-angular": "^18.0.1",
     "@angular/cli": "^18.0.1",
     "@angular/compiler-cli": "^18.0.0",
+    "@angular/localize": "^18.1.0",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
diff --git a/ogWebconsole/src/app/components/dashboard/dashboard.component.html b/ogWebconsole/src/app/components/dashboard/dashboard.component.html
index 9c5fce9..c83a790 100644
--- a/ogWebconsole/src/app/components/dashboard/dashboard.component.html
+++ b/ogWebconsole/src/app/components/dashboard/dashboard.component.html
@@ -1 +1 @@
-<p>dashboard works!</p>
+<p>dashboard works!</p>
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html
index 8226e41..de28f1e 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.html
+++ b/ogWebconsole/src/app/components/groups/groups.component.html
@@ -1,27 +1,27 @@
 <div class="header-container">
-  <h2 class="title">Administrar grupos</h2>
+  <h2 class="title" i18n="@@titleAdminGroups">Administrar grupos</h2>
   <div class="groups-button-row">
-    <button mat-flat-button color="primary" (click)="addOU($event)">Nueva Unidad Organizativa</button>
-    <button mat-flat-button color="primary" (click)="addClient($event)">Nuevo Cliente</button>
-    <button mat-raised-button (click)="openBottomSheet()">Leyenda</button>
-
-    
+    <button mat-flat-button color="primary" (click)="addOU($event)" i18n="@@btnNewOrgUnit">Nueva Unidad Organizativa</button>
+    <button mat-flat-button color="primary" (click)="addClient($event)" i18n="@@btnNewClient">Nuevo Cliente</button>
+    <button mat-raised-button (click)="openBottomSheet()" i18n="@@btnLegend">Leyenda</button>
   </div>
   <div class="container">
-    <button mat-flat-button class="roomMap-btn" color="accent" (click)="roomMap()" *ngIf="selectedDetail && selectedDetail.type === 'classroom'">Plano de aula</button>
-</div>
+    <button mat-flat-button class="roomMap-btn" color="accent" (click)="roomMap()" *ngIf="selectedDetail && selectedDetail.type === 'classroom'" i18n="@@btnClassroomMap">Plano de aula</button>
+  </div>
 </div>
+
 <div class="search-container">
   <mat-form-field appearance="fill">
-    <mat-label>Búsqueda</mat-label>
-    <input matInput placeholder="Búsqueda" [(ngModel)]="searchTerm" (keyup.enter)="search()">
+    <mat-label i18n="@@lblSearch">Búsqueda</mat-label>
+    <input matInput placeholder="Búsqueda" [(ngModel)]="searchTerm" (keyup.enter)="search()" i18n-placeholder="@@phSearch">
     <mat-icon matSuffix>search</mat-icon>
-    <mat-hint>Pulsar 'enter' para buscar entre las unidades organizativas</mat-hint>
+    <mat-hint i18n="@@hintSearch">Pulsar 'enter' para buscar entre las unidades organizativas</mat-hint>
   </mat-form-field>
 </div>
+
 <div class="groupLists-container">
   <mat-card class="card unidad-card">
-    <mat-card-title>Unidad organizativa</mat-card-title>
+    <mat-card-title i18n="@@cardTitleOrgUnit">Unidad organizativa</mat-card-title>
     <mat-card-content>
       <mat-spinner *ngIf="loading"></mat-spinner>
       <mat-list *ngIf="!loading">
@@ -34,49 +34,24 @@
               <mat-icon mat-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation()">menu</mat-icon>
               <mat-menu #menu="matMenu">
                 <button mat-menu-item (click)="onTreeClick($event, unidad)">
-                  <mat-icon
-                    class="edit-icon"
-                    #tooltip="matTooltip"
-                    matTooltip="Visualizar en forma de arbol"
-                    matTooltipHideDelay="0">account_tree
-                  </mat-icon>
-                  Ver organigrama
+                  <mat-icon class="edit-icon" #tooltip="matTooltip" matTooltip="Visualizar en forma de arbol" matTooltipHideDelay="0">account_tree</mat-icon>
+                  <span i18n="@@menuItemTreeView">Ver organigrama</span>
                 </button>
                 <button mat-menu-item (click)="onEditClick($event, unidad.type, unidad.uuid)">
-                  <mat-icon
-                    class="edit-icon"
-                    #tooltip="matTooltip"
-                    matTooltip="Editar unidad organizativa"
-                    matTooltipHideDelay="0">edit
-                  </mat-icon>
-                  Editar
+                  <mat-icon class="edit-icon" #tooltip="matTooltip" matTooltip="Editar unidad organizativa" matTooltipHideDelay="0">edit</mat-icon>
+                  <span i18n="@@menuItemEdit">Editar</span>
                 </button>
                 <button mat-menu-item (click)="onShowClick($event, unidad)">
-                  <mat-icon
-                    class="edit-icon"
-                    #tooltip="matTooltip"
-                    matTooltip="Visualizar unidad organizativa"
-                    matTooltipHideDelay="0">visibility
-                  </mat-icon>
-                  Visualizar datos
+                  <mat-icon class="edit-icon" #tooltip="matTooltip" matTooltip="Visualizar unidad organizativa" matTooltipHideDelay="0">visibility</mat-icon>
+                  <span i18n="@@menuItemViewData">Visualizar datos</span>
                 </button>
                 <button mat-menu-item (click)="addOU($event, unidad)">
-                  <mat-icon
-                    class="edit-icon"
-                    #tooltip="matTooltip"
-                    matTooltip="Crear unidad organizativa interna"
-                    matTooltipHideDelay="0">add_home_work
-                  </mat-icon>
-                  Añadir unidad organizativa
+                  <mat-icon class="edit-icon" #tooltip="matTooltip" matTooltip="Crear unidad organizativa interna" matTooltipHideDelay="0">add_home_work</mat-icon>
+                  <span i18n="@@menuItemAddOrgUnit">Añadir unidad organizativa</span>
                 </button>
                 <button mat-menu-item (click)="addClient($event, unidad)">
-                  <mat-icon
-                    class="edit-icon"
-                    #tooltip="matTooltip"
-                    matTooltip="Crear cliente en esta unidad organizativa"
-                    matTooltipHideDelay="0">devices
-                  </mat-icon>
-                  Crear cliente
+                  <mat-icon class="edit-icon" #tooltip="matTooltip" matTooltip="Crear cliente en esta unidad organizativa" matTooltipHideDelay="0">devices</mat-icon>
+                  <span i18n="@@menuItemAddClient">Crear cliente</span>
                 </button>
               </mat-menu>
             </span>
@@ -89,7 +64,7 @@
   <mat-card class="card elements-card">
     <mat-card-title>
       <div class="title-with-breadcrumb">
-        <span>Elementos internos</span>
+        <span i18n="@@cardTitleElements">Elementos internos</span>
         <mat-card-subtitle>
           <ng-container *ngFor="let crumb of breadcrumb; let i = index">
             <a (click)="navigateToBreadcrumb(i)">{{ crumb }}</a>
@@ -103,7 +78,7 @@
       <mat-list *ngIf="!loadingChildren">
         <div *ngIf="children.length === 0" class="empty-list">
           <mat-icon>info</mat-icon>
-          <span>No hay elementos internos</span>
+          <span i18n="@@noElements">No hay elementos internos</span>
         </div>
         <mat-list-item *ngFor="let child of children" [ngClass]="{'selected-item': child === selectedUnidad, 'clickable-item': true}" (click)="onSelectChild(child)">
           <div class="item-content">
@@ -121,23 +96,23 @@
               <mat-menu #menu="matMenu">
                 <button mat-menu-item (click)="onEditClick($event, child.type, child.uuid)">
                   <mat-icon class="edit-icon" #tooltip="matTooltip" matTooltip="Editar elemento" matTooltipHideDelay="0">edit</mat-icon>
-                  Editar
+                  <span i18n="@@menuItemEditElement">Editar</span>
                 </button>
                 <button *ngIf="child.type !== 'client'"  mat-menu-item (click)="onShowClick($event, child)">
                   <mat-icon class="edit-icon" #tooltip="matTooltip" matTooltip="Visualizar unidad organizativa" matTooltipHideDelay="0">visibility</mat-icon>
-                  Visualizar datos
+                  <span i18n="@@menuItemViewOrgUnit">Visualizar datos</span>
                 </button>
                 <button *ngIf="child.type !== 'client'"  mat-menu-item (click)="addOU($event, child)">
                   <mat-icon class="edit-icon" #tooltip="matTooltip" matTooltip="Crear unidad organizativa interna" matTooltipHideDelay="0">add_home_work</mat-icon>
-                  Añadir unidad organizativa
+                  <span i18n="@@menuItemAddInternalOrgUnit">Añadir unidad organizativa</span>
                 </button>
                 <button *ngIf="child.type !== 'client'"  mat-menu-item (click)="addClient($event, child)">
                   <mat-icon class="edit-icon" #tooltip="matTooltip" matTooltip="Crear cliente en esta unidad organizativa" matTooltipHideDelay="0">devices</mat-icon>
-                  Crear cliente
+                  <span i18n="@@menuItemAddClientToOrgUnit">Crear cliente</span>
                 </button>
                 <button mat-menu-item (click)="onDeleteClick($event, child.uuid, child.name, child.type)">
                   <mat-icon class="delete-icon" #tooltip="matTooltip" matTooltip="Borrar elemento" matTooltipHideDelay="0">delete</mat-icon>
-                  Borrar elemento
+                  <span i18n="@@menuItemDeleteElement">Borrar elemento</span>
                 </button>
               </mat-menu>
             </span>
@@ -146,6 +121,4 @@
       </mat-list>
     </mat-card-content>
   </mat-card>
-
-  <!-- <app-classroom-view class="card classroom-view" [clients]="clientsData" [pcInTable]="5"></app-classroom-view> -->
 </div>
diff --git a/ogWebconsole/src/main.ts b/ogWebconsole/src/main.ts
index c58dc05..be6bfab 100644
--- a/ogWebconsole/src/main.ts
+++ b/ogWebconsole/src/main.ts
@@ -1,3 +1,5 @@
+/// <reference types="@angular/localize" />
+
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
diff --git a/ogWebconsole/tsconfig.app.json b/ogWebconsole/tsconfig.app.json
index 374cc9d..ec26f70 100644
--- a/ogWebconsole/tsconfig.app.json
+++ b/ogWebconsole/tsconfig.app.json
@@ -3,7 +3,9 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
-    "types": []
+    "types": [
+      "@angular/localize"
+    ]
   },
   "files": [
     "src/main.ts"
diff --git a/ogWebconsole/tsconfig.spec.json b/ogWebconsole/tsconfig.spec.json
index be7e9da..c63b698 100644
--- a/ogWebconsole/tsconfig.spec.json
+++ b/ogWebconsole/tsconfig.spec.json
@@ -4,7 +4,8 @@
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
     "types": [
-      "jasmine"
+      "jasmine",
+      "@angular/localize"
     ]
   },
   "include": [