feat: add checker inbox and tasks (#1218)

- add checker inbox - add client approval - add loan disbursal - add loan approval - add reschedule loan Fixes: #252, #1217
2020-08-23 15:38:48 +05:30
parent 3e21227056
commit 432d16d41f
39 changed files with 2081 additions and 2 deletions
@@ -0,0 +1,65 @@
+<div class="tab-container mat-typography" *ngIf="loans.length > 0">
+
+  <div fxLayout="row" fxLayoutAlign="start center">
+    <div class="search-box" fxFlex="40%">
+      <mat-form-field fxFlex="90%">
+        <input matInput placeholder="Filter by name" (keyup)="applyFilter($event.target.value)">
+      </mat-form-field>
+    </div>
+    <div fxFlex="60%">
+      <button mat-raised-button color="success" *mifosxHasPermission="'APPROVE_LOAN'" (click)="disburseLoan()">
+        <fa-icon icon="check"></fa-icon>&nbsp;&nbsp;Disburse
+      </button>
+    </div>
+  </div>
+
+  <table mat-table [dataSource]="dataSource">
+
+    <ng-container matColumnDef="select">
+      <th mat-header-cell *matHeaderCellDef>
+        <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()"
+          [indeterminate]="selection.hasValue() && !isAllSelected()" [aria-label]="checkboxLabel()">
+        </mat-checkbox>
+      </th>
+      <td mat-cell *matCellDef="let row">
+        <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
+          [checked]="selection.isSelected(row)" [aria-label]="checkboxLabel(row)">
+        </mat-checkbox>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="client">
+      <th mat-header-cell *matHeaderCellDef> Client Name </th>
+      <td mat-cell *matCellDef="let loan" class="view-details" [routerLink]="['../../clients', loan.clientId, 'general']"> {{loan.clientName}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="loanAccountNumber">
+      <th mat-header-cell *matHeaderCellDef> Loan Account# </th>
+      <td mat-cell *matCellDef="let loan" class="view-details" [routerLink]="['../../clients', loan.clientId, 'loans', loan.id, 'general']"> {{loan.accountNo}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="loanProduct">
+      <th mat-header-cell *matHeaderCellDef> Loan Product </th>
+      <td mat-cell *matCellDef="let loan" class="view-details" [routerLink]="['../../clients', loan.clientId, 'loans', loan.id, 'general']"> {{loan.loanProductName}} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="principal">
+      <th mat-header-cell *matHeaderCellDef> Principal </th>
+      <td mat-cell *matCellDef="let loan"> {{loan.principal | number}} </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">
+    </tr>
+  </table>
+
+</div>
+
+<div class="alert" *ngIf="loans.length === 0">
+
+  <div class="message">
+    <i class="fa fa-exclamation-circle alert-check"></i>
+    No pending loan available for disbursal.
+  </div>
+
+</div>
@@ -0,0 +1,35 @@
+.tab-container {
+  padding: 1%;
+  margin: 1%;
+
+  .mat-raised-button.mat-success {
+    color: #fff;
+    background-color: #008000ab;
+  }
+
+  .view-details{
+    cursor: pointer;
+  }
+}
+
+.alert {
+  background-color: #E8F4FD;
+  padding: 6px 16px;
+  font-size: 0.875rem;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-weight: 400;
+  line-height: 1.43;
+  border-radius: 4px;
+  letter-spacing: 0.01071em;
+  margin: 10px;
+
+  .message {
+    padding: 8px 0;
+    font-size: 18px;
+  }
+  .alert-check {
+    color:#359FF4;
+    margin-right: 2px;
+    font-size: 1.4rem;
+  }
+}
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoanDisbursalComponent } from './loan-disbursal.component';
+
+describe('LoanDisbursalComponent', () => {
+  let component: LoanDisbursalComponent;
+  let fixture: ComponentFixture<LoanDisbursalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoanDisbursalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoanDisbursalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,140 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { SelectionModel } from '@angular/cdk/collections';
+import { DatePipe } from '@angular/common';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatDialog } from '@angular/material/dialog';
+
+/** Dialog Imports */
+import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/confirmation-dialog.component';
+
+/** Custom Services */
+import { TasksService } from '../../tasks.service';
+import { SettingsService } from 'app/settings/settings.service';
+
+@Component({
+  selector: 'mifosx-loan-disbursal',
+  templateUrl: './loan-disbursal.component.html',
+  styleUrls: ['./loan-disbursal.component.scss']
+})
+export class LoanDisbursalComponent {
+
+  /** Loans Data */
+  loans: any;
+  /** Batch Requests */
+  batchRequests: any[];
+  /** Datasource for loans disbursal table */
+  dataSource: MatTableDataSource<any>;
+  /** Row Selection */
+  selection: SelectionModel<any>;
+  /** Displayed Columns for loan disbursal data */
+  displayedColumns: string[] = ['select', 'client', 'loanAccountNumber', 'loanProduct', 'principal'];
+
+  /**
+   * Retrieves the loans data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Dialog} dialog MatDialog.
+   * @param {DatePipe} datePipe Date Pipe.
+   * @param {router} router Router.
+   * @param {SettingsService} settingsService Settings Service.
+   * @param {TasksService} tasksService Tasks Service.
+   */
+  constructor(private route: ActivatedRoute,
+    private dialog: MatDialog,
+    private datePipe: DatePipe,
+    private settingsService: SettingsService,
+    private tasksService: TasksService) {
+    this.route.data.subscribe((data: { loansData: any }) => {
+      this.loans = data.loansData.pageItems;
+      this.loans = this.loans.filter((account: any) => {
+        return (account.status.waitingForDisbursal === true);
+      });
+      this.dataSource = new MatTableDataSource(this.loans);
+      this.selection = new SelectionModel(true, []);
+    });
+  }
+
+  /** Whether the number of selected elements matches the total number of rows. */
+  isAllSelected() {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.dataSource.data.length;
+    return numSelected === numRows;
+  }
+
+  /** Selects all rows if they are not all selected; otherwise clear selection. */
+  masterToggle() {
+    this.isAllSelected() ?
+      this.selection.clear() :
+      this.dataSource.data.forEach((row: any) => this.selection.select(row));
+  }
+
+  /** The label for the checkbox on the passed row */
+  checkboxLabel(row?: any): string {
+    if (!row) {
+      return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
+    }
+    return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
+  }
+
+  disburseLoan() {
+    const disburseLoanDialogRef = this.dialog.open(ConfirmationDialogComponent, {
+      data: { heading: 'Loan Disbursal', dialogContext: 'Are you sure you want to Disburse Loan' }
+    });
+    disburseLoanDialogRef.afterClosed().subscribe((response: { confirm: any }) => {
+      if (response.confirm) {
+        this.bulkLoanDisbursal();
+      }
+    });
+  }
+
+  bulkLoanDisbursal() {
+    const dateFormat = this.settingsService.dateFormat;
+    const approvedOnDate = this.datePipe.transform(new Date(), dateFormat);
+    const locale = this.settingsService.language.code;
+    const formData = {
+      dateFormat,
+      approvedOnDate,
+      locale
+    };
+    const selectedAccounts = this.selection.selected.length;
+    const listSelectedAccounts = this.selection.selected;
+    let approvedAccounts = 0;
+    this.batchRequests = [];
+    let reqId = 1;
+    listSelectedAccounts.forEach((element: any) => {
+      const url = 'loans/' + element.id + '?command=disburse';
+      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);
+      response.forEach((responseEle: any) => {
+        if (responseEle.statusCode = '200') {
+          approvedAccounts++;
+          responseEle.body = JSON.parse(responseEle.body);
+          if (selectedAccounts === approvedAccounts) {
+            this.loanResource();
+          }
+        }
+      });
+    });
+  }
+
+  loanResource() {
+    this.tasksService.getAllLoans().subscribe((response: any) => {
+      this.loans = response.pageItems;
+      this.loans = this.loans.filter((account: any) => {
+        return (account.status.waitingForDisbursal === true);
+      });
+      this.dataSource = new MatTableDataSource(this.loans);
+      this.selection = new SelectionModel(true, []);
+    });
+  }
+
+  applyFilter(filterValue: string = '') {
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
+}