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]));
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user