add some mised translations to html files

src/app/savings/savings-account-view/transactions-tab/export-transactions/export-transactions.component.html

@@ -3,31 +3,31 @@
   <div fxLayout="row" fxLayoutGap="3%" fxLayoutAlign="center">
 
     <mat-form-field fxFlex="30%" (click)="fromDatePicker.open()">
-      <mat-label>From Date</mat-label>
+      <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="fromDatePicker" required formControlName="fromDate">
       <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #fromDatePicker></mat-datepicker>
       <mat-error>
-        From date is <strong>required</strong>
+        {{ 'labels.inputs.From Date' | translate }} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
     <mat-form-field fxFlex="30%" (click)="toDatePicker.open()">
-      <mat-label>To Date</mat-label>
+      <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
       <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="toDatePicker" required formControlName="toDate">
       <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #toDatePicker></mat-datepicker>
       <mat-error>
-        To date is <strong>required</strong>
+        {{ 'labels.inputs.To Date' | translate }} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
 
   </div>
 
   <div class="generate-button" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5%">
-    <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]="!transactionsReportForm.valid">
-    <fa-icon icon="cogs" class="m-r-10"></fa-icon>Generate Report &nbsp;</button>
+    <fa-icon icon="cogs" class="m-r-10"></fa-icon>{{ 'labels.buttons.Generate Report' | translate }} &nbsp;</button>
   </div>
 
 </form>

src/app/savings/savings-account-view/transactions/edit-transaction/edit-transaction.component.html

@@ -7,13 +7,13 @@
       <mat-card-content fxLayout="column">
 
         <mat-form-field (click)="dueDatePicker.open()">
-          <mat-label>Transaction Date</mat-label>
+          <mat-label>{{"labels.inputs.Transaction Date" | translate}}</mat-label>
           <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker"
             formControlName="transactionDate" required>
           <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #dueDatePicker></mat-datepicker>
           <mat-error *ngIf="editTransactionForm.controls.transactionDate.hasError('required')">
