From f985a49f53ac037472606da3be060cbe3d2d05c7 Mon Sep 17 00:00:00 2001
From: pc_11 <76156941+PC-11-00@users.noreply.github.com>
Date: Wed, 15 Feb 2023 11:41:23 +0530
Subject: [PATCH] feat:add tooltip in floating rate screen (#1684)

added tooltips in floating rate screen to provide valuable aid in understanding the functionality of the system.
LGTM
Fixes: #1673
---
 .../create-floating-rate.component.html            | 14 +++++++-------
 .../create-floating-rate.component.ts              |  1 +
 .../edit-floating-rate.component.html              | 14 +++++++-------
 .../edit-floating-rate.component.ts                |  1 +
 4 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/app/products/floating-rates/create-floating-rate/create-floating-rate.component.html b/src/app/products/floating-rates/create-floating-rate/create-floating-rate.component.html
index 5920fcb42..dc096e05b 100644
--- a/src/app/products/floating-rates/create-floating-rate/create-floating-rate.component.html
+++ b/src/app/products/floating-rates/create-floating-rate/create-floating-rate.component.html
@@ -10,19 +10,19 @@
 
           <mat-form-field fxFlex="30%">
             <mat-label>Floating Rate Name</mat-label>
-            <input matInput required formControlName="name">
+            <input matInput required matTooltip="Unique name for the floating rate scheme." formControlName="name">
             <mat-error *ngIf="floatingRateForm.controls.name.hasError('required')">
               Floating Rate Name is <strong>required</strong>
             </mat-error>
           </mat-form-field>
 
           <div class="checkbox-wrapper" fxFlex="30%">
-            <mat-checkbox formControlName="isBaseLendingRate" class="checkbox" labelPosition="before">Is Base Lending
+            <mat-checkbox formControlName="isBaseLendingRate" matTooltip="Check if this floating rate scheme is to be considered base lending rate for the organisation" class="checkbox" labelPosition="before">Is Base Lending
               Rate?</mat-checkbox>
           </div>
 
           <div class="checkbox-wrapper" fxFlex="30%">
-            <mat-checkbox formControlName="isActive" class="checkbox" labelPosition="before">Active</mat-checkbox>
+            <mat-checkbox formControlName="isActive" matTooltip="Check if this floating rate scheme to be activated" class="checkbox" labelPosition="before">Active</mat-checkbox>
           </div>
 
         </div>
@@ -35,7 +35,7 @@
 
         <div fxLayout="row wrap" fxLayoutGap="70%" fxLayoutGap.lt-md="0px" class="m-b-10" fxLayout.lt-md="column">
 
-          <p fxFlex="25%" class="mat-title">Floating Rate Periods</p>
+          <p fxFlex="25%" class="mat-title">Floating Rate Periods <i class="fas fa-question" matTooltip="Floating interest rate and start date for this floating rate scheme"></i></p>
 
           <button mat-mini-fab type="button" color="primary" (click)="addFloatingRatePeriod()">
             <fa-icon icon="plus"></fa-icon>
@@ -46,17 +46,17 @@
         <table mat-table [dataSource]="dataSource" matSort>
 
           <ng-container matColumnDef="fromDate">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> From Date </th>
+            <th mat-header-cell *matHeaderCellDef matTooltip="Interest effective from date" mat-sort-header> From Date </th>
             <td mat-cell *matCellDef="let floatingRatePeriod"> {{ floatingRatePeriod.fromDate  | dateFormat }} </td>
           </ng-container>
 
           <ng-container matColumnDef="interestRate">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Interest Rate </th>
+            <th mat-header-cell *matHeaderCellDef matTooltip="Annualised Interest rate" mat-sort-header> Interest Rate </th>
             <td mat-cell *matCellDef="let floatingRatePeriod"> {{ floatingRatePeriod.interestRate | number }} </td>
           </ng-container>
 
           <ng-container matColumnDef="isDifferential">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Is Differential? </th>
+            <th mat-header-cell *matHeaderCellDef matTooltip="If checked, Interest rate mentioned is added to base lending rate as of the from date of this period, absolute otherwise" mat-sort-header> Is Differential? </th>
             <td mat-cell *matCellDef="let floatingRate">
               <fa-icon *ngIf="floatingRate.isDifferentialToBaseLendingRate" icon="check-circle" size="lg"
                 class="is-differential" matTooltip="Yes" matTooltipPosition="right"></fa-icon>
diff --git a/src/app/products/floating-rates/create-floating-rate/create-floating-rate.component.ts b/src/app/products/floating-rates/create-floating-rate/create-floating-rate.component.ts
index 37e3eccec..291b36c2e 100644
--- a/src/app/products/floating-rates/create-floating-rate/create-floating-rate.component.ts
+++ b/src/app/products/floating-rates/create-floating-rate/create-floating-rate.component.ts
@@ -6,6 +6,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
+import { TooltipPosition } from '@angular/material/tooltip';
 
 /** Custom Services */
 import { ProductsService } from '../../products.service';
diff --git a/src/app/products/floating-rates/edit-floating-rate/edit-floating-rate.component.html b/src/app/products/floating-rates/edit-floating-rate/edit-floating-rate.component.html
index 02f07af9a..ce938e363 100644
--- a/src/app/products/floating-rates/edit-floating-rate/edit-floating-rate.component.html
+++ b/src/app/products/floating-rates/edit-floating-rate/edit-floating-rate.component.html
@@ -10,20 +10,20 @@
 
           <mat-form-field fxFlex="25%">
             <mat-label>Floating Rate Name</mat-label>
-            <input matInput required formControlName="name">
+            <input matInput required matTooltip="Unique name for the floating rate scheme." formControlName="name">
             <mat-error *ngIf="floatingRateForm.controls.name.hasError('required')">
               Floating Rate Name is <strong>required</strong>
             </mat-error>
           </mat-form-field>
 
           <div class="checkbox-wrapper" fxFlex="25%">
-            <mat-checkbox formControlName="isBaseLendingRate" class="checkbox" labelPosition="before">
+            <mat-checkbox formControlName="isBaseLendingRate" matTooltip="Check if this floating rate scheme is to be considered base lending rate for the organisation" class="checkbox" labelPosition="before">
               Is Base Lending Rate?
             </mat-checkbox>
           </div>
 
           <div class="checkbox-wrapper" fxFlex="15%">
-            <mat-checkbox formControlName="isActive" class="checkbox" labelPosition="before">
+            <mat-checkbox formControlName="isActive" matTooltip="Check if this floating rate scheme to be activated" class="checkbox" labelPosition="before">
               Active
             </mat-checkbox>
           </div>
@@ -38,7 +38,7 @@
 
         <div fxLayout="row wrap" fxLayoutGap="70%" fxLayoutGap.lt-md="0px" class="m-b-10" fxLayout.lt-md="column">
 
-          <p fxFlex="25%" class="mat-title">Floating Rate Periods</p>
+          <p fxFlex="25%" class="mat-title">Floating Rate Periods <i class="fas fa-question" matTooltip="Floating interest rate and start date for this floating rate scheme"></i></p>
 
           <button mat-mini-fab type="button" color="primary" (click)="addFloatingRatePeriod()">
             <fa-icon icon="plus"></fa-icon>
@@ -49,17 +49,17 @@
         <table mat-table [dataSource]="dataSource" matSort>
 
           <ng-container matColumnDef="fromDate">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> From Date </th>
+            <th mat-header-cell *matHeaderCellDef matTooltip="Interest effective from date" mat-sort-header> From Date </th>
             <td mat-cell *matCellDef="let floatingRatePeriod"> {{ floatingRatePeriod.fromDate  | dateFormat : 'dd MMMM yyyy' }} </td>
           </ng-container>
 
           <ng-container matColumnDef="interestRate">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Interest Rate </th>
+            <th mat-header-cell *matHeaderCellDef matTooltip="Annualised Interest rate" mat-sort-header> Interest Rate </th>
             <td mat-cell *matCellDef="let floatingRatePeriod"> {{ floatingRatePeriod.interestRate }} </td>
           </ng-container>
 
           <ng-container matColumnDef="isDifferential">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> Is Differential? </th>
+            <th mat-header-cell *matHeaderCellDef matTooltip="If checked, Interest rate mentioned is added to base lending rate as of the from date of this period, absolute otherwise" mat-sort-header> Is Differential? </th>
             <td mat-cell *matCellDef="let floatingRate">
               <fa-icon *ngIf="floatingRate.isDifferentialToBaseLendingRate" icon="check-circle" size="lg"
                 class="is-differential" matTooltip="Yes" matTooltipPosition="right"></fa-icon>
diff --git a/src/app/products/floating-rates/edit-floating-rate/edit-floating-rate.component.ts b/src/app/products/floating-rates/edit-floating-rate/edit-floating-rate.component.ts
index c3ecc44f8..4a8311c10 100644
--- a/src/app/products/floating-rates/edit-floating-rate/edit-floating-rate.component.ts
+++ b/src/app/products/floating-rates/edit-floating-rate/edit-floating-rate.component.ts
@@ -6,6 +6,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
+import { TooltipPosition } from '@angular/material/tooltip';
 
 /** Custom Services */
 import { ProductsService } from '../../products.service';