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

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

src/app/templates/create-template/create-template.component.html

@@ -9,34 +9,34 @@
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Entity</mat-label>
+            <mat-label>{{'labels.inputs.Entity' | translate}}</mat-label>
             <mat-select required formControlName="entity">
               <mat-option *ngFor="let entity of createTemplateData.entities" [value]="entity.id">
                 {{ entity.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="templateForm.controls.entity.hasError('required')">
-              Entity is <strong>required</strong>
+              {{'labels.inputs.Entity' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Type</mat-label>
+            <mat-label>{{'labels.inputs.Type' | translate}}</mat-label>
             <mat-select required formControlName="type">
               <mat-option *ngFor="let type of createTemplateData.types" [value]="type.id">
                 {{ type.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="templateForm.controls.type.hasError('required')">
-              Type is <strong>required</strong>
+              {{'labels.inputs.Type' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Name</mat-label>
+            <mat-label>{{'labels.inputs.name' | translate}}</mat-label>
             <input matInput required formControlName="name">
             <mat-error *ngIf="templateForm.controls.name.hasError('required')">
-              Name is <strong>required</strong>
+              {{'labels.inputs.name' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -48,7 +48,8 @@
 
     <div role="toggle" fxFlex="13%">
 
-      <button mat-raised-button color="primary" (click)="showAdvanceOptions = !showAdvanceOptions">Advance Options</button>
+      <button mat-raised-button color="primary" (click)="showAdvanceOptions = !showAdvanceOptions">
+        {{'labels.buttons.Advance Options' | translate}}</button>
 
     </div>
 
@@ -57,20 +58,20 @@
       <div *ngFor="let mapper of mappers; index as i" fxLayout="row" fxLayoutGap="2%">
 
         <mat-form-field fxFlex="43%">
-          <mat-label>Mapper Key</mat-label>
+          <mat-label>{{'labels.inputs.Mapper Key' | translate}}</mat-label>
           <input matInput [formControl]="mapper.mapperskey">
         </mat-form-field>
 
         <mat-form-field fxFlex="43%">
-          <mat-label>Mapper Value</mat-label>
+          <mat-label>{{'labels.inputs.Mapper Value' | translate}}</mat-label>
           <input matInput [formControl]="mapper.mappersvalue">
         </mat-form-field>
 
         <button *ngIf="i === 0" class="mapper-button" fxFlex="8%" mat-raised-button color="primary" (click)="addMapper()">
-          <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
+          <fa-icon icon="plus" class="m-r-10"></fa-icon>{{'labels.buttons.Add' | translate}}
         </button>
         <button *ngIf="!(i === 0)" class="mapper-button" fxFlex="9%" mat-raised-button color="primary" (click)="removeMapper(i)">
-          <fa-icon icon="minus" class="m-r-10"></fa-icon>Remove
+          <fa-icon icon="minus" class="m-r-10"></fa-icon>{{'labels.buttons.Remove' | translate}}
         </button>
 
       </div>
@@ -91,7 +92,7 @@
 
           <mat-expansion-panel-header>
             <mat-panel-title>
-              Client Parameters
+              {{'labels.inputs.Client Parameters' | translate}}
             </mat-panel-title>
           </mat-expansion-panel-header>
 
@@ -108,7 +109,7 @@
 
           <mat-expansion-panel-header>
             <mat-panel-title>
-              Loan Parameters
+              {{'labels.inputs.Loan Parameters' | translate}}
             </mat-panel-title>
           </mat-expansion-panel-header>
 
@@ -125,7 +126,7 @@
 
           <mat-expansion-panel-header>
             <mat-panel-title>
-              Repayment Schedule Parameters
+              {{'labels.inputs.Repayment Schedule Parameters' | translate}}
             </mat-panel-title>
           </mat-expansion-panel-header>
 
@@ -143,8 +144,8 @@
     </div>
 
     <mat-card-actions class="m-b-20" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
-      <button mat-raised-button color="primary" (click)="submit()">Submit</button>
+      <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
+      <button mat-raised-button color="primary" (click)="submit()">{{'labels.buttons.Submit' | translate}}</button>
     </mat-card-actions>
 
   </mat-card>

src/app/templates/edit-template/edit-template.component.html

@@ -9,7 +9,7 @@
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Entity</mat-label>
+            <mat-label>{{'labels.inputs.Entity' | translate}}</mat-label>
             <mat-select formControlName="entity">
               <mat-option *ngFor="let entity of editTemplateData.entities" [value]="entity.id">
                 {{ entity.name }}
@@ -18,7 +18,7 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Type</mat-label>
+            <mat-label>{{'labels.inputs.Type' | translate}}</mat-label>
             <mat-select formControlName="type">
               <mat-option *ngFor="let type of editTemplateData.types" [value]="type.id">
                 {{ type.name }}
@@ -27,7 +27,7 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Name</mat-label>
+            <mat-label>{{'labels.inputs.name' | translate}}</mat-label>
             <input matInput formControlName="name">
           </mat-form-field>
 
@@ -39,7 +39,7 @@
 
     <div role="toggle" fxFlex="13%">
 
-      <button mat-raised-button color="primary" (click)="showAdvanceOptions = !showAdvanceOptions">Advance Options</button>
+      <button mat-raised-button color="primary" (click)="showAdvanceOptions = !showAdvanceOptions">{{'labels.buttons.Advance Options' | translate}}</button>
 
     </div>
 
@@ -48,20 +48,20 @@
       <div *ngFor="let mapper of mappers; index as i" fxLayout="row" fxLayoutGap="2%">
 
         <mat-form-field fxFlex="43%">
-          <mat-label>Mapper Key</mat-label>
+          <mat-label>{{'labels.inputs.Mapper Key' | translate}}</mat-label>
           <input matInput [formControl]="mapper.mapperskey">
         </mat-form-field>
 
         <mat-form-field fxFlex="43%">
-          <mat-label>Mapper Value</mat-label>
+          <mat-label>{{'labels.inputs.Mapper Value' | translate}}</mat-label>
           <input matInput [formControl]="mapper.mappersvalue">
         </mat-form-field>
 
         <button *ngIf="i === 0" class="mapper-button" fxFlex="8%" mat-raised-button color="primary" (click)="addMapper()">
-          <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
+          <fa-icon icon="plus" class="m-r-10"></fa-icon>{{'labels.buttons.Add' | translate}}
         </button>
         <button *ngIf="!(i === 0)" class="mapper-button" fxFlex="9%" mat-raised-button color="primary" (click)="removeMapper(i)">
-          <fa-icon icon="minus" class="m-r-10"></fa-icon>Remove
+          <fa-icon icon="minus" class="m-r-10"></fa-icon>{{'labels.buttons.Remove' | translate}}
         </button>
 
       </div>
@@ -82,7 +82,7 @@
 
           <mat-expansion-panel-header>
             <mat-panel-title>
-              Client Parameters
+              {{'labels.inputs.Client Parameters' | translate}}
             </mat-panel-title>
           </mat-expansion-panel-header>
 
@@ -99,7 +99,7 @@
 
           <mat-expansion-panel-header>
             <mat-panel-title>
-              Loan Parameters
+              {{'labels.inputs.Loan Parameters' | translate}}
             </mat-panel-title>
           </mat-expansion-panel-header>
 
@@ -116,7 +116,7 @@
 
           <mat-expansion-panel-header>
             <mat-panel-title>
-              Repayment Schedule Parameters
+              {{'labels.inputs.Repayment Schedule Parameters' | translate}}
             </mat-panel-title>
           </mat-expansion-panel-header>
 
@@ -134,8 +134,8 @@
     </div>
 
     <mat-card-actions class="m-b-20" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
-      <button mat-raised-button color="primary" (click)="submit()">Submit</button>
+      <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
+      <button mat-raised-button color="primary" (click)="submit()">{{'labels.buttons.Submit' | translate}}</button>
     </mat-card-actions>
 
   </mat-card>

src/app/templates/templates-routing.module.ts

@@ -5,9 +5,6 @@ import { Routes, RouterModule } from '@angular/router';
 /** Routing Imports */
 import { Route } from '../core/route/route.service';
 
-/** Translation Imports */
-import { extract } from '../core/i18n/i18n.service';
-
 /** Custom Components */
 import { TemplatesComponent } from './templates.component';
 import { ViewTemplateComponent } from './view-template/view-template.component';
@@ -25,7 +22,7 @@ const routes: Routes = [
   Route.withShell([
     {
       path: 'templates',
-      data: { title: extract('Templates'), breadcrumb: 'Templates' },
+      data: { title: 'Templates', breadcrumb: 'Templates' },
       children: [
         {
           path: '',
@@ -36,7 +33,7 @@ const routes: Routes = [
         },
         {
           path: 'create',
-          data: { title: extract('Create Template'), breadcrumb: 'Create Template' },
+          data: { title: 'Create Template', breadcrumb: 'Create Template' },
           component: CreateTemplateComponent,
           resolve: {
             createTemplateData: CreateTemplateResolver
@@ -44,7 +41,7 @@ const routes: Routes = [
         },
         {
           path: ':id',
-          data: { title: extract('View Template'), routeParamBreadcrumb: 'id' },
+          data: { title: 'View Template', routeParamBreadcrumb: 'id' },
           children: [
             {
               path: '',
@@ -56,7 +53,7 @@ const routes: Routes = [
             {
               path: 'edit',
               component: EditTemplateComponent,
-              data: { title: extract('Edit Template'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+              data: { title: 'Edit Template', breadcrumb: 'Edit', routeParamBreadcrumb: false },
               resolve: {
                 editTemplateData: EditTemplateResolver
               }

src/app/templates/templates.component.html

@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_TEMPLATE'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Create Template
+    {{'labels.buttons.Create Template' | translate}}
   </button>
 </div>
 
@@ -9,7 +9,7 @@
 
   <div fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <mat-label>{{'labels.inputs.Filter' | translate }}</mat-label>
       <input matInput (keyup)="applyFilter($event.target.value)">
     </mat-form-field>
   </div>
@@ -19,17 +19,17 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="entity">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Entity </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Entity' | translate}} </th>
         <td mat-cell *matCellDef="let template"> {{ template.entity }} </td>
       </ng-container>
 
       <ng-container matColumnDef="type">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Type </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Type' | translate}} </th>
         <td mat-cell *matCellDef="let template"> {{ template.type }} </td>
       </ng-container>
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.name' | translate}} </th>
         <td mat-cell *matCellDef="let template"> {{ template.name }} </td>
       </ng-container>
 

src/app/templates/view-template/view-template.component.html

@@ -2,12 +2,12 @@
 
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_TEMPLATE'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{'labels.buttons.Edit' | translate}}
   </button>
 
   <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_TEMPLATE'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    Delete
+    {{'labels.buttons.Delete' | translate}}
   </button>
 
 </div>
@@ -21,7 +21,7 @@
       <div fxLayout="row wrap" class="content">
 
         <div fxFlex="50%" class="mat-body-strong">
-          Name
+          {{'labels.inputs.name' | translate}}
         </div>
 
         <div fxFlex="50%">
@@ -29,7 +29,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Entity
+          {{'labels.inputs.Entity' | translate}}
         </div>
 
         <div fxFlex="50%">
@@ -37,7 +37,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Type
+          {{'labels.inputs.Type' | translate}}
         </div>
 
         <div fxFlex="50%">
@@ -45,7 +45,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Text
+          {{'labels.inputs.Text' | translate}}
         </div>
 
         <div fxFlex="50%" [innerHTML]="templateData.text"></div>