translate manage reports inside system module

src/app/system/manage-reports/create-report/create-report.component.html

@@ -9,32 +9,32 @@
         <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutGap="4%">
 
           <mat-form-field fxFlex="30%">
-            <mat-label>Report Name</mat-label>
+            <mat-label>{{ 'labels.inputs.Report Name' | translate }}</mat-label>
             <input matInput required formControlName="reportName">
             <mat-error *ngIf="reportForm.controls.reportName.hasError('required')">
-              Report Name is <strong>required</strong>
+              {{ 'labels.inputs.Report Name' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="30%">
-            <mat-label>Report Type</mat-label>
+            <mat-label>{{ 'labels.inputs.Report Type' | translate }}</mat-label>
             <mat-select required formControlName="reportType">
               <mat-option *ngFor="let allowedReportType of reportTemplateData.allowedReportTypes"
                 [value]="allowedReportType">
-                {{ allowedReportType }}
+                {{ allowedReportType | translateKey:'text' }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="reportForm.controls.reportType.hasError('required')">
-              Report Type is <strong>required</strong>
+              {{ 'labels.inputs.Report Type' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="30%">
-            <mat-label>Report Sub Type</mat-label>
+            <mat-label>{{ 'labels.inputs.Report Sub Type' | translate }}</mat-label>
             <mat-select formControlName="reportSubType">
               <mat-option *ngFor="let allowedReportSubType of reportTemplateData.allowedReportSubTypes"
                 [value]="allowedReportSubType">
-                {{ allowedReportSubType }}
+                {{ allowedReportSubType | translateKey:'text' }}
               </mat-option>
             </mat-select>
           </mat-form-field>
@@ -44,18 +44,18 @@
         <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutGap="4%">
 
           <mat-form-field fxFlex="40%">
-            <mat-label>Report Category</mat-label>
+            <mat-label>{{ 'labels.inputs.Report Category' | translate }}</mat-label>
             <mat-select formControlName="reportCategory">
               <mat-option *ngFor="let reportCategoryType of reportCategoryTypeOptions"
                 [value]="reportCategoryType">
-                {{ reportCategoryType }}
+                {{ reportCategoryType | translateKey:'catalogs' }}
               </mat-option>
             </mat-select>
           </mat-form-field>
 
           <div fxFlex="10%" class="user-report-wrapper">
             <mat-checkbox class="user-report" labelPosition="after" formControlName="useReport">
-              User Report (UI)
+              {{ 'labels.inputs.User Report (UI)' | translate }}
             </mat-checkbox>
           </div>
 
@@ -64,15 +64,15 @@
         <div fxLayout="column">
 
           <mat-form-field fxFlex="98%">
-            <mat-label>Description</mat-label>
+            <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>SQL</mat-label>
+            <mat-label>{{ 'labels.inputs.SQL' | translate }}</mat-label>
             <textarea matInput required formControlName="reportSql" cdkTextareaAutosize cdkAutosizeMinRows="6"></textarea>
             <mat-error *ngIf="reportForm.controls.reportSql.hasError('required')">
-              SQL is <strong>required</strong>
+              {{ 'labels.inputs.SQL' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -82,10 +82,10 @@
 
         <div fxLayout="row wrap" fxLayoutGap="60%" fxLayout.lt-md="column">
 
-          <p fxFlex="20%" class="mat-title">Report Parameters</p>
+          <p fxFlex="20%" class="mat-title">{{ 'labels.inputs.Report Parameters' | translate }}</p>
 
           <button mat-raised-button fxFlex="20%" type="button" color="primary" (click)="addReportParameter()">
-            <fa-icon icon="plus" class="m-r-10"></fa-icon>Add Report Parameter
+            <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add Report Parameter' | translate }}
           </button>
 
         </div>
@@ -93,17 +93,17 @@
         <table mat-table [dataSource]="dataSource" matSort>
 
           <ng-container matColumnDef="parameterName">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Parameter </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.buttons.Parameters' | translate }} </th>
             <td mat-cell *matCellDef="let reportParameter"> {{ reportParameter.parameterName }} </td>
           </ng-container>
 
           <ng-container matColumnDef="parameterNamePassed">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Parameter Name Passed to Pentaho </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Parameter Name Passed to Pentaho' | translate }} </th>
             <td mat-cell *matCellDef="let reportParameter"> {{ reportParameter.reportParameterName }} </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 reportParameter" fxLayoutGap="15%">
               <button type="button" fxFlex="8%" color="primary" mat-icon-button
                 (click)="editReportParameter(reportParameter)">
@@ -126,9 +126,9 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
         <button mat-raised-button type="submit" color="primary"
-          [disabled]="!reportForm.valid && reportParametersData.length === 0" *mifosxHasPermission="'CREATE_REPORT'">Submit</button>
+          [disabled]="!reportForm.valid && reportParametersData.length === 0" *mifosxHasPermission="'CREATE_REPORT'">{{'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/system/manage-reports/create-report/create-report.component.ts

@@ -1,18 +1,19 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators, FormArray } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
+import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { SystemService } from 'app/system/system.service';
 
 /** Custom Components */
-import { ReportParameterDialogComponent } from '../report-parameter-dialog/report-parameter-dialog.component';
+import { TranslateService } from '@ngx-translate/core';
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+import { ReportParameterDialogComponent } from '../report-parameter-dialog/report-parameter-dialog.component';
 
 /**
  * Create Report Component.
@@ -55,12 +56,14 @@ export class CreateReportComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
    * @param {MatDialog} dialog Dialog Reference.
+   * @param {TranslateService} translateService Translate Service.
    */
   constructor(private formBuilder: UntypedFormBuilder,
               private systemService: SystemService,
               private route: ActivatedRoute,
               private router: Router,
-              private dialog: MatDialog) {
+              private dialog: MatDialog,
+              private translateServices:TranslateService) {
     this.route.data.subscribe((data: { reportTemplate: any }) => {
       this.reportTemplateData = data.reportTemplate;
       this.dataForDialog.allowedParameters = this.reportTemplateData.allowedParameters;
@@ -147,7 +150,7 @@ export class CreateReportComponent implements OnInit {
    */
   deleteReportParameter(reportParameter: any) {
     const deleteReportDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `report parameter ${reportParameter.parameterName}` }
+      data: { deleteContext: this.translateServices.instant('labels.heading.Report Parameter') + ' ' + reportParameter.parameterName }
     });
     deleteReportDialogRef.afterClosed().subscribe((response: any) => {
       if (response.delete) {

src/app/system/manage-reports/edit-report/edit-report.component.html

@@ -9,31 +9,31 @@
         <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutGap="4%">
 
           <mat-form-field fxFlex="30%">
-            <mat-label>Report Name</mat-label>
+            <mat-label>{{ 'labels.inputs.Report Name' | translate }}</mat-label>
             <input matInput required formControlName="reportName">
             <mat-error *ngIf="reportForm.controls.reportName.hasError('required')">
-              Report Name is <strong>required</strong>
+              {{ 'labels.inputs.Report Name' | translate }}  {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="30%">
-            <mat-label>Report Type</mat-label>
+            <mat-label>{{ 'labels.inputs.Report Type' | translate }}</mat-label>
             <mat-select required formControlName="reportType">
               <mat-option *ngFor="let allowedReportType of reportData.allowedReportTypes" [value]="allowedReportType">
-                {{ allowedReportType }}
+                {{ allowedReportType | translateKey:'text'}}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="reportForm.controls.reportType.hasError('required')">
-              Report Type is <strong>required</strong>
+              {{ 'labels.inputs.Report Type' | translate }}  {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="30%">
-            <mat-label>Report Sub Type</mat-label>
+            <mat-label>{{ 'labels.inputs.Report Sub Type' | translate }}</mat-label>
             <mat-select formControlName="reportSubType">
               <mat-option *ngFor="let allowedReportSubType of reportData.allowedReportSubTypes"
                 [value]="allowedReportSubType">
-                {{ allowedReportSubType }}
+                {{ allowedReportSubType | translateKey:'text'}}
               </mat-option>
             </mat-select>
           </mat-form-field>
@@ -43,18 +43,18 @@
         <div fxLayout="row wrap" fxLayout.lt-md="column" fxLayoutGap="4%">
 
           <mat-form-field fxFlex="40%">
-            <mat-label>Report Category</mat-label>
+            <mat-label>{{ 'labels.inputs.Report Category' | translate }}</mat-label>
             <mat-select formControlName="reportCategory">
               <mat-option *ngFor="let reportCategoryType of reportCategoryTypeOptions"
                 [value]="reportCategoryType">
-                {{ reportCategoryType }}
+                {{ reportCategoryType | translateKey:'catalogs' }}
               </mat-option>
             </mat-select>
           </mat-form-field>
 
           <div fxFlex="10%" class="user-report-wrapper">
             <mat-checkbox class="user-report" labelPosition="after" formControlName="useReport">
-              User Report (UI)
+              {{ 'labels.inputs.User Report (UI)' | translate }}
             </mat-checkbox>
           </div>
 
@@ -63,15 +63,15 @@
         <div fxLayout="column">
 
           <mat-form-field fxFlex="98%">
-            <mat-label>Description</mat-label>
+            <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
             <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
           <mat-form-field fxFlex="98%">
-            <mat-label>SQL</mat-label>
+            <mat-label> {{ 'labels.inputs.SQL' | translate }}</mat-label>
             <textarea matInput required formControlName="reportSql" cdkTextareaAutosize cdkAutosizeMinRows="6"></textarea>
             <mat-error *ngIf="reportForm.controls.reportSql.hasError('required')">
-              SQL is <strong>required</strong>
+               {{ 'labels.inputs.SQL' | translate }}  {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -81,12 +81,12 @@
 
         <div fxLayout="row wrap" fxLayoutGap="60%" fxLayout.lt-md="column">
 
-          <p fxFlex="20%" class="mat-title">Report Parameters</p>
+          <p fxFlex="20%" class="mat-title">{{ 'labels.inputs.Report Parameters' | translate }}</p>
 
           <button mat-raised-button fxFlex="20%" type="button" *ngIf="!reportData.coreReport" color="primary"
             (click)="addReportParameter()">
             <fa-icon icon="plus" class="m-r-10"></fa-icon>
-            Add Report Parameter
+            {{ 'labels.buttons.Add Report Parameter' | translate }}
           </button>
 
         </div>
@@ -94,17 +94,17 @@
         <table mat-table [dataSource]="dataSource" matSort>
 
           <ng-container matColumnDef="parameterName">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Parameter </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.buttons.Parameters' | translate }} </th>
             <td mat-cell *matCellDef="let reportParameter"> {{ reportParameter.parameterName }} </td>
           </ng-container>
 
           <ng-container matColumnDef="parameterNamePassed">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Parameter Name Passed to Pentaho </th>
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Parameter Name Passed to Pentaho' | translate }} </th>
             <td mat-cell *matCellDef="let reportParameter"> {{ reportParameter.reportParameterName }} </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 reportParameter" fxLayoutGap="15%">
               <button *ngIf="!reportData.coreReport" type="button" fxFlex="8%" color="primary" mat-icon-button
                 (click)="editReportParameter(reportParameter)">
@@ -127,9 +127,9 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
         <button mat-raised-button color="primary"
-          [disabled]="(!reportForm.valid || reportForm.pristine) && !isReportParametersChanged" *mifosxHasPermission="'UPDATE_REPORT'">Submit</button>
+          [disabled]="(!reportForm.valid || reportForm.pristine) && !isReportParametersChanged" *mifosxHasPermission="'UPDATE_REPORT'">{{'labels.buttons.Submit' | translate }}</button>
       </mat-card-actions>
 
     </form>

src/app/system/manage-reports/manage-reports.component.html

@@ -2,7 +2,7 @@
   <div #buttonCreateReport class="in-block">
     <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_REPORT'">
         <fa-icon icon="plus" class="m-r-10"></fa-icon>
-        Create Report
+        {{ 'labels.buttons.Create Report' | translate }}
     </button>
   </div>
 </div>
@@ -21,41 +21,41 @@
         <table mat-table [dataSource]="dataSource" matSort>
 
             <ng-container matColumnDef="reportName">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> Report Name </th>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Report Name' | translate }} </th>
                 <td mat-cell *matCellDef="let report"> {{ report.reportName }} </td>
             </ng-container>
 
             <ng-container matColumnDef="reportType">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> Report Type </th>
-                <td mat-cell *matCellDef="let report"> {{ report.reportType }} </td>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Report Type' | translate }} </th>
+                <td mat-cell *matCellDef="let report"> {{ report.reportType | translateKey:'text'}} </td>
             </ng-container>
 
             <ng-container matColumnDef="reportSubType">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> Report Sub Type </th>
-                <td mat-cell *matCellDef="let report"> {{ report.reportSubType }} </td>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Report Sub Type' | translate }} </th>
+                <td mat-cell *matCellDef="let report"> {{ report.reportSubType | translateKey:'text'}} </td>
             </ng-container>
 
             <ng-container matColumnDef="reportCategory">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> Report Category </th>
-                <td mat-cell *matCellDef="let report"> {{ report.reportCategory }} </td>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Report Category' | translate }} </th>
+                <td mat-cell *matCellDef="let report"> {{ report.reportCategory | translateKey:'catalogs' }} </td>
             </ng-container>
 
             <ng-container matColumnDef="coreReport">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> Core Report </th>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Core Report' | translate }} </th>
                 <td mat-cell *matCellDef="let report">
-                    <fa-icon *ngIf="report.coreReport" icon="check-circle" size="lg" class="true" matTooltip="Yes"
+                    <fa-icon *ngIf="report.coreReport" icon="check-circle" size="lg" class="true" [matTooltip]="('tooltips.Yes' | translate)"
                         matTooltipPosition="right"></fa-icon>
-                    <fa-icon *ngIf="!report.coreReport" icon="times-circle" size="lg" class="false" matTooltip="No"
+                    <fa-icon *ngIf="!report.coreReport" icon="times-circle" size="lg" class="false" [matTooltip]="('tooltips.No' | translate)"
                         matTooltipPosition="right"></fa-icon>
                 </td>
             </ng-container>
 
             <ng-container matColumnDef="userReport">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> User Report </th>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.User Report' | translate }} </th>
                 <td mat-cell *matCellDef="let report">
-                    <fa-icon *ngIf="report.useReport" icon="check-circle" size="lg" class="true" matTooltip="Yes"
+                    <fa-icon *ngIf="report.useReport" icon="check-circle" size="lg" class="true" [matTooltip]="('tooltips.Yes' | translate)"
                         matTooltipPosition="right"></fa-icon>
-                    <fa-icon *ngIf="!report.useReport" icon="times-circle" size="lg" class="false" matTooltip="No"
+                    <fa-icon *ngIf="!report.useReport" icon="times-circle" size="lg" class="false" [matTooltip]="('tooltips.No' | translate)"
                         matTooltipPosition="right"></fa-icon>
                 </td>
             </ng-container>
@@ -71,8 +71,8 @@
 </div>
 
 <ng-template #templateButtonCreateReport let-popover="popover">
-  <h2>Create Report</h2>
-  <p class="mw300">This option allows you to create new report.</p>
+  <h2>{{ 'labels.buttons.Create Report' | translate }}</h2>
+  <p class="mw300">{{ 'labels.text.Create new report' | translate }}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
     <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
@@ -81,7 +81,7 @@
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
-  <h4>Search bar to filter reports by name.</h4>
+  <h4>{{ 'labels.heading.Filter reports by name' | translate }}</h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
     <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateReport, buttonCreateReport, 'bottom', true)">Back</button>
@@ -90,10 +90,10 @@
 </ng-template>
 
 <ng-template #templateReportsTable let-popover="popover">
-  <h4 class="mw300">List of all currently available reports. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895354/Manage+Reports" target="_blank">Manage Reports</a></h4>
+  <h4 class="mw300">{{ 'labels.heading.List of all currently available reports' | translate }}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895354/Manage+Reports" target="_blank">Manage Reports</a></h4>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">Back</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{'labels.buttons.Close' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">{{'labels.buttons.Back' | translate}}</button>
     <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
   </div>
 </ng-template>

src/app/system/manage-reports/report-parameter-dialog/report-parameter-dialog.component.html

@@ -1,4 +1,4 @@
-<h1 mat-dialog-title>{{ data.parameterName ? "Edit" : "Add" }} Report Parameter</h1>
+<h1 mat-dialog-title>{{ data.parameterName ? ('labels.buttons.Edit' | translate) : ('labels.buttons.Add' | translate) }} {{'labels.heading.Report Parameter' | translate }}</h1>
 
 <mat-dialog-content>
 
@@ -7,19 +7,19 @@
     <div fxLayout="column">
 
       <mat-form-field>
-        <mat-label>Select allowed parameter</mat-label>
+        <mat-label>{{ 'labels.inputs.Select allowed parameter' | translate }}</mat-label>
         <mat-select required formControlName="parameterName">
           <mat-option *ngFor="let allowedParameter of data.allowedParameters" [value]="allowedParameter.id">
             {{ allowedParameter.parameterName }}
           </mat-option>
         </mat-select>
         <mat-error *ngIf="reportParameterForm.controls.parameterName.hasError('required')">
-          Report Parameter is <strong>required</strong>
+          {{ 'labels.inputs.Report Parameters' | translate }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field>
-        <mat-label>Parameter name passed to Pentaho</mat-label>
+        <mat-label>{{'labels.inputs.Parameter Name Passed to Pentaho' | translate }}</mat-label>
         <input matInput formControlName="reportParameterName">
       </mat-form-field>
 
@@ -30,7 +30,7 @@
 </mat-dialog-content>
 
 <mat-dialog-actions align="end">
-  <button mat-button mat-dialog-close>Cancel</button>
+  <button mat-button mat-dialog-close>{{'labels.buttons.Cancel' | translate}}</button>
   <button mat-raised-button color="primary"
-    [disabled]="!reportParameterForm.valid || reportParameterForm.pristine" (click)="submit()">Submit</button>
+    [disabled]="!reportParameterForm.valid || reportParameterForm.pristine" (click)="submit()">{{'labels.buttons.Submit' | translate }}</button>
 </mat-dialog-actions>

src/app/system/manage-reports/view-report/view-report.component.html

@@ -2,13 +2,13 @@
 
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_REPORT'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{'labels.buttons.Edit' | translate }}
   </button>
 
   <span *ngIf="!reportData.coreReport">
     <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_REPORT'">
       <fa-icon icon="trash" class="m-r-10"></fa-icon>
-      Delete
+      {{'labels.buttons.Delete' | translate }}
     </button>
   </span>
 
@@ -25,31 +25,31 @@
       <div fxLayout="row wrap" class="content">
 
         <div fxFlex="50%" class="mat-body-strong">
-          Report Type:
+          {{ 'labels.inputs.Report Type' | translate }}:
         </div>
 
         <div fxFlex="50%">
-          {{ reportData.reportType }}
+          {{ reportData.reportType | translateKey:'text' }}
         </div>
 
         <div *ngIf="reportData.reportSubType" fxFlex="50%" class="mat-body-strong">
-          Report Subtype:
+          {{ 'labels.inputs.Report Sub Type' | translate }}:
         </div>
 
         <div *ngIf="reportData.reportSubType" fxFlex="50%">
-          {{ reportData.reportSubType }}
+          {{ reportData.reportSubType | translateKey:'text' }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Report Category:
+          {{ 'labels.inputs.Report Category' | translate }}:
         </div>
 
         <div fxFlex="50%">
-          {{ reportData.reportCategory }}
+          {{ reportData.reportCategory | translateKey:'catalogs' }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Core Report:
+          {{ 'labels.inputs.Core Report' | translate }}:
         </div>
 
         <div fxFlex="50%">
@@ -57,7 +57,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          User Report:
+          {{ 'labels.inputs.User Report' | translate }}:
         </div>
 
         <div fxFlex="50%">