feat:Shares Translate Module (#1815)

src/app/shares/shares-account-view/charges-tab/charges-tab.component.html

@@ -1,7 +1,7 @@
 <div class="tab-container mat-typography">
 
   <div class="m-b-10">
-    <h3>All Charges</h3>
+    <h3>{{ 'labels.heading.All Charges'  |translate}}</h3>
   </div>
 
   <div class="mat-elevation-z1 m-b-25">
@@ -9,42 +9,42 @@
     <table mat-table [dataSource]="dataSource">
 
       <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 }} </td>
       </ng-container>
 
       <ng-container matColumnDef="feeOrPenalty">
-        <th mat-header-cell *matHeaderCellDef> Fee/Penalty </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Fee/Penalty'  |translate}} </th>
         <td mat-cell *matCellDef="let charge"> {{ charge.penalty === true ? 'Penalty' : 'Fee' }} </td>
       </ng-container>
 
       <ng-container matColumnDef="paymentDueAt">
-        <th mat-header-cell *matHeaderCellDef> Payment Due At </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Payment Due At'  |translate}} </th>
         <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
       </ng-container>
 
       <ng-container matColumnDef="calculationType">
-        <th mat-header-cell *matHeaderCellDef> Calculation Type </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Calculation Type'  |translate}} </th>
         <td mat-cell *matCellDef="let charge"> {{charge.chargeCalculationType.value}} </td>
       </ng-container>
 
       <ng-container matColumnDef="due">
-        <th mat-header-cell *matHeaderCellDef> Due </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Due'  |translate}} </th>
         <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amount}} </td>
       </ng-container>
 
       <ng-container matColumnDef="paid">
-        <th mat-header-cell *matHeaderCellDef> Paid </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Paid'  |translate}} </th>
         <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amountPaid}} </td>
       </ng-container>
 
       <ng-container matColumnDef="waived">
-        <th mat-header-cell *matHeaderCellDef> Waived </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Waived'  |translate}} </th>
         <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amountWaived}} </td>
       </ng-container>
 
       <ng-container matColumnDef="outstanding">
-        <th mat-header-cell *matHeaderCellDef> Outstanding </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Outstanding'  |translate}} </th>
         <td mat-cell *matCellDef="let charge"> {{charge.currency.displaySymbol}}&nbsp;{{charge.amountOutstanding}} </td>
       </ng-container>
 

src/app/shares/shares-account-view/dividends-tab/dividends-tab.component.html

@@ -1,7 +1,7 @@
 <div class="tab-container mat-typography">
 
   <div class="m-b-10">
-    <h3>All Dividends</h3>
+    <h3>{{ 'labels.inputs.All Dividends'  |translate}}</h3>
   </div>
 
   <div class="mat-elevation-z1 m-b-25">
@@ -9,22 +9,22 @@
     <table mat-table [dataSource]="dataSource" >
 
       <ng-container matColumnDef="transactionDate">
-        <th mat-header-cell *matHeaderCellDef> Transaction Date </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Transaction Date'  |translate}} </th>
         <td mat-cell *matCellDef="let dividend"> {{dividend.postedDate  | dateFormat}} </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 dividend"> {{shareAccountData.currency.displaySymbol}}&nbsp;{{dividend.amount}} </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionReference">
-        <th mat-header-cell *matHeaderCellDef> Transaction Reference </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Transaction Reference'  |translate}} </th>
         <td mat-cell *matCellDef="let dividend"> {{dividend.savingsTransactionId}} </td>
       </ng-container>
 
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef> status </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Status'  |translate}} </th>
         <td mat-cell *matCellDef="let dividend"> {{dividend.status.value}} </td>
       </ng-container>
 

src/app/shares/shares-account-view/shares-account-view.component.html

@@ -7,7 +7,7 @@
       <div class="profile-image-container">
         <div>
           <img mat-card-md-image class="profile-image"
-            matTooltip="Shares Account"
+            matTooltip="{{ 'tooltips.Shares Account'  |translate}}"
             src="assets/images/shares_account_placeholder.png">
         </div>
       </div>
@@ -16,14 +16,14 @@
         <mat-card-title>
           <h3>
             <i class="fa fa-stop" [ngClass]="sharesAccountData.status.code | statusLookup" [matTooltip]="sharesAccountData.status.value"></i>
