i18n: Adding new languages: Part 1 (#1882)

Co-authored-by: Jose Alberto Hernandez <alberto@blue-daemon.local>

src/app/shared/account-number/account-number.component.html

@@ -1,5 +1,5 @@
 <span (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()">
-  <span class="m-l-5" *ngIf="displayL && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="Copy Account Number"></fa-icon></b></span>
+  <span class="m-l-5" *ngIf="displayL && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="{{'labels.text.Copy Account Number' | translate }}"></fa-icon></b></span>
   <span class="m-l-5">{{ accountNo }}</span>
-  <span class="m-l-3" *ngIf="displayR && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="Copy Account Number"></fa-icon></b></span>
+  <span class="m-l-3" *ngIf="displayR && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="{{'labels.text.Copy Account Number' | translate }}"></fa-icon></b></span>
 </span>

src/app/shared/entity-name/entity-name.component.html

@@ -1,5 +1,5 @@
 <span (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()">
-  <span class="m-l-5" *ngIf="displayL && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="Copy Account Number"></fa-icon></b></span>
+  <span class="m-l-5" *ngIf="displayL && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="{{'labels.text.Copy Account Number' | translate}}"></fa-icon></b></span>
   <span class="m-l-5"><b>{{ entityName }}</b></span>
-  <span class="m-l-3" *ngIf="displayR && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="Copy Account Number"></fa-icon></b></span>
+  <span class="m-l-3" *ngIf="displayR && iconVisible" (click)="copyValue()"><b><fa-icon icon="copy" size="sm" title="{{'labels.text.Copy Account Number' | translate}}"></fa-icon></b></span>
 </span>

src/app/shared/footer/footer.component.html

@@ -1,4 +1,4 @@
-<div fxLayout="column" id="footer" class="m-b-20">
+<div fxLayout="column" id="footer" class="m-b-20" *ngIf="displayBackEndInfo">
   <mat-divider fxFlexAlign="center" class="divider"></mat-divider>
   <div fxLayout="column" class="m-b-20 content">
 
@@ -15,12 +15,12 @@
       <td colspan="2" class="center footer-content"><b>{{ server }}</b></td>
     </tr>
     <tr *ngIf="isBusinessDateDefined">
-      <td class="footer-content">Current Business Date:</td>
+      <td class="footer-content">{{'labels.text.Current Business Date' | translate}}:</td>
       <td class="center footer-content business-date"><b>{{ businessDate | date: 'EEEE, MMMM dd, y' }}</b></td>
     </tr>
   </table>
   </div>
   <mat-divider fxFlexAlign="center" class="divider"></mat-divider>
-  <p fxFlexAlign="center" class="footer-content">{{ 'APP_NAME' | translate }} {{ 'labels.text.by' | translate }} Mifos
+  <p fxFlexAlign="center" class="footer-content">{{ 'APP_NAME' | translate}} {{'labels.text.by' | translate}} Mifos
   </p>
 </div>

src/app/shared/footer/footer.component.ts

@@ -42,43 +42,49 @@ export class FooterComponent implements OnInit, OnDestroy {
   alert$: Subscription;
   timer: any;
 
-  displayBackEndInfo: boolean = environment.displayBackEndInfo;
+  displayBackEndInfo = true;
 
   constructor(private systemService: SystemService,
     private settingsService: SettingsService,
     private authenticationService: AuthenticationService,
     private alertService: AlertService,
     private dateUtils: Dates,
-    private versionService: VersionService) { }
+    private versionService: VersionService) {
+      this.displayBackEndInfo = (environment.displayBackEndInfo === 'true');
+  }
 
   ngOnInit() {
-    this.alert$ = this.alertService.alertEvent.subscribe((alertEvent: Alert) => {
-      const alertType = alertEvent.type;
-      if (alertType === SettingsService.businessDateType + ' Set Config') {
-        this.isBusinessDateEnabled = (alertEvent.message === 'enabled') ? true : false;
-        this.isBusinessDateDefined = false;
-        if (this.isBusinessDateEnabled) {
-          this.setBusinessDate();
+    if (this.displayBackEndInfo) {
+      this.alert$ = this.alertService.alertEvent.subscribe((alertEvent: Alert) => {
+        const alertType = alertEvent.type;
+        if (alertType === SettingsService.businessDateType + ' Set Config') {
+          this.isBusinessDateEnabled = (alertEvent.message === 'enabled') ? true : false;
+          this.isBusinessDateDefined = false;
+          if (this.isBusinessDateEnabled) {
+            this.setBusinessDate();
+          }
+        } else if (alertType === SettingsService.businessDateType + ' Set') {
+          if (this.isBusinessDateEnabled) {
+            this.setBusinessDate();
+          }
+        } else if (alertType === 'Authentication Start') {
+          this.timer = setTimeout(() => { this.getConfigurations(); }, 60000);
         }
-      } else if (alertType === SettingsService.businessDateType + ' Set') {
-        if (this.isBusinessDateEnabled) {
-          this.setBusinessDate();
-        }
-      } else if (alertType === 'Authentication Start') {
-        this.timer = setTimeout(() => { this.getConfigurations(); }, 60000);
-      }
-    });
-    this.getConfigurations();
-    this.server = this.settingsService.server;
-    this.versionService.getBackendInfo().subscribe((data: any) => {
-      const buildVersion: string = data.git.build.version.split('-');
-      this.versions.fineract.version = buildVersion[0];
-      this.versions.fineract.hash = buildVersion[1];
-    });
+      });
+      this.getConfigurations();
+      this.server = this.settingsService.server;
+      this.versionService.getBackendInfo().subscribe((data: any) => {
+        const buildVersion: string = data.git.build.version.split('-');
+        this.versions.fineract.version = buildVersion[0];
+        this.versions.fineract.hash = buildVersion[1];
+      });
+    }
   }
 
   ngOnDestroy() {
-    clearTimeout(this.timer);
+    if (this.displayBackEndInfo) {
+      clearTimeout(this.timer);
+    }
   }
 
   /**

src/app/shared/language-selector/language-selector.component.html

@@ -1,8 +1,8 @@
 <mat-form-field id="language-selector">
-  <mat-label>{{ 'labels.inputs.Language' | translate }}</mat-label>
+  <mat-label>{{'labels.inputs.Language' | translate}}</mat-label>
   <mat-select [formControl]="languageSelector" (selectionChange)="setLanguage()" class="languageselector">
     <mat-option *ngFor="let language of languages" [value]="language">
-      {{ 'languages.' + language | translate }}
+      {{ 'languages.' + language | translate}}
     </mat-option>
   </mat-select>
 </mat-form-field>

src/app/shared/search-tool/search-tool.component.html

@@ -1,15 +1,15 @@
 <div *ngIf="searchVisible" class="search-bar" fxFlex="auto" fxHide.lt-sm="true" fxLayout="row" fxLayoutGap="2%" [@fadeInOut]>
 
   <mat-form-field class="search">
-    <mat-label>Search</mat-label>
+    <mat-label>{{'labels.text.Search' | translate}}</mat-label>
     <input matInput type="text" [formControl]="query" (keydown.enter)="search()">
   </mat-form-field>
 
   <mat-form-field class="resource">
-    <mat-label>Resource</mat-label>
+    <mat-label>{{'labels.text.Resource' | translate}}</mat-label>
     <mat-select [formControl]="resource">
       <mat-option *ngFor="let option of resourceOptions" [value]="option.value">
-        {{ option.name }}
+        {{'labels.text.' + option.name | translate }}
       </mat-option>
     </mat-select>
   </mat-form-field>
@@ -18,6 +18,6 @@
 
 <div class="search-icon">
   <button mat-icon-button (click)="toggleSearchVisibility()" fxHide.lt-sm="true">
-    <fa-icon icon="search" size="lg" matTooltip="Search"></fa-icon>
+    <fa-icon icon="search" size="lg" matTooltip="{{'labels.text.Search' | translate}}"></fa-icon>
   </button>
 </div>

src/app/shared/server-selector/server-selector.component.html

@@ -1,19 +1,19 @@
 <mat-form-field id="server-selector" *ngIf="existMoreThanOneServer">
-    <mat-label>{{ 'labels.inputs.Server' | translate }}</mat-label>
+    <mat-label>{{'labels.inputs.Server' | translate }}</mat-label>
     <mat-select [formControl]="serverSelector" (selectionChange)="setServer()">
         <div class="sticky">
             <form [formGroup]="form" (ngSubmit)="addNewServer()">
                 <div class="actions">
                     <mat-form-field class="ml" fxFlexAlign="start">
                         <span matPrefix><mat-icon>language</mat-icon></span>
-                        <mat-label>{{ 'labels.placeholders.Add new server' | translate }}</mat-label>
+                        <mat-label>{{'labels.placeholders.Add new server' | translate }}</mat-label>
                         <input matInput type="text" autocomplete="off" formControlName="url">
                         <mat-error *ngIf="form.controls.url.hasError('required')">
-                          {{ 'labels.inputs.Url' | translate }} <strong>{{'labels.commons.is required' | translate }}</strong>
+                          {{'labels.inputs.Url' | translate}} <strong>{{'labels.commons.is required' | translate }}</strong>
                         </mat-error>
                     </mat-form-field>
 
-                    <button type="submit" [disabled]="form.invalid" class="ml" mat-raised-button color="primary">{{ 'labels.buttons.Add' | translate }}</button>
+                    <button type="submit" [disabled]="form.invalid" class="ml" mat-raised-button color="primary">{{'labels.buttons.Add' | translate }}</button>
                 </div>
             </form>
         </div>

src/app/shared/shared.module.ts

@@ -55,7 +55,7 @@ import { StepperButtonsComponent } from './steppers/stepper-buttons/stepper-butt
     IconsModule,
     MaterialModule,
     ReactiveFormsModule,
-    TranslateModule.forRoot(),
+    TranslateModule,
     PipesModule,
     DirectivesModule,
     NgxMatDatetimePickerModule,

src/app/shared/tabs/entity-notes-tab/entity-notes-tab.component.html

@@ -20,7 +20,7 @@
       <h3 matLine>{{ entityNote.note }} </h3>
       <p matLine>
         <span>Created by: {{entityNote.createdByUsername}}</span><br />
-        <span>Date: {{entityNote.createdOn  | dateFormat}}</span>
+        <span>Date: {{entityNote.createdOn | dateFormat}}</span>
       </p>
       <div fxLayout="row" fxLayoutAlign="flex-start">
         <button mat-button color="primary" (click)="editNote(entityNote.id, entityNote.note, i)">

src/app/shared/tenant-selector/tenant-selector.component.html

@@ -2,7 +2,7 @@
   <span matPrefix class="m-r-10">
     <fa-icon icon="building" size="lg"></fa-icon>
   </span>
-  <mat-label>{{ 'labels.inputs.Tenant' | translate }}</mat-label>
+  <mat-label>{{'labels.inputs.Tenant' | translate}}</mat-label>
   <mat-select [disabled]="!allowSelection()" [formControl]="tenantSelector" (selectionChange)="setTenantIdentifier()" class="tenantselector">
     <mat-option *ngFor="let tenant of tenants" [value]="tenant">
       {{ tenant }}

src/app/shared/transaction-payment-detail/transaction-payment-detail.component.html

@@ -1,6 +1,6 @@
 <ng-container class="content">
   <div *ngIf="paymentDetailData.paymentType" fxFlex="50%" class="attribute">
-    {{ 'Payment Type' | translate }}
+    {{ 'Payment Type' | translate}}
   </div>
 
   <div *ngIf="paymentDetailData.paymentType" fxFlex="50%">
@@ -8,7 +8,7 @@
   </div>
 
   <div *ngIf="paymentDetailData.accountNumber" fxFlex="50%" class="attribute">
-    {{ 'Account No.' | translate }}
+    {{ 'Account No.' | translate}}
   </div>
 
   <div *ngIf="paymentDetailData.accountNumber" fxFlex="50%">
@@ -16,7 +16,7 @@
   </div>
 
   <div *ngIf="paymentDetailData.checkNumber" fxFlex="50%" class="attribute">
-    {{ 'Cheque Number' | translate }}
+    {{ 'Cheque Number' | translate}}
   </div>
 
   <div *ngIf="paymentDetailData.checkNumber" fxFlex="50%">
@@ -24,7 +24,7 @@
   </div>
 
   <div *ngIf="paymentDetailData.routingCode" fxFlex="50%" class="attribute">
-    {{ 'Routing Code' | translate }}
+    {{ 'Routing Code' | translate}}
   </div>
 
   <div *ngIf="paymentDetailData.routingCode" fxFlex="50%">
@@ -32,7 +32,7 @@
   </div>
 
   <div *ngIf="paymentDetailData.receiptNumber" fxFlex="50%" class="attribute">
-    {{ 'Receipt No.' | translate }}
+    {{ 'Receipt No.' | translate}}
   </div>
 
   <div *ngIf="paymentDetailData.receiptNumber" fxFlex="50%">
@@ -40,7 +40,7 @@
   </div>
 
   <div *ngIf="paymentDetailData.bankNumber" fxFlex="50%" class="attribute">
-    {{ 'Bank No.' | translate }}
+    {{ 'Bank No.' | translate}}
   </div>
 
   <div *ngIf="paymentDetailData.bankNumber" fxFlex="50%">