Loan Reschedule management in Loan Account (#1637)

Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>

src/app/clients/clients-routing.module.ts

@@ -78,6 +78,11 @@ const routes: Routes = [
           clientDatatables: ClientDatatablesResolver
         },
         children: [
+          {
+            path: '',
+            redirectTo: 'general',
+            pathMatch: 'full'
+          },
           {
             path: 'general',
             component: GeneralTabComponent,

src/app/loans/common-resolvers/loan-reschedules.resolver.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LoanReschedulesResolver } from './loan-reschedules.resolver';
+
+describe('LoanReschedulesResolver', () => {
+  let resolver: LoanReschedulesResolver;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    resolver = TestBed.inject(LoanReschedulesResolver);
+  });
+
+  it('should be created', () => {
+    expect(resolver).toBeTruthy();
+  });
+});

src/app/loans/common-resolvers/loan-reschedules.resolver.ts

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import {
+  Router, Resolve,
+  RouterStateSnapshot,
+  ActivatedRouteSnapshot
+} from '@angular/router';
+import { Observable, of } from 'rxjs';
+import { LoansService } from '../loans.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoanReschedulesResolver implements Resolve<boolean> {
+
+    /**
+     * @param {LoansService} LoansService Loans service.
+     */
+    constructor(private loansService: LoansService) { }
+
+    /**
+     * Returns the Loans data.
+     * @returns {Observable<any>}
+     */
+    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+        const loanId = route.parent.paramMap.get('loanId');
+        return this.loansService.loanRescheduleRequests(loanId);
+    }
+
+}

src/app/loans/loans-routing.module.ts

@@ -53,6 +53,9 @@ import { GLIMLoanTemplateResolver } from './common-resolvers/glim-loan-template.
 import { GroupViewResolver } from 'app/groups/common-resolvers/group-view.resolver';
 import { LoanDelinquencyTagsResolver } from './common-resolvers/loan-delinquency-tags.resolver';
 import { LoanDelinquencyTagsTabComponent } from './loans-view/loan-delinquency-tags-tab/loan-delinquency-tags-tab.component';
+import { RescheduleLoanComponent } from 'app/tasks/checker-inbox-and-tasks-tabs/reschedule-loan/reschedule-loan.component';
+import { LoanReschedulesResolver } from './common-resolvers/loan-reschedules.resolver';
+import { RescheduleLoanTabComponent } from './loans-view/reschedule-loan-tab/reschedule-loan-tab.component';
 
 /** Loans Route. */
 const routes: Routes = [
@@ -131,6 +134,19 @@ const routes: Routes = [
                 },
               ]
             },
+            {
+              path: 'loan-reschedules',
+              data: {},
+              resolve: {
+                loanRescheduleData: LoanReschedulesResolver
+              },
+              children: [
+                {
+                  path: '',
+                  component: RescheduleLoanTabComponent
+                }
+              ]
+            },
             {
               path: 'loan-collateral',
               component: LoanCollateralTabComponent,

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

@@ -19,11 +19,12 @@
               <h3>
                 <i class="fa fa-stop" matTooltip="{{ loanDetailsData.status.value }}"
                   [ngClass]="loanDetailsData.inArrears?'status-active-overdue':(loanDetailsData.status.code|statusLookup)"></i>
-                  Loan Product: {{loanDetailsData.loanProductName}}<span class="m-l-10">({{loanDetailsData.accountNo}})</span>
+                Loan Product: {{loanDetailsData.loanProductName}}<span
+                  class="m-l-10">({{loanDetailsData.accountNo}})</span>
               </h3>
               <span class="loans-overview">
                 {{entityType}} Name: {{loanDetailsData.clientName ||
-                  loanDetailsData.groupName}}<span class="m-l-10">({{loanDetailsData.clientAccountNo}})</span><br />
+                loanDetailsData.groupName}}<span class="m-l-10">({{loanDetailsData.clientAccountNo}})</span><br />
               </span>
               <span class="loans-overview" *ngIf="loanDetailsData.delinquencyRange">
                 Loan Account Classification : {{loanDetailsData?.delinquencyRange.classification}}<br />
@@ -165,6 +166,10 @@
           Charges
         </a>
       </ng-container>
