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

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

src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.html

@@ -3,10 +3,10 @@
   <mat-card-header class="header">
     <h3 fxFlex="100%">
       <fa-icon icon="donate"></fa-icon>
-      &nbsp;&nbsp; {{"labels.inputs.Amount Collected" | translate }}
+      &nbsp;&nbsp; {{"labels.inputs.Amount Collected" | translate}}
       <div>
         <mat-form-field id="office" fxFlex="94%">
-          <mat-label>{{"labels.inputs.Office" | translate }}</mat-label>
+          <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
           <mat-select [formControl]="officeId">
             <mat-option *ngFor="let office of officeData" [value]="office.id">
               {{ office.name }}
@@ -23,7 +23,7 @@
       <canvas id="collection-pie" width="800" height="600"></canvas>
     </div>
     <div *ngIf="showFallback" class="fallback" fxLayoutAlign="center center">
-      <p>{{"labels.text.No Data" | translate }}</p>
+      <p>{{"labels.text.No Data" | translate}}</p>
     </div>
   </mat-card-content>
 

src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.html

@@ -3,10 +3,10 @@
   <mat-card-header class="header">
     <h3 fxFlex="100%">
       <fa-icon icon="money-bill"></fa-icon>
-      &nbsp;&nbsp; {{"labels.inputs.Amount Pending / Disbursed" | translate }}
+      &nbsp;&nbsp; {{"labels.inputs.Amount Pending / Disbursed" | translate}}
       <div>
         <mat-form-field id="office" fxFlex="94%">
-          <mat-label>{{"labels.inputs.Office" | translate }}</mat-label>
+          <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
           <mat-select [formControl]="officeId">
             <mat-option *ngFor="let office of officeData" [value]="office.id">
               {{ office.name }}
@@ -23,7 +23,7 @@
       <canvas id="disbursement-pie" width="800" height="600"></canvas>
     </div>
     <div *ngIf="showFallback" class="fallback" fxLayoutAlign="center center">
-      <p>{{"labels.text.No Data" | translate }}</p>
+      <p>{{"labels.text.No Data" | translate}}</p>
     </div>
   </mat-card-content>
 

src/app/home/dashboard/client-trends-bar/client-trends-bar.component.html

@@ -3,10 +3,10 @@
   <mat-card-header class="header">
     <h3 fxFlex="100%">
       <fa-icon icon="chart-line"></fa-icon>
-      &nbsp;&nbsp; {{"labels.inputs.Client Trends" | translate }}
+      &nbsp;&nbsp; {{"labels.inputs.Client Trends" | translate}}
       <div>
         <mat-form-field id="office" fxFlex="94%">
-          <mat-label>{{"labels.inputs.Office" | translate }}</mat-label>
+          <mat-label>{{"labels.inputs.Office" | translate}}</mat-label>
           <mat-select [formControl]="officeId">
             <mat-option *ngFor="let office of officeData" [value]="office.id">
               {{ office.name }}
@@ -23,9 +23,9 @@
       <canvas id="client-trends-bar" width="800" height="465"></canvas>
     </div>
     <mat-button-toggle-group [formControl]="timescale" id='timescale' appearance="legacy">
-      <mat-button-toggle value="Day">{{"labels.buttons.Day" | translate }}</mat-button-toggle>
-      <mat-button-toggle value="Week">{{"labels.buttons.Week" | translate }}</mat-button-toggle>
-      <mat-button-toggle value="Month">{{"labels.buttons.Month" | translate }}</mat-button-toggle>
+      <mat-button-toggle value="Day">{{"labels.buttons.Day" | translate}}</mat-button-toggle>
+      <mat-button-toggle value="Week">{{"labels.buttons.Week" | translate}}</mat-button-toggle>
+      <mat-button-toggle value="Month">{{"labels.buttons.Month" | translate}}</mat-button-toggle>
     </mat-button-toggle-group>
   </mat-card-content>
 

src/app/home/dashboard/dashboard.component.html

@@ -8,7 +8,7 @@
 
         <mat-card-header class="header">
           <h3><fa-icon icon="bolt"></fa-icon>
