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

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>

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';

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>

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';