Loan Reschedule management in Loan Account (#1637)

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

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]));
+  }
+}