feat(MultiLanguge): translate inputfields

Fraunhofer-AISEC · Sep 30, 2024 · 7fe0afa · 7fe0afa
1 parent dedc667
commit 7fe0afa
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 27 deletions.
diff --git a/src/app/components/inputfield/inputfield.component.html b/src/app/components/inputfield/inputfield.component.html
@@ -10,8 +10,8 @@
     <select [(ngModel)]="value" (ngModelChange)="valueChange.emit($event)" class="form-control rounded-lg" [disabled]="static" *ngIf="getType() == 'enum'">
       <option *ngFor="let val of options" [value]="val">{{val}}</option>
     </select>
-    <select multiple class="form-control enum-multi-form-control" [(ngModel)]="value" (ngModelChange)="valueChange.emit($event)" [size]="options.length"  [disabled]="static" *ngIf="getType() == 'enum-multi'">
-      <option *ngFor="let val of options" [value]="val">{{val}}</option>
+    <select translate multiple class="form-control enum-multi-form-control" [(ngModel)]="value" (ngModelChange)="valueChange.emit($event)" [size]="options.length"  [disabled]="static" *ngIf="getType() == 'enum-multi'">
+      <option *ngFor="let val of options" [value]="val" translate>{{val}}</option>
     </select>
 
     <!--Add/delete-->
@@ -21,8 +21,8 @@
     <!-- <button class="btn btn-outline-secondary btn-trash-circle" type="button" (click)="addCallback(value,getType()); value =''" *ngIf="addCallback != null">
       <span class="fa fa-plus"></span>
     </button> -->
-    <button class="btn btn-link" style="text-decoration: none; text-align: right; padding-right: 0px; min-width: 70px" type="button" (click)="addCallback(value,getType()); value =''" *ngIf="addCallback != null">
-      + Add
+    <button translate class="btn btn-link" style="text-decoration: none; text-align: right; padding-right: 0px; min-width: 70px" type="button" (click)="addCallback(value,getType()); value =''" *ngIf="addCallback != null">
+      + {{'Common.Add' | translate}}
     </button>
   </div>
 </div>
@@ -45,8 +45,8 @@
   <!-- <button class="btn btn-outline-secondary btn-trash-circle" type="button" (click)="addCallback(value,getType()); value =''" *ngIf="addCallback != null">
     <span class="fa fa-plus"></span>
   </button> -->
-  <button class="btn btn-link" style="text-decoration: none; text-align: right; padding-right: 0px; min-width: 70px" type="button" (click)="addCallback(value,getType()); value =''" *ngIf="addCallback != null">
-    + Add
+  <button translate class="btn btn-link" style="text-decoration: none; text-align: right; padding-right: 0px; min-width: 70px" type="button" (click)="addCallback(value,getType()); value =''" *ngIf="addCallback != null">
+    + {{'Common.Add' | translate}}
   </button>
 </div>
 
@@ -79,8 +79,8 @@
       <span class="fa fa-plus"></span>
       
     </button> -->
-    <button class="btn btn-link" style="text-decoration: none; text-align: right; padding-right: 0px; min-width: 70px" type="button" (click)="addCallback(value,getType()); value =''" *ngIf="addCallback != null">
-      + Add
+    <button translate class="btn btn-link" style="text-decoration: none; text-align: right; padding-right: 0px; min-width: 70px" type="button" (click)="addCallback(value,getType()); value =''" *ngIf="addCallback != null">
+      + {{'Common.Add' | translate}}
     </button>
 </div>
 
@@ -118,5 +118,5 @@
       </select>
     </div>
   </div>
-  <button class="btn btn-link" style="text-decoration: none; text-align: right; padding-right: 0px; min-width: 70px" type="button" (click)="addCallback(value,newType.value); value =''">+ Add</button>
+  <button class="btn btn-link" style="text-decoration: none; text-align: right; padding-right: 0px; min-width: 70px" type="button" (click)="addCallback(value,newType.value); value =''">+ {{'Common.Add' | translate}}</button>
 </div>
