Charges with translations

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

@@ -34,9 +34,16 @@
         <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)"> {{ transaction.date | dateFormat }} </td>
       </ng-container>
 
+      <ng-container matColumnDef="externalId">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.External Id" | translate}} </th>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)"> 
+          <mifosx-external-identifier externalId="{{transaction.externalId}}"></mifosx-external-identifier>
+        </td>
+      </ng-container>
+
       <ng-container matColumnDef="transactionType">
         <th mat-header-cell class="center" *matHeaderCellDef> {{"labels.inputs.Transaction Type" | translate}} </th>
-        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)"> {{ transaction.transactionType.value  }} </td>
+        <td mat-cell *matCellDef="let transaction" [ngClass]="savingsTransactionColor(transaction)"> {{ transaction.transactionType.value | translateCatalog }} </td>
       </ng-container>
 
       <ng-container matColumnDef="debit">

src/app/savings/savings-account-view/transactions-tab/transactions-tab.component.ts

@@ -30,7 +30,7 @@ export class TransactionsTabComponent implements OnInit {
   hideAccrualsParam: UntypedFormControl;
   hideReversedParam: UntypedFormControl;
   /** Columns to be displayed in transactions table. */
-  displayedColumns: string[] = ['row', 'id', 'date', 'transactionType', 'debit', 'credit', 'balance', 'actions'];
+  displayedColumns: string[] = ['row', 'id', 'date', 'externalId', 'transactionType', 'debit', 'credit', 'balance', 'actions'];
   /** Data source for transactions table. */
   dataSource: MatTableDataSource<any>;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;