translate manage reports inside system module

openMF · Jun 26, 2024 · 006c968 · 006c968
1 parent 5db708c
commit 006c968
Show file tree

Hide file tree

Showing 18 changed files with 155 additions and 81 deletions.
diff --git a/src/app/system/manage-reports/create-report/create-report.component.html b/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,28 +82,28 @@
 
         <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>
 
         <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>

diff --git a/src/app/system/manage-reports/create-report/create-report.component.ts b/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) {

diff --git a/src/app/system/manage-reports/edit-report/edit-report.component.html b/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,30 +81,30 @@
 
         <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>
 
         <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>