diff --git a/src/app/components/inputfield/inputfield.component.ts b/src/app/components/inputfield/inputfield.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit, Input, Output, DoCheck, EventEmitter } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-inputfield',
@@ -18,7 +19,7 @@ export class InputfieldComponent implements OnInit {
   @Input() isChildren = false; // Is this field is child of any input field
   @Output() valueChange: EventEmitter<any> = new EventEmitter();
 
-  constructor() { }
+  constructor(private translate: TranslateService) { }
   ngOnInit(): void {}
 
   // Tries to determine the type of an object.

diff --git a/src/app/components/user-detail/user-detail.component.html b/src/app/components/user-detail/user-detail.component.html
@@ -2,21 +2,21 @@
   <!-- User name -->
   <h2 class="page-title">{{user['username']}}</h2>
   <!--username-->
-  <app-inputfield type="string" name="Username" [value]="user['username']" [static]="true"></app-inputfield>
+  <app-inputfield type="string" name="{{ 'User.Username' | translate }}" [value]="user['username']" [static]="true"></app-inputfield>
   <!--Status-->
-  <app-inputfield type="string" name="Status" [value]="isExtern() ? 'extern: '+user.extern : 'intern'" [static]="true"></app-inputfield>
+  <app-inputfield type="string" name="{{ 'User.Status' | translate }}" [value]="isExtern() ? 'extern: '+user.extern : 'intern'" [static]="true"></app-inputfield>
 
   <!--Attributes-->
   <div *ngIf="!isExtern()">
-    <app-inputfield type="array-attribute" name="Attributes" [(value)]="user['attributes']"></app-inputfield>
+    <app-inputfield type="array-attribute" name="{{'Common.Attributes' | translate}}" [(value)]="user['attributes']"></app-inputfield>
   </div>
 
   <!--Extern User-->
   <div *ngIf="isExtern() && provider">
 
     <!--Attributes-->
     <div class="card mb-3 px-2">
-      <div class="card-header mx-n2">Attributes</div>
+      <div class="card-header mx-n2" translate>Common.Attributes</div>
       <div *ngFor="let attribute of user.attributes">
         <div *ngIf="isArray(attribute.value) && attribute.key!=provider['mapping_key']">
           <div class="card my-2">
@@ -38,7 +38,7 @@ <h2 class="page-title">{{user['username']}}</h2>
             <div class="input-group-prepend">
               <span class="input-group-text" id="client_id">{{attribute.key}}</span>
             </div>
-            <input type="text" class="form-control" placeholder="{{attribute.value}}" [disabled]="true"
+            <input type="text" class="form-control" placeholder="{{attribute.value | translate}}" [disabled]="true"
               name="redirect_uri" [(ngModel)]="user.attributes[getIndex(attribute)].value" title="{{attribute.key}}">
           </div>
         </div>

diff --git a/src/app/components/user/user.component.html b/src/app/components/user/user.component.html
@@ -60,7 +60,7 @@
             [routerLink]="['/user/', user.username]" translate>User.NoAttributes2</a>
         </div>
         <h6 class="card-sbutitle" *ngIf="hasAttributes(user)">
-          <strong translate>Common.Attributes</strong>
+          <strong translate>Common.Attributes<span>:</span></strong>
         </h6>
         <table class="table table-sm border-0">
           <tbody>

diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -4,13 +4,15 @@
         "Edit": "Edit",
         "Delete": "Delete",
         "Cancel": "Cancel",
-        "Attributes": "Attributes: ",
+        "Attributes": "Attributes",
+        "EnterAttributeName": "Enter attribute's name",
         "ShowAll": "Show all",
-        "ShowLess": "Show less"
+        "ShowLess": "Show less",
+        "Add": "Add"
     },
     "Langs": {
         "en": "English",
-        "tw": "Taiwan"
+        "tw": "中文 (台灣)"
     },
     "App": {
         "Menus": {
@@ -31,6 +33,9 @@
         "NoAttributes1": "This user has no attributes. Maybe try ",
         "NoAttributes2": "adding some?",
         "WantDelete": "Do you really want to delete this user?",
-        "MoreAttributes": "... and {{value}} more attributes"
+        "MoreAttributes": "... and {{value}} more attributes",
+        "Username": "Username",
+        "Status": "Status"
+
     }
 }
diff --git a/src/assets/i18n/tw.json b/src/assets/i18n/tw.json
@@ -1,12 +1,40 @@
-{
+{   
+    "Common": {
+        "Back": "返回",
+        "Edit": "編輯",
+        "Delete": "刪除",
+        "Cancel": "取消",
+        "Attributes": "屬性",
+        "EnterAttributeName": "輸入屬性名稱",
+        "ShowAll": "顯示全部",
+        "ShowLess": "顯示較少",
+        "Add": "新增"
+    },
+    "Langs": {
+        "en": "English",
+        "tw": "中文 (台灣)"
+    },
     "App": {
         "Menus": {
-            "User": "User",
-            "Client": "Client",
-            "Config": "Config",
+            "User": "使用者",
+            "Client": "客戶",
+            "Config": "設定",
             "Webfinger": "Webfinger",
-            "Endpoints": "Endpoints",
-            "Logout": "Log out"
+            "Endpoints": "端點",
+            "Logout": "登出"
         }
+    },
+    "User": {
+        "SearchUserPlaceholder": "搜尋使用者",
+        "Add": "新增使用者",
+        "EnterUserName": "輸入使用者名稱",
+        "PleaseEnterUserName": "請輸入新的使用者名稱",
+        "NoUsersToShow": "沒有可顯示的使用者",
+        "NoAttributes1": "此使用者沒有屬性。或許可以試試",
+        "NoAttributes2": "新增一些？",
+        "WantDelete": "你確定要刪除此使用者嗎？",
+        "MoreAttributes": "... 還有 {{value}} 個屬性",
+        "Username": "使用者名稱",
+        "Status": "狀態"
     }
-}
+}