i18n: Adding new languages: Part 2 (#1885)

Co-authored-by: radhathakare <radhathakare322@gmail.com>

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

@@ -461,13 +461,21 @@
     <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
       <mat-form-field fxFlex="48%">
-        <mat-label [ngClass]="styleByDefault('dueDaysForRepaymentEvent')">Due days for repayment event</mat-label>
-        <input type="number" matInput matTooltip="Specific days before when repayment due notification should be sent." formControlName="dueDaysForRepaymentEvent" [min]="0">
+        <mat-label>Due days for repayment event</mat-label>
+        <mat-select formControlName="dueDaysForRepaymentEvent" matTooltip="The Amortization value is input to calculating the repayment amounts for repayment of the loan." required>
+          <mat-option *ngFor="let item of getDaysForRepayments(DAYS_BEFORE_REPAYMENT_IS_DUE)" [value]="item.days">
+            <span [ngClass]="item.style">{{item.label}}</span>
+          </mat-option>
+        </mat-select>
       </mat-form-field>
 
       <mat-form-field fxFlex="48%">
-        <mat-label [ngClass]="styleByDefault('dueDaysForRepaymentEvent')">OverDue days for repayment event</mat-label>
-        <input type="number" matInput matTooltip="Specific days when after the repayment Overdue notification should be sent." formControlName="overDueDaysForRepaymentEvent" [min]="0">
+        <mat-label>OverDue days for repayment event</mat-label>
+        <mat-select formControlName="overDueDaysForRepaymentEvent" matTooltip="The Amortization value is input to calculating the repayment amounts for repayment of the loan." required>
+          <mat-option *ngFor="let item of getDaysForRepayments(DAYS_AFTER_REPAYMENT_IS_OVERDUE)" [value]="item.days">
+            <span [ngClass]="item.style">{{item.label}}</span>
+          </mat-option>
+        </mat-select>
       </mat-form-field>
     </div>
 

src/app/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.scss

@@ -25,5 +25,6 @@ mat-divider {
 }
 
 .by-default {
-  color: $status-approved;
+  color: rgba($status-approved, .7);
+  font-weight: 700;
 }

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

@@ -2,6 +2,20 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl } from '@angular/forms';
 import { LoanProducts } from '../../loan-products';
 import { rangeValidator } from 'app/shared/validators/percentage.validator';
