Display tooltip messages with style

angular.json

@@ -44,7 +44,8 @@
             "scripts": [],
             "allowedCommonJsDependencies": [
               "lodash",
-              "@ckeditor/ckeditor5-build-classic"
+              "@ckeditor/ckeditor5-build-classic",
+              "moment"
             ]
           },
           "configurations": {

src/app/loans/loans-account-stepper/loans-account-terms-step/loans-account-terms-step.component.html

@@ -33,12 +33,12 @@ <h4 fxFlex="98%" class="mat-h4">Term Options <i class="fas fa-question" matToolt
       </mat-error>
     </mat-form-field>
 
-    <h4 fxFlex="98%" class="mat-h4">Repayments <i class="fas fa-question" matTooltip="Enter the total count of repayments that loan schedule has excluding the down-payment.
-      Example: if the loan account has 4 Installments including down-payment then number of repayments is equal to 3"></i></h4>
+    <h4 fxFlex="98%" class="mat-h4">Repayments </h4>
 
     <mat-form-field fxFlex="48%">
       <mat-label>Number of repayments</mat-label>
-      <input type="number" matInput formControlName="numberOfRepayments">
+      <input type="number" matInput formControlName="numberOfRepayments" matTooltip="Enter the total count of repayments that loan schedule has excluding the down-payment. Example:
+      If the loan account has 4 Installments including down-payment then number of repayments is equal to 3">
       <mat-error *ngIf="loansAccountTermsForm.controls.numberOfRepayments.hasError('required')">
         Number of repayments is <strong>required</strong>
       </mat-error>

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

@@ -32,7 +32,9 @@ export class LoanProductCurrencyStepComponent implements OnInit {
   createLoanProductCurrencyForm() {
     this.loanProductCurrencyForm = this.formBuilder.group({
       'currencyCode': ['', Validators.required],
-      'digitsAfterDecimal': [2, Validators.required]
+      'digitsAfterDecimal': [2, Validators.required],
+      'inMultiplesOf': '',
+      'installmentAmountInMultiplesOf': ''
     });
   }
 

src/app/products/loan-products/loan-product-stepper/loan-product-payment-strategy-step/payment-allocation-model.ts

@@ -41,6 +41,12 @@ export class AdvancedPaymentAllocation {
   futureInstallmentAllocationRules: FutureInstallmentAllocationRule[];
 }
 
+export class AdvancePaymentAllocationData {
+  transactionTypes: PaymentAllocationTransactionType[];
+  allocationTypes: PaymentAllocationType[];
+  futureInstallmentAllocationRules: FutureInstallmentAllocationRule[];
+}
+
 @Injectable({
   providedIn: 'root'
 })

src/app/products/loan-products/loan-product-stepper/loan-product-preview-step/loan-product-preview-step.component.html

@@ -333,7 +333,8 @@ <h3 class="mat-h3" fxFlexFill>Settings</h3>
     <span fxFlex="60%">
       <mat-accordion>
         <mifosx-view-advance-paymeny-allocation *ngFor="let paymentAllocation of loanProduct.paymentAllocation"
-          [paymentAllocation]="paymentAllocation">
+          [paymentAllocation]="paymentAllocation"
+          [advancePaymentAllocationData]="advancePaymentAllocationData">
         </mifosx-view-advance-paymeny-allocation>
       </mat-accordion>
     </span>

src/app/products/loan-products/loan-product-stepper/loan-product-preview-step/loan-product-preview-step.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { AdvancePaymentAllocationData } from '../loan-product-payment-strategy-step/payment-allocation-model';
 
 @Component({
   selector: 'mifosx-loan-product-preview-step',
@@ -19,10 +20,17 @@ export class LoanProductPreviewStepComponent implements OnInit, OnChanges {
 
   isAdvancedPaymentAllocation = false;
 
+  advancePaymentAllocationData: AdvancePaymentAllocationData;
+
   constructor() { }
 
   ngOnInit() {
     this.isAdvancedPaymentAllocation = (this.loanProduct.transactionProcessingStrategyCode === 'advanced-payment-allocation-strategy');
+    this.advancePaymentAllocationData = {
+      transactionTypes: this.loanProductsTemplate.advancedPaymentAllocationTransactionTypes,
+      allocationTypes: this.loanProductsTemplate.advancedPaymentAllocationTypes,
+      futureInstallmentAllocationRules: this.loanProductsTemplate.advancedPaymentAllocationFutureInstallmentAllocationRules
+    };
   }
 
   ngOnChanges(changes: SimpleChanges): void {

src/app/products/loan-products/view-loan-product/shared/view-advance-paymeny-allocation/view-advance-paymeny-allocation.component.html

@@ -3,20 +3,16 @@
     <mat-panel-title>
       <div fxFlexFill>
         <span fxFlex="40%">Transaction Type:</span>
-        <span fxFlex="60%">{{ paymentAllocation.transactionType }}</span>
+        <span fxFlex="60%">{{ transactionTypeValue(paymentAllocation.transactionType) }}</span>
       </div>
     </mat-panel-title>
   </mat-expansion-panel-header>
 
   <div fxFlexFill>
-    <div fxFlexFill>
-      <span fxFlex="40%">Transaction Type:</span>
-      <span fxFlex="60%">{{ paymentAllocation.transactionType }}</span>
-    </div>
 
     <div fxFlexFill>
       <span fxFlex="40%">Future Installment Allocation:</span>
-      <span fxFlex="60%">{{ paymentAllocation.futureInstallmentAllocationRule }}</span>
+      <span fxFlex="60%">{{ futureInstallmentRuleValue(paymentAllocation.futureInstallmentAllocationRule) }}</span>
     </div>
 
     <div fxFlexFill>
@@ -32,7 +28,7 @@
           <tbody>
             <tr *ngFor="let paymentAllocation of paymentAllocation.paymentAllocationOrder; let idx = index;">
               <td>{{ (idx + 1) }}</td>
-              <td>{{ paymentAllocation.paymentAllocationRule }}</td>
+              <td>{{ allocationRuleValue(paymentAllocation.paymentAllocationRule) }}</td>
             </tr>
           </tbody>
         </table>

src/app/products/loan-products/view-loan-product/shared/view-advance-paymeny-allocation/view-advance-paymeny-allocation.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { PaymentAllocation } from 'app/products/loan-products/loan-product-stepper/loan-product-payment-strategy-step/payment-allocation-model';
+import { AdvancePaymentAllocationData, PaymentAllocation } from 'app/products/loan-products/loan-product-stepper/loan-product-payment-strategy-step/payment-allocation-model';
 
 @Component({
   selector: 'mifosx-view-advance-paymeny-allocation',
@@ -9,10 +9,26 @@ import { PaymentAllocation } from 'app/products/loan-products/loan-product-stepp
 export class ViewAdvancePaymenyAllocationComponent implements OnInit {
 
   @Input() paymentAllocation: PaymentAllocation;
+  @Input() advancePaymentAllocationData: AdvancePaymentAllocationData;
 
   constructor() { }
 
   ngOnInit(): void {
   }
 
+  transactionTypeValue(code: string): string {
+    const transactionType =  this.advancePaymentAllocationData.transactionTypes.find(t => t.code === code);
+    return transactionType.value;
+  }
+
+  allocationRuleValue(code: string): string {
+    const allocationType =  this.advancePaymentAllocationData.allocationTypes.find(t => t.code === code);
+    return allocationType.value;
+  }
+
+  futureInstallmentRuleValue(code: string): string {
+    const futureInstallmentAllocationRule =  this.advancePaymentAllocationData.futureInstallmentAllocationRules.find(t => t.code === code);
+    return futureInstallmentAllocationRule.value;
+  }
+
 }

src/assets/styles/_misc.scss

@@ -1,3 +1,5 @@
+@import 'colours';
+
 html,
 body {
   -webkit-tap-highlight-color: transparent;
@@ -49,3 +51,12 @@ div {
   }
 }
 
+::ng-deep .mat-tooltip {
+  font-size: 15px;
+  white-space: pre-wrap;
+  color: $white !important;
+  background-color: rgba($status-approved, .7);
+  border: 1px solid darken($status-approved, 20%);
+  max-width: 400px !important;
+  white-space: pre-line !important;
+ }