feat:Home Translate Module (#1807)

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; Amount Collected
+      &nbsp;&nbsp; {{"labels.inputs.Amount Collected"  |translate}}
       <div>
         <mat-form-field id="office" fxFlex="94%">
-          <mat-label>Office</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>No Data</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; Amount Pending / Disbursed
+      &nbsp;&nbsp; {{"labels.inputs.Amount Pending / Disbursed"  |translate}}
       <div>
         <mat-form-field id="office" fxFlex="94%">
-          <mat-label>Office</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>No Data</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; Client Trends
+      &nbsp;&nbsp; {{"labels.inputs.Client Trends"  |translate}}
       <div>
         <mat-form-field id="office" fxFlex="94%">
-          <mat-label>Office</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">Day</mat-button-toggle>
-      <mat-button-toggle value="Week">Week</mat-button-toggle>
-      <mat-button-toggle value="Month">Month</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; Recent Activities</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; Frequent Activities</h3>
+          &nbsp;&nbsp; {{"labels.heading.Frequent Activities"  |translate}}</h3>
         </mat-card-header>
 
         <mat-card-content>

src/app/home/home.component.html

@@ -15,7 +15,7 @@
 
     <mat-card-header>
       <mat-card-title class="title">
-        {{ 'labels.texts.Welcome' | translate }}, {{ username }}!
+        {{ 'labels.text.Welcome' | translate }}, {{ username }}!
       </mat-card-title>
     </mat-card-header>
 
@@ -43,21 +43,21 @@
 </div>
 
 <ng-template #templateButtonDashboard let-popover="popover">
-  <h2>Dashboard</h2>
-  <p class="mw300">This will navigate the user to the dashboard component.</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()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateSearchActivity, searchActivity,'bottom',true)">Next</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>Search Activity</h2>
-  <p class="mw300">This will navigate the user to the searched activity.</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()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonDashboard, buttonDashboard,'bottom',true)">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</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>