i18n: Adding new languages: Part 2 (#1885)

Co-authored-by: radhathakare <radhathakare322@gmail.com>

src/app/organization/loan-provisioning-criteria/create-loan-provisioning-criteria/create-loan-provisioning-criteria.component.html

@@ -9,15 +9,15 @@
         <div fxLayout="row" fxLayoutGap="2%">
 
           <mat-form-field fxFlex>
-            <mat-label>Provisioning Criteria</mat-label>
+            <mat-label>{{ 'labels.inputs.Provisioning Criteria' | translate }}</mat-label>
             <input required matInput formControlName="criteriaName">
             <mat-error *ngIf="provisioningCriteriaForm.controls.criteriaName.hasError('required')">
-              Provisioning Criteria is <strong>required</strong>
+              {{ 'labels.inputs.Provisioning Criteria' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex>
-            <mat-label>Selected Products</mat-label>
+            <mat-label>{{ 'labels.inputs.Selected Products' | translate }}</mat-label>
             <mat-select formControlName="loanProducts" multiple>
               <mat-option *ngFor="let product of loanProvisioningCriteriaTemplate.loanProducts" [value]="product">
                 {{ product.name }}
@@ -33,46 +33,47 @@
 
     <div class="mat-elevation-z1">
 
-      <mat-hint *ngIf="!provisioningCriteriaFormValid">Please fill all provisioning criteria definitions.</mat-hint>
+      <mat-hint *ngIf="!provisioningCriteriaFormValid">
+        {{ 'labels.text.Provisioning criteria definitions' | translate }}</mat-hint>
 
       <table mat-table class="m-t-10" [dataSource]="definitions">
 
         <ng-container matColumnDef="category">
-          <th mat-header-cell *matHeaderCellDef> Category </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Category' | translate }} </th>
           <td mat-cell *matCellDef="let definition"> {{ definition.categoryName }} </td>
         </ng-container>
 
         <ng-container matColumnDef="minAge">
-          <th mat-header-cell *matHeaderCellDef> Min Age </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Min Age' | translate }} </th>
           <td mat-cell *matCellDef="let definition"> {{ definition.minAge || '0' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="maxAge">
-          <th mat-header-cell *matHeaderCellDef> Max Age </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Max Age' | translate }} </th>
           <td mat-cell *matCellDef="let definition"> {{ definition.maxAge || '0' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="percentage">
-          <th mat-header-cell *matHeaderCellDef> Percentage (%)</th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Percentage' | translate }} (%)</th>
           <td mat-cell *matCellDef="let definition"> {{ definition.provisioningPercentage || '0' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="liabilityAccount">
-          <th mat-header-cell *matHeaderCellDef> Liability Account </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Liability Account' | translate }} </th>
           <td mat-cell *matCellDef="let definition"> {{ (definition.liabilityAccount | find:loanProvisioningCriteriaTemplate.glAccounts:'id':'name') || '-' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="expenseAccount">
-          <th mat-header-cell *matHeaderCellDef> Expense Account </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Expense Account' | translate }} </th>
           <td mat-cell *matCellDef="let definition"> {{ (definition.expenseAccount | find:loanProvisioningCriteriaTemplate.glAccounts:'id':'name') || '-' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="edit">
-          <th mat-header-cell *matHeaderCellDef> Actions </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate }} </th>
           <td mat-cell *matCellDef="let definition">
             <button mat-button color="primary" (click)="editDefinition(definition)">
               <fa-icon icon="edit" class="m-r-10"></fa-icon>
-              Edit
+              {{'labels.buttons.Edit' | translate }}
             </button>
           </td>
         </ng-container>
@@ -85,8 +86,8 @@
     </div>
 
     <div class="m-t-20" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="20px">
-      <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
-      <button mat-raised-button color="primary" [disabled]="!provisioningCriteriaFormValid" (click)="submit()" *mifosxHasPermission="'CREATE_PROVISIONING_CRITERIA'">Submit</button>
+      <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
+      <button mat-raised-button color="primary" [disabled]="!provisioningCriteriaFormValid" (click)="submit()" *mifosxHasPermission="'CREATE_PROVISIONING_CRITERIA'">{{'labels.buttons.Submit' | translate }}</button>
     </div>
 
   </mat-card>

src/app/organization/loan-provisioning-criteria/edit-loan-provisioning-criteria/edit-loan-provisioning-criteria.component.html

@@ -9,15 +9,15 @@
         <div fxLayout="row" fxLayoutGap="2%">
 
           <mat-form-field fxFlex>
-            <mat-label>Provisioning Criteria</mat-label>
+            <mat-label>{{ 'labels.inputs.Provisioning Criteria' | translate }}</mat-label>
             <input required matInput formControlName="criteriaName">
             <mat-error *ngIf="provisioningCriteriaForm.controls.criteriaName.hasError('required')">
-              Provisioning Criteria is <strong>required</strong>
+              {{ 'labels.inputs.Provisioning Criteria' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex>
-            <mat-label>Selected Products</mat-label>
+            <mat-label>{{ 'labels.inputs.Selected Products' | translate }}</mat-label>
             <mat-select formControlName="loanProducts" [compareWith]="compareOptions" multiple>
               <mat-option *ngFor="let product of loanProducts" [value]="product">
                 {{ product.name }}
@@ -33,46 +33,46 @@
 
     <div class="mat-elevation-z1">
 
-      <mat-hint *ngIf="!provisioningCriteriaFormValid">Please fill all provisioning criteria definitions.</mat-hint>
+      <mat-hint *ngIf="!provisioningCriteriaFormValid">{{ 'labels.text.Provisioning criteria definitions' | translate }}</mat-hint>
 
       <table mat-table class="m-t-10" [dataSource]="definitions">
 
         <ng-container matColumnDef="category">
-          <th mat-header-cell *matHeaderCellDef> Category </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Category' | translate }} </th>
           <td mat-cell *matCellDef="let definition"> {{ definition.categoryName }} </td>
         </ng-container>
 
         <ng-container matColumnDef="minAge">
-          <th mat-header-cell *matHeaderCellDef> Min Age </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Min Age' | translate }} </th>
           <td mat-cell *matCellDef="let definition"> {{ definition.minAge || '0' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="maxAge">
-          <th mat-header-cell *matHeaderCellDef> Max Age </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Max Age' | translate }} </th>
           <td mat-cell *matCellDef="let definition"> {{ definition.maxAge || '0' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="percentage">
-          <th mat-header-cell *matHeaderCellDef> Percentage (%)</th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Percentage' | translate }} (%)</th>
           <td mat-cell *matCellDef="let definition"> {{ definition.provisioningPercentage || '0' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="liabilityAccount">
-          <th mat-header-cell *matHeaderCellDef> Liability Account </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Liability Account' | translate }} </th>
           <td mat-cell *matCellDef="let definition"> {{ (definition.liabilityAccount | find:loanProvisioningCriteriaAndTemplate.glAccounts:'id':'name') || '-' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="expenseAccount">
-          <th mat-header-cell *matHeaderCellDef> Expense Account </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Expense Account' | translate }} </th>
           <td mat-cell *matCellDef="let definition"> {{ (definition.expenseAccount | find:loanProvisioningCriteriaAndTemplate.glAccounts:'id':'name') || '-' }} </td>
         </ng-container>
 
         <ng-container matColumnDef="edit">
-          <th mat-header-cell *matHeaderCellDef> Actions </th>
+          <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate }} </th>
           <td mat-cell *matCellDef="let definition">
             <button mat-button color="primary" (click)="editDefinition(definition)">
               <fa-icon icon="edit" class="m-r-10"></fa-icon>
-              Edit
+              {{'labels.buttons.Edit' | translate }}
             </button>
           </td>
         </ng-container>
@@ -85,8 +85,8 @@
     </div>
 
     <div class="m-t-20" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="20px">
-      <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
-      <button mat-raised-button color="primary" [disabled]="!provisioningCriteriaFormValid" (click)="submit()" *mifosxHasPermission="'UPDATE_CRITERIA'">Submit</button>
+      <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
+      <button mat-raised-button color="primary" [disabled]="!provisioningCriteriaFormValid" (click)="submit()" *mifosxHasPermission="'UPDATE_CRITERIA'">{{'labels.buttons.Submit' | translate }}</button>
     </div>
 
   </mat-card>

src/app/organization/loan-provisioning-criteria/loan-provisioning-criteria.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_PROVISIONING_CRITERIA'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Create Provisioning Criteria
+    {{'labels.buttons.Create Provisioning Criteria' | translate }}
   </button>
 </div>
 
@@ -19,12 +19,12 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="criteriaName">
-        <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 loanProvisioningCriteria"> {{ loanProvisioningCriteria.criteriaName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="createdBy">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Created By </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Created By' | translate }} </th>
         <td mat-cell *matCellDef="let loanProvisioningCriteria"> {{ loanProvisioningCriteria.createdBy }} </td>
       </ng-container>
 

src/app/organization/loan-provisioning-criteria/view-loan-provisioning-criteria/view-loan-provisioning-criteria.component.html

@@ -1,11 +1,11 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CRITERIA'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{'labels.buttons.Edit' | translate }}
   </button>
   <button mat-raised-button color="warn" (click)="deleteCriteria()" *mifosxHasPermission="'DELETE_CRITERIA'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    Delete
+    {{'labels.buttons.Delete' | translate }}
   </button>
 </div>
 
@@ -21,7 +21,7 @@
         <mat-divider [inset]="true"></mat-divider>
 
          <div fxFlexFill class="loanProduct">
-          <span fxFlex="40%">Loan Product:</span>
+          <span fxFlex="40%">{{ 'labels.inputs.Loan Product' | translate }}:</span>
           <span fxFlex="60%">{{ loanProducts }}</span>
         </div>
 
@@ -32,32 +32,32 @@
         <table mat-table class="mat-elevation-z1" [dataSource]="dataSource">
 
           <ng-container matColumnDef="category">
-            <th mat-header-cell *matHeaderCellDef> Category </th>
+            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Category' | translate }} </th>
             <td mat-cell *matCellDef="let provisioningData"> {{provisioningData.categoryName}} </td>
           </ng-container>
 
           <ng-container matColumnDef="minAge">
-            <th mat-header-cell *matHeaderCellDef> Min Age </th>
+            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Min Age' | translate }} </th>
             <td mat-cell *matCellDef="let provisioningData"> {{provisioningData.minAge}} </td>
           </ng-container>
 
           <ng-container matColumnDef="maxAge">
-            <th mat-header-cell *matHeaderCellDef> Max Age </th>
+            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Max Age' | translate }} </th>
             <td mat-cell *matCellDef="let provisioningData"> {{provisioningData.maxAge}} </td>
           </ng-container>
 
           <ng-container matColumnDef="percentage">
-            <th mat-header-cell *matHeaderCellDef> Percentage </th>
+            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Percentage' | translate }} </th>
             <td mat-cell *matCellDef="let provisioningData"> {{provisioningData.provisioningPercentage}} </td>
           </ng-container>
 
           <ng-container matColumnDef="liabilityAccount">
-            <th mat-header-cell *matHeaderCellDef> Liability Account </th>
+            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Liability Account' | translate }} </th>
             <td mat-cell *matCellDef="let provisioningData"> {{provisioningData.liabilityName}} </td>
           </ng-container>
 
           <ng-container matColumnDef="expenseAccount">
-            <th mat-header-cell *matHeaderCellDef> Expense Account </th>
+            <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Expense Account' | translate }} </th>
             <td mat-cell *matCellDef="let provisioningData"> {{provisioningData.expenseName}} </td>
           </ng-container>