i18n: Adding new languages: Part 2

src/app/collaterals/edit-collateral/edit-collateral.component.html

@@ -11,25 +11,25 @@
                     <div fxLayout="column">
 
                         <mat-form-field>
-                            <mat-label>Name</mat-label>
+                            <mat-label>{{"labels.inputs.name" |translate}}</mat-label>
                             <input matInput required formControlName="name">
                         </mat-form-field>
 
                         <mat-form-field>
-                            <mat-label>Quantity</mat-label>
+                            <mat-label>{{"labels.inputs.Quantity" |translate}}</mat-label>
                             <input matInput required formControlName="quantity">
                             <mat-error *ngIf="clientCollateralForm.controls.quantity.hasError('required')">
-                                Quantity is <strong>required</strong>
+                                {{"labels.inputs.Quantity" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                             </mat-error>
                         </mat-form-field>
 
                         <mat-form-field>
-                            <mat-label>Total</mat-label>
+                            <mat-label>{{"labels.inputs.Total" |translate}}</mat-label>
                             <input matInput required formControlName="total">
                         </mat-form-field>
 
                         <mat-form-field>
-                            <mat-label>Total Collateral Value</mat-label>
+                            <mat-label>{{"labels.inputs.Total Collateral Value" |translate}}</mat-label>
                             <input matInput required formControlName="totalCollateral">
                         </mat-form-field>
 
@@ -40,8 +40,8 @@
             </mat-card-content>
 
             <mat-card-actions fxLayoutGap="5px" fxLayout="row" fsLayout.xs="column" fxLayoutAlign="center">
-                <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-                <button mat-raised-button color="primary" [disabled]="!clientCollateralForm.valid">Submit</button> 
+                <button type="button" mat-raised-button [routerLink]="['../../']">{{"labels.buttons.Cancel" |translate}}</button>
+                <button mat-raised-button color="primary" [disabled]="!clientCollateralForm.valid">{{"labels.buttons.Submit" |translate}}</button> 
             </mat-card-actions>
 
         </form>

src/app/collaterals/view-collateral/view-collateral.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_CHARGE'">
       <fa-icon icon="edit" class="m-r-10"></fa-icon>
-      Edit
+      {{"labels.buttons.Edit" |translate}}
     </button>
     <button mat-raised-button color="warn" (click)="deleteCollateral()" *mifosxHasPermission="'DELETE_CHARGE'">
       <fa-icon icon="trash" class="m-r-10"></fa-icon>
-      Delete
+      {{"labels.buttons.Delete" |translate}}
     </button>
   </div>
 
@@ -15,43 +15,43 @@
 
         <div class="tab-container mat-typography">
 
-            <h3>Client Collateral Details</h3>
+            <h3>{{"labels.heading.Client Collateral Details" |translate}}</h3>
 
             <div fxLayout="row" fxLayoutGap="32px" class="group-details-container m-b-30">
               <p>
-                Name: {{ clientCollateralData.name }}<br/>
-                Quantity: {{ clientCollateralData.quantity }}<br/>
-                Total Value: {{ clientCollateralData.total }}<br/>
-                Total Collateral Value: {{ clientCollateralData.totalCollateral }}<br/>
+                {{"labels.inputs.name" |translate}}: {{ clientCollateralData.name }}<br/>
+                {{"labels.inputs.Quantity" |translate}}: {{ clientCollateralData.quantity }}<br/>
+                {{"labels.inputs.Total Value" |translate}}: {{ clientCollateralData.total }}<br/>
+                {{"labels.inputs.Total Collateral Value" |translate}}: {{ clientCollateralData.totalCollateral }}<br/>
               </p>
 
             </div>
 
 
-            <h3>Transaction Details</h3>
+            <h3>{{"labels.heading.Transaction Details" |translate}}</h3>
 
             <table mat-table [dataSource]="clientCollateralData.loanTransactionData"
             class="mat-elevation-z1 m-b-30">
 
             <ng-container matColumnDef="ID">
-                <th mat-header-cell *matHeaderCellDef> ID </th>
+                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.ID" |translate}} </th>
                 <td mat-cell *matCellDef="let element">
                 {{element.loanId}}
                 </td>
             </ng-container>
 
             <ng-container matColumnDef="Last Repayment">
-                <th mat-header-cell *matHeaderCellDef>Last Repayment</th>
+                <th mat-header-cell *matHeaderCellDef>{{"labels.inputs.Last Repayment" |translate}}</th>
                 <td mat-cell *matCellDef="let element"> {{element.lastRepayment}} </td>
             </ng-container>
 
             <ng-container matColumnDef="Remaining Amount">
-                <th mat-header-cell *matHeaderCellDef> Remaining Amount </th>
+                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Remaining Amount" |translate}} </th>
                 <td mat-cell *matCellDef="let element"> {{element.remainingAmount}} </td>
             </ng-container>
 
             <ng-container matColumnDef="Last Repayment Date">
-                <th mat-header-cell *matHeaderCellDef> Last Repayment Date </th>
+                <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Last Repayment Date" |translate}} </th>
                 <td mat-cell *matCellDef="let element"> {{element.lastRepaymentDate | dateFormat}} </td>
 
             </ng-container>

src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.html

@@ -24,7 +24,7 @@
 
     <mat-step [stepControl]="fixedDepositAccountDetailsForm">
 
-      <ng-template matStepLabel>DETAILS</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.DETAILS" | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-details-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
@@ -35,7 +35,7 @@
 
     <mat-step [stepControl]="fixedDepositAccountDetailsForm.get('productId')">
 
-      <ng-template matStepLabel>CURRENCY</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.CURRENCY" | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-currency-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
@@ -46,7 +46,7 @@
 
     <mat-step [stepControl]="fixedDepositAccountTermsForm">
 
-      <ng-template matStepLabel>TERMS</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.TERMS" | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-terms-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
@@ -57,7 +57,7 @@
 
     <mat-step [stepControl]="fixedDepositAccountSettingsForm">
 
-      <ng-template matStepLabel>SETTINGS</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.SETTINGS" | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-settings-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
@@ -68,7 +68,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>INTEREST RATE CHART</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.INTEREST RATE CHART" | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-interest-rate-chart-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
@@ -79,7 +79,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>CHARGES</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.CHARGES" | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-charges-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
@@ -92,7 +92,7 @@
 
     <mat-step state="preview" *ngIf="fixedDepositAccountFormValid" completed>
 
-      <ng-template matStepLabel>PREVIEW</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.PREVIEW" | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-preview-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"

src/app/deposits/fixed-deposits/edit-fixed-deposit-account/edit-fixed-deposit-account.component.html

@@ -24,7 +24,7 @@
 
     <mat-step [stepControl]="fixedDepositAccountDetailsForm">
 
-      <ng-template matStepLabel>DETAILS</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.DETAILS" | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-details-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
@@ -35,7 +35,7 @@
 
     <mat-step [stepControl]="fixedDepositAccountDetailsForm.get('productId')">
 
-      <ng-template matStepLabel>CURRENCY</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.CURRENCY" | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-currency-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
@@ -46,7 +46,7 @@
 
     <mat-step [stepControl]="fixedDepositAccountTermsForm">
 
-      <ng-template matStepLabel>TERMS</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.TERMS" | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-terms-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
@@ -57,7 +57,7 @@
 
     <mat-step [stepControl]="fixedDepositAccountSettingsForm">
 
-      <ng-template matStepLabel>SETTINGS</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.SETTINGS" | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-settings-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
@@ -68,7 +68,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>INTEREST RATE CHART</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.INTEREST RATE CHART" | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-interest-rate-chart-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
@@ -79,7 +79,7 @@
 
     <mat-step>
 
-      <ng-template matStepLabel>CHARGES</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.CHARGES" | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-charges-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"
@@ -92,7 +92,7 @@
 
     <mat-step state="preview" *ngIf="fixedDepositAccountFormValidAndNotPristine" completed>
 
-      <ng-template matStepLabel>PREVIEW</ng-template>
+      <ng-template matStepLabel>{{"labels.inputs.PREVIEW" | translate }}</ng-template>
 
       <mifosx-fixed-deposit-account-preview-step
         [fixedDepositsAccountTemplate]="fixedDepositsAccountAndTemplate"

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-charges-step/fixed-deposit-account-charges-step.component.html

@@ -1,7 +1,7 @@
 <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
   <mat-form-field fxFlex="48%">
-    <mat-label>Charge</mat-label>
+    <mat-label>{{"labels.inputs.Charge" | translate }}</mat-label>
     <mat-select #charge>
       <mat-option *ngFor="let charge of chargeData | chargesFilter:chargesDataSource:currencyCode.value"
         [value]="charge">
@@ -13,28 +13,28 @@
   <div fxFlex="48%" fxFlexAlign="center">
     <button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
       <fa-icon icon="plus" class="m-r-10"></fa-icon>
-      Add
+      {{"labels.buttons.Add" | translate }}
     </button>
   </div>
 
   <table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chargesDataSource" [hidden]="chargesDataSource.length === 0">
 
     <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> Name </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.name" | translate }} </th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.name + ', ' + charge.currency.displaySymbol }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="chargeCalculationType">
-      <th mat-header-cell *matHeaderCellDef> Type </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Type" | translate }} </th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.chargeCalculationType.value }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="amount">
-      <th mat-header-cell *matHeaderCellDef> Amount </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount" | translate }} </th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.amount }}
         <button mat-icon-button color="primary" (click)="editChargeAmount(charge)">
@@ -44,14 +44,14 @@
     </ng-container>
 
     <ng-container matColumnDef="chargeTimeType">
-      <th mat-header-cell *matHeaderCellDef> Collected On </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Collected On" | translate }} </th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.chargeTimeType.value }}
       </td>
     </ng-container>
 
     <ng-container matColumnDef="date">
-      <th mat-header-cell *matHeaderCellDef> Date </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Date" | translate }} </th>
       <td mat-cell *matCellDef="let charge">
         <span *ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
           {{(charge.dueDate | dateFormat) || 'Unassigned*'}}
@@ -61,7 +61,7 @@
         </span>
         <span *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
                 || charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
-          N/A
+                {{"labels.inputs.N/A" | translate }}
         </span>
         <button mat-icon-button color="primary" *ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Annual Fee'
                       || charge.chargeTimeType.value === 'Specified due date'" (click)="editChargeDate(charge)">
@@ -71,7 +71,7 @@
     </ng-container>
 
     <ng-container matColumnDef="repaymentsEvery">
-      <th mat-header-cell *matHeaderCellDef> Repayments Every </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Repayments Every" | translate }} </th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.feeInterval || 'Not Provided' }}
         <button mat-icon-button color="primary"
@@ -83,7 +83,7 @@
     </ng-container>
 
     <ng-container matColumnDef="action">
-      <th mat-header-cell *matHeaderCellDef> Actions </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
       <td mat-cell *matCellDef="let charge">
         <button mat-icon-button color="warn" (click)="deleteCharge(charge)">
           <fa-icon icon="trash"></fa-icon>
@@ -101,10 +101,10 @@
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
     <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-    Previous
+    {{"labels.buttons.Previous" | translate }}
   </button>
   <button mat-raised-button matStepperNext [disabled]="!fixedDepositAccountFormValid">
-    Next
+    {{"labels.buttons.Next" | translate }}
     <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
   </button>
 </div>

src/app/deposits/fixed-deposits/fixed-deposit-account-stepper/fixed-deposit-account-currency-step/fixed-deposit-account-currency-step.component.html

@@ -3,17 +3,17 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Currency</mat-label>
+      <mat-label>{{"labels.inputs.Currency" | translate }}</mat-label>
       <input type="text" matInput formControlName="currencyCode" >
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Decimal Places</mat-label>
+      <mat-label>{{"labels.inputs.Decimal Places" | translate }}</mat-label>
       <input type="number" matInput formControlName="decimalPlaces"  >
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Currency Multiple</mat-label>
+      <mat-label>{{"labels.inputs.Currency Multiple" | translate }}</mat-label>
       <input type="number" matInput formControlName="currencyMultiple">
     </mat-form-field>
 
@@ -22,10 +22,10 @@
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      Previous
+      {{"labels.buttons.Previous" | translate }}
     </button>
     <button mat-raised-button matStepperNext>
-      Next
+      {{"labels.buttons.Next" | translate }}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>