feat:add tooltip in create savings product screen (#1689)

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

Fixes: #1669
This commit is contained in:
pc_11
2023-02-23 12:02:13 +05:30
committed by GitHub
parent 6ef53c6462
commit e76e558fc6
8 changed files with 30 additions and 26 deletions
@@ -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 to be used" 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" matInput matTooltip="The number of decimal places to be used to track and report on saving accounts" 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>
@@ -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-saving-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="A unique identifier for the saving 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 saving 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" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
<textarea matInput matTooltip="Provides additional information regarding the purpose and characteristics of the saving product" formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
</mat-form-field>
</div>
@@ -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-saving-product-details-step',
@@ -4,14 +4,14 @@
<mat-form-field fxFlex="48%">
<mat-label>Minimum Opening Balance</mat-label>
<input type="number" matInput formControlName="minRequiredOpeningBalance">
<input type="number" matInput matTooltip="Sets the minimum deposit amount required to open a saving account of this saving product type" formControlName="minRequiredOpeningBalance">
</mat-form-field>
<span fxFlex="48%" fxHide.lt-md></span>
<mat-form-field fxFlex="48%">
<mat-label>Lock-in Period</mat-label>
<input type="number" matInput formControlName="lockinPeriodFrequency">
<input type="number" matInput matTooltip="Used to indicate the length of time that a savings account of this saving product type is locked-in and withdrawals are not allowed" formControlName="lockinPeriodFrequency">
</mat-form-field>
<mat-form-field fxFlex="48%">
@@ -22,25 +22,25 @@
</mat-select>
</mat-form-field>
<mat-checkbox fxFlex="48%" labelPosition="before" formControlName="withdrawalFeeForTransfers" class="margin-v">
<mat-checkbox fxFlex="48%" labelPosition="before" matTooltip="Indicates whether the withdrawal fee should be applied when funds are transferred between accounts" formControlName="withdrawalFeeForTransfers" class="margin-v">
Apply Withdrawal Fee for Transfers
</mat-checkbox>
<mat-form-field fxFlex="48%">
<mat-label>Balance Required for Interest Calculation</mat-label>
<input type="number" matInput formControlName="minBalanceForInterestCalculation">
<input type="number" matInput matTooltip="Sets the balance required for interest calculation" formControlName="minBalanceForInterestCalculation">
</mat-form-field>
<mat-checkbox fxFlex="48%" labelPosition="before" formControlName="enforceMinRequiredBalance" class="margin-v">
<mat-checkbox fxFlex="48%" labelPosition="before" matTooltip="Indicates whether to enforce a minimum balance" formControlName="enforceMinRequiredBalance" class="margin-v">
Enforce Minimum Balance
</mat-checkbox>
<mat-form-field fxFlex="48%">
<mat-label>Minimum Balance</mat-label>
<input type="number" matInput formControlName="minRequiredBalance">
<input type="number" matInput matTooltip="Sets the minimum balance allowed for a saving account" formControlName="minRequiredBalance">
</mat-form-field>
<mat-checkbox fxFlex="48%" labelPosition="before" formControlName="withHoldTax" class="margin-v">
<mat-checkbox fxFlex="48%" labelPosition="before" matTooltip="An boolean flag to attach taxes to interest posting" formControlName="withHoldTax" class="margin-v">
Is Withhold Tax Applicable?
</mat-checkbox>
@@ -60,7 +60,7 @@
<h3 fxFlex="23%" class="mat-h3">Overdraft</h3>
<mat-checkbox fxFlex="73%" labelPosition="before" formControlName="allowOverdraft" class="margin-b">
<mat-checkbox fxFlex="73%" labelPosition="before" matTooltip="Indicates whether saving accounts based on this saving product may have an overdraft" formControlName="allowOverdraft" class="margin-b">
Is Overdraft Allowed?
</mat-checkbox>
@@ -68,17 +68,17 @@
<mat-form-field fxFlex="31%">
<mat-label>Minimum Overdraft Required for Interest Calculation</mat-label>
<input type="number" matInput formControlName="minOverdraftForInterestCalculation">
<input type="number" matInput matTooltip="Sets the overdraft required for interest calculation" formControlName="minOverdraftForInterestCalculation">
</mat-form-field>
<mat-form-field fxFlex="31%">
<mat-label>Nominal Annual Interest for Overdraft</mat-label>
<input type="number" matInput formControlName="nominalAnnualInterestRateOverdraft">
<input type="number" matInput matTooltip="Default interest rate on overdraft" formControlName="nominalAnnualInterestRateOverdraft">
</mat-form-field>
<mat-form-field fxFlex="31%">
<mat-label>Maximum Overdraft Amount Limit</mat-label>
<input type="number" matInput formControlName="overdraftLimit">
<input type="number" matInput matTooltip="Sets the maximum allowed overdraft amount for a saving account that is allowed to have an overdraft" formControlName="overdraftLimit">
</mat-form-field>
</div>
@@ -87,7 +87,7 @@
<h3 fxFlex="23%" class="mat-h3">Dormancy Tracking</h3>
<mat-checkbox fxFlex="73%" labelPosition="before" formControlName="isDormancyTrackingActive" class="margin-b">
<mat-checkbox fxFlex="73%" labelPosition="before" matTooltip="Enables definition and tracking inactive Savings Accounts" formControlName="isDormancyTrackingActive" class="margin-b">
Enable Dormancy Tracking
</mat-checkbox>
@@ -95,7 +95,7 @@
<mat-form-field fxFlex="31%">
<mat-label>Number of Days to Inactive sub-status</mat-label>
<input type="number" matInput formControlName="daysToInactive" required>
<input type="number" matInput matTooltip="Consecutive Number of Days of inactive period to mark an account as Inactive" formControlName="daysToInactive" required>
<mat-error>
Number of Days to Inactive sub-status is <strong>required</strong>
</mat-error>
@@ -103,7 +103,7 @@
<mat-form-field fxFlex="31%">
<mat-label>Number of Days to Dormant sub-status</mat-label>
<input type="number" matInput formControlName="daysToDormancy" required>
<input type="number" matInput matTooltip="Consecutive Number of Days of inactive period to mark an account as Dormant" formControlName="daysToDormancy" required>
<mat-error>
Number of Days to Dormant sub-status is <strong>required</strong>
</mat-error>
@@ -111,7 +111,7 @@
<mat-form-field fxFlex="31%">
<mat-label>Number of Days to Escheat</mat-label>
<input type="number" matInput formControlName="daysToEscheat" required>
<input type="number" matInput matTooltip="Consecutive Number of Days of inactive period to mark an account as Escheat" formControlName="daysToEscheat" required>
<mat-error>
Number of Days to Escheat is <strong>required</strong>
</mat-error>
@@ -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-saving-product-settings-step',
@@ -4,7 +4,7 @@
<mat-form-field fxFlex="48%">
<mat-label>Nominal Annual Interest Rate</mat-label>
<input type="number" matInput formControlName="nominalAnnualInterestRate" required>
<input type="number" matInput matTooltip="The default interest rate set when creating savings accounts" formControlName="nominalAnnualInterestRate" required>
<mat-error>
Nominal Annual Interest is <strong>required</strong>
</mat-error>
@@ -14,7 +14,7 @@
<mat-form-field fxFlex="48%">
<mat-label>Interest Compounding Period</mat-label>
<mat-select formControlName="interestCompoundingPeriodType" required>
<mat-select formControlName="interestCompoundingPeriodType" matTooltip="The period at which interest rate is compounded" required>
<mat-option *ngFor="let interestCompoundingPeriodType of interestCompoundingPeriodTypeData" [value]="interestCompoundingPeriodType.id">
{{ interestCompoundingPeriodType.value }}
</mat-option>
@@ -26,7 +26,7 @@
<mat-form-field fxFlex="48%">
<mat-label>Interest Posting Period</mat-label>
<mat-select formControlName="interestPostingPeriodType" required>
<mat-select formControlName="interestPostingPeriodType" matTooltip="The period at which interest rate is posted or credited to a saving account" required>
<mat-option *ngFor="let interestPostingPeriodType of interestPostingPeriodTypeData" [value]="interestPostingPeriodType.id">
{{ interestPostingPeriodType.value }}
</mat-option>
@@ -38,7 +38,7 @@
<mat-form-field fxFlex="48%">
<mat-label>Interest Calculated using</mat-label>
<mat-select formControlName="interestCalculationType" required>
<mat-select formControlName="interestCalculationType" matTooltip="The method used to calculate interest" required>
<mat-option *ngFor="let interestCalculationType of interestCalculationTypeData" [value]="interestCalculationType.id">
{{ interestCalculationType.value }}
</mat-option>
@@ -50,7 +50,7 @@
<mat-form-field fxFlex="48%">
<mat-label>Days in Year</mat-label>
<mat-select formControlName="interestCalculationDaysInYearType" required>
<mat-select formControlName="interestCalculationDaysInYearType" matTooltip="The setting for number of days in year to use to calculate interest" required>
<mat-option *ngFor="let interestCalculationDaysInYearType of interestCalculationDaysInYearTypeData" [value]="interestCalculationDaysInYearType.id">
{{ interestCalculationDaysInYearType.value }}
</mat-option>
@@ -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-saving-product-terms-step',