-          &nbsp;&nbsp; {{"labels.heading.Recent Activities" | translate }}</h3>
+          &nbsp;&nbsp; {{"labels.heading.Recent Activities" | translate}}</h3>
         </mat-card-header>
 
         <mat-card-content>
@@ -23,7 +23,7 @@
 
         <mat-card-header class="header">
           <h3><fa-icon icon="laptop"></fa-icon>
-          &nbsp;&nbsp; {{"labels.heading.Frequent Activities" | translate }}</h3>
+          &nbsp;&nbsp; {{"labels.heading.Frequent Activities" | translate}}</h3>
         </mat-card-header>
 
         <mat-card-content>

src/app/home/home-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 { HomeComponent } from './home.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
@@ -26,12 +23,12 @@ const routes: Routes = [
     {
       path: 'home',
       component: HomeComponent,
-      data: { title: extract('Home') }
+      data: { title: 'Home' }
     },
     {
       path: 'dashboard',
       component: DashboardComponent,
-      data: { title: extract('Dashboard'), breadcrumb: 'Dashboard' },
+      data: { title: 'Dashboard', breadcrumb: 'Dashboard' },
       resolve: {
         offices: OfficesResolver
       }

src/app/home/home.component.html

@@ -3,7 +3,7 @@
   <div #buttonDashboard class="in-block">
     <button mat-raised-button color="primary" [routerLink]="['/dashboard']">
       <fa-icon icon="tachometer-alt" class="m-r-10"></fa-icon>
-      {{ 'labels.buttons.Dashboard' | translate }}
+      {{'labels.buttons.Dashboard' | translate}}
     </button>
   </div>
 
@@ -15,7 +15,7 @@
 
     <mat-card-header>
       <mat-card-title class="title">
-        {{ 'labels.text.Welcome' | translate }}, {{ username }}!
+        {{'labels.text.Welcome' | translate}}, {{ username }}!
       </mat-card-title>
     </mat-card-header>
 
@@ -23,7 +23,7 @@
 
       <div fxLayout="column">
         <mat-form-field>
-          <mat-label>{{ 'labels.placeholders.Search Activity' | translate }}</mat-label>
+          <mat-label>{{'labels.placeholders.Search Activity' | translate}}</mat-label>
           <input matInput [matAutocomplete]="activitySearch" [formControl]="searchText">
         </mat-form-field>
       </div>
@@ -43,21 +43,21 @@
 </div>
 
 <ng-template #templateButtonDashboard let-popover="popover">
-  <h2>{{"labels.heading.Dashboard" | translate }}</h2>
-  <p class="mw300">{{"labels.text.This will navigate the user to the dashboard component." | translate }}</p>
+  <h2>{{"labels.heading.Dashboard" | translate}}</h2>
+  <p class="mw300">{{"labels.text.This will navigate the user to the dashboard component." | translate}}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <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();previousStep()">{{"labels.buttons.Back" | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateSearchActivity, searchActivity,'bottom',true)">{{"labels.buttons.Next" | translate }}</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();previousStep()">{{"labels.buttons.Back" | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateSearchActivity, searchActivity,'bottom',true)">{{"labels.buttons.Next" | translate}}</button>
   </div>
 </ng-template>
 
 <ng-template #templateSearchActivity let-popover="popover">
-  <h2>{{"labels.heading.Search Activity" | translate }}</h2>
-  <p class="mw300">{{"labels.text.This will navigate the user to the searched activity." | translate }}</p>
+  <h2>{{"labels.heading.Search Activity" | translate}}</h2>
+  <p class="mw300">{{"labels.text.This will navigate the user to the searched activity." | translate}}</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <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(templateButtonDashboard, buttonDashboard,'bottom',true)">{{"labels.buttons.Back" | translate }}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{"labels.buttons.Next" | translate }}</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(templateButtonDashboard, buttonDashboard,'bottom',true)">{{"labels.buttons.Back" | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{"labels.buttons.Next" | translate}}</button>
   </div>
 </ng-template>

src/app/home/home.module.ts

@@ -24,7 +24,7 @@ import { TranslateModule } from '@ngx-translate/core';
     SharedModule,
     PipesModule,
     HomeRoutingModule,
-    TranslateModule.forRoot(),
+    TranslateModule,
   ],
   declarations: [
     HomeComponent,