-            Transaction Date is <strong>required</strong>
+            {{"labels.inputs.Transaction Date" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
           </mat-error>
         </mat-form-field>
 
@@ -23,7 +23,7 @@
         </mifosx-input-amount>
 
         <mat-form-field>
-          <mat-label>Payment Type</mat-label>
+          <mat-label>{{'labels.inputs.Payment Type' | translate}}</mat-label>
           <mat-select formControlName="paymentTypeId">
             <mat-option *ngFor="let paymentType of paymentTypeOptions" [value]="paymentType.id">
               {{ paymentType.name }}
@@ -35,40 +35,40 @@
           <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
             <mat-slide-toggle>
               <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
-                <span class="m-l-10">Show Payment Details</span>
+                <span class="m-l-10">{{'labels.inputs.Show Payment Details' | translate}}</span>
               </div>
             </mat-slide-toggle>
           </span>
         </div>
 
         <mat-form-field *ngIf="editTransactionForm.controls['accountNumber']">
-          <mat-label>Account Number</mat-label>
+          <mat-label>{{"labels.inputs.Account Number"|translate}}</mat-label>
           <input type="number" formControlName="accountNumber" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="editTransactionForm.controls['checkNumber']">
-          <mat-label>Cheque</mat-label>
+          <mat-label>{{'labels.inputs.Cheque' | translate}}</mat-label>
           <input type="number" formControlName="checkNumber" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="editTransactionForm.controls['routingCode']">
-          <mat-label>Routing Code</mat-label>
+          <mat-label>{{'labels.inputs.Routing Code' | translate}}</mat-label>
           <input formControlName="routingCode" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="editTransactionForm.controls['receiptNumber']">
-          <mat-label>Receipt Number</mat-label>
+          <mat-label>{{'labels.inputs.Receipt Number' | translate}}</mat-label>
           <input formControlName="receiptNumber" matInput />
         </mat-form-field>
 
         <mat-form-field *ngIf="editTransactionForm.controls['bankNumber']">
-          <mat-label>Bank</mat-label>
+          <mat-label>{{'labels.inputs.Bank' | translate}}</mat-label>
           <input formControlName="bankNumber" matInput />
         </mat-form-field>
 
         <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
-          <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
-          <button mat-raised-button color="primary" [disabled]="!editTransactionForm.valid">Submit</button>
+          <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
+          <button mat-raised-button color="primary" [disabled]="!editTransactionForm.valid">{{'labels.buttons.Submit' | translate}}</button>
         </mat-card-actions>
 
       </mat-card-content>

src/app/savings/savings-account-view/transactions/view-transaction/savings-transaction-datatable-tab/savings-transaction-datatable-tab.component.html

@@ -1 +1 @@
-<p>savings-transaction-datatable-tab works!</p>
+<p>{{'labels.heading.savings-transaction-datatable-tab works' | translate }}!</p>

src/app/shared/notifications-tray/notifications-tray.component.html

@@ -1,4 +1,4 @@
-<button 
+<button
   mat-icon-button class="ml-1" matTooltip="Notifications"
   [matMenuTriggerFor]="notificationsMenu" (menuClosed)="menuClosed()"
   [matBadge]="unreadNotifications.length" [matBadgeHidden]="!unreadNotifications.length" matBadgeColor="warn"  matBadgeSize="medium"
@@ -10,18 +10,18 @@
 
   <div *ngIf="unreadNotifications.length === 0" fxLayout="column" fxLayoutAlign="center center" style="padding: 16px;">
     <mat-icon style="font-size: 24px; opacity: 0.8;">
-      <span class="material-icons">notifications</span>
+      <span class="material-icons">{{'labels.menus.Notifications' | translate}}</span>
     </mat-icon>
     <p>{{ 'labels.text.No notifications' | translate }}</p>
   </div>
 
   <button mat-menu-item class="unread" *ngFor="let notification of unreadNotifications" [routerLink]="[routeMap[notification.objectType], notification.objectId]">
-    {{ notification.content }}*<br> 
+    {{ notification.content }}*<br>
     <span class="time">[{{ notification.createdAt }}]</span>
   </button>
 
   <button mat-menu-item *ngFor="let notification of displayedReadNotifications" [routerLink]="[routeMap[notification.objectType], notification.objectId]">
-    {{ notification.content }}<br> 
+    {{ notification.content }}<br>
     <span class="time">[{{ notification.createdAt }}]</span>
   </button>
 

src/app/system/manage-reports/manage-reports.component.html

@@ -74,26 +74,26 @@
   <h2>{{ 'labels.buttons.Create Report' | translate }}</h2>
   <p class="mw300">{{ 'labels.text.Create new report' | 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(templateFilter,filter, '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(templateFilter,filter, 'bottom', true)">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
   <h4>{{ 'labels.heading.Filter reports by name' | translate }}</h4>
   <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(templateButtonCreateReport, buttonCreateReport, 'bottom', true)">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateReportsTable,reportsTable, 'top', 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();showPopover(templateButtonCreateReport, buttonCreateReport, 'bottom', true)">{{'labels.buttons.Back' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateReportsTable,reportsTable, 'top', true)">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateReportsTable let-popover="popover">
-  <h4 class="mw300">{{ 'labels.heading.List of all currently available reports' | translate }}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895354/Manage+Reports" target="_blank">Manage Reports</a></h4>
+  <h4 class="mw300">{{ 'labels.heading.List of all currently available reports' | translate }}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895354/Manage+Reports" target="_blank">{{'labels.heading.Manage Reports' | translate}}</a></h4>
   <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(templateFilter,filter, 'bottom', true)">{{'labels.buttons.Back' | translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>

src/app/users/users.component.html

@@ -52,29 +52,29 @@
 </div>
 
 <ng-template #templateButtonCreateUser let-popover="popover">
-  <h2>Create User</h2>
-  <p class="mw300">This option allows you to create new users in your organization.</p>
+  <h2>{{'labels.buttons.Create User' | translate}}</h2>
+  <p class="mw300">{{'labels.text.This option allows you to create new users in your organization' | 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(templateFilter, filter, '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(templateFilter, filter, 'bottom', true)">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateFilter let-popover="popover">
-  <h4>Search bar to filter users.</h4>
+  <h4>{{'labels.heading.Search bar to filter users' | translate }}.</h4>
   <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(templateButtonCreateUser, buttonCreateUser, 'bottom', true)">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateUsersTable, usersTable, 'top', 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();showPopover(templateButtonCreateUser, buttonCreateUser, 'bottom', true)">{{ 'labels.buttons.Back' | translate}}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateUsersTable, usersTable, 'top', true)">{{'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>
 
 <ng-template #templateUsersTable let-popover="popover">
-  <h4>List of Users with their details.</h4>
+  <h4>{{'labels.heading.List of Users with their details' | translate }}.</h4>
   <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(templateFilter, filter, '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(templateFilter, filter, '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>