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

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

src/app/system/codes/codes.component.html

@@ -2,7 +2,7 @@
   <div #buttonCreateCode>
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CODE'">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      Create Code
+      {{'labels.buttons.Create Code' | translate}}
     </button>
   </div>
 </div>
@@ -11,7 +11,7 @@
 
   <div #filter fxLayout="row">
     <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,15 +19,15 @@
   <div #tableCodes class="mat-elevation-z8">
     <table mat-table [dataSource]="dataSource" matSort>
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Code Name </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Code Name' | translate}} </th>
         <td mat-cell *matCellDef="let code"> {{ code.name }} </td>
       </ng-container>
 
       <ng-container matColumnDef="systemDefined">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> System Defined </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.System Defined' | translate}} </th>
         <td mat-cell *matCellDef="let code">
-          <fa-icon *ngIf="code.systemDefined" icon="check-circle" size="lg" class="system-defined" matTooltip="Yes" matTooltipPosition="right"></fa-icon>
-          <fa-icon *ngIf="!code.systemDefined" icon="times-circle" size="lg" class="not-system-defined" matTooltip="No" matTooltipPosition="right"></fa-icon>
+          <fa-icon *ngIf="code.systemDefined" icon="check-circle" size="lg" class="system-defined" matTooltip="{{ 'tooltips.Yes' | translate}}" matTooltipPosition="right"></fa-icon>
+          <fa-icon *ngIf="!code.systemDefined" icon="times-circle" size="lg" class="not-system-defined" matTooltip="{{ 'tooltips.No' | translate}}" matTooltipPosition="right"></fa-icon>
         </td>
       </ng-container>
 
@@ -41,29 +41,29 @@
 </div>
 
 <ng-template #templateButtonCreateCode let-popover="popover">
