translation of cob-workflow and workflow-jobs files inside manage-jobs in system modules

src/app/system/manage-jobs/cob-workflow/cob-workflow.component.html

@@ -1,11 +1,11 @@
 <div class="container m-b-20 space-top" fxLayout="row" fxLayoutGap="20px">
   <div #cobCatchUpStatus>
-    <h2 class="no-m">COB Catch-Up is:<span class="m-l-20 m-r-20">{{ isCatchUpRunning ? 'Running' : 'Inactive' }}</span>
+    <h2 class="no-m">{{'labels.heading.COB Catch-Up is' | translate}}:<span class="m-l-20 m-r-20">{{ isCatchUpRunning ? ( 'labels.catalogs.Running' | translate ) : ('labels.catalogs.Inactive' | translate)}}</span>
     </h2>
   </div>
   <button mat-raised-button class="activate" (click)="runCatchUp()" *ngIf="!isCatchUpRunning">
     <fa-icon icon="times-circle" class="m-r-10"></fa-icon>
-    Run Catch-Up
+    {{'labels.buttons.Run Catch-Up' | translate}}
   </button>
 </div>
 

src/app/system/manage-jobs/cob-workflow/loan-locked/loan-locked.component.html

@@ -29,27 +29,27 @@
     </ng-container>
 
     <ng-container matColumnDef="loanId">
-      <th mat-header-cell *matHeaderCellDef> Loan Id </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Loan Id" | translate}} </th>
       <td mat-cell *matCellDef="let loan" class="view-details"> {{loan.loanId}} </td>
     </ng-container>
 
     <ng-container matColumnDef="lockPlacedOn">
-      <th mat-header-cell *matHeaderCellDef> Lock Placed On </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Lock Placed On" | translate}} </th>
       <td mat-cell *matCellDef="let loan" class="view-details"> {{loan.lockPlacedOn | datetimeFormat}} </td>
     </ng-container>
 
     <ng-container matColumnDef="lockOwner">
-      <th mat-header-cell *matHeaderCellDef> Lock Owner </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Lock Owner" | translate}} </th>
       <td mat-cell *matCellDef="let loan" class="view-details"> {{loan.lockOwner}} </td>
     </ng-container>
 
     <ng-container matColumnDef="error">
-      <th mat-header-cell *matHeaderCellDef> Error </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Error" | translate}} </th>
       <td mat-cell *matCellDef="let loan" class="view-details"> {{loan.error}} </td>
     </ng-container>
 
     <ng-container matColumnDef="details">
-      <th mat-header-cell *matHeaderCellDef> Details </th>
+      <th mat-header-cell *matHeaderCellDef> {{"labels.heading.Details" | translate}} </th>
       <td mat-cell *matCellDef="let loan" class="view-details">
         <button mat-icon-button class="error-log" matTooltip="Error details" (click)="showDetails(loan)" matTooltipPosition="left">
           <fa-icon icon="exclamation-circle" size="lg"></fa-icon>
@@ -75,7 +75,7 @@
 
   <div class="message">
     <i class="fa fa-exclamation-circle alert-check"></i>
-    No loan locked available.
+    {{"labels.text.No loan locked available" | translate}}.
   </div>
 
 </div>

src/app/system/manage-jobs/cob-workflow/loan-locked/loan-locked.component.ts

@@ -4,6 +4,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
 import { LoansService } from 'app/loans/loans.service';
 import { ErrorDialogComponent } from 'app/shared/error-dialog/error-dialog.component';
 import { SystemService } from 'app/system/system.service';
