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

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

src/app/shares/shares-account-stepper/shares-account-charges-step/shares-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>{{ 'labels.inputs.Charge' | translate }}</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">
         {{ charge.name }}
@@ -12,28 +12,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>
-      {{'labels.buttons.Add' | translate }}
+      {{'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> {{ 'labels.inputs.name' | translate }} </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> {{ 'labels.inputs.Type' | translate }} </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> {{ 'labels.inputs.Amount' | translate }} </th>
+      <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount' | translate}} </th>
       <td mat-cell *matCellDef="let charge">
         {{ charge.amount || charge.amountOrPercentage }}
         <button mat-icon-button color="primary" (click)="editCharge(charge)">
@@ -43,14 +43,14 @@
     </ng-container>
 
     <ng-container matColumnDef="chargeTimeType">
-      <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Collected On' | translate }} </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="action">
-      <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Actions' | translate }} </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>
@@ -68,10 +68,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>
-    {{'labels.buttons.Previous' | translate }}
+    {{'labels.buttons.Previous' | translate}}
   </button>
   <button mat-raised-button matStepperNext>
-    {{'labels.buttons.Next' | translate }}
+    {{'labels.buttons.Next' | translate}}
     <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
   </button>
 </div>

src/app/shares/shares-account-stepper/shares-account-details-step/shares-account-details-step.component.html

@@ -3,30 +3,30 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{ 'labels.inputs.Product Name' | translate }}</mat-label>
+      <mat-label>{{'labels.inputs.Product Name' | translate}}</mat-label>
       <mat-select formControlName="productId" required>
         <mat-option *ngFor="let product of productData" [value]="product.id">
           {{ product.name }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{ 'labels.inputs.Product Name' | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
+        {{'labels.inputs.Product Name' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" (click)="submittedOnDatePicker.open()">
-      <mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
+      <mat-label>{{'labels.inputs.Submitted On' | translate}}</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker"
         formControlName="submittedDate" required>
       <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #submittedOnDatePicker></mat-datepicker>
       <mat-error>
-        {{ 'labels.inputs.Submission Date' | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
+        {{'labels.inputs.Submission Date' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{ 'labels.inputs.External ID' | translate }}</mat-label>
+      <mat-label>{{'labels.inputs.External ID' | translate}}</mat-label>
       <input matInput formControlName="externalId">
     </mat-form-field>
 
@@ -35,10 +35,10 @@
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Previous' | translate }}
+      {{'labels.buttons.Previous' | translate}}
     </button>
     <button mat-raised-button matStepperNext>
-      {{'labels.buttons.Next' | translate }}
+      {{'labels.buttons.Next' | translate}}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>

src/app/shares/shares-account-stepper/shares-account-preview-step/shares-account-preview-step.component.html

@@ -1,114 +1,114 @@
 <div fxLayout="row wrap" fxLayout.lt-md="column">
 
-  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Details' | translate }}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Details' | translate}}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Product' | translate }}</span>
+    <span fxFlex="40%">{{'labels.inputs.Product' | translate}}</span>
     <span fxFlex="60%">{{ sharesAccount.productId | find:sharesAccountTemplate.productOptions:'id':'name' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Submitted On' | translate }}</span>
-    <span fxFlex="60%">{{ sharesAccount.submittedDate  | dateFormat }}</span>
+    <span fxFlex="40%">{{'labels.inputs.Submitted On' | translate}}</span>
+    <span fxFlex="60%">{{ sharesAccount.submittedDate | dateFormat }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.External Id' | translate }}</span>
+    <span fxFlex="40%">{{'labels.inputs.External Id' | translate}}</span>
     <span fxFlex="60%" *ngIf="sharesAccount.externalId">
       <mifosx-external-identifier externalId="{{sharesAccount.externalId}}"></mifosx-external-identifier>
     </span>
     <span fxFlex="60%" *ngIf="!sharesAccount.externalId">
-      {{ 'labels.inputs.Unassigned' | translate }}
+      {{'labels.inputs.Unassigned' | translate}}
     </span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Terms' | translate }}</h3>
+  <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Terms' | translate}}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Currency' | translate }}</span>
+    <span fxFlex="40%">{{'labels.inputs.Currency' | translate}}</span>
     <span fxFlex="60%">{{ sharesAccountTermsForm.get('currencyCode').value | find:[sharesAccountProductTemplate.currency]:'code':'displayLabel' }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Decimal Places' | translate }}</span>
+    <span fxFlex="40%">{{'labels.inputs.Decimal Places' | translate}}</span>
     <span fxFlex="60%">{{ sharesAccountTermsForm.get('decimal').value }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Total Number of Shares' | translate }}</span>
+    <span fxFlex="40%">{{'labels.inputs.Total Number of Shares' | translate}}</span>
     <span fxFlex="60%">{{ sharesAccount.requestedShares }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Today's Price' | translate }}</span>
+    <span fxFlex="40%">{{'labels.inputs.Today's Price' | translate}}</span>
     <span fxFlex="60%">{{ sharesAccountTermsForm.get('unitPrice').value }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Currency in multiples of' | translate }}</span>
+    <span fxFlex="40%">{{'labels.inputs.Currency in multiples of' | translate}}</span>
     <span fxFlex="60%">{{ sharesAccountTermsForm.get('currencyMultiple').value }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Default Savings Account' | translate }}</span>
+    <span fxFlex="40%">{{'labels.inputs.Default Savings Account' | translate}}</span>
     <span fxFlex="60%">{{ sharesAccount.savingsAccountId | find:sharesAccountProductTemplate.clientSavingsAccounts:'id':'accountNo' }}</span>
   </div>
 
   <div fxFlexFill *ngIf="sharesAccount.minimumActivePeriod">
-    <span fxFlex="40%">{{ 'labels.inputs.Minimum Active Period' | translate }}</span>
+    <span fxFlex="40%">{{'labels.inputs.Minimum Active Period' | translate}}</span>
     <span fxFlex="60%">{{sharesAccount.minimumActivePeriod}}&nbsp;{{sharesAccount.minimumActivePeriodFrequencyType | find:sharesAccountProductTemplate.minimumActivePeriodFrequencyTypeOptions:'id':'value'}}</span>
   </div>
 
   <div fxFlexFill *ngIf="sharesAccount.lockinPeriodFrequency">
-    <span fxFlex="40%">{{ 'labels.inputs.Lock-in Period' | translate }}</span>
+    <span fxFlex="40%">{{'labels.inputs.Lock-in Period' | translate}}</span>
     <span fxFlex="60%">{{sharesAccount.lockinPeriodFrequency}}&nbsp;{{sharesAccount.lockinPeriodFrequencyType | find:sharesAccountProductTemplate.lockinPeriodFrequencyTypeOptions:'id':'value'}}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Application Date' | translate }}</span>
-    <span fxFlex="60%">{{ sharesAccount.applicationDate  | dateFormat }}</span>
+    <span fxFlex="40%">{{'labels.inputs.Application Date' | translate}}</span>
+    <span fxFlex="60%">{{ sharesAccount.applicationDate | dateFormat }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">{{ 'labels.inputs.Allow dividends for inactive clients' | translate }}</span>
+    <span fxFlex="40%">{{'labels.inputs.Allow dividends for inactive clients' | translate}}</span>
     <span fxFlex="60%">{{ sharesAccount.allowDividendCalculationForInactiveClients }}</span>
   </div>
 
   <div fxFlexFill *ngIf="sharesAccount.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
 
-    <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Charges' | translate }}</h3>
+    <h3 class="mat-h3" fxFlexFill>{{'labels.heading.Charges' | translate}}</h3>
 
     <mat-divider fxFlexFill></mat-divider>
 
     <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="sharesAccount.charges">
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.name' | translate }} </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> {{ 'labels.inputs.Type' | translate }} </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> {{ 'labels.inputs.Amount' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount' | translate}} </th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.amount || charge.amountOrPercentage }}
         </td>
       </ng-container>
 
       <ng-container matColumnDef="chargeTimeType">
-        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Collected On' | translate }} </th>
+        <th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Collected On' | translate}} </th>
         <td mat-cell *matCellDef="let charge">
           {{ charge.chargeTimeType.value }}
         </td>
@@ -126,12 +126,12 @@
 <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>
-    {{'labels.buttons.Previous' | translate }}
+    {{'labels.buttons.Previous' | translate}}
   </button>
   <button mat-raised-button [routerLink]="['../']">
-    {{'labels.buttons.Cancel' | translate }}
+    {{'labels.buttons.Cancel' | translate}}
   </button>
   <button mat-raised-button color="primary" (click)="submit.emit()">
-    {{'labels.buttons.Submit' | translate }}
+    {{'labels.buttons.Submit' | translate}}
   </button>
 </div>

src/app/shares/shares-account-stepper/shares-account-terms-step/shares-account-terms-step.component.html

@@ -3,69 +3,69 @@
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
+      <mat-label>{{'labels.inputs.Currency' | translate}}</mat-label>
       <input matInput formControlName="currencyCode">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{ 'labels.inputs.Decimal Places' | translate }}</mat-label>
+      <mat-label>{{'labels.inputs.Decimal Places' | translate}}</mat-label>
       <input type="number" matInput formControlName="decimal">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{ 'labels.inputs.Total Number of Shares' | translate }}</mat-label>
+      <mat-label>{{'labels.inputs.Total Number of Shares' | translate}}</mat-label>
       <input type="number" matInput formControlName="requestedShares" required>
       <mat-error>
-        {{ 'labels.inputs.Total Number of Shares' | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
+        {{'labels.inputs.Total Number of Shares' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{ 'labels.inputs.Today's Price' | translate }}</mat-label>
+      <mat-label>{{'labels.inputs.Today's Price' | translate}}</mat-label>
       <input type="number" matInput formControlName="unitPrice">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{ 'labels.inputs.Currency in multiples of' | translate }}</mat-label>
+      <mat-label>{{'labels.inputs.Currency in multiples of' | translate}}</mat-label>
       <input type="number" matInput formControlName="currencyMultiple" >
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{ 'labels.inputs.Default Savings Account' | translate }}</mat-label>
+      <mat-label>{{'labels.inputs.Default Savings Account' | translate}}</mat-label>
       <mat-select formControlName="savingsAccountId" required>
         <mat-option *ngFor="let account of savingsAccountsData" [value]="account.id">
           {{ account.accountNo }}
         </mat-option>
       </mat-select>
       <mat-error>
-        {{ 'labels.inputs.Default Savings Account' | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
+        {{'labels.inputs.Default Savings Account' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="48%" (click)="applicationDatePicker.open()">
-      <mat-label>{{ 'labels.inputs.Application Date' | translate }}</mat-label>
+      <mat-label>{{'labels.inputs.Application Date' | translate}}</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="applicationDatePicker"
         formControlName="applicationDate" required>
       <mat-datepicker-toggle matSuffix [for]="applicationDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #applicationDatePicker></mat-datepicker>
       <mat-error>
-        {{ 'labels.inputs.Application Date' | translate }} {{ "labels.commons.is" | translate }} <strong>{{ "labels.commons.required" | translate}}</strong>
+        {{'labels.inputs.Application Date' | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-checkbox labelPosition="before" formControlName="allowDividendCalculationForInactiveClients" fxFlex="48%">
-      {{ 'labels.inputs.Allow dividends for inactive clients' | translate }}
+      {{'labels.inputs.Allow dividends for inactive clients' | translate}}
     </mat-checkbox>
 
-    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Minimum Active Period' | translate }}</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Minimum Active Period' | translate}}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
+      <mat-label>{{'labels.inputs.Frequency' | translate}}</mat-label>
       <input type="number" matInput formControlName="minimumActivePeriod">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
+      <mat-label>{{'labels.inputs.Type' | translate}}</mat-label>
       <mat-select formControlName="minimumActivePeriodFrequencyType">
         <mat-option *ngFor="let minimumActivePeriodFrequencyType of minimumActivePeriodFrequencyTypeData" [value]="minimumActivePeriodFrequencyType.id">
           {{ minimumActivePeriodFrequencyType.value }}
@@ -73,15 +73,15 @@
       </mat-select>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Lock-in Period' | translate }}</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{'labels.heading.Lock-in Period' | translate}}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
+      <mat-label>{{'labels.inputs.Frequency' | translate}}</mat-label>
       <input type="number" matInput formControlName="lockinPeriodFrequency">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
+      <mat-label>{{'labels.inputs.Type' | translate}}</mat-label>
       <mat-select formControlName="lockinPeriodFrequencyType">
         <mat-option *ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData" [value]="lockinPeriodFrequencyType.id">
           {{ lockinPeriodFrequencyType.value }}
@@ -94,10 +94,10 @@
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious disabled>
       <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
-      {{'labels.buttons.Previous' | translate }}
+      {{'labels.buttons.Previous' | translate}}
     </button>
     <button mat-raised-button matStepperNext>
-      {{'labels.buttons.Next' | translate }}
+      {{'labels.buttons.Next' | translate}}
       <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>