-              Account Name : {{sharesAccountData.productName}}
+            {{ 'labels.heading.Account Name'  |translate}} : {{sharesAccountData.productName}}
           </h3>
         </mat-card-title>
         <mat-card-subtitle>
           <p>
-            Account #: {{sharesAccountData.accountNo}} | Client Name: {{sharesAccountData.clientName}}<br/>
-            Current Market Price: {{sharesAccountData.currency.displaySymbol}}&nbsp;{{sharesAccountData.currentMarketPrice}}<br/>
-            Lockin Period: {{sharesAccountData.lockinPeriod ? sharesAccountData.lockinPeriod : 'N/A'}}
+            {{ 'labels.inputs.Account'  |translate}} #: {{sharesAccountData.accountNo}} | {{ 'labels.inputs.Client Name'  |translate}}: {{sharesAccountData.clientName}}<br/>
+            {{ 'labels.inputs.Current Market Price'  |translate}}: {{sharesAccountData.currency.displaySymbol}}&nbsp;{{sharesAccountData.currentMarketPrice}}<br/>
+            {{ 'labels.inputs.Lockin Period'  |translate}}: {{sharesAccountData.lockinPeriod ? sharesAccountData.lockinPeriod : 'N/A'}}
             {{sharesAccountData.lockinPeriod ? sharesAccountData.lockPeriodTypeEnum.value : ''}}
           </p>
         </mat-card-subtitle>
@@ -39,7 +39,7 @@
       </ng-container>
 
       <ng-container *ngIf="buttonConfig.options.length">
-        <button mat-raised-button [matMenuTriggerFor]="More">More</button>
+        <button mat-raised-button [matMenuTriggerFor]="More">{{ 'labels.heading.More'  |translate}}</button>
         <mat-menu #More="matMenu">
         <span *ngFor="let option of buttonConfig.options">
           <button mat-menu-item *mifosxHasPermission="option.taskPermissionName" (click)="doAction(option.name)">{{option.name}}</button>
@@ -56,33 +56,33 @@
     <div class="shares-account-tables" fxLayout="row" fxLayoutGap="2%">
 
       <div fxFlex="49%">
-        <h4 class="table-headers">Shares Details</h4>
+        <h4 class="table-headers">{{ 'labels.heading.Shares Details'  |translate}}</h4>
         <table>
           <tbody>
             <tr>
-              <td>Activated On</td>
+              <td>{{ 'labels.inputs.Activated On'  |translate}}</td>
               <td>{{sharesAccountData.timeline.activatedOnDate ? (sharesAccountData.timeline.activatedOnDate  | dateFormat) : 'Not Activated'}}</td>
             </tr>
             <tr>
-              <td>Currency</td>
+              <td>{{ 'labels.inputs.Currency'  |translate}}</td>
               <td>{{sharesAccountData.currency.name}} [{{sharesAccountData.currency.code}}]</td>
             </tr>
             <tr>
-              <td>External Id</td>
+              <td>{{ 'labels.inputs.External Id'  |translate}}</td>
               <td *ngIf="sharesAccountData.externalId">
                 <mifosx-external-identifier externalId="{{sharesAccountData.externalId}}"></mifosx-external-identifier>
               </td>
               <td *ngIf="!sharesAccountData.externalId">
-                Unassigned
+                {{ 'labels.inputs.Unassigned'  |translate}}
               </td>
             </tr>
             <tr>
-              <td>Linked Savings Account(Dividend Posting)</td>
+              <td>{{ 'labels.inputs.Linked Savings Account(Dividend Posting)'  |translate}}</td>
               <td *ngIf="sharesAccountData.savingsAccountNumber">
                 <mifosx-account-number accountNo="{{sharesAccountData.savingsAccountNumber}}"></mifosx-account-number>
               </td>
               <td *ngIf="!sharesAccountData.savingsAccountNumber">
-                Unassigned
+                {{ 'labels.inputs.Unassigned'  |translate}}
               </td>
             </tr>
           </tbody>
@@ -90,15 +90,15 @@
       </div>
 
       <div fxFlex="49%">
-        <h4 class="table-headers">Account Summary</h4>
+        <h4 class="table-headers">{{ 'labels.heading.Account Summary'  |translate}}</h4>
         <table>
           <tbody>
             <tr>
