feat:Self-service Translate Module (#1819)

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>