feat:Users Translate Module (#1824)

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

@@ -9,93 +9,93 @@
         <div #userFormRef fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Username</mat-label>
+            <mat-label>{{ 'labels.inputs.Username'  |translate}}</mat-label>
             <input matInput required formControlName="username">
             <mat-error *ngIf="userForm.controls.username.hasError('required')">
-              Username is <strong>required</strong>
+              {{ 'labels.inputs.Username'  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Email</mat-label>
+            <mat-label>{{ 'labels.inputs.Email'  |translate}}</mat-label>
             <input matInput [required]="userForm.controls.sendPasswordToEmail.value" formControlName="email">
             <mat-error *ngIf="userForm.controls.email.hasError('email')">
-              Email is <strong>invalid</strong>
+              {{ 'labels.inputs.Email'  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.invalid'  |translate}}</strong>
             </mat-error>
             <mat-error *ngIf="userForm.controls.email.hasError('required')">
-              Email is <strong>required</strong>
+              {{ 'labels.inputs.Email'  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>First Name</mat-label>
+            <mat-label>{{ 'labels.inputs.First Name'  |translate}}</mat-label>
             <input matInput required formControlName="firstname">
             <mat-error *ngIf="userForm.controls.firstname.hasError('pattern')">
-              First Name <strong>cannot begin with a special character or number</strong>
+              {{ 'labels.inputs.First Name'  |translate}} <strong>{{ "labels.commons.cannot begin with a special character or number"  |translate}}</strong>
             </mat-error>
             <mat-error *ngIf="userForm.controls.firstname.hasError('required')">
-              First Name is <strong>required</strong>
+              {{ 'labels.inputs.First Name'  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Last Name</mat-label>
+            <mat-label>{{ 'labels.inputs.Last Name'  |translate}}</mat-label>
             <input matInput required formControlName="lastname">
             <mat-error *ngIf="userForm.controls.lastname.hasError('pattern')">
-              Last Name <strong>cannot begin with a special character or number</strong>
+              {{ 'labels.inputs.Last Name'  |translate}} <strong>{{ "labels.commons.cannot begin with a special character or number"  |translate}}</strong>
             </mat-error>
             <mat-error *ngIf="userForm.controls.lastname.hasError('required')">
-              Last Name is <strong>required</strong>
+              {{ 'labels.inputs.Last Name'  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <div fxFlex="48%" class="password-never-expires-wrapper">
             <mat-checkbox labelPosition="before" formControlName="passwordNeverExpires" >
-              Override password expiry policy
+              {{ 'labels.inputs.Override password expiry policy'  |translate}}
             </mat-checkbox>
           </div>
 
           <div fxFlex="48%" class="send-password-to-email-wrapper">
             <mat-checkbox labelPosition="before" formControlName="sendPasswordToEmail">
-              Auto generate password
+              {{ 'labels.inputs.Override password expiry policy'  |translate}}
             </mat-checkbox>
           </div>
 
           <mat-form-field fxFlex="48%" *ngIf="!userForm.controls.sendPasswordToEmail.value">
-            <mat-label>Password</mat-label>
+            <mat-label>{{ 'labels.inputs.Password'  |translate}}</mat-label>
             <input matInput required type="password" formControlName="password">
             <mat-error *ngIf="userForm.controls.password.hasError('required')">
-              Password is <strong>required</strong>
+              {{ 'labels.inputs.Password'  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%" *ngIf="!userForm.controls.sendPasswordToEmail.value">
-            <mat-label>Repeat Password</mat-label>
+            <mat-label>{{ 'labels.inputs.Repeat Password'  |translate}}</mat-label>
             <input matInput required type="password" formControlName="repeatPassword">
             <mat-error *ngIf="userForm.controls.repeatPassword.hasError('required')">
-              Password is <strong>required</strong>
+              {{ 'labels.inputs.Password'  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <p fxFlex="98%" class="reset-password-error" *ngIf="userForm.errors?.passwordsDoNotMatch &&
           (!userForm.controls.password.hasError('required') && !userForm.controls.repeatPassword.hasError('required'))">
-          Passwords <strong>do not match</strong>
+          {{ 'labels.inputs.Passwords'  |translate}} <strong>{{ "labels.commons.do not match'  |translate}}</strong>
           </p>      
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Office</mat-label>
+            <mat-label>{{ 'labels.inputs.Office'  |translate}}</mat-label>
             <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officesData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="userForm.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 staffData" [value]="staff.id">
                 {{ staff.displayName }}
@@ -104,14 +104,14 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Roles</mat-label>
+            <mat-label>{{ 'labels.inputs.Roles'  |translate}}</mat-label>
             <mat-select required formControlName="roles" multiple>
               <mat-option *ngFor="let role of rolesData" [value]="role.id">
                 {{ role.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="userForm.controls.roles.hasError('required')">
-              At least one role <strong>must be selected</strong>
+              {{ "labels.commons.At least one role"  |translate}} <strong>{{ "labels.commons.must be selected"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -120,8 +120,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 type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel'  |translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!userForm.valid">Submit</button>
+        <button mat-raised-button color="primary" [disabled]="!userForm.valid">{{ 'labels.buttons.Submit'  |translate}}</button>
       </mat-card-actions>
 
     </form>
@@ -131,13 +131,13 @@
 </div>
 
 <ng-template #templateUserFormRef let-popover="popover">
-  <h2>Create User</h2>
+  <h2>{{ 'labels.heading.Create User'  |translate}}</h2>
-  <p class="mw400">Click to start filling the details. * mark fields are neccessary. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141740/Users" target="_blank">Users</a></p>
+  <p class="mw400">{{ 'labels.text.Filling Details'  |translate}}: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141740/Users" target="_blank">{{ 'labels.inputs.Users'  |translate}}</a></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="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{ 'labels.buttons.Close'  |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close()">Create User</button>
+    <button mat-raised-button color="primary" (click)="popover.close()">{{ 'labels.buttons.Create User'  |translate}}</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</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();nextStep()">Next</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{ 'labels.buttons.Next'  |translate}}</button>
   </div>
 </ng-template>
 

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

@@ -9,66 +9,66 @@
         <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Username</mat-label>
+            <mat-label>{{ 'labels.inputs.Username'  |translate}}</mat-label>
             <input matInput required formControlName="username"/>
             <mat-error *ngIf="editUserForm.controls.username.hasError('required')">
-              Username is <strong>required</strong>
+              {{ 'labels.inputs.Username'  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Email</mat-label>
+            <mat-label>{{ 'labels.inputs.Email'  |translate}}</mat-label>
             <input matInput required formControlName="email">
             <mat-error *ngIf="editUserForm.controls.email.hasError('email')">
-              Email is <strong>invalid</strong>
+              {{ 'labels.inputs.Email'  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.invalid'  |translate}}</strong>
             </mat-error>
             <mat-error *ngIf="editUserForm.controls.email.hasError('required')">
-              Email is <strong>required</strong>
+              {{ 'labels.inputs.Email'  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>First name</mat-label>
+            <mat-label>{{ 'labels.inputs.First Name'  |translate}}</mat-label>
             <input matInput required formControlName="firstname"/>
             <mat-error *ngIf="editUserForm.controls.firstname.hasError('pattern')">
-              First Name <strong>cannot begin with a special character or number</strong>
+              {{ 'labels.inputs.First Name'  |translate}} <strong>{{ "labels.commons.cannot begin with a special character or number"  |translate}}</strong>
             </mat-error>
             <mat-error *ngIf="editUserForm.controls.firstname.hasError('required')">
-              First Name is <strong>required</strong>
+              {{ 'labels.inputs.First Name'  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Last name</mat-label>
+            <mat-label>{{ 'labels.inputs.Last Name'  |translate}}</mat-label>
             <input matInput required formControlName="lastname"/>
             <mat-error *ngIf="editUserForm.controls.lastname.hasError('pattern')">
-              Last Name <strong>cannot begin with a special character or number</strong>
+              {{ 'labels.inputs.Last Name'  |translate}} <strong>{{ "labels.commons.cannot begin with a special character or number"  |translate}}</strong>
             </mat-error>
             <mat-error *ngIf="editUserForm.controls.lastname.hasError('required')">
-              Last Name is <strong>required</strong>
+              {{ 'labels.inputs.Last Name'  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <div class="password-never-expires-wrapper" fxFlex="48%">
             <mat-checkbox labelPosition="before" formControlName="passwordNeverExpires" >
-              Override password expiry policy
+              {{ 'labels.inputs.Override password expiry policy'  |translate}}
             </mat-checkbox>
           </div>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Office</mat-label>
+            <mat-label>{{ 'labels.inputs.Office'  |translate}}</mat-label>
             <mat-select required formControlName="officeId" (selectionChange)="officeChanged($event.value)">
               <mat-option *ngFor="let office of officesData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="editUserForm.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 staffData" [value]="staff.id">
                 {{ staff.displayName }}
@@ -77,14 +77,14 @@
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Roles</mat-label>
+            <mat-label>{{ 'labels.inputs.Roles'  |translate}}</mat-label>
             <mat-select required formControlName="roles" multiple>
               <mat-option *ngFor="let role of rolesData" [value]="role.id">
                 {{ role.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="editUserForm.controls.roles.hasError('required')">
-              At least one role <strong>must be selected</strong>
+              {{ "labels.commons.At least one role"  |translate}} <strong>{{ "labels.commons.must be selected"  |translate}}</strong>
             </mat-error>
           </mat-form-field>
         
@@ -93,8 +93,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 type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel'  |translate}}</button>
-        <button mat-raised-button color="primary" [disabled]="!editUserForm.valid">Submit</button>
+        <button mat-raised-button color="primary" [disabled]="!editUserForm.valid">{{ 'labels.buttons.Submit'  |translate}}</button>
       </mat-card-actions>
     
     </form>

src/app/users/users.component.html

@@ -21,22 +21,22 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="firstname">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> First Name </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.First Name'  |translate}} </th>
         <td mat-cell *matCellDef="let user"> {{ user.firstname }} </td>
       </ng-container>
 
       <ng-container matColumnDef="lastname">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Last Name </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Last Name'  |translate}} </th>
         <td mat-cell *matCellDef="let user"> {{ user.lastname }} </td>
       </ng-container>
 
       <ng-container matColumnDef="email">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Email'  |translate}} </th>
         <td mat-cell *matCellDef="let user"> {{ user.email }} </td>
       </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>
 

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

@@ -1,15 +1,15 @@
 <div class="container m-b-20" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="end" fxLayoutGap="2%">
   <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="warn" (click)="delete()">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    Delete
+    {{ 'labels.buttons.Delete'  |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>
 </div>
 
@@ -22,7 +22,7 @@
       <div fxLayout="row wrap" class="content">
 
         <div fxFlex="50%" class="mat-body-strong">
-          Login Name
+          {{ 'labels.inputs.Login Name'  |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -30,7 +30,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          First Name
+          {{ 'labels.inputs.First Name'  |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -38,7 +38,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Last Name
+          {{ 'labels.inputs.Last Name'  |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -47,7 +47,7 @@
 
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="userData.email">
-          Email
+          {{ 'labels.inputs.Email'  |translate}}
         </div>
 
         <div fxFlex="50%" *ngIf="userData.email">
@@ -55,7 +55,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Office
+          {{ 'labels.inputs.Office'  |translate}}
         </div>
 
         <div fxFlex="50%">
@@ -63,7 +63,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Roles
+          {{ 'labels.inputs.Roles'  |translate}}
         </div>
 
         <div fxFlex="50%">