@@ -49,13 +50,15 @@ export class LoanLockedComponent implements OnInit {
    * @param {LoansService} loansService Loans Service
    * @param {Router} router Router for navigation.
    * @param {MatDialog} dialog Dialog reference.
+   * @param {TranslateService} translateService Translate Service.
    */
   constructor(private route: ActivatedRoute,
     private router: Router,
     private loansService: LoansService,
     private systemService: SystemService,
     private tasksService: TasksService,
-    private dialog: MatDialog) {
+    private dialog: MatDialog,
+    private translateService:TranslateService) {
   }
 
   ngOnInit(): void {
@@ -107,9 +110,9 @@ export class LoanLockedComponent implements OnInit {
   /** The label for the checkbox on the passed row */
   checkboxLabel(row?: any): string {
     if (!row) {
-      return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
+      return `${this.isAllSelected() ? this.translateService.instant('labels.text.select') : this.translateService.instant('labels.text.deselect')} ${this.translateService.instant('labels.text.All')}`;
     }
-    return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
+    return `${this.selection.isSelected(row) ? this.translateService.instant('labels.text.deselect') : this.translateService.instant('labels.text.select')} ${this.translateService.instant('labels.text.row')} ${row.position + 1}`;
   }
 
   showDetails(loan: any) {

src/app/system/manage-jobs/workflow-jobs/workflow-diagram/workflow-diagram.component.html

@@ -30,7 +30,7 @@
     <svg:g class="link-midpoint" *ngIf="link.midPoint"
       [attr.transform]="'translate(' + link.midPoint.x + ',' + link.midPoint.y + ')'">
       <ellipse rx="30" ry="10" />
-      <svg:text alignment-baseline="central">{{ link.data.linkText }}</svg:text>
+      <svg:text alignment-baseline="central">{{ link.data.linkText | translateKey:'text' }}</svg:text>
     </svg:g>
   </ng-template>
 

src/app/system/manage-jobs/workflow-jobs/workflow-jobs.component.html

@@ -1,17 +1,17 @@
 <div class="container space-top" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
   <mat-form-field fxFlex="31%">
-    <mat-label>Job Name</mat-label>
+    <mat-label>{{'labels.inputs.Job Name' | translate}}</mat-label>
     <mat-select [formControl]="jobName" (selectionChange)="getWorkflowJobSteps($event.value)">
       <mat-option *ngFor="let job of jobNameOptions" [value]="job">
-        {{ job }}
+        {{ job | translateKey:'catalogs' }}
       </mat-option>
     </mat-select>
   </mat-form-field>
 
   <div class="action-button" fxLayoutGap="25px" *ngIf="jobStepsData.length > 0">
     <button mat-raised-button color="primary" (click)="addJobStep()">
-      <fa-icon icon="plus" class="m-r-10"></fa-icon>Link Job Step
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Link Job Step' | translate}}
     </button>
   </div>
 
@@ -21,17 +21,17 @@
       (cdkDropListDropped)="dropTable($event)">
 
       <ng-container matColumnDef="stepName">
-        <th mat-header-cell *matHeaderCellDef> Step Name </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Step Name' | translate}} </th>
         <td mat-cell *matCellDef="let jobStep"> {{ jobStep.stepName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="stepOrder">
-        <th mat-header-cell *matHeaderCellDef> Order </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Order' | translate }} </th>
         <td mat-cell *matCellDef="let jobStep"> {{ jobStep.order }} </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef> Actions </th>
+        <th mat-header-cell *matHeaderCellDef> {{ "labels.inputs.Actions" | translate}} </th>
         <td mat-cell *matCellDef="let row; let rowIndex = index">
           <button type="button" mat-icon-button color="warn" (click)="removeJobStep(rowIndex)" matTooltip="Delete"
             matTooltipPosition="left">
@@ -48,10 +48,10 @@
   <div *ngIf="stepOrderHasChanged" fxLayout="row" class="container margin-t space-top" fxLayout.xs="column"
     fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button [routerLink]="['../']">
-      Cancel
+      {{"labels.buttons.Cancel" | translate}}
     </button>
     <button mat-raised-button color="primary" (click)="saveChanges()">
-      Apply Changes
+      {{"labels.buttons.Apply Changes" | translate}}
     </button>
   </div>
 

src/app/system/manage-jobs/workflow-jobs/workflow-jobs.component.ts

@@ -3,6 +3,7 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { UntypedFormControl, Validators } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { MatTable } from '@angular/material/table';
+import { TranslateService } from '@ngx-translate/core';
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
 import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
@@ -32,7 +33,8 @@ export class WorkflowJobsComponent implements OnInit {
   displayedColumns: string[] = ['stepName', 'stepOrder', 'actions'];
 
   constructor(private systemService: SystemService,
-    public dialog: MatDialog) {}
+              public dialog: MatDialog,
+              private translateService:TranslateService) {}
 
   ngOnInit(): void {
     this.systemService.getWorkflowJobNames().toPromise()
@@ -71,7 +73,7 @@ export class WorkflowJobsComponent implements OnInit {
    */
   removeJobStep(index: number) {
     const dialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `this` }
+      data: { deleteContext: this.translateService.instant('labels.text.this') }
     });
     dialogRef.afterClosed().subscribe((response: any) => {
       if (response.delete) {
@@ -108,16 +110,19 @@ export class WorkflowJobsComponent implements OnInit {
         }
 
         if (this.jobAvailableStepsData.length > 0) {
+          for (let index = 0; index < this.jobAvailableStepsData.length; index++) {
+            this.jobAvailableStepsData[index].stepDescription = this.translateService.instant(`labels.catalogs.${this.jobAvailableStepsData[index].stepDescription}`)
+          }
           const frmFields: FormfieldBase[] = [
             new SelectBase({
               controlName: 'stepName',
-              label: 'Step',
+              label: this.translateService.instant('labels.text.Step'),
               options: { label: 'stepDescription', value: 'stepName', data: this.jobAvailableStepsData },
               order: 1
             })
           ];
           const data = {
-            title: 'Add Job Step to Workflow',
+            title: this.translateService.instant('labels.text.Add Job Step to Workflow'),
             layout: { addButtonText: 'Add' },
             formfields: frmFields
           };