+import { GlobalConfiguration } from 'app/system/configurations/global-configurations-tab/configuration.model';
+
+interface DaysData {
+  days: number;
+  label: string;
+  style: string;
+}
+
+interface DaysForRepayment {
+  days: DaysData[];
+  code: string;
+  config: GlobalConfiguration;
+  style: string;
+}
 
 @Component({
   selector: 'mifosx-loan-product-settings-step',
@@ -10,6 +24,9 @@ import { rangeValidator } from 'app/shared/validators/percentage.validator';
 })
 export class LoanProductSettingsStepComponent implements OnInit {
 
+  DAYS_BEFORE_REPAYMENT_IS_DUE = LoanProducts.DAYS_BEFORE_REPAYMENT_IS_DUE;
+  DAYS_AFTER_REPAYMENT_IS_OVERDUE = LoanProducts.DAYS_AFTER_REPAYMENT_IS_OVERDUE;
+
   @Input() toEdit: boolean;
   @Input() loanProductsTemplate: any;
   @Input() isLinkedToFloatingInterestRates: UntypedFormControl;
@@ -32,13 +49,37 @@ export class LoanProductSettingsStepComponent implements OnInit {
   interestRecalculationOnDayTypeData: any;
   delinquencyBucketData: any;
 
-  constructor(private formBuilder: UntypedFormBuilder,
-    private loanProducts: LoanProducts) {
+  /** Values to Days for Repayments */
+  defaultConfigValues: GlobalConfiguration[] = [];
+  daysForRepayments: DaysForRepayment[] = [];
+
+  constructor(private formBuilder: UntypedFormBuilder) {
     this.createLoanProductSettingsForm();
     this.setConditionalControls();
   }
 
   ngOnInit() {
+    this.defaultConfigValues = this.loanProductsTemplate['itemsByDefault'];
+    this.defaultConfigValues.forEach((config: GlobalConfiguration) => {
+      const days: DaysData[] = [];
+      [...Array(10).keys()].forEach((day: number) => {
+        let label: string = day.toString();
+        let style = '';
+        if (day === config.value) {
+          label = day + ' *';
+          style = 'by-default';
+        }
+        days.push({days: day, label: label, style: style});
+      });
+
+      this.daysForRepayments.push({
+        days: days,
+        code: config.name,
+        config: config,
+        style: ''
+      });
+    });
+
     this.isLinkedToFloatingInterestRates.valueChanges
       .subscribe((isLinkedToFloatingInterestRates: any) => {
         if (isLinkedToFloatingInterestRates) {
@@ -390,15 +431,52 @@ export class LoanProductSettingsStepComponent implements OnInit {
           });
         }
       });
+
+    this.loanProductSettingsForm.get('dueDaysForRepaymentEvent').valueChanges
+    .subscribe((dueDaysForRepaymentEvent: number) => {
+      this.setStyleDaysForRepayment(this.DAYS_BEFORE_REPAYMENT_IS_DUE, dueDaysForRepaymentEvent);
+    });
+
+    this.loanProductSettingsForm.get('overDueDaysForRepaymentEvent').valueChanges
+    .subscribe((overDueDaysForRepaymentEvent: number) => {
+      this.setStyleDaysForRepayment(this.DAYS_AFTER_REPAYMENT_IS_OVERDUE, overDueDaysForRepaymentEvent);
+    });
   }
 
-  styleByDefault(input: string): string {
-    if (this.loanProducts.isItemByDefault(input)) {
-      return 'by-default';
-    }
+  setStyleDaysForRepayment(attribute: string, currentValue: number): void {
+    const currentValues: DaysForRepayment[] = this.daysForRepayments;
+    this.daysForRepayments = [];
+    currentValues.forEach((dfr: DaysForRepayment) => {
+      if (dfr.code === attribute) {
+        dfr.days.forEach((days: DaysData) => {
+          if (days.days === currentValue) {
+            dfr.style = days.style;
+          }
+        });
+      }
+      this.daysForRepayments.push(dfr);
+    });
+  }
+
+  styleDaysForRepayment(attribute: string): string {
+    this.daysForRepayments.forEach((item: DaysForRepayment) => {
+      if (item.code === attribute) {
+        return item.style;
+      }
+    });
     return '';
   }
 
+  getDaysForRepayments(attribute: string): DaysData[] {
+    let days: DaysData[] = [];
+    this.daysForRepayments.forEach((item: DaysForRepayment) => {
+      if (item.code === attribute) {
+        days = item.days;
+      }
+    });
+    return days;
+  }
+
   get loanProductSettings() {
     const productSettings = this.loanProductSettingsForm.value;
     if (!this.loanProductSettingsForm.value.multiDisburseLoan) {

src/app/products/loan-products/loan-products.ts

@@ -7,7 +7,10 @@ import { GlobalConfiguration } from 'app/system/configurations/global-configurat
 })
 export class LoanProducts {
 
-  globalConfigurations: string[] = ['days-before-repayment-is-due', 'days-after-repayment-is-overdue'];
+  public static DAYS_BEFORE_REPAYMENT_IS_DUE = 'days-before-repayment-is-due';
+  public static DAYS_AFTER_REPAYMENT_IS_OVERDUE = 'days-after-repayment-is-overdue';
+
+  globalConfigurations: string[] = [LoanProducts.DAYS_BEFORE_REPAYMENT_IS_DUE, LoanProducts.DAYS_AFTER_REPAYMENT_IS_OVERDUE];
   propertyNames: string[] = ['dueDaysForRepaymentEvent', 'overDueDaysForRepaymentEvent'];
 
   constructor(private settingsService: SettingsService) { }
@@ -70,6 +73,10 @@ export class LoanProducts {
     return (this.propertyNames.includes(propertyName));
   }
 
+  public isGlobalConfigurations(propertyName: string): boolean {
+    return (this.globalConfigurations.includes(propertyName));
+  }
+
   private resolvePropertyName(configName: string): string {
     if (this.globalConfigurations.includes(configName)) {
       const idx = this.globalConfigurations.indexOf(configName);