+      <a mat-tab-link [routerLink]="['./loan-reschedules']" routerLinkActive #loanReschedules="routerLinkActive"
+        [active]="loanReschedules.isActive">
+        Loan Reschedules
+      </a>
       <a mat-tab-link [routerLink]="['./loan-documents']" routerLinkActive #loanDocuments="routerLinkActive"
         [active]="loanDocuments.isActive">
         Loan Documents

src/app/loans/loans-view/reschedule-loan-tab/reschedule-loan-tab.component.html

@@ -0,0 +1,79 @@
+<div class="container">
+
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px" class="action-buttons">
+    <button mat-raised-button color="primary" [routerLink]="['../actions/Reschedule']">
+      Reschedule
+    </button>
+  </div>
+
+  <table mat-table [dataSource]="loanRescheduleData">
+
+    <ng-container matColumnDef="id">
+      <th mat-header-cell *matHeaderCellDef> # </th>
+      <td mat-cell *matCellDef="let item"> {{ item.id }} </td>
+    </ng-container>
+
+    <!-- Status Column -->
+    <ng-container matColumnDef="status">
+      <th mat-header-cell *matHeaderCellDef> Status </th>
+      <td mat-cell *matCellDef="let item">
+        <div [ngClass]="item.statusEnum.code | statusLookup">
+          <fa-icon icon="stop"></fa-icon>
+          <span class="m-l-10 status">
+            {{ item.statusEnum.value | translate }}
+          </span>
+        </div>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="rescheduleFromDate">
+      <th mat-header-cell *matHeaderCellDef> From Date </th>
+      <td mat-cell *matCellDef="let item">
+        {{ item.rescheduleFromDate | dateFormat }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="reason">
+      <th mat-header-cell *matHeaderCellDef> Reason </th>
+      <td mat-cell *matCellDef="let item">
+        {{ item.rescheduleReasonCodeValue.name }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="updatedOnDate">
+      <th mat-header-cell *matHeaderCellDef> Updated On </th>
+      <td mat-cell *matCellDef="let item">
+        <span *ngIf="item.statusEnum.pendingApproval">
+          {{ item.timeline.submittedOnDate | dateFormat }}
+        </span>
+        <span *ngIf="item.statusEnum.approved">
+          {{ item.timeline.approvedOnDate | dateFormat }}
+        </span>
+        <span *ngIf="item.statusEnum.rejected">
+          {{ item.timeline.rejectedOnDate | dateFormat }}
+        </span>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="actions">
+      <th mat-header-cell *matHeaderCellDef> Actions </th>
+      <td mat-cell *matCellDef="let item">
+        <span *ngIf="item.statusEnum.pendingApproval">
+          <button class="action-button" mat-raised-button color="warn" matTooltip="Reject Reschedule" matTooltipPosition="left"
+          (click)="manageRequest(item, 'Reject')">
+          <fa-icon icon="trash"></fa-icon>
+        </button>
+          <button class="action-button" mat-raised-button color="primary" matTooltip="Approve Reschedule" matTooltipPosition="right"
+            (click)="manageRequest(item, 'Approve')">
+            <fa-icon icon="check"></fa-icon>
+          </button>
+
+        </span>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="loanRescheduleDataColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: loanRescheduleDataColumns;"></tr>
+  </table>
+
+</div>

src/app/loans/loans-view/reschedule-loan-tab/reschedule-loan-tab.component.scss

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

src/app/loans/loans-view/reschedule-loan-tab/reschedule-loan-tab.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RescheduleLoanTabComponent } from './reschedule-loan-tab.component';
+
+describe('RescheduleLoanTabComponent', () => {
+  let component: RescheduleLoanTabComponent;
+  let fixture: ComponentFixture<RescheduleLoanTabComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ RescheduleLoanTabComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RescheduleLoanTabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/loans/loans-view/reschedule-loan-tab/reschedule-loan-tab.component.ts

@@ -0,0 +1,67 @@
+import { Component, OnInit } from '@angular/core';
+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 { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/confirmation-dialog.component';
+
+@Component({
+  selector: 'mifosx-reschedule-loan-tab',
+  templateUrl: './reschedule-loan-tab.component.html',
+  styleUrls: ['./reschedule-loan-tab.component.scss']
+})
+export class RescheduleLoanTabComponent implements OnInit {
+
+  loanRescheduleData: any;
+  loanRescheduleDataColumns: string[] = ['id', 'rescheduleFromDate', 'reason', 'status', 'updatedOnDate', 'actions'];
+  clientId: any;
+
+  constructor(private route: ActivatedRoute,
+    private router: Router,
+    private loansServices: LoansService,
+    private settingsService: SettingsService,
+    private dateUtils: Dates,
+    private dialog: MatDialog) {
+    this.clientId = this.route.parent.parent.snapshot.paramMap.get('clientId');
+    this.route.parent.data.subscribe((data: { loanRescheduleData: any }) => {
+      this.loanRescheduleData = data.loanRescheduleData;
+    });
+  }
+
+  ngOnInit(): void {
+  }
+
+  manageRequest(request: any, command: string): void {
+    const approveLoanRescheduleDialogRef = this.dialog.open(ConfirmationDialogComponent, {
+      data: { heading: `${command} Loan Reschedule`, dialogContext: `Are you sure you want ${command} the Loan Reschedule ${request.id}` }
+    });
+    approveLoanRescheduleDialogRef.afterClosed().subscribe((response: { confirm: any }) => {
+      if (response.confirm) {
+        const locale = this.settingsService.language.code;
+        const dateFormat = this.settingsService.dateFormat;
+        const payload = {
+          dateFormat,
+          locale
+        };
+        if (command === 'Approve') {
+          payload['approvedOnDate'] = this.dateUtils.formatDate(this.settingsService.businessDate, dateFormat);
+        } else {
+          payload['rejectedOnDate'] = this.dateUtils.formatDate(this.settingsService.businessDate, dateFormat);
+        }
+        this.loansServices.applyCommandLoanRescheduleRequests(request.id, command.toLowerCase(), payload).subscribe((result: any) => {
+          this.reload();
+        });
+      }
+    });
+  }
+
+  /**
+   * Refetches data fot the component
+   */
+  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.module.ts

@@ -74,6 +74,7 @@ import { LoansAccountScheduleStepComponent } from './loans-account-stepper/loans
 import { EditRepaymentScheduleComponent } from './loans-view/loan-account-actions/edit-repayment-schedule/edit-repayment-schedule.component';
 import { DisburseToSavingsAccountComponent } from './loans-view/loan-account-actions/disburse-to-savings-account/disburse-to-savings-account.component';
 import { LoansAccountDatatableStepComponent } from './loans-account-stepper/loans-account-datatable-step/loans-account-datatable-step.component';
+import { RescheduleLoanTabComponent } from './loans-view/reschedule-loan-tab/reschedule-loan-tab.component';
 
 /**
  * Loans Module
@@ -146,7 +147,8 @@ import { LoansAccountDatatableStepComponent } from './loans-account-stepper/loan
     LoansAccountScheduleStepComponent,
     EditRepaymentScheduleComponent,
     DisburseToSavingsAccountComponent,
-    LoansAccountDatatableStepComponent
+    LoansAccountDatatableStepComponent,
+    RescheduleLoanTabComponent
   ],
   providers: [ ],
 })

src/app/loans/loans.service.ts

@@ -267,6 +267,22 @@ export class LoansService {
     return this.http.get('/rescheduleloans/template');
   }
 
+  /**
+   * Returns the Loan Reschedule request
+   */
+  loanRescheduleRequests(loanId: any) {
+    const httpParams = new HttpParams().set('loanId', loanId);
+    return this.http.get('/rescheduleloans', { params: httpParams });
+  }
+
+  /**
+   * Returns the Loan Reschedule request
+   */
+  applyCommandLoanRescheduleRequests(rescheduleId: any, command: string, data: any) {
+    const httpParams = new HttpParams().set('command', command);
+    return this.http.post(`/rescheduleloans/${rescheduleId}`, data, { params: httpParams });
+  }
+
   /**
    * Submits Reschedule Data
    * @param {any} data Data

src/app/tasks/checker-inbox-and-tasks-tabs/checker-inbox/checker-inbox.component.html

@@ -8,13 +8,13 @@
     </div>
     <div fxFlex="60%" fxLayoutGap="0.5rem">
       <button mat-raised-button color="success" (click)="approveChecker()">
-        <fa-icon icon="check"></fa-icon>&nbsp;&nbsp;Approve
+        <fa-icon icon="check" class="m-r-10"></fa-icon>Approve
       </button>
       <button mat-raised-button color="warn" (click)="deleteChecker()">
-        <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete
+        <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete
       </button>
       <button mat-raised-button color="reject" (click)="rejectChecker()">
-        <fa-icon icon="times"></fa-icon>&nbsp;&nbsp;Reject
+        <fa-icon icon="times" class="m-r-10"></fa-icon>Reject
       </button>
     </div>
   </div>

src/app/tasks/checker-inbox-and-tasks-tabs/reschedule-loan/reschedule-loan.component.html

@@ -8,8 +8,12 @@
     </div>
     <div fxFlex="60%">
       <button mat-raised-button color="success" *mifosxHasPermission="'APPROVE_LOANRESCHEDULE'"
-        (click)="approveBulkLoanReschedule()">
+        (click)="bulkLoanReschedule('Approve')">
-        <fa-icon icon="check"></fa-icon>&nbsp;&nbsp;Approve
+        <fa-icon icon="check" class="m-r-10"></fa-icon>Approve
+      </button>
+      <button mat-raised-button color="reject" *mifosxHasPermission="'APPROVE_LOANRESCHEDULE'"
+        (click)="bulkLoanReschedule('Reject')">
+        <fa-icon icon="times" class="m-r-10"></fa-icon>Reject
       </button>
     </div>
   </div>
@@ -68,4 +72,4 @@
     No pending rescheduled loan available for this account.
   </div>
 
-</div>
+</div>

src/app/tasks/checker-inbox-and-tasks-tabs/reschedule-loan/reschedule-loan.component.ts

@@ -79,37 +79,40 @@ export class RescheduleLoanComponent implements OnInit {
     return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
   }
 
-  approveBulkLoanReschedule() {
+  bulkLoanReschedule(action: string) {
     const rescheduleLoanDialogRef = this.dialog.open(ConfirmationDialogComponent, {
-      data: { heading: 'Reschedule Loan', dialogContext: 'Are you sure you want to Reschedule Loan' }
+      data: { heading: 'Reschedule Loan', dialogContext: 'Are you sure you want to ' + action + ' the Reschedule Loan' }
     });
     rescheduleLoanDialogRef.afterClosed().subscribe((response: { confirm: any }) => {
       if (response.confirm) {
-        this.bulkLoanRescheduleApproval();
+        this.bulkLoanRescheduleRequest(action.toLowerCase());
       }
     });
   }
 
-  bulkLoanRescheduleApproval() {
+  bulkLoanRescheduleRequest(command: string) {
     const dateFormat = this.settingsService.dateFormat;
-    const approvedOnDate = this.dateUtils.formatDate(new Date(), dateFormat);
+    const transactionDate = this.dateUtils.formatDate(this.settingsService.businessDate, dateFormat);
     const locale = this.settingsService.language.code;
     const formData = {
       dateFormat,
-      approvedOnDate,
       locale
     };
+    if (command === 'approve') {
+      formData['approvedOnDate'] = transactionDate;
+    } else {
+      formData['rejectedOnDate'] = transactionDate;
+    }
     const listSelectedAccounts = this.selection.selected;
     this.batchRequests = [];
     let reqId = 1;
     listSelectedAccounts.forEach((element: any) => {
-      const url = 'rescheduleloans/' + element.id + '?command=approve';
+      const url = 'rescheduleloans/' + element.id + '?command=' + command;
       const bodyData = JSON.stringify(formData);
       const batchData = { requestId: reqId++, relativeUrl: url, method: 'POST', body: bodyData };
       this.batchRequests.push(batchData);
     });
     this.tasksService.submitBatchData(this.batchRequests).subscribe((response: any) => {
-      console.log(response);
       this.reload();
     });
   }

src/app/tasks/view-checker-inbox/view-checker-inbox.component.html

@@ -1,12 +1,12 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="1%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="success" (click)="approveChecker()">
-    <fa-icon icon="check"></fa-icon>&nbsp;&nbsp;Approve
+    <fa-icon icon="check" class="m-r-10"></fa-icon>Approve
   </button>
   <button mat-raised-button color="warn" (click)="deleteChecker()">
-    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete
+    <fa-icon icon="trash" class="m-r-10"></fa-icon>Delete
   </button>
   <button mat-raised-button color="reject" (click)="rejectChecker()">
-    <fa-icon icon="times"></fa-icon>&nbsp;&nbsp;Reject
+    <fa-icon icon="times" class="m-r-10"></fa-icon>Reject
   </button>
 </div>