feat:Shares Translate Module (#1815)

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>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">
         {{ 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>
-      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 || 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> 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="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>
@@ -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>
-    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>

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>Product Name</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>
-        Product Name is <strong>required</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>Submitted On</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>
-        Submission Date is <strong>required</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>External ID</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>
-      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>

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>Details</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Details'  |translate}}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Product</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%">Submitted On</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Submitted On'  |translate}}</span>
     <span fxFlex="60%">{{ sharesAccount.submittedDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">External Id</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">
-      Unassigned
+      {{ 'labels.inputs.Unassigned'  |translate}}
     </span>
   </div>
 
-  <h3 class="mat-h3" fxFlexFill>Terms</h3>
+  <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Terms'  |translate}}</h3>
 
   <mat-divider fxFlexFill></mat-divider>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Currency</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%">Decimal Places</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Decimal Places'  |translate}}</span>
     <span fxFlex="60%">{{ sharesAccountTermsForm.get('decimal').value }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Total Number of Shares</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Total Number of Shares'  |translate}}</span>
     <span fxFlex="60%">{{ sharesAccount.requestedShares }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Today's Price</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%">Currency in multiples of</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%">Default Savings Account</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%">Minimum Active Period</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%">Lock-in Period</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%">Application Date</span>
+    <span fxFlex="40%">{{ 'labels.inputs.Application Date'  |translate}}</span>
     <span fxFlex="60%">{{ sharesAccount.applicationDate  | dateFormat }}</span>
   </div>
 
   <div fxFlexFill>
-    <span fxFlex="40%">Allow dividends for inactive clients</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>Charges</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> 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 || charge.amountOrPercentage }}
         </td>
       </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>
@@ -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>
-    Previous
+    {{'labels.buttons.Previous'  |translate}}
   </button>
   <button mat-raised-button [routerLink]="['../']">
-    Cancel
+    {{'labels.buttons.Cancel'  |translate}}
   </button>
   <button mat-raised-button color="primary" (click)="submit.emit()">
-    Submit
+    {{'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>Currency</mat-label>
+      <mat-label>{{ 'labels.inputs.Currency'  |translate}}</mat-label>
       <input 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="decimal">
     </mat-form-field>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Total Number of Shares</mat-label>
+      <mat-label>{{ 'labels.inputs.Total Number of Shares'  |translate}}</mat-label>
       <input type="number" matInput formControlName="requestedShares" required>
       <mat-error>
-        Total Number of Shares is <strong>required</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>Today's Price</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>Currency in multiples of</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>Default Savings Account</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>
-        Default Savings Account is <strong>required</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>Application Date</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>
-        Application Date is <strong>required</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%">
-      Allow dividends for inactive clients
+      {{ 'labels.inputs.Allow dividends for inactive clients'  |translate}}
     </mat-checkbox>
 
-    <h4 fxFlex="98%" class="mat-h4">Minimum Active Period</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Minimum Active Period'  |translate}}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Frequency</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>Type</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">Lock-in Period</h4>
+    <h4 fxFlex="98%" class="mat-h4">{{ 'labels.heading.Lock-in Period'  |translate}}</h4>
 
     <mat-form-field fxFlex="48%">
-      <mat-label>Frequency</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>Type</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>
-      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>