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

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
           };