feat:Unificaction of radhathakare's PR (#1879)

* feat:Clients Translate Module

* feat: Collections Translate Module

* feat:Loan Translate Module

* feat:Search Translate Module

* feat English Json File

---------

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

src/app/clients/clients-view/client-actions/accept-client-transfer/accept-client-transfer.component.html

@@ -7,22 +7,22 @@
       <mat-card-content fxLayout="column">
 
         <mat-form-field (click)="transferDatePicker.open()">
-          <mat-label>Transfer Date</mat-label>
+          <mat-label>{{ "labels.inputs.Transfer Date" |translate}}</mat-label>
           <input matInput [matDatepicker]="transferDatePicker" required formControlName="transferDate">
           <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #transferDatePicker></mat-datepicker>
         </mat-form-field>
 
         <mat-form-field fxFlex>
-          <mat-label>Note</mat-label>
+          <mat-label>{{ "labels.inputs.Note" |translate}}</mat-label>
           <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
         </mat-form-field>
 
       </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" [disabled]="!acceptClientTransferForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!acceptClientTransferForm.valid">{{ "labels.buttons.Confirm" | translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/clients/clients-view/client-actions/activate-client/activate-client.component.html

@@ -7,20 +7,20 @@
       <mat-card-content>
 
           <mat-form-field fxFlex (click)="activationDatePicker.open()">
