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

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

src/app/organization/employees/create-employee/create-employee.component.html

@@ -9,55 +9,55 @@
         <div #createEmployeeFormRef fxLayout="column">
           
           <mat-form-field>
-            <mat-label>Office</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="employeeForm.controls.officeId.hasError('required')">
-              Office is <strong>required</strong>
+              {{'labels.inputs.Office' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
           
           <mat-form-field>
-            <mat-label>First Name</mat-label>
+            <mat-label>{{'labels.inputs.First Name' | translate }}</mat-label>
             <input matInput required formControlName="firstname">
             <mat-error *ngIf="employeeForm.controls.firstname.hasError('required')">
-              First Name is <strong>required</strong>
+              {{'labels.inputs.First Name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="employeeForm.controls.firstname.hasError('pattern')">
-              First Name <strong>cannot</strong> begin with a special character or number
+              {{'labels.inputs.First Name' | translate }} <strong>{{'labels.inputs.cannot' | translate }}</strong> {{'labels.inputs.begin with a special character or number' | translate }}
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Last Name</mat-label>
+            <mat-label>{{'labels.inputs.Last Name' | translate }}</mat-label>
             <input matInput required formControlName="lastname">
             <mat-error *ngIf="employeeForm.controls.lastname.hasError('required')">
-              Last Name is <strong>required</strong>
+              {{'labels.inputs.Last Name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="employeeForm.controls.lastname.hasError('pattern')">
-              Last Name <strong>cannot</strong> begin with a special character or number
+              {{'labels.inputs.Last Name' | translate }} <strong>{{'labels.inputs.cannot' | translate }}</strong> {{'labels.inputs.begin with a special character or number' | translate }}
             </mat-error>
           </mat-form-field>
 
           <mat-checkbox labelPosition="before" formControlName="isLoanOfficer" class="loan-officer">
-            Is Loan Officer
+            {{'labels.inputs.Is Loan Officer' | translate }}
           </mat-checkbox>
 
           <mat-form-field>
-            <mat-label>Mobile Number for SMS</mat-label>
+            <mat-label>{{'labels.inputs.Mobile Number for SMS' | translate }}</mat-label>
             <input matInput formControlName="mobileNo">
           </mat-form-field>
 
           <mat-form-field (click)="joiningDatePicker.open()">
-            <mat-label>Joining Date</mat-label>
+            <mat-label>{{'labels.inputs.Joining Date' | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="joiningDatePicker" required formControlName="joiningDate">
             <mat-datepicker-toggle matSuffix [for]="joiningDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #joiningDatePicker></mat-datepicker>
             <mat-error *ngIf="employeeForm.controls.joiningDate.hasError('required')">
-              Joining Date is <strong>required</strong>
+              {{'labels.inputs.Joining Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -66,8 +66,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]="!employeeForm.valid" *mifosxHasPermission="'CREATE_STAFF'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!employeeForm.valid" *mifosxHasPermission="'CREATE_STAFF'">{{'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>
@@ -77,12 +77,12 @@
 </div>
 
 <ng-template #templateCreateEmployeeForm let-popover="popover">
-  <h2>Create Employee</h2>
-  <p class="mw400">Click to start filling the details. * mark fields are neccessary. <br> For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141732/Manage+Employees" target="_blank">Manage Employees</a></p>
+  <h2>{{ 'labels.heading.Create Employee' | translate }}</h2>
+  <p class="mw400">{{'labels.text.Start filling the details' | translate }} <br> {{'labels.text.For more details click' | translate }}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141732/Manage+Employees" target="_blank">{{'labels.inputs.Manage Employees' | 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 Employee</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 Employee' | 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/organization/employees/edit-employee/edit-employee.component.html

@@ -9,59 +9,59 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Office</mat-label>
+            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="editEmployeeForm.controls.officeId.hasError('required')">
-              Office is <strong>required</strong>
+              {{'labels.inputs.Office' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>First Name</mat-label>
+            <mat-label>{{'labels.inputs.First Name' | translate }}</mat-label>
             <input matInput required formControlName="firstname">
             <mat-error *ngIf="editEmployeeForm.controls.firstname.hasError('required')">
-              First Name is <strong>required</strong>
+              {{'labels.inputs.First Name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="editEmployeeForm.controls.firstname.hasError('pattern')">
-              First Name <strong>cannot</strong> begin with a special character or number
+              {{'labels.inputs.First Name' | translate }} <strong>{{'labels.inputs.cannot' | translate }}</strong> {{'labels.inputs.begin with a special character or number' | translate }}
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Last Name</mat-label>
+            <mat-label>{{'labels.inputs.Last Name' | translate }}</mat-label>
             <input matInput required formControlName="lastname">
             <mat-error *ngIf="editEmployeeForm.controls.lastname.hasError('required')">
-              Last Name is <strong>required</strong>
+              {{'labels.inputs.Last Name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
             <mat-error *ngIf="editEmployeeForm.controls.lastname.hasError('pattern')">
-              Last Name <strong>cannot</strong> begin with a special character or number
+              {{'labels.inputs.Last Name' | translate }} <strong>{{'labels.inputs.cannot' | translate }}</strong> {{'labels.inputs.begin with a special character or number' | translate }}
             </mat-error>
           </mat-form-field>
 
           <mat-checkbox labelPosition="before" formControlName="isLoanOfficer" class="m-b-10">
-            Is Loan Officer
+            {{'labels.inputs.Is Loan Officer' | translate }}
           </mat-checkbox>
 
           <mat-form-field>
-            <mat-label>Mobile Number for SMS</mat-label>
+            <mat-label>{{'labels.inputs.Mobile Number for SMS' | translate }}</mat-label>
             <input matInput formControlName="mobileNo">
           </mat-form-field>
 
           <mat-checkbox labelPosition="before" formControlName="isActive">
-            Active
+            {{'labels.inputs.Active' | translate }}
           </mat-checkbox>
 
           <mat-form-field (click)="joiningDatePicker.open()">
-            <mat-label>Joining Date</mat-label>
+            <mat-label>{{'labels.inputs.Joining Date' | translate }}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="joiningDatePicker" required formControlName="joiningDate">
             <mat-datepicker-toggle matSuffix [for]="joiningDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #joiningDatePicker></mat-datepicker>
             <mat-error *ngIf="editEmployeeForm.controls.joiningDate.hasError('required')">
-              Joining Date is <strong>required</strong>
+              {{'labels.inputs.Joining Date' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -70,8 +70,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]="!editEmployeeForm.valid" *mifosxHasPermission="'UPDATE_STAFF'">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate }}</button>
+        <button mat-raised-button color="primary" [disabled]="!editEmployeeForm.valid" *mifosxHasPermission="'UPDATE_STAFF'">{{'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/organization/employees/employees.component.html

@@ -3,13 +3,13 @@
   <div #buttonImportEmployees>
     <button mat-raised-button color="primary" *mifosxHasPermission="'CREATE_STAFF'" [routerLink]="['/', 'organization', 'bulk-import', 'Employees']">
     <fa-icon icon="upload" class="m-r-10"></fa-icon>
-    Import Employees
+    {{'labels.buttons.Import Employees' | translate }}
   </button>
   </div>
   <div #buttonCreateEmployee>
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_STAFF'">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Create Employee
+    {{'labels.buttons.Create Employee' | translate }}
   </button>
   </div>
 
@@ -29,27 +29,27 @@
         <table mat-table [dataSource]="dataSource" matSort>
 
             <ng-container matColumnDef="displayName">
-                <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 employee"> {{ employee.displayName }} </td>
             </ng-container>
 
             <ng-container matColumnDef="isLoanOfficer">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> Loan Officer </th>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Loan Officer' | translate }} </th>
                 <td mat-cell *matCellDef="let employee">
                     <div [className]="employee.isLoanOfficer === true ? 'true' : 'false'">
-                        <fa-icon *ngIf="employee.isLoanOfficer" icon="check-circle" size="lg" matTooltip="Yes" matTooltipPosition="right"></fa-icon>
-                        <fa-icon *ngIf="!employee.isLoanOfficer" icon="times-circle" size="lg" matTooltip="No" matTooltipPosition="right"></fa-icon>
+                        <fa-icon *ngIf="employee.isLoanOfficer" icon="check-circle" size="lg" matTooltip="{{ 'tooltips.Yes' | translate }}" matTooltipPosition="right"></fa-icon>
+                        <fa-icon *ngIf="!employee.isLoanOfficer" icon="times-circle" size="lg" matTooltip="{{ 'tooltips.No' | translate }}" matTooltipPosition="right"></fa-icon>
                     </div>
                 </td>
             </ng-container>
 
             <ng-container matColumnDef="officeName">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> Office </th>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Office' | translate }} </th>
                 <td mat-cell *matCellDef="let employees"> {{ employees.officeName }} </td>
             </ng-container>
 
             <ng-container matColumnDef="isActive">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Status' | translate }} </th>
                 <td mat-cell *matCellDef="let employee">
                     <div [className]="employee.isActive === true ? 'true' : 'false'">
                         <fa-icon matTooltip="{{ employee.isActive === true ? 'Active' : 'Inactive' }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
@@ -69,39 +69,39 @@
 </div>
 
 <ng-template #templateButtonImportEmployees let-data let-popover="popover">
-  <h2>Import Employees</h2>
-  <p class="mw300">This button is used to import employee details from your local device.</p>
+  <h2>{{ 'labels.heading.Import Employees' | translate }}</h2>
+  <p class="mw300">{{'labels.text.Import employee details from your local device' | 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(templateButtonCreateEmployee,buttonCreateEmployee,'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(templateButtonCreateEmployee,buttonCreateEmployee,'bottom', true)">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateButtonCreateEmployee let-popover="popover">
-  <h2>Create Employee</h2>
-  <p class="mw300">This option allows you to create new employees in your organization.</p>
+  <h2>{{ 'labels.heading.Create Employee' | translate }}</h2>
+  <p class="mw300">{{'labels.text.Create new employees in your organization' | 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();showPopover(templateButtonImportEmployees,buttonImportEmployees,'bottom', true)">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();showPopover(templateButtonImportEmployees,buttonImportEmployees,'bottom', true)">{{'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 employees.</h4>
+  <h4>{{ 'labels.heading.Search bar to filter employees.' | 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(templateButtonCreateEmployee,buttonCreateEmployee,'bottom', true)">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableEmployees,tableEmployees,'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(templateButtonCreateEmployee,buttonCreateEmployee,'bottom', true)">{{'labels.buttons.Back' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableEmployees,tableEmployees,'top', true)">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateTableEmployees let-popover="popover">
-  <h4>List of employees in the organization.</h4>
+  <h4>{{ 'labels.heading.List of employees in the organization.' | 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/organization/employees/view-employee/view-employee.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]="['edit']" *mifosxHasPermission="'UPDATE_STAFF'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{'labels.buttons.Edit' | translate }}
   </button>
 </div>
 
@@ -14,7 +14,7 @@
       <div fxLayout="row wrap" class="content">
 
         <div fxFlex="50%" class="mat-body-strong">
-          First Name
+          {{'labels.inputs.First Name' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -22,7 +22,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Last Name
+          {{'labels.inputs.Last Name' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -30,7 +30,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Office
+          {{'labels.inputs.Office' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -38,7 +38,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Is Loan Officer
+          {{'labels.inputs.Is Loan Officer' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -46,7 +46,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="employeeData.mobileNo">
-          Mobile Number for SMS
+          {{'labels.inputs.Mobile Number for SMS' | translate }}
         </div>
 
         <div fxFlex="50%" *ngIf="employeeData.mobileNo">
@@ -54,7 +54,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Status
+          {{'labels.inputs.Status' | translate }}
         </div>
 
         <div fxFlex="50%">
@@ -62,7 +62,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Joining Date
+          {{'labels.inputs.Joining Date' | translate }}
         </div>
 
         <div fxFlex="50%">