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
This commit is contained in:
Muskan Khedia
+139
@@ -0,0 +1,139 @@
|
||||
<div class="tab-container mat-typography" *ngIf="checkerData">
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="start center">
|
||||
<div class="search-box" fxFlex="40%">
|
||||
<mat-form-field fxFlex="90%">
|
||||
<input matInput placeholder="Search by user" (keyup)="applyFilter($event.target.value)">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div fxFlex="60%" fxLayoutGap="0.5rem">
|
||||
<button mat-raised-button color="success" (click)="approveChecker()">
|
||||
<fa-icon icon="check"></fa-icon> Approve
|
||||
</button>
|
||||
<button mat-raised-button color="warn" (click)="deleteChecker()">
|
||||
<fa-icon icon="trash"></fa-icon> Delete
|
||||
</button>
|
||||
<button mat-raised-button color="reject" (click)="rejectChecker()">
|
||||
<fa-icon icon="times"></fa-icon> Reject
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form [formGroup]="makerCheckerSearchForm">
|
||||
|
||||
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
|
||||
|
||||
<mat-form-field fxFlex="31%">
|
||||
<mat-label>From Date</mat-label>
|
||||
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="makerDateTimeFromPicker"
|
||||
formControlName="makerDateTimeFrom">
|
||||
<mat-datepicker-toggle matSuffix [for]="makerDateTimeFromPicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #makerDateTimeFromPicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="31%">
|
||||
<mat-label>To Date</mat-label>
|
||||
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="makerDateTimetoPicker"
|
||||
formControlName="makerDateTimeto">
|
||||
<mat-datepicker-toggle matSuffix [for]="makerDateTimetoPicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #makerDateTimetoPicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="31%">
|
||||
<mat-label>Action</mat-label>
|
||||
<mat-select formControlName="actionName">
|
||||
<mat-option *ngFor="let action of makerCheckerTemplate.actionNames" [value]="action">
|
||||
{{ action }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="31%">
|
||||
<mat-label>Entity</mat-label>
|
||||
<mat-select formControlName="entityName">
|
||||
<mat-option *ngFor="let entity of makerCheckerTemplate.entityNames" [value]="entity">
|
||||
{{ entity }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="31%">
|
||||
<mat-label>Resource ID</mat-label>
|
||||
<input matInput formControlName="resourceId">
|
||||
</mat-form-field>
|
||||
|
||||
<button mat-raised-button color="primary" id="search-button" (click)="search()">Search</button>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<table mat-table [dataSource]="dataSource" *ngIf="!(noSearchedData)">
|
||||
|
||||
<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="id">
|
||||
<th mat-header-cell *matHeaderCellDef> ID </th>
|
||||
<td mat-cell *matCellDef="let makerChecker"> {{ makerChecker.id }} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="madeOnDate">
|
||||
<th mat-header-cell *matHeaderCellDef> Made on Date </th>
|
||||
<td mat-cell *matCellDef="let makerChecker"> {{ makerChecker.madeOnDate | date }} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="status">
|
||||
<th mat-header-cell *matHeaderCellDef> Status </th>
|
||||
<td mat-cell *matCellDef="let makerChecker"> {{ makerChecker.processingResult }} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="user">
|
||||
<th mat-header-cell *matHeaderCellDef> User </th>
|
||||
<td mat-cell *matCellDef="let makerChecker"> {{ makerChecker.maker }} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="action">
|
||||
<th mat-header-cell *matHeaderCellDef> Action </th>
|
||||
<td mat-cell *matCellDef="let makerChecker"> {{ makerChecker.actionName }} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="entity">
|
||||
<th mat-header-cell *matHeaderCellDef> Entity </th>
|
||||
<td mat-cell *matCellDef="let makerChecker"> {{ makerChecker.entityName }} </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 class="alert" *ngIf="noSearchedData">
|
||||
|
||||
<div class="message">
|
||||
<i class="fa fa-exclamation-circle alert-check fa-2x"></i>
|
||||
No checker inbox data available for this search.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="alert" *ngIf="!checkerData">
|
||||
|
||||
<div class="message">
|
||||
<i class="fa fa-exclamation-circle alert-check fa-2x"></i>
|
||||
No checker inbox data available for this account.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,42 @@
|
||||
.tab-container {
|
||||
padding: 1%;
|
||||
margin: 1%;
|
||||
|
||||
.mat-raised-button.mat-success {
|
||||
color: #fff;
|
||||
background-color: #008000ab;
|
||||
}
|
||||
.mat-raised-button.mat-reject {
|
||||
color: #fff;
|
||||
background-color: #FFCA00;
|
||||
}
|
||||
#search-button {
|
||||
height: 2.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { CheckerInboxComponent } from './checker-inbox.component';
|
||||
|
||||
describe('CheckerInboxComponent', () => {
|
||||
let component: CheckerInboxComponent;
|
||||
let fixture: ComponentFixture<CheckerInboxComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ CheckerInboxComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(CheckerInboxComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,206 @@
|
||||
/** Angular Imports */
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { SelectionModel } from '@angular/cdk/collections';
|
||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
||||
import { DatePipe } from '@angular/common';
|
||||
import { MatTableDataSource } from '@angular/material/table';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
|
||||
/** Custom Services */
|
||||
import { TasksService } from '../../tasks.service';
|
||||
import { SettingsService } from 'app/settings/settings.service';
|
||||
|
||||
/** Dialog Components */
|
||||
import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/confirmation-dialog.component';
|
||||
|
||||
@Component({
|
||||
selector: 'mifosx-checker-inbox',
|
||||
templateUrl: './checker-inbox.component.html',
|
||||
styleUrls: ['./checker-inbox.component.scss']
|
||||
})
|
||||
export class CheckerInboxComponent implements OnInit {
|
||||
|
||||
/** Data to be displayed */
|
||||
searchData: any;
|
||||
/** Maker Checker Template */
|
||||
makerCheckerTemplate: any;
|
||||
/** Checks if there is any data based on the search */
|
||||
noSearchedData = false;
|
||||
/** Checks if there is any checker data */
|
||||
checkerData = false;
|
||||
/** Maker Checker Search Form */
|
||||
makerCheckerSearchForm: FormGroup;
|
||||
/** Minimum date allowed. */
|
||||
minDate = new Date(2000, 0, 1);
|
||||
/** Maximum date allowed. */
|
||||
maxDate = new Date(2100, 0, 1);
|
||||
/** DataSource */
|
||||
dataSource: MatTableDataSource<any>;
|
||||
/** Selecting rows from table */
|
||||
selection: SelectionModel<any>;
|
||||
/** Displayed Column in table */
|
||||
displayedColumns: string[] = ['select', 'id', 'madeOnDate', 'status', 'user', 'action', 'entity'];
|
||||
|
||||
/**
|
||||
* Retrieves the maker checker 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.
|
||||
* @param {FormBuilder} formBuilder Form Builder.
|
||||
*/
|
||||
constructor(private route: ActivatedRoute,
|
||||
private dialog: MatDialog,
|
||||
private datePipe: DatePipe,
|
||||
private router: Router,
|
||||
private tasksService: TasksService,
|
||||
private settingsService: SettingsService,
|
||||
private formBuilder: FormBuilder) {
|
||||
this.route.data.subscribe((data: { makerCheckerResource: any, makerCheckerTemplate: any }) => {
|
||||
this.searchData = data.makerCheckerResource;
|
||||
if (this.searchData.length > 0) {
|
||||
this.checkerData = true;
|
||||
}
|
||||
this.makerCheckerTemplate = data.makerCheckerTemplate;
|
||||
this.dataSource = new MatTableDataSource(this.searchData);
|
||||
this.selection = new SelectionModel(true, []);
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.createMakerCheckerSearchForm();
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates the standing instruction form.
|
||||
*/
|
||||
createMakerCheckerSearchForm() {
|
||||
this.makerCheckerSearchForm = this.formBuilder.group({
|
||||
'makerDateTimeFrom': [''],
|
||||
'makerDateTimeto': [''],
|
||||
'actionName': [''],
|
||||
'entityName': [''],
|
||||
'resourceId': ['']
|
||||
});
|
||||
}
|
||||
|
||||
search() {
|
||||
const dateFormat = this.settingsService.dateFormat;
|
||||
const makerCheckerSearchParams = {
|
||||
...this.makerCheckerSearchForm.value,
|
||||
makerDateTimeFrom: this.datePipe.transform(this.makerCheckerSearchForm.value.makerDateTimeFrom, dateFormat),
|
||||
makerDateTimeto: this.datePipe.transform(this.makerCheckerSearchForm.value.makerDateTimeto, dateFormat)
|
||||
};
|
||||
this.tasksService.getMakerCheckerData(makerCheckerSearchParams).subscribe((response: any) => {
|
||||
this.searchData = response;
|
||||
if (this.searchData.length === 0) {
|
||||
this.noSearchedData = true;
|
||||
} else {
|
||||
this.noSearchedData = false;
|
||||
}
|
||||
this.dataSource = new MatTableDataSource(this.searchData);
|
||||
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}`;
|
||||
}
|
||||
|
||||
approveChecker() {
|
||||
const approveCheckerDialogRef = this.dialog.open(ConfirmationDialogComponent, {
|
||||
data: { heading: 'Approve Checker', dialogContext: 'Are you sure you want to approve checker' }
|
||||
});
|
||||
approveCheckerDialogRef.afterClosed().subscribe((response: { confirm: any }) => {
|
||||
if (response.confirm) {
|
||||
this.bulkCheckerApproveorReject('approve');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
rejectChecker() {
|
||||
const rejectCheckerDialogRef = this.dialog.open(ConfirmationDialogComponent, {
|
||||
data: { heading: 'Reject Checker', dialogContext: 'Are you sure you want to reject checker' }
|
||||
});
|
||||
rejectCheckerDialogRef.afterClosed().subscribe((response: { confirm: any }) => {
|
||||
if (response.confirm) {
|
||||
this.bulkCheckerApproveorReject('reject');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
deleteChecker() {
|
||||
const deleteCheckerDialogRef = this.dialog.open(ConfirmationDialogComponent, {
|
||||
data: { heading: 'Delete Checker', dialogContext: 'Are you sure you want to delete checker' }
|
||||
});
|
||||
deleteCheckerDialogRef.afterClosed().subscribe((response: { confirm: any }) => {
|
||||
if (response.confirm) {
|
||||
this.bulkDeleteChecker();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
bulkCheckerApproveorReject(action: any) {
|
||||
const selectedAccounts = this.selection.selected.length;
|
||||
const listSelectedAccounts = this.selection.selected;
|
||||
let approvedAccounts = 0;
|
||||
listSelectedAccounts.forEach((element: any) => {
|
||||
this.tasksService.executeMakerCheckerAction(element.id, action).subscribe((response: any) => {
|
||||
approvedAccounts++;
|
||||
if (selectedAccounts === approvedAccounts) {
|
||||
this.reload();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
bulkDeleteChecker() {
|
||||
const selectedAccounts = this.selection.selected.length;
|
||||
const listSelectedAccounts = this.selection.selected;
|
||||
let approvedAccounts = 0;
|
||||
listSelectedAccounts.forEach((element: any) => {
|
||||
this.tasksService.deleteMakerChecker(element.id).subscribe((response: any) => {
|
||||
approvedAccounts++;
|
||||
if (selectedAccounts === approvedAccounts) {
|
||||
this.reload();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
applyFilter(filterValue: string = '') {
|
||||
this.dataSource.filter = filterValue.trim().toLowerCase();
|
||||
}
|
||||
|
||||
/**
|
||||
* Refetches data for the component
|
||||
* TODO: Replace by a custom reload component instead of hard-coded back-routing.
|
||||
*/
|
||||
reload() {
|
||||
const url: string = this.router.url;
|
||||
this.router.navigateByUrl(`/checker-inbox-and-tasks`, { skipLocationChange: true })
|
||||
.then(() => this.router.navigate([url]));
|
||||
}
|
||||
|
||||
}
|
||||
+71
@@ -0,0 +1,71 @@
|
||||
<div class="tab-container mat-typography" *ngIf="showData">
|
||||
|
||||
<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="'ACTIVATE_CLIENT'"
|
||||
(click)="approveClients()">
|
||||
<fa-icon icon="check"></fa-icon> Approve
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ng-container *ngFor="let client of groupedClients | keyvalue">
|
||||
|
||||
<h3> {{client.key}} </h3>
|
||||
|
||||
<ng-container *ngIf="client.value.length > 0">
|
||||
|
||||
<table mat-table [dataSource]="client.value|accountsFilter:'clientApproval'">
|
||||
|
||||
<ng-container matColumnDef="select">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<mat-checkbox (change)="$event ? masterToggle(client.value) : null" [checked]="selection.hasValue() && isAllSelected(client.value)"
|
||||
[indeterminate]="selection.hasValue() && !isAllSelected(client.value)" [aria-label]="checkboxLabel(client.value)">
|
||||
</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="name">
|
||||
<th mat-header-cell *matHeaderCellDef> Name </th>
|
||||
<td mat-cell *matCellDef="let element" class="view-details" [routerLink]="['../../clients', element.id]"> {{ element.displayName }} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="accountNumber">
|
||||
<th mat-header-cell *matHeaderCellDef> AccountNumber </th>
|
||||
<td mat-cell *matCellDef="let element" class="view-details" [routerLink]="['../../clients', element.id]"> {{ element.accountNo }} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="staff">
|
||||
<th mat-header-cell *matHeaderCellDef> Staff </th>
|
||||
<td mat-cell *matCellDef="let element" class="view-details" [routerLink]="['../../clients', element.id]"> {{ element.staffName }} </td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="alert" *ngIf="!(showData)">
|
||||
|
||||
<div class="message">
|
||||
<i class="fa fa-exclamation-circle alert-check"></i>
|
||||
No pending loans for approval.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
+35
@@ -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;
|
||||
}
|
||||
}
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ClientApprovalComponent } from './client-approval.component';
|
||||
|
||||
describe('ClientApprovalComponent', () => {
|
||||
let component: ClientApprovalComponent;
|
||||
let fixture: ComponentFixture<ClientApprovalComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ClientApprovalComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ClientApprovalComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
+159
@@ -0,0 +1,159 @@
|
||||
/** Angular Imports */
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { SelectionModel } from '@angular/cdk/collections';
|
||||
import * as _ from 'lodash';
|
||||
import { DatePipe } from '@angular/common';
|
||||
import { MatTableDataSource } from '@angular/material/table';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
|
||||
/** Dialog Imports */
|
||||
import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
|
||||
import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
|
||||
import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
|
||||
|
||||
/** Custom Services */
|
||||
import { TasksService } from '../../tasks.service';
|
||||
import { SettingsService } from 'app/settings/settings.service';
|
||||
|
||||
@Component({
|
||||
selector: 'mifosx-client-approval',
|
||||
templateUrl: './client-approval.component.html',
|
||||
styleUrls: ['./client-approval.component.scss']
|
||||
})
|
||||
export class ClientApprovalComponent {
|
||||
|
||||
/** Grouped Clients Data */
|
||||
groupedClients: any;
|
||||
/** Checks to show the data */
|
||||
showData = false;
|
||||
/** Batch Requests */
|
||||
batchRequests: any[];
|
||||
/** Datasource */
|
||||
dataSource: MatTableDataSource<any>;
|
||||
/** Row Selection Data */
|
||||
selection: SelectionModel<any>;
|
||||
/** Displayed Columns */
|
||||
displayedColumns: string[] = ['select', 'name', 'accountNumber', 'staff'];
|
||||
|
||||
/**
|
||||
* Retrieves the grouped client 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 router: Router,
|
||||
private settingsService: SettingsService,
|
||||
private tasksService: TasksService) {
|
||||
this.route.data.subscribe((data: { groupedClientData: any }) => {
|
||||
this.groupedClients = _.groupBy(data.groupedClientData.pageItems, 'officeName');
|
||||
if (Object.keys(this.groupedClients).length) {
|
||||
this.showData = true;
|
||||
}
|
||||
this.dataSource = new MatTableDataSource(data.groupedClientData.pageItems);
|
||||
this.selection = new SelectionModel(true, []);
|
||||
});
|
||||
}
|
||||
|
||||
/** Whether the number of selected elements matches the total number of rows. */
|
||||
isAllSelected(dataSource2: any) {
|
||||
if (dataSource2) {
|
||||
const numSelected = this.selection.selected;
|
||||
return _.difference(dataSource2, numSelected).length === 0;
|
||||
}
|
||||
}
|
||||
|
||||
/** Selects all rows if they are not all selected; otherwise clear selection. */
|
||||
masterToggle(dataSource3: any) {
|
||||
if (dataSource3) {
|
||||
this.isAllSelected(dataSource3) ?
|
||||
dataSource3.forEach((row: any) => this.selection.deselect(row)) :
|
||||
dataSource3.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(row) ? 'select' : 'deselect'} all`;
|
||||
}
|
||||
return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
|
||||
}
|
||||
|
||||
approveClients() {
|
||||
const formfields: FormfieldBase[] = [
|
||||
new DatepickerBase({
|
||||
controlName: 'actDate',
|
||||
label: 'Date',
|
||||
value: new Date(),
|
||||
type: 'datetime-local',
|
||||
required: true
|
||||
}),
|
||||
];
|
||||
const data = {
|
||||
title: 'Enter Clients Activation Date',
|
||||
layout: { addButtonText: 'Confirm' },
|
||||
formfields: formfields
|
||||
};
|
||||
const clientApprovalDialogRef = this.dialog.open(FormDialogComponent, { data });
|
||||
clientApprovalDialogRef.afterClosed().subscribe((response: any) => {
|
||||
if (response.data) {
|
||||
this.bulkClientApproval(response.data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
bulkClientApproval(submittedData: any) {
|
||||
const dateFormat = this.settingsService.dateFormat;
|
||||
const activationDate = this.datePipe.transform(submittedData.value.actDate, dateFormat);
|
||||
const locale = this.settingsService.language.code;
|
||||
const formData = {
|
||||
dateFormat,
|
||||
activationDate,
|
||||
locale
|
||||
};
|
||||
const selectedAccounts = this.selection.selected.length;
|
||||
const listSelectedAccounts = this.selection.selected;
|
||||
let activatedAccounts = 0;
|
||||
this.batchRequests = [];
|
||||
let reqId = 1;
|
||||
listSelectedAccounts.forEach((element: any) => {
|
||||
const url = 'clients/' + element.id + '?command=activate';
|
||||
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) => {
|
||||
response.forEach((responseEle: any) => {
|
||||
if (responseEle.statusCode = '200') {
|
||||
activatedAccounts++;
|
||||
responseEle.body = JSON.parse(responseEle.body);
|
||||
if (selectedAccounts === activatedAccounts) {
|
||||
this.reload();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
applyFilter(filterValue: string = '') {
|
||||
this.dataSource.filter = filterValue.trim().toLowerCase();
|
||||
}
|
||||
|
||||
/**
|
||||
* Refetches data for the component
|
||||
* TODO: Replace by a custom reload component instead of hard-coded back-routing.
|
||||
*/
|
||||
reload() {
|
||||
const url: string = this.router.url;
|
||||
this.router.navigateByUrl(`/checker-inbox-and-tasks`, { skipLocationChange: true })
|
||||
.then(() => this.router.navigate([url]));
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
<div class="tab-container mat-typography" *ngIf="showData">
|
||||
|
||||
<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)="approveLoan()">
|
||||
<fa-icon icon="check"></fa-icon> Approve
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ng-container *ngFor="let office of officesArray">
|
||||
|
||||
<h3 class="mat-h3">{{ office.name }}</h3>
|
||||
|
||||
<ng-container *ngIf="office.loans.length > 0">
|
||||
|
||||
<table mat-table [dataSource]="office.loans">
|
||||
|
||||
<ng-container matColumnDef="select">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<mat-checkbox (change)="$event ? masterToggle(office.loans) : null"
|
||||
[checked]="selection.hasValue() && isAllSelected(office.loans)"
|
||||
[indeterminate]="selection.hasValue() && !isAllSelected(office.loans)" [aria-label]="checkboxLabel(office.loans)">
|
||||
</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="clientName">
|
||||
<th mat-header-cell *matHeaderCellDef> Client </th>
|
||||
<td mat-cell *matCellDef="let loan" class="view-details" [routerLink]="['../../clients', loan.clientId, 'general']">
|
||||
{{ loan.clientName }} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="loan">
|
||||
<th mat-header-cell *matHeaderCellDef> Loan </th>
|
||||
<td mat-cell *matCellDef="let loan" class="view-details" [routerLink]="['../../clients', loan.clientId, 'loans', 'loan.id']">
|
||||
{{ loan.loanProductName}}({{loan.accountNo}}) </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="amount">
|
||||
<th mat-header-cell *matHeaderCellDef> Amount </th>
|
||||
<td mat-cell *matCellDef="let loan"> {{ loan.principal | number}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="loanPurpose">
|
||||
<th mat-header-cell *matHeaderCellDef> Loan Purpose </th>
|
||||
<td mat-cell *matCellDef="let loan"> {{ loan.loanPurposeName }} </td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="alert" *ngIf="!(showData)">
|
||||
|
||||
<div class="message">
|
||||
<i class="fa fa-exclamation-circle alert-check"></i>
|
||||
No pending loans for approval.
|
||||
</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;
|
||||
}
|
||||
}
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { LoanApprovalComponent } from './loan-approval.component';
|
||||
|
||||
describe('LoanApprovalComponent', () => {
|
||||
let component: LoanApprovalComponent;
|
||||
let fixture: ComponentFixture<LoanApprovalComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ LoanApprovalComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(LoanApprovalComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,192 @@
|
||||
/** Angular Imports */
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { SelectionModel } from '@angular/cdk/collections';
|
||||
import * as _ from 'lodash';
|
||||
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-approval',
|
||||
templateUrl: './loan-approval.component.html',
|
||||
styleUrls: ['./loan-approval.component.scss']
|
||||
})
|
||||
export class LoanApprovalComponent {
|
||||
// settingsService: SettingsService;
|
||||
/** Offices Data */
|
||||
offices: any;
|
||||
/** Loans Data */
|
||||
loans: any;
|
||||
/** Checks whether to show data or not */
|
||||
showData = false;
|
||||
/** Data source for loans approval table. */
|
||||
dataSource: MatTableDataSource<any>;
|
||||
/** Row Selection Data */
|
||||
selection: SelectionModel<any>;
|
||||
/** Map data */
|
||||
idToNodeMap = {};
|
||||
/** Grouped Office Data */
|
||||
officesArray: any[];
|
||||
/** List of Requests */
|
||||
batchRequests: any[];
|
||||
/** Displayed Columns */
|
||||
displayedColumns: string[] = ['select', 'clientName', 'loan', 'amount', 'loanPurpose'];
|
||||
|
||||
/**
|
||||
* Retrieves the offices and 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 router: Router,
|
||||
private settingsService: SettingsService,
|
||||
private tasksService: TasksService) {
|
||||
this.route.data.subscribe((data: { officesData: any, loansData: any }) => {
|
||||
this.offices = data.officesData;
|
||||
this.loans = data.loansData.pageItems;
|
||||
this.setOfficeData();
|
||||
});
|
||||
}
|
||||
|
||||
/** Group Office Data */
|
||||
setOfficeData() {
|
||||
this.offices.forEach((officeEle: any) => {
|
||||
officeEle.loans = [];
|
||||
this.idToNodeMap[officeEle.id] = officeEle;
|
||||
});
|
||||
this.loans.forEach((loanEle: any) => {
|
||||
if (loanEle.status.pendingApproval) {
|
||||
let tempOffice = {};
|
||||
if (loanEle.clientOfficeId) {
|
||||
tempOffice = this.idToNodeMap[loanEle.clientOfficeId];
|
||||
tempOffice['loans'].push(loanEle);
|
||||
} else {
|
||||
if (loanEle.group) {
|
||||
tempOffice = this.idToNodeMap[loanEle.group.officeId];
|
||||
tempOffice['loans'].push(loanEle);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
const finalArray: any[] = [];
|
||||
this.offices.forEach((officeEle: any) => {
|
||||
if (officeEle.loans && officeEle.loans.length > 0) {
|
||||
this.showData = true;
|
||||
finalArray.push(officeEle);
|
||||
}
|
||||
});
|
||||
this.officesArray = finalArray;
|
||||
this.dataSource = new MatTableDataSource(this.officesArray);
|
||||
this.selection = new SelectionModel(true, []);
|
||||
}
|
||||
|
||||
/** Whether the number of selected elements matches the total number of rows. */
|
||||
isAllSelected(dataSource2: any) {
|
||||
if (dataSource2) {
|
||||
const numSelected = this.selection.selected;
|
||||
return _.difference(dataSource2, numSelected).length === 0;
|
||||
}
|
||||
}
|
||||
|
||||
/** Selects all rows if they are not all selected; otherwise clear selection. */
|
||||
masterToggle(dataSource3: any) {
|
||||
if (dataSource3) {
|
||||
this.isAllSelected(dataSource3) ?
|
||||
dataSource3.forEach((row: any) => this.selection.deselect(row)) :
|
||||
dataSource3.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(row) ? 'select' : 'deselect'} all`;
|
||||
}
|
||||
return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
|
||||
}
|
||||
|
||||
approveLoan() {
|
||||
const approveLoanDialogRef = this.dialog.open(ConfirmationDialogComponent, {
|
||||
data: { heading: 'Approve Loan', dialogContext: 'Are you sure you want to Approve Loan' }
|
||||
});
|
||||
approveLoanDialogRef.afterClosed().subscribe((response: { confirm: any }) => {
|
||||
if (response.confirm) {
|
||||
this.bulkLoanApproval();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
bulkLoanApproval() {
|
||||
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=approve';
|
||||
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) => {
|
||||
response.forEach((responseEle: any) => {
|
||||
if (responseEle.statusCode = '200') {
|
||||
approvedAccounts++;
|
||||
responseEle.body = JSON.parse(responseEle.body);
|
||||
if (selectedAccounts === approvedAccounts) {
|
||||
this.loanResource();
|
||||
}
|
||||
}
|
||||
});
|
||||
this.reload();
|
||||
});
|
||||
}
|
||||
|
||||
applyFilter(filterValue: string = '') {
|
||||
this.dataSource.filter = filterValue.trim().toLowerCase();
|
||||
}
|
||||
|
||||
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, []);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Refetches data for the component
|
||||
* TODO: Replace by a custom reload component instead of hard-coded back-routing.
|
||||
*/
|
||||
reload() {
|
||||
const url: string = this.router.url;
|
||||
this.router.navigateByUrl(`/checker-inbox-and-tasks`, { skipLocationChange: true })
|
||||
.then(() => this.router.navigate([url]));
|
||||
}
|
||||
|
||||
}
|
||||
+65
@@ -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> 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>
|
||||
+35
@@ -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;
|
||||
}
|
||||
}
|
||||
+25
@@ -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();
|
||||
});
|
||||
});
|
||||
+140
@@ -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();
|
||||
}
|
||||
|
||||
}
|
||||
+71
@@ -0,0 +1,71 @@
|
||||
<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_LOANRESCHEDULE'"
|
||||
(click)="approveBulkLoanReschedule()">
|
||||
<fa-icon icon="check"></fa-icon> Approve
|
||||
</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 </th>
|
||||
<td mat-cell *matCellDef="let loan" class="view-details" [routerLink]="['../../clients', loan.clientId , 'general']"> {{loan.clientName}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="rescheduleRequestNo">
|
||||
<th mat-header-cell *matHeaderCellDef> Reschedule Request# </th>
|
||||
<td mat-cell *matCellDef="let loan"> {{loan.id}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="loanAccountNo">
|
||||
<th mat-header-cell *matHeaderCellDef> Loan Account# </th>
|
||||
<td mat-cell *matCellDef="let loan" class="view-details" [routerLink]="['../../clients', loan.clientId , 'loans', loan.loanId, 'general']"> {{loan.loanAccountNumber}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="rescheduleForm">
|
||||
<th mat-header-cell *matHeaderCellDef> Reschedule Form </th>
|
||||
<td mat-cell *matCellDef="let loan"> {{loan.rescheduleFromDate | date}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="rescheduleReason">
|
||||
<th mat-header-cell *matHeaderCellDef> Reschedule Reason </th>
|
||||
<td mat-cell *matCellDef="let loan"> {{loan.rescheduleReasonCodeValue.name}} </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 rescheduled loan available for this account.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
+35
@@ -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;
|
||||
}
|
||||
}
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { RescheduleLoanComponent } from './reschedule-loan.component';
|
||||
|
||||
describe('RescheduleLoanComponent', () => {
|
||||
let component: RescheduleLoanComponent;
|
||||
let fixture: ComponentFixture<RescheduleLoanComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ RescheduleLoanComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(RescheduleLoanComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
+132
@@ -0,0 +1,132 @@
|
||||
/** 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 * as _ from 'lodash';
|
||||
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 { SettingsRoutingModule } from 'app/settings/settings-routing.module';
|
||||
import { SettingsService } from 'app/settings/settings.service';
|
||||
|
||||
@Component({
|
||||
selector: 'mifosx-reschedule-loan',
|
||||
templateUrl: './reschedule-loan.component.html',
|
||||
styleUrls: ['./reschedule-loan.component.scss']
|
||||
})
|
||||
export class RescheduleLoanComponent implements OnInit {
|
||||
|
||||
/** Loans Data */
|
||||
loans: any;
|
||||
/** Datasource */
|
||||
dataSource: MatTableDataSource<any>;
|
||||
/** Rows Selection Data */
|
||||
selection: SelectionModel<any>;
|
||||
/** Batch Requests */
|
||||
batchRequests: any[];
|
||||
/** Displayed Columns */
|
||||
displayedColumns: string[] = ['select', 'client', 'rescheduleRequestNo', 'loanAccountNo', 'rescheduleForm', 'rescheduleReason'];
|
||||
|
||||
/**
|
||||
* Retrieves the reschedule loan 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 router: Router,
|
||||
private settingsService: SettingsService,
|
||||
private tasksService: TasksService) {
|
||||
this.route.data.subscribe((data: { recheduleLoansData: any }) => {
|
||||
this.loans = data.recheduleLoansData;
|
||||
this.dataSource = new MatTableDataSource(this.loans);
|
||||
this.selection = new SelectionModel(true, []);
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
/** 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}`;
|
||||
}
|
||||
|
||||
approveBulkLoanReschedule() {
|
||||
const rescheduleLoanDialogRef = this.dialog.open(ConfirmationDialogComponent, {
|
||||
data: { heading: 'Reschedule Loan', dialogContext: 'Are you sure you want to Reschedule Loan' }
|
||||
});
|
||||
rescheduleLoanDialogRef.afterClosed().subscribe((response: { confirm: any }) => {
|
||||
if (response.confirm) {
|
||||
this.bulkLoanRescheduleApproval();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
bulkLoanRescheduleApproval() {
|
||||
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 listSelectedAccounts = this.selection.selected;
|
||||
this.batchRequests = [];
|
||||
let reqId = 1;
|
||||
listSelectedAccounts.forEach((element: any) => {
|
||||
const url = 'rescheduleloans/' + element.id + '?command=approve';
|
||||
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();
|
||||
});
|
||||
}
|
||||
|
||||
applyFilter(filterValue: string = '') {
|
||||
this.dataSource.filter = filterValue.trim().toLowerCase();
|
||||
}
|
||||
|
||||
/**
|
||||
* Refetches data fot the component
|
||||
* TODO: Replace by a custom reload component instead of hard-coded back-routing.
|
||||
*/
|
||||
reload() {
|
||||
const url: string = this.router.url;
|
||||
this.router.navigateByUrl(`/checker-inbox-and-tasks`, { skipLocationChange: true })
|
||||
.then(() => this.router.navigate([url]));
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user