-            <mat-label>Activated On Date</mat-label>
+            <mat-label>{{ "labels.inputs.Activated On Date" |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="activationDatePicker" required formControlName="activationDate">
             <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #activationDatePicker></mat-datepicker>
             <mat-error *ngIf="activateClientForm.controls.activationDate.hasError('required')">
-              Activated On Date is <strong>required</strong>
+              {{ "labels.inputs.Activated On Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
       </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" [disabled]="!activateClientForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!activateClientForm.valid">{{ "labels.buttons.Confirm" | translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/clients/clients-view/client-actions/add-client-charge/add-client-charge.component.html

@@ -8,29 +8,29 @@
 
         <div fxLayout="column">
           <mat-form-field>
-            <mat-label>Charge</mat-label>
+            <mat-label>{{ "labels.inputs.Charge" |translate}}</mat-label>
             <mat-select required formControlName="chargeId">
               <mat-option *ngFor="let clientCharge of clientChargeOptions" [value]="clientCharge.id">
                 {{ clientCharge.name + ' (' + clientCharge.currency.name + ')' }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="clientChargeForm.controls.chargeId.hasError('required')">
-              Charge is <strong>required</strong>
+              {{ "labels.inputs.Charge" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <div *ngIf="chargeDetails" fxLayout="column">
 
             <mat-form-field>
-              <mat-label>Amount</mat-label>
+              <mat-label>{{ "labels.inputs.Amount" |translate}}</mat-label>
               <input type="number" required matInput formControlName="amount" />
               <mat-error *ngIf="clientChargeForm.controls.amount.hasError('required')">
-                Amount is <strong>required</strong>
+                {{ "labels.inputs.Amount" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Charge Calculation</mat-label>
+              <mat-label>{{ "labels.inputs.Charge Calculation" |translate}}</mat-label>
               <mat-select formControlName="chargeCalculationType">
                 <mat-option *ngFor="let chargeCalculation of chargeDetails.chargeCalculationTypeOptions"
                   [value]="chargeCalculation.id">
@@ -40,7 +40,7 @@
             </mat-form-field>
 
             <mat-form-field>
-              <mat-label>Charge time type</mat-label>
+              <mat-label>{{ "labels.inputs.Charge time type" |translate}}</mat-label>
               <mat-select formControlName="chargeTimeType">
                 <mat-option *ngFor="let chargeTime of chargeDetails.chargeTimeTypeOptions" [value]="chargeTime.id">
                   {{ chargeTime.value }}
@@ -49,29 +49,29 @@
             </mat-form-field>
 
             <mat-form-field *ngIf="clientChargeForm.contains('dueDate')" (click)="dueDatePicker.open()">
-              <mat-label>Due for collection on</mat-label>
+              <mat-label>{{ "labels.inputs.Due for collection on" |translate}}</mat-label>
               <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker" required
                 formControlName="dueDate">
               <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
               <mat-datepicker #dueDatePicker></mat-datepicker>
               <mat-error *ngIf="clientChargeForm.controls.dueDate.hasError('required')">
-                Due for collection on is <strong>required</strong>
+                {{ "labels.inputs.Due for collection on" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field *ngIf="clientChargeForm.contains('feeOnMonthDay')" (click)="feeOnMonthDayPicker.open()">
-              <mat-label>Due On</mat-label>
+              <mat-label>{{ "labels.inputs.Due On" |translate}}</mat-label>
               <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="feeOnMonthDayPicker" required
                 formControlName="feeOnMonthDay">
               <mat-datepicker-toggle matSuffix [for]="feeOnMonthDayPicker"></mat-datepicker-toggle>
               <mat-datepicker #feeOnMonthDayPicker></mat-datepicker>
               <mat-error *ngIf="clientChargeForm.controls.feeOnMonthDay.hasError('required')">
-                Due Date is <strong>required</strong>
+                {{ "labels.inputs.Due Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field *ngIf="clientChargeForm.contains('feeInterval')">
-              <mat-label>Repeats Every</mat-label>
+              <mat-label>{{ "labels.inputs.Repeats Every" |translate}}</mat-label>
               <input matInput formControlName="feeInterval" />
             </mat-form-field>
 
@@ -80,8 +80,8 @@
         </div>
 
         <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]="!clientChargeForm.valid">Submit</button>
+          <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
+          <button mat-raised-button color="primary" [disabled]="!clientChargeForm.valid">{{ "labels.buttons.Submit" | translate}}</button>
         </mat-card-actions>
 
       </mat-card-content>

src/app/clients/clients-view/client-actions/add-client-collateral/add-client-collateral.component.html

@@ -8,59 +8,59 @@
 
                 <div fxLayout="column">
                     <mat-form-field>
-                        <mat-label>Collateral</mat-label>
+                        <mat-label>{{ "labels.inputs.Collateral" |translate}}</mat-label>
                         <mat-select required formControlName="collateralId">
                             <mat-option *ngFor="let clientCollateral of clientCollateralOptions" [value]="clientCollateral.id">
                                 {{ clientCollateral.name }}
                             </mat-option>
                         </mat-select>
                         <mat-error *ngIf="clientCollateralForm.controls.collateralId.hasError('required')">
-                            Collateral is <strong>required</strong>
+                            {{ "labels.inputs.Collateral" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                         </mat-error>
                     </mat-form-field>
                     
                     <div *ngIf="collateralDetails" fxLayout="column">
 
                         <mat-form-field>
-                            <mat-label>Name</mat-label>
+                            <mat-label>{{ "labels.inputs.name" |translate}}</mat-label>
                             <input matInput required formControlName="name">
                         </mat-form-field>
 
                         <mat-form-field>
-                            <mat-label>Type/Quality</mat-label>
+                            <mat-label>{{ "labels.inputs.Type/Quality" |translate}}</mat-label>
                             <input matInput required formControlName="quality">
                         </mat-form-field>
 
                         <mat-form-field>
-                            <mat-label>Unit Type</mat-label>
+                            <mat-label>{{ "labels.inputs.Unit Type" |translate}}</mat-label>
                             <input matInput required formControlName="unitType">
                         </mat-form-field>
 
                         <mat-form-field>
-                            <mat-label>Base Price</mat-label>
+                            <mat-label>{{ "labels.inputs.Base Price" |translate}}</mat-label>
                             <input matInput required formControlName="basePrice">
                         </mat-form-field>
 
                         <mat-form-field>
-                            <mat-label>Percentage To Base</mat-label>
+                            <mat-label>{{ "labels.inputs.Percentage To Base" |translate}}</mat-label>
                             <input matInput required formControlName="pctToBase">
                         </mat-form-field>
 
                         <mat-form-field>
-                            <mat-label>Quantity</mat-label>
+                            <mat-label>{{ "labels.inputs.Quantity" |translate}}</mat-label>
                             <input matInput required formControlName="quantity">
                             <mat-error *ngIf="clientCollateralForm.controls.quantity.hasError('required')">
-                                Quantity is <strong>required</strong>
+                                {{ "labels.inputs.Quantity" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                             </mat-error>
                         </mat-form-field>
 
                         <mat-form-field>
-                            <mat-label>Total</mat-label>
+                            <mat-label>{{ "labels.inputs.Total" |translate}}</mat-label>
                             <input matInput required formControlName="totalValue">
                         </mat-form-field>
 
                         <mat-form-field>
-                            <mat-label>Total Collateral Value</mat-label>
+                            <mat-label>{{ "labels.inputs.Total Collateral Value" |translate}}</mat-label>
                             <input matInput required formControlName="totalCollateralValue">
                         </mat-form-field>
 
@@ -71,8 +71,8 @@
             </mat-card-content>
 
             <mat-card-actions fxLayoutGap="5px" fxLayout="row" fsLayout.xs="column" fxLayoutAlign="center">
-                <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
-                <button mat-raised-button color="primary" [disabled]="!clientCollateralForm.valid">Submit</button> 
+                <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
+                <button mat-raised-button color="primary" [disabled]="!clientCollateralForm.valid">{{ "labels.buttons.Submit" | translate}}</button> 
             </mat-card-actions>
 
         </form>

src/app/clients/clients-view/client-actions/client-assign-staff/client-assign-staff.component.html

@@ -9,14 +9,14 @@
         <div fxLayout="column">
 
           <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 }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="clientAssignStaffForm.controls.staffId.hasError('required')">
-              Staff is <strong>required</strong>
+              {{ "labels.inputs.Staff" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -25,8 +25,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" [disabled]="!clientAssignStaffForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!clientAssignStaffForm.valid">{{ "labels.buttons.Confirm" | translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/clients/clients-view/client-actions/client-screen-reports/client-screen-reports.component.html

@@ -9,14 +9,14 @@
         <div>
 
           <mat-form-field fxFlex>
-            <mat-label>Client Screen Reports</mat-label>
+            <mat-label>{{ "labels.inputs.Client Screen Reports" |translate}}</mat-label>
             <mat-select formControlName="templateId">
               <mat-option *ngFor="let template of templatesData" [value]="template.id">
                 {{ template.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="clientScreenReportForm.controls.templateId.hasError('required')">
-              Screen Report is <strong>required</strong>
+              {{ "labels.inputs.Screen Report" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -25,9 +25,9 @@
       </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]="!clientScreenReportForm.valid">
-          <fa-icon icon="cogs" size="sm" class="m-r-10"></fa-icon>Generate Report</button>
+          <fa-icon icon="cogs" size="sm" class="m-r-10"></fa-icon>{{ "labels.buttons.Generate Report" | translate}}</button>
       </mat-card-actions>
 
     </form>
@@ -43,7 +43,7 @@
     <div fxLayoutAlign="end">
       <button mat-stroked-button color="primary" [disabled]="!template" (click)="print()">
         <fa-icon icon="file" class="m-r-10"></fa-icon>
-        Print
+        {{ "labels.buttons.Print" | translate}}
       </button>
     </div>
 

src/app/clients/clients-view/client-actions/close-client/close-client.component.html

@@ -9,24 +9,24 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="closureDatePicker.open()">
-            <mat-label>Closed On Date</mat-label>
+            <mat-label>{{ "labels.inputs.Closed On Date" |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closureDatePicker" required formControlName="closureDate">
             <mat-datepicker-toggle matSuffix [for]="closureDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closureDatePicker></mat-datepicker>
             <mat-error *ngIf="closeClientForm.controls.closureDate.hasError('required')">
-              Closed On Date is <strong>required</strong>
+              {{ "labels.inputs.Closed On Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Closure Reason</mat-label>
+            <mat-label>{{ "labels.inputs.Closure Reason" |translate}}</mat-label>
             <mat-select formControlName="closureReasonId">
               <mat-option *ngFor="let reason of closureData" [value]="reason.id">
                 {{ reason.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="closeClientForm.controls.closureReasonId.hasError('required')">
-              Closure Reason is <strong>required</strong>
+              {{ "labels.inputs.Closure Reason" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -35,8 +35,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="warn" [disabled]="!closeClientForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
+        <button mat-raised-button color="warn" [disabled]="!closeClientForm.valid">{{ "labels.buttons.Confirm" | translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/clients/clients-view/client-actions/create-self-service-user/create-self-service-user.component.html

@@ -9,48 +9,48 @@
                 <div div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
                     <mat-form-field fxFlex="48%">
-                        <mat-label> User Name </mat-label>
+                        <mat-label> {{ "labels.inputs.User Name" |translate}} </mat-label>
                         <input matInput required formControlName="username">
                         <mat-error *ngIf="createSelfServiceForm.controls.username.hasError('required')">
-                            User Name is <strong>required</strong>
+                            {{ "labels.inputs.User Name" |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="createSelfServiceForm.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="createSelfServiceForm.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>
 
                     <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="createSelfServiceForm.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-error *ngIf="createSelfServiceForm.controls.email.hasError('email')">
-                            Email should be a  <strong>valid</strong> email.
+                            {{ "labels.inputs.Email should be a" |translate}} <strong>{{ "labels.inputs.valid" |translate}}</strong> {{ "labels.inputs.email" |translate}}.
                         </mat-error>
                     </mat-form-field>
 
                     <mat-checkbox labelPosition="before" formControlName="sendPasswordToEmail" fxFlex="48%">
-                        Auto Generate Password
+                        {{ "labels.inputs.Auto Generate Password" |translate}}
                     </mat-checkbox>
 
                     <div fxFlex="48%" fxLayoutGap="5px" fxLayout="row">
 
                         <mat-checkbox labelPosition="before" formControlName="passwordNeverExpires">
-                            Override Password Expire Policy ?
+                            {{ "labels.inputs.Override Password Expire Policy" |translate}} ?
                         </mat-checkbox>
     
                         <i class="fa fa-question-circle fa fa-align-left" title="Determines if passwords do not expire for this user even if global configuration for password expiry is enabled"></i>
@@ -58,34 +58,34 @@
                     </div>
 
                     <mat-form-field fxFlex="48%" *ngIf="!hidePasswordField">
-                        <mat-label> Password </mat-label>
+                        <mat-label> {{ "labels.inputs.Password" |translate}} </mat-label>
                         <input matInput required formControlName="password" type="password">
                         <mat-error *ngIf="createSelfServiceForm.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="!hidePasswordField">
-                        <mat-label> Repeat Password </mat-label>
+                        <mat-label> {{ "labels.inputs.Repeat Password" |translate}} </mat-label>
                         <input matInput required formControlName="repeatPassword" type="password">
                         <mat-error *ngIf="createSelfServiceForm.controls.repeatPassword.hasError('required')">
-                            Repeat password is <strong>required</strong>
+                            {{ "labels.inputs.Repeat password" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
                         </mat-error>
                         <mat-error *ngIf="createSelfServiceForm.controls.repeatPassword.hasError('notequal')">
-                            Passwords should be <strong>matched</strong>
+                            {{ "labels.inputs.Passwords should be" |translate}} <strong>{{ "labels.inputs.matched" |translate}}</strong>
                         </mat-error>
                     </mat-form-field>
 
                     <mat-form-field fxFlex="48%">
-                        <mat-label> Status </mat-label>
+                        <mat-label> {{ "labels.inputs.Status" |translate}} </mat-label>
                         <input matInput formControlName="status">
                     </mat-form-field>
 
                 </div>
         
                 <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]="!createSelfServiceForm.valid">Activate Self Service User</button>
+                  <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" | translate}}</button>
+                  <button mat-raised-button color="primary" [disabled]="!createSelfServiceForm.valid">{{ "labels.buttons.Activate Self Service User" | translate}}</button>
                   <i class="fa fa-question-circle fa-2x" title="Activate Self Service User Help"></i>
                 </mat-card-actions>
         

src/app/clients/clients-view/client-actions/reactivate-client/reactivate-client.component.html

@@ -7,20 +7,20 @@
       <mat-card-content>
 
           <mat-form-field fxFlex (click)="reactivationDatePicker.open()">
-            <mat-label>Re Activation On Date</mat-label>
+            <mat-label>{{ "labels.inputs.Re Activation On Date" |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="reactivationDatePicker" required formControlName="reactivationDate">
             <mat-datepicker-toggle matSuffix [for]="reactivationDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #reactivationDatePicker></mat-datepicker>
             <mat-error *ngIf="reactivateClientForm.controls.reactivationDate.hasError('required')">
-              Reactivation Date is <strong>required</strong>
+              {{ "labels.inputs.Reactivation Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
       </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" [disabled]="!reactivateClientForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" |translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!reactivateClientForm.valid">{{ "labels.buttons.Confirm" |translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/clients/clients-view/client-actions/reject-client-transfer/reject-client-transfer.component.html

@@ -7,22 +7,22 @@
       <mat-card-content fxLayout="column">
 
         <mat-form-field (click)="transferDatePicker.open()">
-          <mat-label>Transfer Date</mat-label>
+          <mat-label>{{ "labels.inputs.Transfer Date" |translate}}</mat-label>
           <input matInput [matDatepicker]="transferDatePicker" required formControlName="transferDate">
           <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #transferDatePicker></mat-datepicker>
         </mat-form-field>
 
         <mat-form-field fxFlex>
-          <mat-label>Note</mat-label>
+          <mat-label>{{ "labels.inputs.Note" |translate}}</mat-label>
           <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
         </mat-form-field>
 
       </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" [disabled]="!rejectClientTransferForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" |translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!rejectClientTransferForm.valid">{{ "labels.buttons.Confirm" |translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/clients/clients-view/client-actions/reject-client/reject-client.component.html

@@ -9,24 +9,24 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="rejectionDatePicker.open()">
-            <mat-label>Rejection Date</mat-label>
+            <mat-label>{{ "labels.inputs.Rejection Date" |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="rejectionDatePicker" required formControlName="rejectionDate">
             <mat-datepicker-toggle matSuffix [for]="rejectionDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #rejectionDatePicker></mat-datepicker>
             <mat-error *ngIf="rejectClientForm.controls.rejectionDate.hasError('required')">
-              Rejection Date is <strong>required</strong>
+              {{ "labels.inputs.Rejection Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Rejection Reason</mat-label>
+            <mat-label>{{ "labels.inputs.Rejection Reason" |translate}}</mat-label>
             <mat-select formControlName="rejectionReasonId">
               <mat-option *ngFor="let reason of rejectionData" [value]="reason.id">
                 {{ reason.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="rejectClientForm.controls.rejectionReasonId.hasError('required')">
-              Rejection Reason is <strong>required</strong>
+              {{ "labels.inputs.Rejection Reason" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -35,8 +35,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="warn" [disabled]="!rejectClientForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" |translate}}</button>
+        <button mat-raised-button color="warn" [disabled]="!rejectClientForm.valid">{{ "labels.buttons.Confirm" |translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/clients/clients-view/client-actions/take-survey/take-survey.component.html

@@ -4,7 +4,7 @@
 
     <div class="surveySelect" fxLayout="row">
 
-      <mat-label class="nameLabel">Survey Name</mat-label>
+      <mat-label class="nameLabel">{{ "labels.inputs.Survey Name" |translate}}</mat-label>
       <mat-select (selectionChange)="onSurveyChange($event)">
         <mat-option *ngFor="let surveyData of allSurveyData" [value]="surveyData">
           {{surveyData.name}}
@@ -42,7 +42,7 @@
 
             </div>
 
-            <div *ngIf="question.answer">Your answer is: {{question.answer.text}}</div>
+            <div *ngIf="question.answer">{{ "labels.text.Your answer is" |translate}}: {{question.answer.text}}</div>
 
           </ng-container>
 
@@ -52,8 +52,8 @@
 
     </div>
 
-    <button mat-raised-button class="button-cancel" color="danger" [routerLink]="['../../general']">Cancel</button>
-    <button mat-raised-button class="button-submit" color="primary" (click)=submit()>Submit</button>
+    <button mat-raised-button class="button-cancel" color="danger" [routerLink]="['../../general']">{{ "labels.buttons.Cancel" |translate}}</button>
+    <button mat-raised-button class="button-submit" color="primary" (click)=submit()>{{ "labels.buttons.Submit" |translate}}</button>
 
   </div>
 

src/app/clients/clients-view/client-actions/transfer-client/transfer-client.component.html

@@ -9,29 +9,29 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-label>Office</mat-label>
+            <mat-label>{{ "labels.inputs.Office" |translate}}</mat-label>
             <mat-select required formControlName="destinationOfficeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="transferClientForm.controls.destinationOfficeId.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 (click)="transferDatePicker.open()">
-            <mat-label>Transfer Date</mat-label>
+            <mat-label>{{ "labels.inputs.Transfer Date" |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transferDatePicker" required formControlName="transferDate">
             <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #transferDatePicker></mat-datepicker>
             <mat-error *ngIf="transferClientForm.controls.transferDate.hasError('required')">
-              Transfer Date is <strong>required</strong>
+              {{ "labels.inputs.Transfer Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Note</mat-label>
+            <mat-label>{{ "labels.inputs.Note" |translate}}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
@@ -40,8 +40,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" [disabled]="!transferClientForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" |translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!transferClientForm.valid">{{ "labels.buttons.Confirm" |translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/clients/clients-view/client-actions/undo-client-rejection/undo-client-rejection.component.html

@@ -7,20 +7,20 @@
       <mat-card-content>
 
           <mat-form-field fxFlex (click)="reopenedDatePicker.open()">
-            <mat-label>Reopened On Date</mat-label>
+            <mat-label>{{ "labels.inputs.Reopened On Date" |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="reopenedDatePicker" required formControlName="reopenedDate">
             <mat-datepicker-toggle matSuffix [for]="reopenedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #reopenedDatePicker></mat-datepicker>
             <mat-error *ngIf="undoClientRejectionForm.controls.reopenedDate.hasError('required')">
-              Reopened On Date is <strong>required</strong>
+              {{ "labels.inputs.Reopened On Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
       </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" [disabled]="!undoClientRejectionForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" |translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!undoClientRejectionForm.valid">{{ "labels.buttons.Confirm" |translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/clients/clients-view/client-actions/undo-client-transfer/undo-client-transfer.component.html

@@ -7,22 +7,22 @@
       <mat-card-content fxLayout="column">
 
         <mat-form-field (click)="transferDatePicker.open()">
-          <mat-label>Transfer Date</mat-label>
+          <mat-label>{{ "labels.inputs.Transfer Date" |translate}}</mat-label>
           <input matInput [matDatepicker]="transferDatePicker" required formControlName="transferDate">
           <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #transferDatePicker></mat-datepicker>
         </mat-form-field>
 
         <mat-form-field fxFlex>
-          <mat-label>Note</mat-label>
+          <mat-label>{{ "labels.inputs.Note" |translate}}</mat-label>
           <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
         </mat-form-field>
 
       </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" [disabled]="!undoClientTransferForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" |translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!undoClientTransferForm.valid">{{ "labels.buttons.Confirm" |translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/clients/clients-view/client-actions/update-client-savings-account/update-client-savings-account.component.html

@@ -9,14 +9,14 @@
         <div fxLayout="column">
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Default Savings Account</mat-label>
+            <mat-label>{{ "labels.inputs.Default Savings Account" |translate}}</mat-label>
             <mat-select formControlName="savingsAccountId">
               <mat-option *ngFor="let account of savingsAccounts" [value]="account.id">
                 {{ account.accountNo }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="clientSavingsAccountForm.controls.savingsAccountId.hasError('required')">
-              Account is <strong>required</strong>
+              {{ "labels.inputs.Account" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -25,8 +25,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" [disabled]="!clientSavingsAccountForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" |translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!clientSavingsAccountForm.valid">{{ "labels.buttons.Confirm" |translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/clients/clients-view/client-actions/view-survey/view-survey.component.html

@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayoutAlign="end">
   <button mat-raised-button color="primary" [routerLink]="['../Take Survey']">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Take Survey
+    {{ "labels.buttons.Take Survey" |translate}}
   </button>
 </div>
 
@@ -20,22 +20,22 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="surveyName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="surveyName"> Survey </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="surveyName"> {{ "labels.inputs.Survey" |translate}} </th>
         <td mat-cell *matCellDef="let survey"> {{ survey.surveyName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="createdBy">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header="createdBy"> Created By </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="createdBy"> {{ "labels.inputs.Created By" |translate}} </th>
         <td mat-cell *matCellDef="let survey"> {{ survey.createdBy }} </td>
       </ng-container>
 
       <ng-container matColumnDef="date">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> DateTime </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ "labels.inputs.DateTime" |translate}} </th>
         <td mat-cell *matCellDef="let survey"> {{ survey.date  | datetimeFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="score">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Score </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ "labels.inputs.Score" |translate}} </th>
         <td mat-cell *matCellDef="let survey"> {{ survey.score | formatNumber }} </td>
       </ng-container>
 

src/app/clients/clients-view/client-actions/withdraw-client/withdraw-client.component.html

@@ -9,24 +9,24 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="withdrawalDatePicker.open()">
-            <mat-label>Withdrawal Date</mat-label>
+            <mat-label>{{ "labels.inputs.Withdrawal Date" |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="withdrawalDatePicker" required formControlName="withdrawalDate">
             <mat-datepicker-toggle matSuffix [for]="withdrawalDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #withdrawalDatePicker></mat-datepicker>
             <mat-error *ngIf="withdrawClientForm.controls.withdrawalDate.hasError('required')">
-              Withdrawal Date is <strong>required</strong>
+              {{ "labels.inputs.Withdrawal Date" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field fxFlex="48%">
-            <mat-label>Withdrawal Reason</mat-label>
+            <mat-label>{{ "labels.inputs.Withdrawal Reason" |translate}}</mat-label>
             <mat-select formControlName="withdrawalReasonId">
               <mat-option *ngFor="let reason of withdrawalData" [value]="reason.id">
                 {{ reason.name }}
               </mat-option>
             </mat-select>
             <mat-error *ngIf="withdrawClientForm.controls.withdrawalReasonId.hasError('required')">
-              Withdrawal Reason is <strong>required</strong>
+              {{ "labels.inputs.Withdrawal Reason" |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
@@ -35,8 +35,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" [disabled]="!withdrawClientForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{ "labels.buttons.Cancel" |translate}}</button>
+        <button mat-raised-button color="primary" [disabled]="!withdrawClientForm.valid">{{ "labels.buttons.Confirm" |translate}}</button>
       </mat-card-actions>
 
     </form>