feat:Self-service Translate Module (#1819)

src/app/self-service/app-configuration/app-configuration.component.html

@@ -6,29 +6,29 @@
 
       <mat-expansion-panel-header>
         <mat-panel-title>
-          Main Configuration
+          {{ 'labels.inputs.Main Configuration'  |translate}}
         </mat-panel-title>
       </mat-expansion-panel-header>
 
       <div fxLayout="column">
 
         <mat-form-field>
-          <mat-label>Name of the Organization</mat-label>
+          <mat-label>{{ 'labels.inputs.Name of the Organization'  |translate}}</mat-label>
           <input matInput>
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>Description</mat-label>
+          <mat-label>{{ 'labels.inputs.Description'  |translate}}</mat-label>
           <textarea matInput></textarea>
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>Summary</mat-label>
+          <mat-label>{{ 'labels.inputs.Summary'  |translate}}</mat-label>
           <textarea matInput></textarea>
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>Default Language</mat-label>
+          <mat-label>{{ 'labels.inputs.Default Language'  |translate}}</mat-label>
           <mat-select>
             <mat-option *ngFor="let language of languages" [value]="language">
               {{ language }}
@@ -37,7 +37,7 @@
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>Default Date Format</mat-label>
+          <mat-label>{{ 'labels.inputs.Default Date Format'  |translate}}</mat-label>
           <mat-select>
             <mat-option *ngFor="let dateFormat of dateFormats" [value]="dateFormat">
               {{ dateFormat }}
@@ -53,22 +53,22 @@
 
       <mat-expansion-panel-header>
         <mat-panel-title>
-          Images
+          {{ 'labels.inputs.Images'  |translate}}
         </mat-panel-title>
       </mat-expansion-panel-header>
 
       <div fxLayout="column">
 
-        <span class="header">Favicon</span>
+        <span class="header">{{ 'labels.inputs.Favicon'  |translate}}</span>
         <mifosx-file-upload></mifosx-file-upload>
 
-        <span class="header">Cover Image</span>
+        <span class="header">{{ 'labels.inputs.Cover Image'  |translate}}</span>
         <mifosx-file-upload></mifosx-file-upload>
 
-        <span class="header">Logo</span>
+        <span class="header">{{ 'labels.inputs.Logo'  |translate}}</span>
         <mifosx-file-upload></mifosx-file-upload>
 
-        <span class="header">Logo with Organization Name</span>
+        <span class="header">{{ 'labels.inputs.Logo with Organization Name'  |translate}}</span>
         <mifosx-file-upload></mifosx-file-upload>
 
       </div>
@@ -79,15 +79,15 @@
 
       <mat-expansion-panel-header>
         <mat-panel-title>
-          Theme and Font
+          {{ 'labels.inputs.Theme and Font'  |translate}}
         </mat-panel-title>
       </mat-expansion-panel-header>
 
       <div fxLayout="column">
 
-        <span class="header">Mobile Banking App</span>
+        <span class="header">{{ 'labels.inputs.Mobile Banking App'  |translate}}</span>
         <mat-form-field>
-          <mat-label>Default Theme</mat-label>
+          <mat-label>{{ 'labels.inputs.Default Theme'  |translate}}</mat-label>
           <mat-select>
             <mat-option *ngFor="let theme of mobileAppThemes" [value]="theme">
               {{ theme }}
@@ -96,7 +96,7 @@
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>Default Font</mat-label>
+          <mat-label>{{ 'labels.inputs.Default Font'  |translate}}</mat-label>
           <mat-select>
             <mat-option *ngFor="let font of mobileAppFonts" [value]="font">
               {{ font }}
@@ -104,9 +104,9 @@
           </mat-select>
         </mat-form-field>
 
-        <span class="header">Online Banking App</span>
+        <span class="header">{{ 'labels.inputs.Online Banking App'  |translate}}</span>
         <mat-form-field>
-          <mat-label>Default Theme</mat-label>
+          <mat-label>{{ 'labels.inputs.Default Theme'  |translate}}</mat-label>
           <mat-select>
             <mat-option *ngFor="let theme of onlineBankingAppThemes" [value]="theme">
               {{ theme }}
@@ -115,7 +115,7 @@
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>Default Font</mat-label>
+          <mat-label>{{ 'labels.inputs.Default Font'  |translate}}</mat-label>
           <mat-select>
             <mat-option *ngFor="let font of onlineBankingAppFonts" [value]="font">
               {{ font }}
@@ -131,24 +131,24 @@
 
       <mat-expansion-panel-header>
         <mat-panel-title>
-          Contact Information
+          {{ 'labels.inputs.Contact Information'  |translate}}
         </mat-panel-title>
       </mat-expansion-panel-header>
 
       <div fxLayout="column">
 
         <mat-form-field>
-          <mat-label>Website</mat-label>
+          <mat-label>{{ 'labels.inputs.Website'  |translate}}</mat-label>
           <input type="url" matInput>
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>Email</mat-label>
+          <mat-label>{{ 'labels.inputs.Email'  |translate}}</mat-label>
           <input type="email" matInput>
         </mat-form-field>
 
         <mat-form-field>
-          <mat-label>Contact No</mat-label>
+          <mat-label>{{ 'labels.inputs.Contact No'  |translate}}</mat-label>
           <input type="tel" matInput>
         </mat-form-field>
 

src/app/self-service/task-management/task-management.component.html

@@ -1,7 +1,7 @@
 <div class="container">
 
   <p>
-    TODO: task-management component.
+    {{ 'labels.inputs.TODO'  |translate}}: {{ 'labels.inputs.task-management component'  |translate}}.
   </p>
 
 </div>

src/app/self-service/users/create-user/create-user.component.html

@@ -19,19 +19,19 @@
           <div fxLayout="column">
 
             <mat-form-field>
-              <mat-label>Office</mat-label>
+              <mat-label>{{ 'labels.inputs.Office'  |translate}}</mat-label>
               <mat-select required formControlName="officeId">
                 <mat-option *ngFor="let office of offices" [value]="office.id">
                   {{ office.name }}
                 </mat-option>
               </mat-select>
               <mat-error *ngIf="createUserForm.controls.officeId.hasError('required')">
-                Office is <strong>required</strong>
+                {{ 'labels.inputs.Office'  |translate}} {{ 'labels.commons.is'  |translate}} <strong>{{ 'labels.commons.required'  |translate}}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Staff</mat-label>
+              <mat-label>{{ 'labels.inputs.Staff'  |translate}}</mat-label>
               <mat-select formControlName="staffId">
                 <mat-option *ngFor="let staff of staffOptions" [value]="staff.id">
                   {{ staff.displayName }}
@@ -40,7 +40,7 @@
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Client</mat-label>
+              <mat-label>{{ 'labels.inputs.Client'  |translate}}</mat-label>
               <mat-select>
                 <mat-option *ngFor="let client of clientData" [value]="client">
                   {{ client }}
@@ -53,10 +53,10 @@
         </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 type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel'  |translate}}</button>
           <button mat-raised-button color="accent">
             <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
-            Activate Self Service User
+            {{'labels.buttons.Activate Self Service User'  |translate}}
           </button>
         </mat-card-actions>
 
@@ -73,19 +73,19 @@
           <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
             <mat-form-field>
-              <mat-label>Office</mat-label>
+              <mat-label>{{ 'labels.inputs.Office'  |translate}}</mat-label>
               <mat-select required formControlName="officeId">
                 <mat-option *ngFor="let office of offices" [value]="office.id">
                   {{ office.name }}
                 </mat-option>
               </mat-select>
               <mat-error *ngIf="createUserForm.controls.officeId.hasError('required')">
-                Office is <strong>required</strong>
+                {{ 'labels.inputs.Office'  |translate}} {{ 'labels.commons.is'  |translate}} <strong>{{ 'labels.commons.required'  |translate}}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>Staff</mat-label>
+              <mat-label>{{ 'labels.inputs.Staff'  |translate}}</mat-label>
               <mat-select formControlName="staffId">
                 <mat-option *ngFor="let staff of staffOptions" [value]="staff.id">
                   {{ staff.displayName }}
@@ -94,24 +94,24 @@
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>Username</mat-label>
+              <mat-label>{{ 'labels.inputs.User Name'  |translate}}</mat-label>
               <input type="text" matInput>
             </mat-form-field>
 
             <span fxFlex="48%" fxHide.lt-md></span>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>First Name</mat-label>
+              <mat-label>{{ 'labels.inputs.First Name'  |translate}}</mat-label>
               <input type="text" matInput>
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>Last Name</mat-label>
+              <mat-label>{{ 'labels.inputs.Last Name'  |translate}}</mat-label>
               <input type="text" matInput>
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>Gender</mat-label>
+              <mat-label>{{ 'labels.inputs.Gender'  |translate}}</mat-label>
               <mat-select>
                 <mat-option *ngFor="let gender of genderData" [value]="gender">
                   {{ gender }}
@@ -120,19 +120,19 @@
             </mat-form-field>
 
             <mat-form-field fxFlex="48%" (click)="dateOfBirthDatePicker.open()">
-              <mat-label>Date of Birth</mat-label>
+              <mat-label>{{ 'labels.inputs.Date of Birth'  |translate}}</mat-label>
               <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dateOfBirthDatePicker">
               <mat-datepicker-toggle matSuffix [for]="dateOfBirthDatePicker"></mat-datepicker-toggle>
               <mat-datepicker #dateOfBirthDatePicker></mat-datepicker>
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>Email</mat-label>
+              <mat-label>{{ 'labels.inputs.Email'  |translate}}</mat-label>
               <input type="email" matInput>
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>Mobile No</mat-label>
+              <mat-label>{{ 'labels.inputs.Mobile No'  |translate}}</mat-label>
               <input type="tel" matInput>
             </mat-form-field>
 
@@ -141,8 +141,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">Submit</button>
+          <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel'  |translate}}</button>
+          <button mat-raised-button color="primary">{{'labels.buttons.Submit'  |translate}}</button>
         </mat-card-actions>
 
       </form>

src/app/self-service/users/edit-user/edit-user.component.html

@@ -9,7 +9,7 @@
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Office</mat-label>
+            <mat-label>{{ 'labels.inputs.Office'  |translate}}</mat-label>
             <mat-select>
               <mat-option *ngFor="let office of officeData" [value]="office">
                 {{ office }}
@@ -18,7 +18,7 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Staff</mat-label>
+            <mat-label>{{ 'labels.inputs.Staff'  |translate}}</mat-label>
             <mat-select>
               <mat-option *ngFor="let staff of staffData" [value]="staff">
                 {{ staff }}
@@ -27,24 +27,24 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Username</mat-label>
+            <mat-label>{{ 'labels.inputs.User Name'  |translate}}</mat-label>
             <input type="text" matInput>
           </mat-form-field>
 
           <span fxFlex="48%" fxHide.lt-md></span>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>First Name</mat-label>
+            <mat-label>{{ 'labels.inputs.First Name'  |translate}}</mat-label>
             <input type="text" matInput>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Last Name</mat-label>
+            <mat-label>{{ 'labels.inputs.Last Name'  |translate}}</mat-label>
             <input type="text" matInput>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Gender</mat-label>
+            <mat-label>{{ 'labels.inputs.Gender'  |translate}}</mat-label>
             <mat-select>
               <mat-option *ngFor="let gender of genderData" [value]="gender">
                 {{ gender }}
@@ -53,19 +53,19 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" (click)="dateOfBirthDatePicker.open()">
-            <mat-label>Date of Birth</mat-label>
+            <mat-label>{{ 'labels.inputs.Date of Birth'  |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dateOfBirthDatePicker">
             <mat-datepicker-toggle matSuffix [for]="dateOfBirthDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #dateOfBirthDatePicker></mat-datepicker>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Email</mat-label>
+            <mat-label>{{ 'labels.inputs.Email'  |translate}}</mat-label>
             <input type="email" matInput>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Mobile No</mat-label>
+            <mat-label>{{ 'labels.inputs.Mobile No'  |translate}}</mat-label>
             <input type="tel" matInput>
           </mat-form-field>
 
@@ -74,8 +74,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">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel'  |translate}}</button>
+        <button mat-raised-button color="primary">{{'labels.buttons.Submit'  |translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/self-service/users/users.component.html

@@ -2,15 +2,15 @@
   <!-- TODO: Update to show only Activate/Inactivate button at a time according to selection in table. -->
   <button mat-raised-button color="accent">
     <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
-    Activate
+    {{'labels.buttons.Activate'  |translate}}
   </button>
   <button mat-raised-button color="warn">
     <fa-icon icon="lock" class="m-r-10"></fa-icon>
-    Deactivate
+    {{'labels.buttons.Deactivate'  |translate}}
   </button>
   <button mat-raised-button color="primary" [routerLink]="['create']">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Create User
+    {{'labels.buttons.Create User'  |translate}}
   </button>
 </div>
 
@@ -43,22 +43,22 @@
       </ng-container>
 
       <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 user"> {{ user.name }} </td>
       </ng-container>
 
       <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> User ID </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.User ID'  |translate}} </th>
         <td mat-cell *matCellDef="let user"> {{ user.id }} </td>
       </ng-container>
 
       <ng-container matColumnDef="email">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Email ID </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Email ID'  |translate}} </th>
         <td mat-cell *matCellDef="let user"> {{ user.email }} </td>
       </ng-container>
 
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="isSelfServiceUser"> Status </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="isSelfServiceUser"> {{ 'labels.inputs.Status'  |translate}} </th>
         <td mat-cell *matCellDef="let user">
           <div [className]="user.isSelfServiceUser === true ? 'active' : 'inactive'">
             <fa-icon matTooltip="{{ user.isSelfServiceUser === true ? 'Active' : 'Inactive' }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
@@ -67,12 +67,12 @@
       </ng-container>
 
       <ng-container matColumnDef="officeName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Office </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Office'  |translate}} </th>
         <td mat-cell *matCellDef="let user"> {{ user.officeName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="staff">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Staff </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Staff'  |translate}} </th>
         <td mat-cell *matCellDef="let user"> {{ user.staff }} </td>
       </ng-container>
 

src/app/self-service/users/view-user/view-user.component.html

@@ -2,19 +2,19 @@
   <!-- TODO: Update to show only Activate/Inactivate button at a time according to status of user. -->
   <button mat-raised-button color="primary" [routerLink]="['edit']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{'labels.buttons.Edit'  |translate}}
   </button>
   <button mat-raised-button color="primary" (click)="changeUserPassword()">
     <fa-icon icon="cog" class="m-r-10"></fa-icon>
-    Change Password
+    {{'labels.buttons.Change Password'  |translate}}
   </button>
   <button mat-raised-button color="accent">
     <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
-    Activate
+    {{'labels.buttons.Activate'  |translate}}
   </button>
   <button mat-raised-button color="warn">
     <fa-icon icon="lock" class="m-r-10"></fa-icon>
-    Deactivate
+    {{'labels.buttons.Deactivate'  |translate}}
   </button>
 </div>
 
@@ -29,11 +29,11 @@
         <div fxFlex="100%" class="header">
           <fa-icon icon="circle" size="lg" matTooltip="{{ user.status }}" matTooltipPosition="above"></fa-icon>
           &nbsp;&nbsp;
-          ID: {{ user.id }}
+          {{ 'labels.inputs.ID'  |translate}}: {{ user.id }}
         </div>
 
         <div fxFlex="50%" class="header">
-          Username
+          {{ 'labels.inputs.User Name'  |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -41,7 +41,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          First Name
+          {{ 'labels.inputs.First Name'  |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -49,7 +49,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          Last Name
+          {{ 'labels.inputs.Last Name'  |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -57,7 +57,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          Gender
+          {{ 'labels.inputs.Gender'  |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -65,7 +65,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          Date of Birth
+          {{ 'labels.inputs.Date of Birth'  |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -73,7 +73,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          Email
+          {{ 'labels.inputs.Email'  |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -81,7 +81,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          Mobile
+          {{ 'labels.inputs.Mobile'  |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -89,7 +89,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          Office
+          {{ 'labels.inputs.Office'  |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -97,7 +97,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          Staff
+          {{ 'labels.inputs.Staff'  |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -105,7 +105,7 @@
         </div>
 
         <div fxFlex="50%" class="header">
-          Activation Date
+          {{ 'labels.inputs.Activation Date'  |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -117,7 +117,7 @@
     </mat-card-content>
 
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" color="primary" mat-raised-button [routerLink]="['../../']">Back</button>
+      <button type="button" color="primary" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Back'  |translate}}</button>
     </mat-card-actions>
   </mat-card>