-  <h2>Manage Codes</h2>
-  <p class="mw300">To create additional codes.</p>
+  <h2>{{'labels.heading.Manage Codes' | translate}}</h2>
+  <p class="mw300">{{'labels.text.To create additional codes.' | translate}}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep();">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true);">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep();">{{'labels.buttons.Back' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true);">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
-  <h4>Search bar to filter codes.</h4>
+  <h4>{{'labels.heading.Search bar to filter codes' | translate}}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateCode, buttonCreateCode, 'bottom', true);">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableCodes, tableCodes, 'top', true);">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateCode, buttonCreateCode, 'bottom', true);">{{'labels.buttons.Back' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableCodes, tableCodes, 'top', true);">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateTableCodes let-popover="popover">
-  <h4>List of all codes in the Mifos system for your organization.</h4>
+  <h4>{{'labels.heading.List of all codes in the Mifos system' | translate}}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true);">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true);">{{'labels.buttons.Back' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>

src/app/system/codes/create-code/create-code.component.html

@@ -9,10 +9,10 @@
           <div #codeFormRef fxLayout="column">
 
             <mat-form-field>
-              <mat-label>Code Name</mat-label>
+              <mat-label>{{'labels.inputs.Code Name' | translate}}</mat-label>
               <input matInput required formControlName="name">
               <mat-error *ngIf="codeForm.controls.name.hasError('required')">
-                Code Name is <strong>required</strong>
+                {{'labels.inputs.Code Name' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
               </mat-error>
             </mat-form-field>
 
@@ -21,8 +21,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!codeForm.valid" *mifosxHasPermission="'CREATE_CODE'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!codeForm.valid" *mifosxHasPermission="'CREATE_CODE'">{{'labels.buttons.Submit' | translate}}</button>
       </mat-card-actions>
 
     </form>
@@ -32,12 +32,12 @@
 </div>
 
 <ng-template #templateCodeFormRef let-data let-popover="popover">
-  <h2>Create Code</h2>
-  <p class="mw400">To create code, click on create code and enter the code name.<br> For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895350/Manage+Codes" target="_blank">Manage Codes</a></p>
+  <h2>{{'labels.heading.Create Code' | translate}}</h2>
+  <p class="mw400">{{'labels.text.To create code,create' | translate}}<br> {{'labels.text.For more details click' | translate}}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895350/Manage+Codes" target="_blank">{{'labels.inputs.Manage Codes' | translate}}</a></p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close()">Create Code</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close()">{{'labels.buttons.Create Code' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{'labels.buttons.Back' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate}}</button>
   </div>
 </ng-template>

src/app/system/codes/edit-code/edit-code.component.html

@@ -9,10 +9,10 @@
           <div fxLayout="column">
 
             <mat-form-field>
-              <mat-label>Code Name</mat-label>
+              <mat-label>{{'labels.inputs.Code Name' | translate}}</mat-label>
               <input matInput required formControlName="name">
               <mat-error *ngIf="codeForm.controls.name.hasError('required')">
-                Code Name is <strong>required</strong>
+                {{'labels.inputs.Code Name' | translate}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
               </mat-error>
             </mat-form-field>
 
@@ -21,8 +21,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
-        <button mat-raised-button color="primary" [disabled]="!codeForm.valid || codeForm.pristine" *mifosxHasPermission="'UPDATE_CODE'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!codeForm.valid || codeForm.pristine" *mifosxHasPermission="'UPDATE_CODE'">{{'labels.buttons.Submit' | translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/system/codes/view-code/view-code.component.html

@@ -2,20 +2,20 @@
 
   <button mat-raised-button color="primary" (click)="addCodeValueRow()" *mifosxHasPermission="'CREATE_CODEVALUE'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Add Code Value
+    {{'labels.buttons.Add Code Value' | translate}}
   </button>
 
   <span *ngIf="!codeData.systemDefined">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CODE'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit Code
+    {{'labels.buttons.Edit Code' | translate}}
   </button>
   </span>
 
   <span *ngIf="!codeData.systemDefined">
     <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_CODEVALUE'">
       <fa-icon icon="trash" class="m-r-10"></fa-icon>
-      Delete Code
+      {{'labels.buttons.Delete Code' | translate}}
     </button>
   </span>
 
@@ -36,47 +36,47 @@
           <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
 
             <mat-form-field fxFlex="20%">
-              <mat-label>Name</mat-label>
+              <mat-label>{{'labels.inputs.name' | translate}}</mat-label>
               <input required matInput formControlName="name">
               <mat-error *ngIf="codeValues.at(i).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>
 
             <mat-form-field fxFlex="22%">
-              <mat-label>Description</mat-label>
+              <mat-label>{{'labels.inputs.Description' | translate}}</mat-label>
               <input matInput formControlName="description">
             </mat-form-field>
 
             <mat-form-field fxFlex="18%">
-              <mat-label>Position</mat-label>
+              <mat-label>{{'labels.inputs.Position' | translate}}</mat-label>
               <input required matInput formControlName="position" type="number">
               <mat-error *ngIf="codeValues.at(i).controls.position.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>
 
             <div class="active-wrapper" fxFlex="8%">
-              <mat-checkbox formControlName="isActive" class="active">Active</mat-checkbox>
+              <mat-checkbox formControlName="isActive" class="active">{{'labels.inputs.Active' | translate}}</mat-checkbox>
             </div>
 
             <div fxLayoutGap="2%" fxFlex="22%" class="options-wrapper">
               <span *ngIf="codeValueRowStatus[i] === 'edit'">
                 <button mat-stroked-button color="primary" [disabled]="codeValues.at(i).pristine" (click)="updateCodeValue(i)"
                   *mifosxHasPermission="'UPDATE_CODEVALUE'">
-                  Submit
+                  {{'labels.buttons.Submit' | translate}}
                 </button>
               </span>
               <button mat-button *ngIf="codeValueRowStatus[i] === 'edit'" (click)="disableRow(i)">
-                Cancel
+                {{'labels.buttons.Cancel' | translate}}
               </button>
-              <button mat-icon-button color="primary" [disabled]="!codeValuesForm.get('codeValues').at(i).valid" *ngIf="codeValueRowStatus[i] === 'new'" matTooltip="Add" matTooltipPosition="above" (click)="addCodeValue(i)">
+              <button mat-icon-button color="primary" [disabled]="!codeValuesForm.get('codeValues').at(i).valid" *ngIf="codeValueRowStatus[i] === 'new'" matTooltip="{{ 'tooltips.Add' | translate}}" matTooltipPosition="above" (click)="addCodeValue(i)">
                 <fa-icon icon="plus" size="lg"></fa-icon>
               </button>
-              <button type="button" color="primary" *ngIf="codeValueRowStatus[i] === 'disabled'" mat-icon-button matTooltip="Edit" matTooltipPosition="above" (click)="enableRow(i)">
+              <button type="button" color="primary" *ngIf="codeValueRowStatus[i] === 'disabled'" mat-icon-button matTooltip="{{ 'tooltips.Edit' | translate}}" matTooltipPosition="above" (click)="enableRow(i)">
                 <fa-icon icon="edit" size="lg"></fa-icon>
               </button>
-              <button type="button" color="warn" mat-icon-button matTooltip="Delete" *mifosxHasPermission="'DELETE_CODEVALUE'" matTooltipPosition="above" (click)="codeValueRowStatus[i] === 'new' ? removeNewCodeValue(i) : deleteCodeValue(i)">
+              <button type="button" color="warn" mat-icon-button matTooltip="{{ 'tooltips.Delete' | translate}}" *mifosxHasPermission="'DELETE_CODEVALUE'" matTooltipPosition="above" (click)="codeValueRowStatus[i] === 'new' ? removeNewCodeValue(i) : deleteCodeValue(i)">
                 <fa-icon icon="trash" size="lg"></fa-icon>
               </button>
             </div>