-              <td>Approved Shares</td>
+              <td>{{ 'labels.inputs.Approved Shares'  |translate}}</td>
               <td>{{sharesAccountData.summary.totalApprovedShares}}</td>
             </tr>
             <tr>
-              <td>Pending for Approval Shares</td>
+              <td>{{ 'labels.inputs.Pending for Approval Shares'  |translate}}</td>
               <td>{{sharesAccountData.summary.totalPendingForApprovalShares}}</td>
             </tr>
           </tbody>
@@ -110,15 +110,15 @@
     <nav mat-tab-nav-bar class="navigation-tabs">
       <a mat-tab-link [routerLink]="['./transactions']" routerLinkActive #transactions="routerLinkActive"
       [active]="transactions.isActive" *mifosxHasPermission="'READ_SHAREACCOUNTPURCHASE'">
-        Transactions
+      {{ 'labels.inputs.Transactions'  |translate}}
       </a>
       <a mat-tab-link [routerLink]="['./charges']" routerLinkActive #charges="routerLinkActive"
       [active]="charges.isActive" *mifosxHasPermission="'READ_SHAREACCOUNTCHARGE'">
-        Charges
+      {{ 'labels.inputs.Charges'  |translate}}
       </a>
       <a mat-tab-link [routerLink]="['./dividends']" routerLinkActive #dividends="routerLinkActive"
       [active]="dividends.isActive" *mifosxHasPermission="'READ_SHAREACCOUNTDIVIDENDS'">
-        Dividends
+      {{ 'labels.inputs.Dividends'  |translate}}
       </a>
     </nav>
 

src/app/shares/shares-account-view/transactions-tab/transactions-tab.component.html

@@ -1,7 +1,7 @@
 <div class="tab-container mat-typography">
 
   <div class="m-b-10">
-    <h3>All Transactions</h3>
+    <h3>{{ 'labels.heading.All Transactions'  |translate}}</h3>
   </div>
 
   <div class="mat-elevation-z1 m-b-25">
@@ -9,32 +9,32 @@
     <table mat-table [dataSource]="dataSource">
 
       <ng-container matColumnDef="transactionDate">
-        <th mat-header-cell *matHeaderCellDef> Transaction Date </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Transaction Date'  |translate}} </th>
         <td mat-cell *matCellDef="let transaction"> {{transaction.purchasedDate  | dateFormat}} </td>
       </ng-container>
 
       <ng-container matColumnDef="transactionType">
-        <th mat-header-cell *matHeaderCellDef> Transaction Type </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Transaction Type'  |translate}} </th>
         <td mat-cell *matCellDef="let transaction"> {{transaction.type.value}} {{transaction.type.value !== "Charge Payment" ? ('(' + transaction.status.value + ')') : ''}}</td>
       </ng-container>
 
       <ng-container matColumnDef="totalShares">
-        <th mat-header-cell *matHeaderCellDef> Total Shares </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Total Shares'  |translate}} </th>
         <td mat-cell *matCellDef="let transaction"> {{transaction.numberOfShares}} </td>
       </ng-container>
 
       <ng-container matColumnDef="purchasedOrRedeemedPrice">
-        <th mat-header-cell *matHeaderCellDef> Purhcased/Redeemed Price </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Purhcased/Redeemed Price'  |translate}} </th>
         <td mat-cell *matCellDef="let transaction">{{shareAccountData.currency.displaySymbol}}&nbsp;{{transaction.purchasedPrice}}</td>
       </ng-container>
 
       <ng-container matColumnDef="chargeAmount">
-        <th mat-header-cell *matHeaderCellDef> Charge Amount </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Charge Amount'  |translate}} </th>
         <td mat-cell *matCellDef="let transaction">{{shareAccountData.currency.displaySymbol}}&nbsp;{{transaction.type.value === "Charge Payment" ? transaction.amount : transaction.chargeAmount}}</td>
       </ng-container>
 
       <ng-container matColumnDef="amountRecievedOrReturned">
-        <th mat-header-cell *matHeaderCellDef> Amount Recieved/Returned </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Amount Recieved/Returned'  |translate}} </th>
         <td mat-cell *matCellDef="let transaction">{{shareAccountData.currency.displaySymbol}}&nbsp;{{transaction.amount}}</td>
       </ng-container>