feat:add tooltip in create share product screen (#1681)

added tooltips in creating share product screen to provide valuable aid in understanding the functionality of the system.

Fixes: #1670

src/app/products/share-products/share-product-stepper/share-product-accounting-step/share-product-accounting-step.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
+import { TooltipPosition } from '@angular/material/tooltip';
 
 @Component({
   selector: 'mifosx-share-product-accounting-step',

src/app/products/share-products/share-product-stepper/share-product-charges-step/share-product-charges-step.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { FormControl } from '@angular/forms';
+import { TooltipPosition } from '@angular/material/tooltip';
 
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
 

src/app/products/share-products/share-product-stepper/share-product-currency-step/share-product-currency-step.component.html

@@ -4,7 +4,7 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Currency</mat-label>
-      <mat-select formControlName="currencyCode" required>
+      <mat-select matTooltip="The currency to be used" formControlName="currencyCode" required>
         <mat-option *ngFor="let currency of currencyData" [value]="currency.code">
           {{ currency.name }}
         </mat-option>
@@ -16,7 +16,7 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Decimal Places</mat-label>
-      <input type="number" matInput formControlName="digitsAfterDecimal" required>
+      <input type="number" matTooltip="The number of decimal places to be used to track and report on share accounts" matInput formControlName="digitsAfterDecimal" required>
       <mat-error>
         Decimal Places is <strong>required</strong>
       </mat-error>
@@ -24,7 +24,7 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Currency in multiples of</mat-label>
-      <input type="number" matInput formControlName="inMultiplesOf" required>
+      <input type="number" matInput matTooltip="The amount to be rounded off (example: 100 rounds off to 200, 300, 400, etc)" formControlName="inMultiplesOf" required>
       <mat-error>
         Currency in multiples of is <strong>required</strong>
       </mat-error>

src/app/products/share-products/share-product-stepper/share-product-currency-step/share-product-currency-step.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { TooltipPosition } from '@angular/material/tooltip';
 
 @Component({
   selector: 'mifosx-share-product-currency-step',

src/app/products/share-products/share-product-stepper/share-product-details-step/share-product-details-step.component.html

@@ -4,7 +4,7 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Product Name</mat-label>
-      <input matInput formControlName="name" required>
+      <input matInput formControlName="name" matTooltip="A unique identifier for the share product" required>
       <mat-error>
         Product Name is <strong>required</strong>
       </mat-error>
@@ -12,7 +12,7 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Short Name</mat-label>
-      <input matInput formControlName="shortName" maxlength="4" required>
+      <input matInput formControlName="shortName" matTooltip="A unique identifier for the share product" maxlength="4" required>
       <mat-error>
         Short Name is <strong>required</strong>
       </mat-error>
@@ -20,7 +20,7 @@
 
     <mat-form-field fxFlex="98%">
       <mat-label>Description</mat-label>
-      <textarea matInput formControlName="description" required></textarea>
+      <textarea matInput formControlName="description" matTooltip="Provides additional information regarding the purpose and characteristics of the share product" required></textarea>
     </mat-form-field>
 
   </div>

src/app/products/share-products/share-product-stepper/share-product-details-step/share-product-details-step.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { TooltipPosition } from '@angular/material/tooltip';
 
 @Component({
   selector: 'mifosx-share-product-details-step',

src/app/products/share-products/share-product-stepper/share-product-market-price-step/share-product-market-price-step.component.html

@@ -1,6 +1,6 @@
 <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
-  <h4 fxFlex="23%" class="mat-h4">Market Price Periods</h4>
+  <h4 fxFlex="23%" class="mat-h4">Market Price Periods <i class="fas fa-question" matTooltip="Add future share value with date range"></i></h4>
 
   <div fxFlex="73%">
     <button type="button" mat-raised-button color="primary" (click)="addMarketPricePeriod()">

src/app/products/share-products/share-product-stepper/share-product-market-price-step/share-product-market-price-step.component.ts

@@ -2,6 +2,7 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { FormGroup, FormBuilder, FormArray } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
+import { TooltipPosition } from '@angular/material/tooltip';
 
 /** Dialog Components */
 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';

src/app/products/share-products/share-product-stepper/share-product-settings-step/share-product-settings-step.component.html

@@ -2,7 +2,7 @@
 
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
-    <h4 fxFlex="98%" class="mat-h4">Shares per Client</h4>
+    <h4 fxFlex="98%" class="mat-h4">Shares per Client <i class="fas fa-question" matTooltip="These fields are used to define the minimum, default, maximum shares per customer"></i></h4>
 
     <mat-form-field fxFlex="31%">
       <mat-label>Minimum</mat-label>
@@ -22,7 +22,7 @@
       <input type="number" matInput formControlName="maximumShares">
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">Minimum Active Period</h4>
+    <h4 fxFlex="98%" class="mat-h4">Minimum Active Period <i class="fas fa-question" matTooltip="Minimum active period to consider for dividend calculations"></i></h4>
 
     <mat-form-field fxFlex="48%">
       <mat-label>Frequency</mat-label>
@@ -38,7 +38,7 @@
       </mat-select>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">Lock-in Period</h4>
+    <h4 fxFlex="98%" class="mat-h4">Lock-in Period <i class="fas fa-question" matTooltip="Used to indicate the length of time that a share account of this share product type is locked-in and redeems are not allowed"></i></h4>
 
     <mat-form-field fxFlex="48%">
       <mat-label>Frequency</mat-label>
@@ -54,7 +54,7 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-checkbox fxFlex="98%" class="margin-v" labelPosition="before" formControlName="allowDividendCalculationForInactiveClients">
+    <mat-checkbox fxFlex="98%" class="margin-v" labelPosition="before" matTooltip="Indicates whether the dividends can be processed even share account of this share product is inactive" formControlName="allowDividendCalculationForInactiveClients">
       Allow dividends for inactive clients
     </mat-checkbox>
 

src/app/products/share-products/share-product-stepper/share-product-settings-step/share-product-settings-step.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
+import { TooltipPosition } from '@angular/material/tooltip';
 
 @Component({
   selector: 'mifosx-share-product-settings-step',

src/app/products/share-products/share-product-stepper/share-product-terms-step/share-product-terms-step.component.html

@@ -4,7 +4,7 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Total Number of Shares</mat-label>
-      <input type="number" matInput formControlName="totalShares" required>
+      <input type="number" matInput matTooltip="Total number of shares that a product is offering" formControlName="totalShares" required>
       <mat-error>
         Total Number of Shares is <strong>required</strong>
       </mat-error>
@@ -12,7 +12,7 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Shares to be Issued</mat-label>
-      <input type="number" matInput formControlName="sharesIssued" required>
+      <input type="number" matInput matTooltip="Total number of shares that an orgranization wants to issue to it's clients" formControlName="sharesIssued" required>
       <mat-error>
         Shares to be Issued is <strong>required</strong>
       </mat-error>
@@ -20,7 +20,7 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Nominal/Unit Price</mat-label>
-      <input type="number" matInput formControlName="unitPrice" required>
+      <input type="number" matInput matTooltip="Unit/Nominal Price of each share" formControlName="unitPrice" required>
       <mat-error>
         Nominal Price is <strong>required</strong>
       </mat-error>
@@ -28,7 +28,7 @@
 
     <mat-form-field fxFlex="48%">
       <mat-label>Capital Value</mat-label>
-      <input type="number" matInput formControlName="shareCapital" readonly>
+      <input type="number" matInput matTooltip="Total Capital Value" formControlName="shareCapital" readonly>
       <mat-hint>
         Shares to be Issued * Nominal Price (Auto calculated)
       </mat-hint>

src/app/products/share-products/share-product-stepper/share-product-terms-step/share-product-terms-step.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { combineLatest } from 'rxjs';
+import { TooltipPosition } from '@angular/material/tooltip';
 
 @Component({
   selector: 'mifosx-share-product-terms-step',