i18n: Adding new languages: Part 2 (#1885)

Co-authored-by: radhathakare <radhathakare322@gmail.com>

src/app/shared/accounting/view-journal-entry-transaction/view-journal-entry-transaction.component.html

@@ -1,9 +1,9 @@
 <div fxLayout="row" fxLayoutAlign="end" class="container m-b-20" *ngIf="dataSource?.data[0].manualEntry">
   <button mat-raised-button color="primary" (click)="revertTransaction()" *mifosxHasPermission="'REVERSE_JOURNALENTRY'" [disabled]="dataSource?.data[0].reversed">
     <span *ngIf="!dataSource.data[0].reversed">
-      <fa-icon icon="undo" class="m-r-10"></fa-icon>Revert Transaction
+      <fa-icon icon="undo" class="m-r-10"></fa-icon>{{ 'labels.buttons.Revert Transaction' | translate }}
     </span>
-    <span *ngIf="dataSource.data[0].reversed">Transaction Reverted</span>
+    <span *ngIf="dataSource.data[0].reversed">{{ 'labels.buttons.Transaction Reverted' | translate }}</span>
   </button>
 </div>
 
@@ -16,7 +16,7 @@
         <div fxLayout="row wrap" class="content">
 
           <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
-            Office
+            {{ 'labels.inputs.Office' | translate }}
           </div>
 
           <div fxFlex="25%" fxFlex.lt-md="50%">
@@ -24,7 +24,7 @@
           </div>
 
           <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
-            Transaction Date
+            {{ 'labels.inputs.Transaction Date' | translate }}
           </div>
 
           <div fxFlex="25%" fxFlex.lt-md="50%">
@@ -32,7 +32,7 @@
           </div>
 
           <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
-            Created By
+            {{ 'labels.inputs.Created By' | translate }}
           </div>
 
           <div fxFlex="25%" fxFlex.lt-md="50%">
@@ -40,7 +40,7 @@
           </div>
 
           <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
-            Submitted on
+            {{ 'labels.inputs.Submitted on' | translate }}
           </div>
 
           <div fxFlex="25%" fxFlex.lt-md="50%">
@@ -60,32 +60,32 @@
   <table mat-table [dataSource]="dataSource" matSort>
 
     <ng-container matColumnDef="id">
-      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Entry ID </th>
+      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Entry ID' | translate }} </th>
       <td mat-cell *matCellDef="let transaction"> {{ transaction.id }} </td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountType">
-      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Type </th>
+      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Type' | translate }} </th>
       <td mat-cell *matCellDef="let transaction"> {{ transaction.glAccountType.value }} </td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountCode">
-      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Account Code </th>
+      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Account Code' | translate }} </th>
       <td mat-cell *matCellDef="let transaction"> {{ transaction.glAccountCode }} </td>
     </ng-container>
 
     <ng-container matColumnDef="glAccountName">
-      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Account Name </th>
+      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Account Name' | translate }} </th>
       <td mat-cell *matCellDef="let transaction"> {{ transaction.glAccountName }} </td>
     </ng-container>
 
     <ng-container matColumnDef="debit">
-      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Debit </th>
+      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Debit' | translate }} </th>
       <td mat-cell *matCellDef="let transaction"><span *ngIf="transaction.entryType.value === 'DEBIT'"> {{ (transaction.currency.displaySymbol || transaction.currency.code) }} {{ transaction.amount | formatNumber }} </span></td>
     </ng-container>
 
     <ng-container matColumnDef="credit">
-      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Credit </th>
+      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Credit' | translate }} </th>
       <td mat-cell *matCellDef="let transaction"><span *ngIf="transaction.entryType.value === 'CREDIT'"> {{ (transaction.currency.displaySymbol || transaction.currency.code) }} {{ transaction.amount | formatNumber }} </span></td>
     </ng-container>
 
@@ -95,7 +95,7 @@
   </table>
 
   <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px" class="m-t-15 m-b-15">
-    <button type="button" color="primary" mat-raised-button (click)="goBack()">Back</button>
+    <button type="button" color="primary" mat-raised-button (click)="goBack()">{{ 'labels.buttons.Back' | translate }}</button>
   </div>
 
 </div>

src/app/shared/accounting/view-journal-entry/view-journal-entry.component.html

@@ -1,48 +1,48 @@
-<h1 mat-dialog-title>View Journal Entry</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.View Journal Entry' | translate }}</h1>
 
 <div mat-dialog-content>
 
   <table>
 
     <tr>
-      <th>Office</th>
+      <th>{{ 'labels.inputs.Office' | translate }}</th>
       <td>{{ data.journalEntry.officeName }}</td>
     </tr>
 
     <tr>
-      <th>Entry ID</th>
+      <th>{{ 'labels.inputs.Entry ID' | translate }}</th>
       <td>{{ data.journalEntry.id }}</td>
     </tr>
 
     <tr>
-      <th>Transaction ID</th>
+      <th>{{ 'labels.inputs.Transaction ID' | translate }}</th>
       <td>{{ data.journalEntry.transactionId }}</td>
     </tr>
 
     <tr>
-      <th>Transaction Date</th>
+      <th>{{ 'labels.inputs.Transaction Date' | translate }}</th>
       <td>{{ data.journalEntry.transactionDate | dateFormat }}</td>
     </tr>
 
     <tr>
-      <th>Type</th>
+      <th>{{ 'labels.inputs.Type' | translate }}</th>
       <td>{{ data.journalEntry.glAccountType.value }}</td>
     </tr>
 
     <tr>
-      <th>Account Code</th>
+      <th>{{ 'labels.inputs.Account Code' | translate }}</th>
       <td>{{ data.journalEntry.glAccountId }}</td>
     </tr>
 
     <tr>
-      <th>Account Name</th>
+      <th>{{ 'labels.inputs.Account Name' | translate }}</th>
       <td>{{ data.journalEntry.glAccountName }}</td>
     </tr>
 
     <tr>
       <th>
-        <span *ngIf="data.journalEntry.entryType.value === 'CREDIT'">Credit</span>
-        <span *ngIf="data.journalEntry.entryType.value === 'DEBIT'">Debit</span>
+        <span *ngIf="data.journalEntry.entryType.value === 'CREDIT'">{{ 'labels.inputs.Credit' | translate }}</span>
+        <span *ngIf="data.journalEntry.entryType.value === 'DEBIT'">{{ 'labels.inputs.Debit' | translate }}</span>
       </th>
       <td>
         {{ data.journalEntry.currency.displaySymbol }} {{ data.journalEntry.amount | formatNumber }}
@@ -50,61 +50,61 @@
     </tr>
 
     <tr>
-      <th>Currency</th>
+      <th>{{ 'labels.inputs.Currency' | translate }}</th>
       <td>({{ data.journalEntry.currency.code }}) {{ data.journalEntry.currency.name }}</td>
     </tr>
 
     <tr *ngIf="data.journalEntry.referenceNumber">
-      <th>Reference Number</th>
+      <th>{{ 'labels.inputs.Reference Number' | translate }}</th>
       <td>{{ data.journalEntry.referenceNumber }}</td>
     </tr>
 
     <tr *ngIf="data.journalEntry.comments">
-      <th>Comments</th>
+      <th>{{ 'labels.inputs.Comments' | translate }}</th>
       <td>{{ data.journalEntry.comments }}</td>
     </tr>
 
     <tr *ngIf="existsPaymentDetails">
-      <th colspan="2" class="header">Payment Details</th>
+      <th colspan="2" class="header">{{ 'labels.inputs.Payment Details' | translate }}</th>
     </tr>
 
     <tr *ngIf="existsPaymentDetails && data.journalEntry.transactionDetails.paymentDetails?.paymentType">
-      <th>Payment Type</th>
+      <th>{{ 'labels.inputs.Payment Type' | translate }}</th>
       <td>{{ data.journalEntry.transactionDetails.paymentDetails.paymentType.name }}</td>
     </tr>
 
     <tr *ngIf="existsPaymentDetails && data.journalEntry.transactionDetails.paymentDetails?.accountNumber">
-      <th>Account Number</th>
+      <th>{{ 'labels.inputs.Account Number' | translate }}</th>
       <td>{{ data.journalEntry.transactionDetails.paymentDetails.accountNumber }}</td>
     </tr>
 
     <tr *ngIf="existsPaymentDetails && data.journalEntry.transactionDetails.paymentDetails?.checkNumber">
-      <th>Cheque Number</th>
+      <th>{{ 'labels.inputs.Cheque Number' | translate }}</th>
       <td>{{ data.journalEntry.transactionDetails.paymentDetails.checkNumber }}</td>
     </tr>
 
     <tr *ngIf="existsPaymentDetails && data.journalEntry.transactionDetails.paymentDetails?.routingCode">
-      <th>Routing Code</th>
+      <th>{{ 'labels.inputs.Routing Code' | translate }}</th>
       <td>{{ data.journalEntry.transactionDetails.paymentDetails.routingCode }}</td>
     </tr>
 
     <tr *ngIf="existsPaymentDetails && data.journalEntry.transactionDetails.paymentDetails?.receiptNumber">
-      <th>Receipt Number</th>
+      <th>{{ 'labels.inputs.Receipt Number' | translate }}</th>
       <td>{{ data.journalEntry.transactionDetails.paymentDetails.receiptNumber }}</td>
     </tr>
 
     <tr *ngIf="existsPaymentDetails && data.journalEntry.transactionDetails.paymentDetails?.bankNumber">
-      <th>Bank Number</th>
+      <th>{{ 'labels.inputs.Bank Number' | translate }}</th>
       <td>{{ data.journalEntry.transactionDetails.paymentDetails.bankNumber }}</td>
     </tr>
 
     <tr *ngIf="existsPaymentDetails">
-      <th>Created by</th>
+      <th>{{ 'labels.inputs.Created by' | translate }}</th>
       <td>{{ data.journalEntry.createdByUserName }}</td>
     </tr>
 
     <tr>
-      <th>Submitted on</th>
+      <th>{{ 'labels.inputs.Submitted on' | translate }}</th>
       <td>{{ data.journalEntry.submittedOnDate | datetimeFormat }}</td>
     </tr>
 
@@ -113,5 +113,5 @@
 </div>
 
 <mat-dialog-actions align="end">
-  <button mat-button mat-dialog-close>Close</button>
+  <button mat-button mat-dialog-close>{{ 'labels.buttons.Close' | translate }}</button>
 </mat-dialog-actions>

src/app/shared/cancel-dialog/cancel-dialog.component.html

@@ -1,9 +1,9 @@
-<h1 mat-dialog-title>Cancel</h1>
+<h1 mat-dialog-title>{{ 'labels.buttons.Cancel' | translate }}</h1>
 <div mat-dialog-content>
-  <p *ngIf="!data.cancelContext">Are you sure you want to leave this page and lose all inputted data?</p>
-  <p *ngIf="data.cancelContext">Are you sure you want to cancel {{ data.cancelContext }} ?</p>
+  <p *ngIf="!data.cancelContext">{{ 'labels.text.Are you sure you want to leave this page and lose all inputted data' | translate }}?</p>
+  <p *ngIf="data.cancelContext">{{ 'labels.text.Are you sure you want to cancel' | translate }} {{ data.cancelContext }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>No</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ cancel: true }">Yes</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.No' | translate }}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ cancel: true }">{{ 'labels.buttons.Yes' | translate }}</button>
 </mat-dialog-actions>

src/app/shared/change-password-dialog/change-password-dialog.component.html

@@ -1,4 +1,4 @@
-<h1 mat-dialog-title>Change Password</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Change Password' | translate }}</h1>
 
 <div mat-dialog-content>
 
@@ -7,30 +7,30 @@
     <div fxLayout="column">
 
       <mat-form-field>
-        <mat-label>Password</mat-label>
+        <mat-label>{{ 'labels.inputs.Password' | translate }}</mat-label>
         <input matInput formControlName="password" type="password">
         <mat-error *ngIf="changePasswordForm.controls.password.hasError('required')">
-          Password <strong>is required</strong>
+          {{ 'labels.inputs.Password' | translate }} <strong>{{'labels.commons.is required' | translate }}</strong>
         </mat-error>
         <mat-error *ngIf="changePasswordForm.controls.password.hasError('minlength')">
-          Password should be at least <strong>8 characters long</strong>
+          {{'labels.commons.Password should be at least' | translate }} <strong>{{'labels.commons.8 characters long' | translate }}</strong>
         </mat-error>
         <mat-error *ngIf="changePasswordForm.controls.password.hasError('maxlength')">
-          Password should not be more than <strong>50 characters long</strong>
+          {{'labels.commons.Password should not be more than' | translate }} <strong>{{'labels.commons.50 characters long' | translate }}</strong>
         </mat-error>
         <mat-error *ngIf="changePasswordForm.controls.password.hasError('pattern') && !(changePasswordForm.controls.password.hasError('minlength') || changePasswordForm.controls.password.hasError('maxlength'))">
-          Password should include a <strong>numeral</strong> and at <strong>least one uppercase</strong> ,<strong>lowercase and special character</strong>
+          {{'labels.commons.Password should include a' | translate }} <strong>{{'labels.commons.numeral' | translate }}</strong> {{'labels.commons.and at' | translate }} <strong>{{'labels.commons.least one uppercase' | translate }}</strong> ,<strong>{{'labels.commons.lowercase and special character' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
       <mat-form-field>
-        <mat-label>Repeat Password</mat-label>
+        <mat-label>{{ 'labels.inputs.Repeat Password' | translate }}</mat-label>
         <input matInput formControlName="repeatPassword" type="password">
         <mat-error *ngIf="changePasswordForm.controls.repeatPassword.hasError('required')">
-          Password <strong>required</strong>
+          {{ 'labels.inputs.Password' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
         </mat-error>
         <mat-error *ngIf="changePasswordForm.controls.repeatPassword.hasError('notequal')">
-          Password <strong>does not match</strong>
+          {{ 'labels.inputs.Password' | translate }} <strong>{{'labels.commons.does not match' | translate }}</strong>
         </mat-error>
       </mat-form-field>
 
@@ -41,6 +41,6 @@
 </div>
 
 <mat-dialog-actions align="center">
-  <button mat-raised-button mat-dialog-close>Cancel</button>
-  <button mat-raised-button color="warn" [disabled]="!changePasswordForm.valid" [mat-dialog-close]="{password:changePasswordForm.get('password').value,repeatPassword:changePasswordForm.get('repeatPassword').value}">Confirm</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="warn" [disabled]="!changePasswordForm.valid" [mat-dialog-close]="{password:changePasswordForm.get('password').value,repeatPassword:changePasswordForm.get('repeatPassword').value}">{{ 'labels.buttons.Confirm' | translate }}</button>
 </mat-dialog-actions>

src/app/shared/confirmation-dialog/confirmation-dialog.component.html

@@ -3,6 +3,6 @@
   <p>{{ data.dialogContext }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>Cancel</button>
-  <button mat-raised-button color={{color}} [mat-dialog-close]="{ confirm: true }">Confirm</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color={{color}} [mat-dialog-close]="{ confirm: true }">{{ 'labels.buttons.Confirm' | translate }}</button>
 </mat-dialog-actions>

src/app/shared/delete-dialog/delete-dialog.component.html

@@ -1,8 +1,8 @@
-<h1 mat-dialog-title>Delete</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Delete' | translate }}</h1>
 <div mat-dialog-content>
-  <p>Are you sure you want to delete {{ data.deleteContext }} ?</p>
+  <p>{{ 'labels.text.Are you sure you want to delete' | translate }} {{ data.deleteContext }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>Cancel</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ delete: true }">Confirm</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ delete: true }">{{ 'labels.buttons.Confirm' | translate }}</button>
 </mat-dialog-actions>

src/app/shared/disable-dialog/disable-dialog.component.html

@@ -1,8 +1,8 @@
-<h1 mat-dialog-title>Disable</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Disable' | translate }}</h1>
 <div mat-dialog-content>
-  <p>Are you sure you want to disable {{ data.disableContext }} ?</p>
+  <p>{{ 'labels.text.Are you sure you want to disable' | translate }} {{ data.disableContext }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>Cancel</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ disable: true }">Confirm</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ disable: true }">{{ 'labels.buttons.Confirm' | translate }}</button>
 </mat-dialog-actions>

src/app/shared/enable-dialog/enable-dialog.component.html

@@ -1,8 +1,8 @@
-<h1 mat-dialog-title>Enable</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Enable' | translate }}</h1>
 <div mat-dialog-content>
-  <p>Are you sure you want to enable {{ data.enableContext }} ?</p>
+  <p>{{ 'labels.text.Are you sure you want to enable' | translate }} {{ data.enableContext }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>Cancel</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ enable: true }">Confirm</button>
+  <button mat-raised-button mat-dialog-close>{{ 'labels.buttons.Cancel' | translate }}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ enable: true }">{{ 'labels.buttons.Confirm' | translate }}</button>
 </mat-dialog-actions>

src/app/shared/file-upload/file-upload.component.html

@@ -8,7 +8,7 @@
     <button mat-button (click)="uploadFile.click()">
       <fa-icon icon="folder-open" size="lg"></fa-icon>
       &nbsp;&nbsp;
-      Browse
+      {{ 'labels.buttons.Browse' | translate }}
     </button>
   </span>
 

src/app/shared/form-dialog/form-dialog.component.html

@@ -10,5 +10,5 @@
 
 <mat-dialog-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button mat-dialog-close>{{ layout.cancelButtonText }}</button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="{ data: form }" [disabled]="!form.valid">{{ layout.addButtonText }}</button>
+  <button mat-raised-button color="primary" [mat-dialog-close]="{ data: form }" [disabled]="!form.valid || form.pristine">{{ layout.addButtonText }}</button>
 </mat-dialog-actions>

src/app/shared/form-dialog/formfield/formfield.component.html

@@ -17,7 +17,7 @@
       </mat-select>
 
       <mat-error *ngIf="form.controls[formfield.controlName].hasError('required')">
-        {{ formfield.label }} is <strong>required</strong>
+        {{ formfield.label }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
       </mat-error>
 
     </mat-form-field>
@@ -31,7 +31,7 @@
     <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
     <mat-datepicker #datePicker></mat-datepicker>
     <mat-error *ngIf="form.controls[formfield.controlName].hasError('required')">
-      {{ formfield.label }} is <strong>required</strong>
+      {{ formfield.label }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
     </mat-error>
   </mat-form-field>
 
@@ -42,7 +42,7 @@
     <mat-datepicker-toggle matSuffix [for]="datetimePicker"></mat-datepicker-toggle>
     <ngx-mat-datetime-picker #datetimePicker [enableMeridian]="true"></ngx-mat-datetime-picker>
     <mat-error *ngIf="form.controls[formfield.controlName].hasError('required')">
-      {{ formfield.label }} is <strong>required</strong>
+      {{ formfield.label }} {{'labels.commons.is' | translate }} <strong>{{'labels.commons.required' | translate }}</strong>
     </mat-error>
   </mat-form-field>
 

src/app/shared/keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component.html

@@ -1,13 +1,13 @@
-<h1 mat-dialog-title>Keyboard Shortcuts</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Keyboard Shortcuts' | translate }}</h1>
 
 <div mat-dialog-content>
   <div fxLayout="column" fxLayoutGap="2%">
     <ng-container *ngFor="let item of buttonConfig.buttonCombinations">
       <div fxFlexFill fxFlex="50%">
         <span fxFlex="50%">
-          <span *ngIf="item.ctrlKey"> <span class="modifierKey">Ctrl</span> + </span>
-          <span *ngIf="item.shiftKey"> <span class="modifierKey">Shift</span> + </span>
-          <span *ngIf="item.altKey"> <span class="modifierKey">Alt</span> + </span>
+          <span *ngIf="item.ctrlKey"> <span class="modifierKey">{{ 'labels.inputs.Ctrl' | translate }}</span> + </span>
+          <span *ngIf="item.shiftKey"> <span class="modifierKey">{{ 'labels.inputs.Shift' | translate }}</span> + </span>
+          <span *ngIf="item.altKey"> <span class="modifierKey">{{ 'labels.inputs.Alt' | translate }}</span> + </span>
           <span *ngIf="item.key"> <span class="modifierKey">{{ item.key }}</span></span>
         </span>
         <span fxFlex="50%">{{ item.title }}</span>

src/app/shared/search-tool/search-tool.component.html

@@ -1,12 +1,12 @@
 <div *ngIf="searchVisible" class="search-bar" fxFlex="auto" fxHide.lt-sm="true" fxLayout="row" fxLayoutGap="2%" [@fadeInOut]>
 
   <mat-form-field class="search">
-    <mat-label>{{'labels.text.Search' | translate}}</mat-label>
+    <mat-label>{{ 'labels.text.Search' | translate }}</mat-label>
     <input matInput type="text" [formControl]="query" (keydown.enter)="search()">
   </mat-form-field>
 
   <mat-form-field class="resource">
-    <mat-label>{{'labels.text.Resource' | translate}}</mat-label>
+    <mat-label>{{ 'labels.inputs.Resource' | translate }}</mat-label>
     <mat-select [formControl]="resource">
       <mat-option *ngFor="let option of resourceOptions" [value]="option.value">
         {{'labels.text.' + option.name | translate }}
@@ -18,6 +18,6 @@
 
 <div class="search-icon">
   <button mat-icon-button (click)="toggleSearchVisibility()" fxHide.lt-sm="true">
-    <fa-icon icon="search" size="lg" matTooltip="{{'labels.text.Search' | translate}}"></fa-icon>
+    <fa-icon icon="search" size="lg" matTooltip="{{ 'labels.text.Search' | translate }}"></fa-icon>
   </button>
 </div>

src/app/shared/server-selector/server-selector.component.html

@@ -5,8 +5,8 @@
             <form [formGroup]="form" (ngSubmit)="addNewServer()">
                 <div class="actions">
                     <mat-form-field class="ml" fxFlexAlign="start">
-                        <span matPrefix><mat-icon>language</mat-icon></span>
-                        <mat-label>{{'labels.placeholders.Add new server' | translate }}</mat-label>
+                        <span matPrefix><mat-icon>{{ 'labels.inputs.language' | translate }}</mat-icon></span>
+                        <mat-label>{{ 'labels.placeholders.Add new server' | translate }}</mat-label>
                         <input matInput type="text" autocomplete="off" formControlName="url">
                         <mat-error *ngIf="form.controls.url.hasError('required')">
                           {{'labels.inputs.Url' | translate}} <strong>{{'labels.commons.is required' | translate }}</strong>

src/app/shared/tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component.html

@@ -7,17 +7,17 @@
     <div class="action-button m-b-7" fxLayoutGap="10px">
       <span *mifosxHasPermission="'CREATE_' + datatableName">
         <button mat-raised-button color="primary" (click)="add()">
-          <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
+          <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
         </button>
       </span>
       <span *mifosxHasPermission="'DELETE_' + datatableName" [fxShow]="isSelected">
         <button class="delete-button" mat-raised-button color="warn" (click)="deleteSelected()">
-          <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete Selected
+          <fa-icon icon="trash" class="m-r-10"></fa-icon>{{ 'labels.buttons.Delete Selected' | translate }}
         </button>
       </span>
       <span *mifosxHasPermission="'DELETE_' + datatableName" [fxShow]="datatableData.length > 0">
         <button class="delete-button" mat-raised-button color="warn" (click)="delete()">
-          <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete All
+          <fa-icon icon="trash" class="m-r-10"></fa-icon>{{ 'labels.buttons.Delete All' | translate }}
         </button>
       </span>
     </div>

src/app/shared/tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component.html

@@ -2,13 +2,13 @@
   <h3>{{datatableName}}</h3>
   <div fxLayout="row" fxLayoutAlign="flex-end" class="m-b-20">
     <button mat-raised-button color="primary" (click)="add()" *ngIf="!dataObject.data[0]">
-      <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
     </button>
     <button mat-raised-button color="primary" (click)="edit()" *ngIf="dataObject.data[0]">
-      <fa-icon icon="edit" class="m-r-10"></fa-icon>Edit
+      <fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
     </button>
     <button class="delete-button" mat-raised-button color="warn" (click)="delete()" *ngIf="dataObject.data[0]">
-      <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete
+      <fa-icon icon="trash" class="m-r-10"></fa-icon>{{ 'labels.buttons.Delete' | translate }}
     </button>
   </div>
 
@@ -37,7 +37,7 @@
         </span>
         <span *ngSwitchDefault>
           <span class="m-r-5" *ngIf="isValidUrl(dataObject.data[0].row[i])">
-            <button mat-icon-button matTooltip="View Link" (click)="openSite(dataObject.data[0].row[i])"
+            <button mat-icon-button matTooltip="{{ 'tooltips.View Link' | translate }}" (click)="openSite(dataObject.data[0].row[i])"
               matTooltipPosition="right" class="small-icon">
               <fa-icon icon="eye" size="lg"></fa-icon>
             </button>

src/app/shared/tabs/entity-documents-tab/entity-documents-tab.component.html

@@ -1,11 +1,11 @@
 <div class="tab-container mat-typography">
   <div fxLayout="row" fxLayoutAlign="start center">
 
-    <h3 fxFlex="90%">Documents</h3>
+    <h3 fxFlex="90%">{{ 'labels.heading.Documents' | translate }}</h3>
 
     <div fxFlex="10%" *mifosxHasPermission="'CREATE_DOCUMENT'">
       <button mat-raised-button class="f-right" color="primary" (click)="uploadDocument()">
-        <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
       </button>
     </div>
   </div>
@@ -13,22 +13,22 @@
   <table mat-table #documentsTable [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 document"> {{ document.name }} </td>
     </ng-container>
 
     <ng-container matColumnDef="description">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Description' | translate }} </th>
       <td mat-cell *matCellDef="let document"> {{ document.description }} </td>
     </ng-container>
 
     <ng-container matColumnDef="filename">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> File Name </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.File Name' | translate }} </th>
       <td mat-cell *matCellDef="let document"> {{ document.fileName }} </td>
     </ng-container>
 
     <ng-container matColumnDef="actions">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Actions </th>
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Actions' | translate }} </th>
       <td mat-cell *matCellDef="let document; let index">
         <button class="document-action-button" mat-raised-button color="primary"
           (click)="downloadDocument(document.id)">

src/app/shared/tabs/entity-notes-tab/entity-notes-tab.component.html

@@ -1,6 +1,6 @@
 <div class="tab-container mat-typography">
 
-  <h3>Notes</h3>
+  <h3>{{ 'labels.heading.Notes' | translate }}</h3>
 
   <div>
     <form #formRef="ngForm" [formGroup]="noteForm" fxLayout="row" fxLayoutAlign="start baseline" fxLayoutGap="20px"
@@ -9,7 +9,7 @@
         <textarea required formControlName="note" matInput placeholder="Write a note ...." cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
       </mat-form-field>
       <button mat-raised-button fxFlex color="primary" [disabled]="!noteForm.valid">
-        <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
+        <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
       </button>
     </form>
   </div>

src/app/shared/theme-picker/theme-picker.component.html

@@ -1,4 +1,4 @@
-<button mat-icon-button [matMenuTriggerFor]="themeMenu" matTooltip="Color Schemes">
+<button mat-icon-button [matMenuTriggerFor]="themeMenu" matTooltip="{{ 'tooltips.Color Schemes' | translate }}">
   <fa-icon icon="fill-drip" size="lg"></fa-icon>
 </button>