i18n: Adding new languages: Part 1 (#1882)

Co-authored-by: Jose Alberto Hernandez <alberto@blue-daemon.local>

src/app/reports/reports-routing.module.ts

@@ -5,9 +5,6 @@ import { Routes, RouterModule } from '@angular/router';
 /** Routing Imports */
 import { Route } from '../core/route/route.service';
 
-/** Translation Imports */
-import { extract } from '../core/i18n/i18n.service';
-
 /** Custom Components */
 import { ReportsComponent } from './reports.component';
 import { RunReportComponent } from './run-report/run-report.component';
@@ -27,7 +24,7 @@ const routes: Routes = [
   Route.withShell([
     {
       path: 'reports',
-      data: { title: extract('Reports'), breadcrumb: 'Reports' },
+      data: { title: 'Reports', breadcrumb: 'Reports' },
       resolve: {
         reports: ReportsResolver
       },
@@ -43,7 +40,7 @@ const routes: Routes = [
         },
         {
           path: 'run/:name',
-          data: { title: extract('Reports'), routeParamBreadcrumb: 'name' },
+          data: { title: 'Reports', routeParamBreadcrumb: 'name' },
           component: RunReportComponent,
           resolve: {
             reportParameters: RunReportResolver,
@@ -54,7 +51,7 @@ const routes: Routes = [
     },
     {
       path: 'xbrl',
-      data: { title: extract('XBRL'), breadcrumb: 'XBRL' },
+      data: { title: 'XBRL', breadcrumb: 'XBRL' },
       children: [
         {
           path: '',
@@ -67,7 +64,7 @@ const routes: Routes = [
         },
         {
           path: 'report',
-          data: { title: extract('XBRL Report'), breadcrumb: 'Run Report' },
+          data: { title: 'XBRL Report', breadcrumb: 'Run Report' },
           component: XBRLReportComponent
         }
       ]

src/app/reports/reports.component.html

@@ -2,7 +2,7 @@
 
   <div fxLayout="row" fxLayoutGap="20px">
     <mat-form-field fxFlex>
-      <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
+      <mat-label>{{'labels.inputs.Filter' | translate }}</mat-label>
       <input matInput (keyup)="applyFilter($event.target.value)">
     </mat-form-field>
   </div>
@@ -12,18 +12,18 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="reportName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.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> Type </th>
-        <td mat-cell *matCellDef="let report"> {{ report.reportType }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Type" | translate}} </th>
+        <td mat-cell *matCellDef="let report"> {{'labels.text.' + report.reportType | translate}} </td>
       </ng-container>
 
       <ng-container matColumnDef="reportCategory">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Category </th>
-        <td mat-cell *matCellDef="let report"> {{ report.reportCategory }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Category" | translate}} </th>
+        <td mat-cell *matCellDef="let report"> {{'labels.text.' + report.reportCategory | translate}} </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

src/app/reports/run-report/chart/chart.component.html

@@ -1,7 +1,7 @@
 <div class="m-b-20" fxLayoutAlign="end">
   <mat-button-toggle-group  aria-label="Select Chart Type">
-    <mat-button-toggle value="Bar" (click) = "setBarChart(inputData)">Bar Chart</mat-button-toggle>
-    <mat-button-toggle value="Pie" (click) = "setPieChart(inputData)">Pie Chart</mat-button-toggle>
+    <mat-button-toggle value="Bar" (click) = "setBarChart(inputData)">{{"labels.buttons.Bar Chart" | translate}}</mat-button-toggle>
+    <mat-button-toggle value="Pie" (click) = "setPieChart(inputData)">{{"labels.buttons.Pie Chart" | translate}}</mat-button-toggle>
   </mat-button-toggle-group>
 </div>
 

src/app/reports/run-report/run-report.component.html

@@ -14,7 +14,7 @@
               <mat-label>{{param.label}}</mat-label>
               <input matInput required [formControlName]="param.name">
               <mat-error *ngIf="reportForm.controls[param.name].hasError('required')">
-                {{param.label}} is <strong>required</strong>
+                {{param.label}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
               </mat-error>
             </mat-form-field>
 
@@ -25,7 +25,7 @@
               <mat-datepicker-toggle matSuffix [for]="runReportDatePicker"></mat-datepicker-toggle>
               <mat-datepicker #runReportDatePicker></mat-datepicker>
               <mat-error *ngIf="reportForm.controls[param.name].hasError('required')">
-                {{param.label}} is <strong>required</strong>
+                {{param.label}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
               </mat-error>
             </mat-form-field>
 
@@ -37,7 +37,7 @@
                 </mat-option>
               </mat-select>
               <mat-error *ngIf="reportForm.controls[param.name].hasError('required')">
-                {{param.label}} is <strong>required</strong>
+                {{param.label}} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
               </mat-error>
             </mat-form-field>
 
@@ -46,7 +46,7 @@
         </ng-container>
 
         <mat-form-field fxFlex>
-          <mat-label>{{ 'Decimal Places' | translate }}</mat-label>
+          <mat-label>{{"labels.inputs.Decimal Places" | translate}}</mat-label>
           <mat-select [formControl]="decimalChoice">
             <mat-option value="0">0</mat-option>
             <mat-option value="1">1</mat-option>
@@ -57,30 +57,30 @@
         </mat-form-field>
 
         <mat-form-field fxFlex *ngIf="isPentahoReport()">
-          <mat-label>{{ 'Output Type' | translate }}</mat-label>
+          <mat-label>{{'labels.inputs.Output Type' | translate}}</mat-label>
           <mat-select required formControlName="outputType">
             <mat-option *ngFor="let option of outputTypeOptions" [value]="option.value">
-              {{option.name | translate}}
+              {{ "labels.inputs." + option.name | translate}}
             </mat-option>
           </mat-select>
           <mat-error *ngIf="reportForm.controls['outputType'].hasError('required')">
-            Report Output Type is <strong>required</strong>
+            {{ "labels.text.Report Output Type" | translate }} {{ "labels.commons.is" | translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
           </mat-error>
         </mat-form-field>
 
         <div fxFlex="98%" *ngIf="exportToS3Allowed"  >
           <mat-checkbox labelPosition="after" formControlName="exportOutputToS3">
-            Export output data to S3 repository [{{exportToS3Repository}}]
+            {{ "labels.text.Export output data to S3 repository" | translate }} [{{exportToS3Repository}}]
           </mat-checkbox>
         </div>
 
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['/reports']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['/reports']">{{"labels.buttons.Cancel" | translate}}</button>
         <button mat-raised-button color="primary" [disabled]="!reportForm.valid" id="runreport">
           <fa-icon icon="file-export" class="m-r-10"></fa-icon>
-          {{ 'Run Report' | translate }}
+          {{"labels.buttons.Run Report" | translate}}
         </button>
       </mat-card-actions>
 
@@ -96,7 +96,7 @@
 
     <div class="m-b-20">
       <button mat-raised-button color="primary" (click)="isCollapsed = false">
-        {{ 'Parameters' | translate }}
+        {{'labels.buttons.Parameters' | translate}}
       </button>
     </div>
 

src/app/reports/run-report/table-and-sms/table-and-sms.component.html

@@ -4,8 +4,8 @@
 
     <div class="m-b-10" *ngIf="dataObject.report.type === 'Table'" fxLayoutAlign="end">
       <button mat-raised-button color="primary" (click)="exportFile()" [disabled]="notExistsReportData"
-        matToolTip="Export the data to CSV file">
-        Export CSV
+        matToolTip="{{'labels.text.Export the data to CSV file' | translate}}">
+        {{'labels.buttons.Export CSV' | translate}}
       </button>
     </div>
 
@@ -29,7 +29,7 @@
     <div class="alert" [hidden]="!notExistsReportData">
       <div class="message">
         <i class="fa fa-exclamation-circle alert-check"></i>
-        No report data was generated
+        {{'labels.text.No report data was generated' | translate}}
       </div>
     </div>
   </div>
@@ -37,7 +37,7 @@
   <div class="alert" *ngIf="!hideOutput && toBeExportedToRepo">
     <div class="message">
       <i class="fa fa-exclamation-circle alert-check"></i>
-      The report request has been sent and the report will be exported to file repository
+      {{'labels.text.The report request has been sent and the report will be exported to file repository' | translate}}
     </div>
   </div>
 
@@ -47,7 +47,7 @@
 
   <div class="back-button" *ngIf="!hideOutput">
     <button type="button" color="primary" mat-raised-button [routerLink]="['../..']">
-      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>Back</button>
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>{{"labels.buttons.Back" | translate}}</button>
   </div>
 
 </div>

src/app/reports/xbrl-report/xbrl-report.component.html

@@ -7,14 +7,14 @@
       <mat-card-content fxLayout="column">
 
         <mat-form-field fxFlex (click)="startDatePicker.open()">
-          <mat-label>Start Date</mat-label>
+          <mat-label>{{"labels.inputs.Start Date" | translate}}</mat-label>
           <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" formControlName="startDate">
           <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #startDatePicker></mat-datepicker>
         </mat-form-field>
 
         <mat-form-field fxFlex (click)="endDatePicker.open()">
-          <mat-label>End Date</mat-label>
+          <mat-label>{{"labels.inputs.End Date" | translate}}</mat-label>
           <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="endDatePicker" formControlName="endDate">
           <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #endDatePicker></mat-datepicker>
@@ -23,8 +23,8 @@
       </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 mat-raised-button color="primary" id="runreport">Run Report</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="primary" id="runreport">{{"labels.buttons.Run Report" | translate}}</button>
       </mat-card-actions>
 
     </form>
@@ -38,7 +38,7 @@
   <mat-card *ngIf="!isCollapsed">
 
     <button mat-raised-button color="primary" (click)="isCollapsed = !isCollapsed">
-      Parameters
+      {{"labels.buttons.Parameters" | translate}}
     </button>
 
     <div class="m-t-20">
@@ -46,17 +46,17 @@
       <table mat-table [dataSource]="dataSource" matSort>
 
         <ng-container matColumnDef="name">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.name" | translate}} </th>
           <td mat-cell *matCellDef="let entry"> {{ entry.name }} </td>
         </ng-container>
 
         <ng-container matColumnDef="dimension">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Dimension </th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Dimension" | translate}} </th>
           <td mat-cell *matCellDef="let entry"> {{ entry.dimension }} </td>
         </ng-container>
 
         <ng-container matColumnDef="value">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Value </th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"labels.inputs.Value" | translate}} </th>
           <td mat-cell *matCellDef="let entry"> <input [formControl]="entry.value"></td>
         </ng-container>
 
@@ -66,9 +66,9 @@
       </table>
 
       <div class="container m-t-20" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{"labels.buttons.Cancel" | translate}}</button>
         <a [href]="submit()" download="file.xml">
-        <button mat-raised-button color="primary">Submit</button>
+        <button mat-raised-button color="primary">{{"labels.buttons.Submit" | translate}}</button>
         </a>
       </div>
 

src/app/reports/xbrl/xbrl.component.html

@@ -1,7 +1,7 @@
 <mat-card class="container">
 
   <div *ngIf="XBRLSuccess">
-     <h1><strong>Saved Successfully</strong></h1>
+     <h1><strong>{{"labels.heading.Saved Successfully" | translate}}</strong></h1>
   </div>
 
   <div *ngIf="!XBRLSuccess">
@@ -39,12 +39,12 @@
 
       <div class="container m-t-20" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="20px">
          <button mat-raised-button color="primary" [routerLink]="['./report']">
-            <fa-icon icon="cog"></fa-icon>
-            &nbsp;&nbsp; Generate Report
+            <fa-icon icon="cog" class="m-r-10"></fa-icon>
+            {{"labels.buttons.Generate Report" | translate}}
          </button>
          <button mat-raised-button color="accent" (click)="submit()">
-            <fa-icon icon="download"></fa-icon>
-            &nbsp;&nbsp; Save Changes 
+            <fa-icon icon="download" class="m-r-10"></fa-icon>
+            {{"labels.buttons.Save Changes" | translate}}
          </button>
       </div>