Loan Interest Pauses management to Edit or Delete

Author: Jose Alberto Hernandez

src/app/loans/loans-view/loan-account-actions/add-interest-pause/add-interest-pause.component.html

@@ -1,5 +1,8 @@
 <div class="container mat-elevation-z8">
     <mat-card>
+        <div class="m-b-20" fxLayout="column" *ngIf="maturityDate">
+            <span class="m-r-10">{{'Maturity Date' | translateKey:'inputs'}} : {{ maturityDate | dateFormat}}</span>
+        </div>
         <form [formGroup]="interestPauseLoanForm" (ngSubmit)="submit()">
             <mat-card-content>
                 <div fxLayout="column">

src/app/loans/loans-view/loan-account-actions/add-interest-pause/add-interest-pause.component.ts

@@ -24,6 +24,7 @@ export class AddInterestPauseComponent implements OnInit {
   /** Maximum Date allowed. */
   maxDate = new Date();
   startDate = new Date();
+  maturityDate: Date | null = null;
   /** Interest Pause Loan Form */
   interestPauseLoanForm: UntypedFormGroup;
 
@@ -49,11 +50,10 @@ export class AddInterestPauseComponent implements OnInit {
    * and initialize with the required values
    */
   ngOnInit() {
+    this.maturityDate = new Date(this.dataObject.timeline.expectedMaturityDate);
     this.maxDate = new Date(this.dataObject.timeline.expectedMaturityDate);
     this.startDate = new Date(this.settingsService.businessDate);
-    if (this.startDate < this.maxDate) {
-      this.maxDate = this.startDate;
-    } else {
+    if (this.startDate > this.maxDate) {
       this.startDate = this.maxDate;
     }
     this.createInterestPauseLoanForm();

src/app/loans/loans-view/loan-accounts-button-config.ts

@@ -159,10 +159,6 @@ export class LoansAccountButtonConfiguration {
     switch (status) {
       case 'Active':
         this.optionArray = [
-          {
-            name: 'Add Interest Pause',
-            taskPermissionName: 'CREATE_INTEREST_PAUSE',
-          },
           {
             name: 'Waive Interest',
             taskPermissionName: 'WAIVEINTERESTPORTION_LOAN',

src/app/loans/loans-view/loan-term-variations-tab/loan-term-variations-tab.component.html

@@ -23,7 +23,7 @@ <h3>{{ 'labels.heading.Term Variations' | translate }}</h3>
     <tr mat-row *matRowDef="let row; columns: loanDTermVariationsColumns;"></tr>
   </table>
 
-  <h3 class="m-t-20">{{ 'labels.heading.Interest Pauses' | translate }}</h3>
+  <h3 class="m-t-20" *ngIf="interestPausesData?.length > 0">{{ 'labels.heading.Interest Pauses' | translate }}</h3>
   <table mat-table class="m-t-20" [dataSource]="interestPausesData" *ngIf="interestPausesData?.length > 0">
     <ng-container matColumnDef="row">
       <th mat-header-cell *matHeaderCellDef>#</th>
@@ -45,6 +45,22 @@ <h3 class="m-t-20">{{ 'labels.heading.Interest Pauses' | translate }}</h3>
       <td mat-cell *matCellDef="let item">{{ item.days | formatNumber }}</td>
     </ng-container>
 
+    <ng-container matColumnDef="actions">
+      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
+      <td mat-cell *matCellDef="let item">
+        <button class="button" mat-icon-button color="primary"
+          matTooltip="{{ 'tooltips.Edit' | translate }}" matTooltipPosition="right"
+          (click)="manageRequest(item, 'Edit')">
+          <fa-icon icon="edit" size="lg"></fa-icon>
+        </button>
+        <button class="button" mat-icon-button color="warn"
+        matTooltip="{{ 'tooltips.Delete' | translate }}" matTooltipPosition="left"
+        (click)="manageRequest(item, 'Delete')">
+        <fa-icon icon="trash" size="lg"></fa-icon>
+      </button>
+      </td>
+    </ng-container>
+
     <tr mat-header-row *matHeaderRowDef="interestPausesColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: interestPausesColumns"></tr>
   </table>

src/app/loans/loans-view/loan-term-variations-tab/loan-term-variations-tab.component.scss

@@ -1,5 +1,12 @@
 table {
   width: 100%;
+
+  .action-button {
+    min-width: 26px;
+    padding: 0 0 3px;
+    margin: 0 2%;
+    line-height: 25px;
+  }
 }
 
 .container {

src/app/loans/loans-view/loan-term-variations-tab/loan-term-variations-tab.component.ts

@@ -1,6 +1,14 @@
 import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { MatDialog } from '@angular/material/dialog';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
+import { LoansService } from 'app/loans/loans.service';
+import { SettingsService } from 'app/settings/settings.service';
+import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
+import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
+import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
+import { AnyKindOfDictionary } from 'cypress/types/lodash';
 
 @Component({
   selector: 'mifosx-loan-term-variations-tab',
@@ -14,13 +22,22 @@ export class LoanTermVariationsTabComponent {
   loanDTermVariationsColumns: string[] = ['termType', 'applicableFrom', 'value', 'specificToInstallment'];
   /** Interest Pauses Data */
   interestPausesData: any[] = [];
-  interestPausesColumns: string[] = ['row', 'startDate', 'endDate', 'days'];
+  interestPausesColumns: string[] = ['row', 'startDate', 'endDate', 'days', 'actions'];
+
+  loanId: number;
+  clientId: AnyKindOfDictionary;
 
   constructor(private route: ActivatedRoute,
-    private dates: Dates
+    private router: Router,
+    private dates: Dates,
+    private settingsService: SettingsService,
+    private loansService: LoansService,
+    private dialog: MatDialog
   ) {
     this.interestPausesData = [];
+    this.clientId = this.route.parent.parent.snapshot.paramMap.get('clientId');
     this.route.data.subscribe((data: { loanDetailsData: any, interestPausesData: any }) => {
+      this.loanId = data.loanDetailsData.id;
       this.loanTermVariationsData = data.loanDetailsData.loanTermVariations;
       this.interestPausesData = [];
       data.interestPausesData?.forEach((item: any) => {
@@ -29,4 +46,76 @@ export class LoanTermVariationsTabComponent {
       });
     });
   }
+
+  manageRequest(variation: any, action: string) {
+    if (action === 'Delete') {
+      this.deleteInterestPause(variation);
+    } else if (action === 'Edit') {
+      this.updateInterestPause(variation);
+    }
+  }
+
+  deleteInterestPause(variation: any) {
+    const deleteStandingInstructionDialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `interest pause from ${variation.startDate} to ${variation.endDate}` }
+    });
+    deleteStandingInstructionDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.loansService.deleteInterestPause(this.loanId, variation.id).subscribe((response: any) => {
+          this.reload();
+        });
+      }
+    });
+  }
+
+  updateInterestPause(variation: any) {
+    const startDate: Date = this.dates.parseDate(variation.startDate);
+    const endDate: Date = this.dates.parseDate(variation.endDate);
+    const formfields: FormfieldBase[] = [
+      new DatepickerBase({
+        controlName: 'startDate',
+        label: 'Start Date',
+        value: startDate,
+        maxDate: this.settingsService.maxFutureDate,
+        required: true
+      }),
+      new DatepickerBase({
+        controlName: 'endDate',
+        label: 'End Date',
+        value: endDate,
+        maxDate: this.settingsService.maxFutureDate,
+        required: true
+      }),
+    ];
+
+    const data = {
+      title: 'Edit Interest Pause id: ' + variation.id,
+      formfields: formfields,
+      layout: { addButtonText: 'Submit' }
+    };
+    const editDialogRef = this.dialog.open(FormDialogComponent, { data, width: '50rem' });
+    editDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.data) {
+        if (response.data.value.startDate <= response.data.value.endDate) {
+          const locale = this.settingsService.language.code;
+          const dateFormat = this.settingsService.dateFormat;
+          const payload = {
+            startDate: this.dates.formatDate(response.data.value.startDate, dateFormat),
+            endDate: this.dates.formatDate(response.data.value.endDate, dateFormat),
+            locale,
+            dateFormat
+          }
+          this.loansService.updateInterestPause(this.loanId, variation.id, payload).subscribe((response: any) => {
+            this.reload();
+          });
+        }
+      }
+    });
+  }
+
+  private reload() {
+    const url: string = this.router.url;
+    this.router.navigateByUrl(`/clients/${this.clientId}/loans-accounts`, { skipLocationChange: true })
+      .then(() => this.router.navigate([url]));
+  }
 }

src/app/loans/loans-view/loans-view.component.ts

@@ -151,6 +151,13 @@ export class LoansViewComponent implements OnInit {
           taskPermissionName: 'DISBURSALLASTUNDO_LOAN'
         });
       }
+      if (this.recalculateInterest) {
+        this.buttonConfig.addButton({
+          name: 'Add Interest Pause',
+          icon: 'calendar',
+          taskPermissionName: 'CREATE_INTEREST_PAUSE'
+        });
+      }
       // loan officer not assigned to loan, below logic
       // helps to display otherwise not
       if (!this.loanDetailsData.loanOfficerName) {

src/app/loans/loans.service.ts

@@ -285,6 +285,14 @@ export class LoansService {
     return this.http.get(`/loans/${loanId}/interest-pauses`);
   }
 
+  updateInterestPause(loanId: number, variationId: number, data?: any): Observable<any> {
+    return this.http.put(`/loans/${loanId}/interest-pauses/${variationId}`, data);
+  }
+
+  deleteInterestPause(loanId: number, variationId: number): Observable<any> {
+    return this.http.delete(`/loans/${loanId}/interest-pauses/${variationId}`);
+  }
+
   /**
    * @param {string|number} loanId Loan Id.
    * @param {any} foreclosuredata ForeClosure Data