feat:add tooltip in create loan product screen (#1680)

added tooltips in creating loan product screen to provide valuable aid in understanding the functionality of the system. Fixes:#1668
2023-02-10 18:30:34 +05:30
parent 0da1aea07e
commit 4ea7032990
9 changed files with 37 additions and 32 deletions
@@ -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';

@@ -4,7 +4,7 @@

    <mat-form-field fxFlex="48%">
      <mat-label>Currency</mat-label>
-      <mat-select formControlName="currencyCode" required>
+      <mat-select formControlName="currencyCode" matTooltip="The currency in which the loan will be disbursed." 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 loans." 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="You can enter multiples of currency value. For example, if you put multiples of 100, the currency value will be rounded off to 200, 300, 400, etc." formControlName="inMultiplesOf" required>
      <mat-error>
        Currency in multiples of is <strong>required</strong>
      </mat-error>
@@ -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-loan-product-currency-step',
@@ -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="The product name is a unique identifier for the lending 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" maxlength="4" matTooltip="The short name is a unique identifier for the lending product." required>
      <mat-error>
        Short Name is <strong>required</strong>
      </mat-error>
@@ -20,34 +20,34 @@

    <mat-form-field fxFlex="48%">
      <mat-label>Fund</mat-label>
-      <mat-select formControlName="fundId">
+      <mat-select matTooltip="Loan products may be assigned to a fund set up by your financial institution. If available, the fund field can be used for tracking and reporting on groups of loans." formControlName="fundId">
        <mat-option *ngFor="let fund of fundData" [value]="fund.id">
          {{ fund.name }}
        </mat-option>
      </mat-select>
    </mat-form-field>

-    <mat-checkbox labelPosition="before" formControlName="includeInBorrowerCycle" fxFlex="48%">
+    <mat-checkbox labelPosition="before" matTooltip="A borrower loan counter (cycle) is used for tracking how many time the client has taken this particular product." formControlName="includeInBorrowerCycle" fxFlex="48%">
      Include in Customer Loan Counter
    </mat-checkbox>

    <mat-form-field fxFlex="48%" (click)="startDatePicker.open()">
      <mat-label>Start Date</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" formControlName="startDate">
+      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="startDatePicker" matTooltip="The date that the loan product will be active and available to clients. If blank, the loan product will be active as soon as it is created." formControlName="startDate">
      <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
      <mat-datepicker #startDatePicker></mat-datepicker>
    </mat-form-field>

    <mat-form-field fxFlex="48%" (click)="closeDatePicker.open()">
      <mat-label>Close Date</mat-label>
-      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closeDatePicker" formControlName="closeDate">
+      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closeDatePicker" matTooltip="The date that the loan product will become inactive and unavailable to clients. If blank, the load product will never become inactive." formControlName="closeDate">
      <mat-datepicker-toggle matSuffix [for]="closeDatePicker"></mat-datepicker-toggle>
      <mat-datepicker #closeDatePicker></mat-datepicker>
    </mat-form-field>

    <mat-form-field fxFlex="98%">
      <mat-label>Description</mat-label>
-      <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
+      <textarea matInput matTooltip="The description is used to provide additional information regarding the purpose and characteristics of the loan product." formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
    </mat-form-field>

  </div>
@@ -2,6 +2,7 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import { Dates } from 'app/core/utils/dates';
+import { TooltipPosition } from '@angular/material/tooltip';

 /** Custom Services */
 import { SettingsService } from 'app/settings/settings.service';
@@ -4,7 +4,7 @@

    <mat-form-field fxFlex="31%">
      <mat-label>{{ 'labels.inputs.products.loan.Amortization' | translate }}</mat-label>
-      <mat-select formControlName="amortizationType" required>
+      <mat-select formControlName="amortizationType" matTooltip="The Amortization value is input to calculating the repayment amounts for repayment of the loan." required>
        <mat-option *ngFor="let amortizationType of amortizationTypeData" [value]="amortizationType.id">
          {{ 'labels.inputs.products.loan.amortizationType.' + amortizationType.value | translate }}
        </mat-option>
@@ -20,7 +20,7 @@

    <mat-form-field fxFlex="48%">
      <mat-label>Interest Method</mat-label>
-      <mat-select formControlName="interestType" required>
+      <mat-select formControlName="interestType" matTooltip="The Interest method value is input to calculating the payments amount for repayment of the loan. " required>
        <mat-option *ngFor="let interestType of interestTypeData" [value]="interestType.id">
          {{ interestType.value }}
        </mat-option>
@@ -32,7 +32,7 @@

    <mat-form-field fxFlex="48%">
      <mat-label>Interest calculation period</mat-label>
-      <mat-select formControlName="interestCalculationPeriodType" required>
+      <mat-select formControlName="interestCalculationPeriodType" matTooltip="Daily - Will Calculate the interest on DAILY basis ex: Month of February has 28days and it will calculate interest for 28days, SAME AS REPAYMENT PERIOD- it calculates for the month,that is, 30days." required>
        <mat-option *ngFor="let interestCalculationPeriodType of interestCalculationPeriodTypeData" [value]="interestCalculationPeriodType.id">
          {{ interestCalculationPeriodType.value }}
        </mat-option>
@@ -42,13 +42,13 @@
      </mat-error>
    </mat-form-field>

-    <mat-checkbox *ngIf="loanProductSettingsForm.value.interestCalculationPeriodType === 1" fxFlex="48%" labelPosition="before" formControlName="allowPartialPeriodInterestCalcualtion">
+    <mat-checkbox *ngIf="loanProductSettingsForm.value.interestCalculationPeriodType === 1" fxFlex="48%" labelPosition="before" matTooltip=" To be used with SAME AS REPAYMENT PERIOD- for  calculating exact interest with partial period  ex: Interest charged from is 5th of April , Principal is 10000 and interest is 1% per month then the interest will be (10000 * 1%)* (25/30) , it calculates for the month first then calculates exact periods between start date and end date(can be a decimal)" formControlName="allowPartialPeriodInterestCalcualtion">
      Calculate interest for exact days in partial period
    </mat-checkbox>

    <mat-form-field fxFlex="48%">
      <mat-label>Repayment strategy</mat-label>
-      <mat-select formControlName="transactionProcessingStrategyCode" required>
+      <mat-select formControlName="transactionProcessingStrategyCode" matTooltip="The repayment strategy determines the sequence in which each of the components is paid." required>
        <mat-option *ngFor="let transactionProcessingStrategy of transactionProcessingStrategyData" [value]="transactionProcessingStrategy.code">
          {{ transactionProcessingStrategy.name }}
        </mat-option>
@@ -60,7 +60,7 @@

    <span fxFlex="48%" fxHide.lt-md></span>

-    <h4 fxFlex="98%" class="mat-h4">Moratorium</h4>
+    <h4 fxFlex="98%" class="mat-h4">Moratorium <i class="fas fa-question" matTooltip="The moratorium information will default from the loan product settings, but can be changed for this loan account"></i></h4>

    <mat-form-field fxFlex="48%">
      <mat-label>Grace on principal payment</mat-label>
@@ -85,17 +85,17 @@

    <mat-form-field fxFlex="48%">
      <mat-label>Interest free period</mat-label>
-      <input type="number" matInput formControlName="graceOnInterestCharged">
+      <input type="number" matInput matTooltip="If the Interest Free Period is '4' and the client's Repayment Frequency is every week, then for the first four weeks the client need not to pay interest, he has to pay principle due for that week only." formControlName="graceOnInterestCharged">
    </mat-form-field>

    <mat-form-field fxFlex="48%">
      <mat-label>Arrears tolerance</mat-label>
-      <input type="number" matInput formControlName="inArrearsTolerance">
+      <input type="number" matInput matTooltip="With 'Arrears tolerance' you can specify a tolerance amount and if the loan is behind (in arrears), but within the tolerance, it won't be classified as 'in arrears' and part of the portfolio at risk." formControlName="inArrearsTolerance">
    </mat-form-field>

    <mat-form-field fxFlex="48%">
      <mat-label>Days in year</mat-label>
-      <mat-select formControlName="daysInYearType" required>
+      <mat-select matTooltip="The setting for number of days in year to use to calculate interest" formControlName="daysInYearType" required>
        <mat-option *ngFor="let daysInYearType of daysInYearTypeData" [value]="daysInYearType.id">
          {{ daysInYearType.value }}
        </mat-option>
@@ -107,7 +107,7 @@

    <mat-form-field fxFlex="48%">
      <mat-label>Days in month</mat-label>
-      <mat-select formControlName="daysInMonthType" required>
+      <mat-select matTooltip="Number of days in month." formControlName="daysInMonthType" required>
        <mat-option *ngFor="let daysInMonthType of daysInMonthTypeData" [value]="daysInMonthType.id">
          {{ daysInMonthType.value }}
        </mat-option>
@@ -121,14 +121,14 @@
      Allow fixing of the installment amount
    </mat-checkbox>

-    <h4 fxFlex="48%" class="mat-h4">Number of days a loan may be overdue before moving into arrears</h4>
+    <h4 fxFlex="48%" class="mat-h4">Number of days a loan may be overdue before moving into arrears <i class="fas fa-question" matTooltip="A loan is in arrears once the number of days entered into this field is exceeded. If this field is blank, the loan will be in arrears the day after a scheduled payment is missed. "></i></h4>

    <mat-form-field fxFlex="48%">
      <mat-label>On arrears ageing</mat-label>
      <input type="number" matInput formControlName="graceOnArrearsAgeing">
    </mat-form-field>

-    <h4 fxFlex="48%" class="mat-h4">Maximum number of days a loan may be overdue before becoming a NPA (non-performing asset)</h4>
+    <h4 fxFlex="48%" class="mat-h4">Maximum number of days a loan may be overdue before becoming a NPA (non-performing asset) <i class="fas fa-question" matTooltip="A loan is a NPA (non performing asset) once the number of days entered into this field is exceeded. If this field is blank, the loan will be an NPA the day after a scheduled payment is missed."></i></h4>

    <mat-form-field fxFlex="48%">
      <mat-label>Overdue days for NPA</mat-label>
@@ -144,7 +144,7 @@
      <input type="number" matInput formControlName="principalThresholdForLastInstallment">
    </mat-form-field>

-    <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="allowVariableInstallments" class="margin-v">
+    <mat-checkbox fxFlex="48%" labelPosition="before" matTooltip="These fields are used to define the minimum, maximum gap that should be present between the installments for the loan product" formControlName="allowVariableInstallments" class="margin-v">
      Are Variable Installments allowed?
    </mat-checkbox>

@@ -170,7 +170,7 @@

    </div>

-    <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="canUseForTopup" class="margin-v">
+    <mat-checkbox fxFlex="48%" labelPosition="before" matTooltip="If selected, the Loan Product can be used to apply for Topup Loans." formControlName="canUseForTopup" class="margin-v">
      Allowed to be used for providing Topup Loans
    </mat-checkbox>

@@ -379,14 +379,14 @@

    <h3 fxFlex="23%" class="mat-h3">Loan Tranche Details</h3>

-    <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="multiDisburseLoan" class="margin-b">
+    <mat-checkbox fxFlex="73%" labelPosition="before" formControlName="multiDisburseLoan" matTooltip="Leave this checkbox unchecked if the loan is a single disburse loan. Check this checkbox if the loan is a multi disburse loan. See additional fields for additional information required for this type of loan." class="margin-b">
      Enable Multiple Disbursals
    </mat-checkbox>

    <div *ngIf="loanProductSettingsForm.value.multiDisburseLoan" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
      <mat-form-field fxFlex="48%">
        <mat-label>Maximum Tranche count</mat-label>
-        <input type="number" matInput formControlName="maxTrancheCount" required>
+        <input type="number" matInput matTooltip="The maximum number of disbursements allowed for a loan account." formControlName="maxTrancheCount" required>
        <mat-error>
          Maximum Tranche count is <strong>required</strong>
        </mat-error>
@@ -394,7 +394,7 @@

      <mat-form-field fxFlex="48%">
        <mat-label>Maximum allowed outstanding balance</mat-label>
-        <input type="number" matInput formControlName="outstandingLoanBalance">
+        <input type="number" matInput matTooltip="The maximum outstanding loan account balance allowed at a point in time." formControlName="outstandingLoanBalance">
      </mat-form-field>

      <mat-checkbox fxFlex="48%" labelPosition="before" formControlName="disallowExpectedDisbursements" class="margin-v">
@@ -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-loan-product-settings-step',
@@ -2,7 +2,7 @@

  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">

-    <h4 fxFlex="98%" class="mat-h4">Principal</h4>
+    <h4 fxFlex="98%" class="mat-h4">Principal <i class="fas fa-question" matTooltip="These fields are used to define the minimum, default, and maximum principal allowed for the loan product."></i></h4>

    <mat-form-field fxFlex="31%">
      <mat-label>Minimum</mat-label>
@@ -40,7 +40,7 @@
      <input type="number" matInput formControlName="overAppliedNumber" required>
    </mat-form-field>

-    <h4 fxFlex="98%" class="mat-h4">Number of repayments</h4>
+    <h4 fxFlex="98%" class="mat-h4">Number of repayments <i class="fas fa-question" matTooltip="These fields are used to define the minimum, default, and maximum number of repayments allowed for the loan product."></i></h4>

    <mat-form-field fxFlex="31%">
      <mat-label>Minimum</mat-label>
@@ -70,7 +70,7 @@

    <div *ngIf="!loanProductTermsForm.value.isLinkedToFloatingInterestRates" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">

-      <h4 fxFlex="98%" class="mat-h4">Nominal interest rate</h4>
+      <h4 fxFlex="98%" class="mat-h4">Nominal interest rate <i class="fas fa-question" matTooltip="These fields are used to define the minimum, default, maximum, and period for the nominal interest rate allowed for the loan product. The minimum, default, and maximum nominal interest rates are expressed as percentages."></i></h4>

      <mat-form-field fxFlex="23%">
        <mat-label>Minimum</mat-label>
@@ -106,7 +106,7 @@

    <div *ngIf="loanProductTermsForm.value.isLinkedToFloatingInterestRates" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">

-      <h4 fxFlex="98%" class="mat-h4">Floating interest rate</h4>
+      <h4 fxFlex="98%" class="mat-h4">Floating interest rate <i class="fas fa-question" matTooltip="These fields are used to define the minimum, default, maximum, and period for the floating interest rate allowed for the loan product. The minimum, default, and maximum floating interest rates are expressed as percentages."></i></h4>

      <mat-form-field fxFlex="31%">
        <mat-label>Floating Rate</mat-label>
@@ -361,7 +361,7 @@

    <mat-divider fxFlex="98%"></mat-divider>

-    <h4 fxFlex="98%" class="mat-h4">Repaid every</h4>
+    <h4 fxFlex="98%" class="mat-h4">Repaid every <i class="fas fa-question" matTooltip="These fields are input to calculating the repayment schedule for a loan account and are used to determine when payments are due."></i></h4>

    <mat-form-field fxFlex="48%">
      <mat-label>Frequency</mat-label>
@@ -1,6 +1,7 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormArray, FormControl } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
+import { TooltipPosition } from '@angular/material/tooltip';

 import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';