feat:Shares Translate Module (#1815)

src/app/shares/shares-account-actions/activate-shares-account/activate-shares-account.component.html

@@ -7,20 +7,20 @@
       <mat-card-content>
 
           <mat-form-field fxFlex (click)="activatedDatePicker.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]="activatedDatePicker" required formControlName="activatedDate">
             <mat-datepicker-toggle matSuffix [for]="activatedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #activatedDatePicker></mat-datepicker>
             <mat-error *ngIf="activateSharesAccountForm.controls.activatedDate.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  [disabled]="!activateSharesAccountForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel'  |translate}}</button>
+        <button mat-raised-button  [disabled]="!activateSharesAccountForm.valid">{{'labels.buttons.Confirm'  |translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/shares/shares-account-actions/apply-shares/apply-shares.component.html

@@ -9,25 +9,25 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="requestedDatePicker.open()">
-            <mat-label>Request Date</mat-label>
+            <mat-label>{{ 'labels.inputs.Request Date'  |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="requestedDatePicker" required formControlName="requestedDate">
             <mat-datepicker-toggle matSuffix [for]="requestedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #requestedDatePicker></mat-datepicker>
             <mat-error *ngIf="applySharesForm.controls.requestedDate.hasError('required')">
-              Request Date is <strong>required</strong>
+              {{ 'labels.inputs.Request Date'  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Total No. of Shares</mat-label>
+            <mat-label>{{ 'labels.inputs.Total No. of Shares'  |translate}}</mat-label>
             <input matInput required formControlName="requestedShares">
             <mat-error *ngIf="applySharesForm.controls.requestedShares.hasError('required')">
-              Requested Shares is <strong>required</strong>
+              {{ 'labels.inputs.Requested Shares'  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Today's Price</mat-label>
+            <mat-label>{{ 'labels.inputs.Today's Price'  |translate}}</mat-label>
             <input matInput required formControlName="unitPrice">
           </mat-form-field>
 
@@ -36,8 +36,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  [disabled]="!applySharesForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel'  |translate}}</button>
+        <button mat-raised-button  [disabled]="!applySharesForm.valid">{{'labels.buttons.Confirm'  |translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/shares/shares-account-actions/approve-shares-account/approve-shares-account.component.html

@@ -9,17 +9,17 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="approvedDatePicker.open()">
-            <mat-label>Approved On Date</mat-label>
+            <mat-label>{{ 'labels.inputs.Approved On Date'  |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="approvedDatePicker" required formControlName="approvedDate">
             <mat-datepicker-toggle matSuffix [for]="approvedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #approvedDatePicker></mat-datepicker>
             <mat-error *ngIf="approveSharesAccountForm.controls.approvedDate.hasError('required')">
-              Approved On Date is <strong>required</strong>
+              {{ 'labels.inputs.Approved On 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>
 
@@ -28,8 +28,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  [disabled]="!approveSharesAccountForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel'  |translate}}</button>
+        <button mat-raised-button  [disabled]="!approveSharesAccountForm.valid">{{'labels.buttons.Confirm'  |translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/shares/shares-account-actions/approve-shares/approve-share-dialog/approve-share-dialog.component.html

@@ -1,8 +1,8 @@
-<h1 mat-dialog-title>Approve Share</h1>
+<h1 mat-dialog-title>{{'labels.heading.Approve Share'  |translate}}</h1>
 <div mat-dialog-content>
-  <p>Are you sure you want to approve share with id: {{ data.shareId }} ?</p>
+  <p>{{'labels.text.Are you sure you want to approve share with id'  |translate}}: {{ data.shareId }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>Cancel</button>
-  <button mat-raised-button  [mat-dialog-close]="{ approve: true }">Confirm</button>
+  <button mat-raised-button mat-dialog-close>{{'labels.buttons.Cancel'  |translate}}</button>
+  <button mat-raised-button  [mat-dialog-close]="{ approve: true }">{{'labels.buttons.Confirm'  |translate}}</button>
 </mat-dialog-actions>

src/app/shares/shares-account-actions/approve-shares/approve-shares.component.html

@@ -5,31 +5,31 @@
     <table #sharesTable mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="transactionDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Transaction Date </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Transaction Date'  |translate}} </th>
         <td mat-cell *matCellDef="let share"> {{ share.purchasedDate  | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="totalShares">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Total Shares </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Total Shares'  |translate}} </th>
         <td mat-cell *matCellDef="let share"> {{ share.numberOfShares }} </td>
       </ng-container>
 
       <ng-container matColumnDef="redeemedPrice">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Purchased/Redeemed Price </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Purchased/Redeemed Price'  |translate}} </th>
         <td mat-cell *matCellDef="let share"> {{ share.purchasedPrice }} </td>
       </ng-container>
 
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef> Status </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Status'  |translate}} </th>
         <td mat-cell *matCellDef="let share">
           <i class="fa fa-stop" [ngClass]="share.status.code|statusLookup" [matTooltip]="share.status.value"></i>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="approve">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Confirm Approve </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Confirm Approve'  |translate}} </th>
         <td mat-cell *matCellDef="let share">
-          <button class="share-action-button" mat-raised-button color="accent" matTooltip="Approve Share"
+          <button class="share-action-button" mat-raised-button color="accent" matTooltip="{{ 'tooltips.Approve Share'  |translate}}"
             (click)="approve(share.id)">
             <i class="fa fa-check"></i>
           </button>

src/app/shares/shares-account-actions/close-shares-account/close-shares-account.component.html

@@ -9,17 +9,17 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="closedDatePicker.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]="closedDatePicker" required formControlName="closedDate">
             <mat-datepicker-toggle matSuffix [for]="closedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closedDatePicker></mat-datepicker>
             <mat-error *ngIf="closeSharesAccountForm.controls.closedDate.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>
-            <mat-label>Note</mat-label>
+            <mat-label>{{ 'labels.inputs.Note'  |translate}}</mat-label>
             <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
@@ -28,8 +28,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]="!closeSharesAccountForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel'  |translate}}</button>
+        <button mat-raised-button color="warn" [disabled]="!closeSharesAccountForm.valid">{{'labels.buttons.Confirm'  |translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/shares/shares-account-actions/redeem-shares/redeem-shares.component.html

@@ -9,25 +9,25 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="requestedDatePicker.open()">
-            <mat-label>Request Date</mat-label>
+            <mat-label>{{ 'labels.inputs.Request Date'  |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="requestedDatePicker" required formControlName="requestedDate">
             <mat-datepicker-toggle matSuffix [for]="requestedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #requestedDatePicker></mat-datepicker>
             <mat-error *ngIf="redeemSharesForm.controls.requestedDate.hasError('required')">
-              Request Date is <strong>required</strong>
+              {{ 'labels.inputs.Request Date'  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Total No. of Shares</mat-label>
+            <mat-label>{{ 'labels.inputs.Total No. of Shares'  |translate}}</mat-label>
             <input matInput required formControlName="requestedShares">
             <mat-error *ngIf="redeemSharesForm.controls.requestedShares.hasError('required')">
-              Requested Shares is <strong>required</strong>
+              {{ 'labels.inputs.Requested Shares'  |translate}} {{ "labels.commons.is"  |translate}} <strong>{{ "labels.commons.required" | translate}}</strong>
             </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <mat-label>Today's Price</mat-label>
+            <mat-label>{{ 'labels.inputs.Today's Price'  |translate}}</mat-label>
             <input matInput required formControlName="unitPrice">
           </mat-form-field>
 
@@ -36,8 +36,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]="!redeemSharesForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel'  |translate}}</button>
+        <button mat-raised-button color="warn" [disabled]="!redeemSharesForm.valid">{{'labels.buttons.Confirm'  |translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/shares/shares-account-actions/reject-shares-account/reject-shares-account.component.html

@@ -9,17 +9,17 @@
         <div fxLayout="column">
 
           <mat-form-field (click)="rejectedDatePicker.open()">
-            <mat-label>Rejected On Date</mat-label>
+            <mat-label>{{ 'labels.inputs.Rejected On Date'  |translate}}</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="rejectedDatePicker" required formControlName="rejectedDate">
             <mat-datepicker-toggle matSuffix [for]="rejectedDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #rejectedDatePicker></mat-datepicker>
             <mat-error *ngIf="rejectSharesAccountForm.controls.rejectedDate.hasError('required')">
-              Rejected On Date is <strong>required</strong>
+              {{ 'labels.inputs.Rejected On 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>
 
@@ -28,8 +28,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]="!rejectSharesAccountForm.valid">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel'  |translate}}</button>
+        <button mat-raised-button color="warn" [disabled]="!rejectSharesAccountForm.valid">{{'labels.buttons.Confirm'  |translate}}</button>
       </mat-card-actions>
 
     </form>

src/app/shares/shares-account-actions/reject-shares/reject-share-dialog/reject-share-dialog.component.html

@@ -1,8 +1,8 @@
-<h1 mat-dialog-title>Reject Share</h1>
+<h1 mat-dialog-title>{{ 'labels.heading.Reject Share'  |translate}}</h1>
 <div mat-dialog-content>
-  <p>Are you sure you want to reject share with id: {{ data.shareId }} ?</p>
+  <p>{{'labels.text.Are you sure you want to reject share with id'  |translate}}: {{ data.shareId }} ?</p>
 </div>
 <mat-dialog-actions align="end">
-  <button mat-raised-button mat-dialog-close>Cancel</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ reject: true }">Confirm</button>
+  <button mat-raised-button mat-dialog-close>{{'labels.buttons.Cancel'  |translate}}</button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ reject: true }">{{'labels.buttons.Confirm'  |translate}}</button>
 </mat-dialog-actions>

src/app/shares/shares-account-actions/reject-shares/reject-shares.component.html

@@ -5,31 +5,31 @@
     <table #sharesTable mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="transactionDate">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Transaction Date </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Transaction Date'  |translate}} </th>
         <td mat-cell *matCellDef="let share"> {{ share.purchasedDate  | dateFormat }}</td>
       </ng-container>
 
       <ng-container matColumnDef="totalShares">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Total Shares </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Total Shares'  |translate}} </th>
         <td mat-cell *matCellDef="let share"> {{ share.numberOfShares }} </td>
       </ng-container>
 
       <ng-container matColumnDef="redeemedPrice">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Purchased/Redeemed Price </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Purchased/Redeemed Price'  |translate}} </th>
         <td mat-cell *matCellDef="let share"> {{ share.purchasedPrice }} </td>
       </ng-container>
 
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef> Status </th>
+        <th mat-header-cell *matHeaderCellDef> {{ 'labels.inputs.Status'  |translate}} </th>
         <td mat-cell *matCellDef="let share">
           <i class="fa fa-stop" [ngClass]="share.status.code|statusLookup" [matTooltip]="share.status.value"></i>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="reject">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Confirm Reject </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Confirm Reject'  |translate}}t </th>
         <td mat-cell *matCellDef="let share">
-          <button class="share-action-button" mat-raised-button color="warn" matTooltip="Reject Share"
+          <button class="share-action-button" mat-raised-button color="warn" matTooltip="{{ 'tooltips.Reject Share'  |translate}}"
             (click)="reject(share.id)">
             <i class="fa fa-times"></i>
           </button>

src/app/shares/shares-account-actions/undo-approval-shares-account/undo-approval-shares-account.component.html

@@ -9,7 +9,7 @@
         <div>
 
           <p class="mat-typography confirm-text">
-            Are you sure you want to undo approval of shares account with ID: {{accountId}} ?
+            {{'labels.text.Undo approval of shares account with ID'  |translate}}: {{accountId}} ?
           </p>
 
         </div>
@@ -17,8 +17,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">Confirm</button>
+        <button type="button" mat-raised-button [routerLink]="['../../']">{{'labels.buttons.Cancel'  |translate}}</button>
+        <button mat-raised-button color="warn">{{'labels.buttons.Confirm'  |translate}}</button>
       </mat-card-actions>
 
     </form>