Enhancement/inverstor search data (#1838)
* Investor Search data * Investor module --------- Co-authored-by: Jose Alberto Hernandez <alberto@blue-daemon.local>
This commit is contained in:
José Alberto Hernández
co-authored by
Jose Alberto Hernandez
Jose Alberto Hernandez
parent
861cf7a000
commit
ed47d769e3
@@ -1,84 +1,145 @@
|
||||
<div class="container" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
|
||||
<mat-card class="container">
|
||||
|
||||
<mat-form-field fxFlex="31%">
|
||||
<mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
|
||||
<mat-select [formControl]="entryTypeFilter">
|
||||
<mat-option *ngFor="let filter of entryTypeFilterData" [value]="filter.value">
|
||||
{{ filter.option }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
|
||||
|
||||
<mat-form-field fxFlex="31%" (click)="transferDateFromPicker.open()">
|
||||
<mat-label>Transfer Date From</mat-label>
|
||||
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transferDateFromPicker" [formControl]="transferDateFrom">
|
||||
<mat-datepicker-toggle matSuffix [for]="transferDateFromPicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #transferDateFromPicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="22%" (click)="effectiveFromDatePicker.open()">
|
||||
<mat-label>Effective Date From</mat-label>
|
||||
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="effectiveFromDatePicker"
|
||||
[formControl]="effectiveFromDate">
|
||||
<mat-datepicker-toggle matSuffix [for]="effectiveFromDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #effectiveFromDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="31%" (click)="transferDateToPicker.open()">
|
||||
<mat-label>Transfer Date To</mat-label>
|
||||
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transferDateToPicker" [formControl]="transferDateTo">
|
||||
<mat-datepicker-toggle matSuffix [for]="transferDateToPicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #transferDateToPicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="22%" (click)="effectiveToDatePicker.open()">
|
||||
<mat-label>Effective Date To</mat-label>
|
||||
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="effectiveToDatePicker"
|
||||
[formControl]="effectiveToDate">
|
||||
<mat-datepicker-toggle matSuffix [for]="effectiveToDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #effectiveToDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="31%">
|
||||
<mat-label>Transfer External Id</mat-label>
|
||||
<input matInput [formControl]="transferExternalId">
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="22%" (click)="settlementFromDatePicker.open()">
|
||||
<mat-label>Settlement Date From</mat-label>
|
||||
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="settlementFromDatePicker"
|
||||
[formControl]="settlementFromDate">
|
||||
<mat-datepicker-toggle matSuffix [for]="settlementFromDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #settlementFromDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
<mat-form-field fxFlex="22%" (click)="settlementToDatePicker.open()">
|
||||
<mat-label>Settlement Date To</mat-label>
|
||||
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="settlementToDatePicker"
|
||||
[formControl]="settlementToDate">
|
||||
<mat-datepicker-toggle matSuffix [for]="settlementToDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #settlementToDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<div class="mat-elevation-z8 container">
|
||||
<mat-form-field fxFlex="60%">
|
||||
<mat-label>Transaction ID</mat-label>
|
||||
<input matInput [formControl]="searchText">
|
||||
</mat-form-field>
|
||||
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
|
||||
<ng-container matColumnDef="investor">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Investor </th>
|
||||
<td mat-cell *matCellDef="let item"> </td>
|
||||
<ng-container fxFlex="40%" class="right">
|
||||
<button mat-raised-button color="primary" (click)="searchEAO()">
|
||||
<fa-icon icon="search" class="m-r-10"></fa-icon> Search
|
||||
</button>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<ng-container matColumnDef="loanAccount">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Loan </th>
|
||||
<td mat-cell *matCellDef="let item"> </td>
|
||||
</ng-container>
|
||||
<div class="mat-elevation-z8 container">
|
||||
<mat-progress-bar mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>
|
||||
|
||||
<ng-container matColumnDef="totalAmount">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Total Amount </th>
|
||||
<td mat-cell *matCellDef="let item"> </td>
|
||||
</ng-container>
|
||||
<table mat-table [dataSource]="dataSource" matSort *ngIf="existsDataToFilter" multiTemplateDataRows>
|
||||
|
||||
<ng-container matColumnDef="principal">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Principal </th>
|
||||
<td mat-cell *matCellDef="let item"> </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="status">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
|
||||
<td mat-cell *matCellDef="let item">
|
||||
<div [ngClass]="itemStatus(item.status)">
|
||||
<fa-icon icon="stop"></fa-icon>
|
||||
<span class="m-l-10 status">{{item.status}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="interest">
|
||||
<th mat-header-cell *matHeaderCellDef> Interest </th>
|
||||
<td mat-cell *matCellDef="let item"> </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="effectiveFrom">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Effective From Date </th>
|
||||
<td mat-cell *matCellDef="let item"> {{ item.effectiveFrom | dateFormat }} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="fees">
|
||||
<th mat-header-cell *matHeaderCellDef> Fees </th>
|
||||
<td mat-cell *matCellDef="let item"> </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="ownerExternalId">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Owner </th>
|
||||
<td mat-cell *matCellDef="let item">
|
||||
<mifosx-external-identifier externalId="{{item.owner.externalId}}"></mifosx-external-identifier>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="penalties">
|
||||
<th mat-header-cell *matHeaderCellDef> Penalties </th>
|
||||
<td mat-cell *matCellDef="let item"> </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="loanAccount">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Loan </th>
|
||||
<td mat-cell *matCellDef="let item"> {{ item.loan.loanId }} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Actions </th>
|
||||
<td mat-cell *matCellDef="let item"> </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="transferExternalId">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Transfer </th>
|
||||
<td mat-cell *matCellDef="let item">
|
||||
<mifosx-external-identifier externalId="{{item.transferExternalId}}"></mifosx-external-identifier>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['transactions/view', row.transactionId]" class="select-row"></tr>
|
||||
<ng-container matColumnDef="settlementDate">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Settlement Date </th>
|
||||
<td mat-cell *matCellDef="let item"> {{ item.settlementDate | dateFormat }} </td>
|
||||
</ng-container>
|
||||
|
||||
</table>
|
||||
<ng-container matColumnDef="purchasePriceRatio">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Purchase Price Ratio </th>
|
||||
<td mat-cell *matCellDef="let item"> {{ item.purchasePriceRatio | number }} </td>
|
||||
</ng-container>
|
||||
|
||||
<mat-paginator [pageSize]="50" [pageSizeOptions]="[50, 100, 200, 500]" showFirstLastButtons></mat-paginator>
|
||||
<ng-container matColumnDef="totalAmount">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Total Amount </th>
|
||||
<td mat-cell *matCellDef="let item">
|
||||
<span *ngIf="item.details">
|
||||
{{ item.details.totalOutstanding | number }}
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell class="center" *matHeaderCellDef> Actions </th>
|
||||
<td mat-cell *matCellDef="let item" class="center td-min-space">
|
||||
<button class="account-action-button" *ngIf="!isPendingOrCanceled(item)" mat-raised-button color="primary" matTooltip="View Journal Entries"
|
||||
matTooltipPosition="left" (click)="routeJournalEntry($event)" [routerLink]="['/', 'journal-entry', 'view-transfer', item.transferId]">
|
||||
<i class="fa fa-arrow-circle-right"></i>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="expandedDetail">
|
||||
<td mat-cell *matCellDef="let item" [attr.colspan]="displayedColumns.length">
|
||||
<div class="element-detail"
|
||||
[@detailExpand]="item.transferId == expandedRowId ? 'expanded' : 'collapsed'">
|
||||
<mifosx-external-asset-transfer [transferData]="item"></mifosx-external-asset-transfer>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let item; columns: displayedColumns;"
|
||||
class="element-row"
|
||||
[class.expanded-row]="expandedRowId === item.transferId"
|
||||
(click)="expandedRowId = expandedRowId === item.transferId ? null : item.transferId"></tr>
|
||||
<tr mat-row *matRowDef="let item; columns: ['expandedDetail']" class="detail-row"></tr>
|
||||
</table>
|
||||
|
||||
<mat-paginator [pageSize]="pageSize" [pageSizeOptions]="[50, 100, 200]" [length]="totalRows" (page)="pageChanged($event)"
|
||||
showFirstLastButtons *ngIf="existsDataToFilter"></mat-paginator>
|
||||
</div>
|
||||
|
||||
<div class="alert" *ngIf="!existsDataToFilter">
|
||||
<div class="message">
|
||||
<i class="fa fa-exclamation-circle alert-check"></i>
|
||||
No data was found
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</mat-card>
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
.status {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.account-action-button{
|
||||
min-width: 26px;
|
||||
padding: 0 0 3px 0;
|
||||
margin: 0 2%;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.item-detail {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
tr.detail-row {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
tr.element-row:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
tr.element-row:not(.expanded-row):hover {
|
||||
background: whitesmoke;
|
||||
}
|
||||
|
||||
tr.element-row:not(.expanded-row):active {
|
||||
background: #efefef;
|
||||
}
|
||||
|
||||
.element-row td {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.element-detail {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@@ -1,11 +1,25 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { animate, state, style, transition, trigger } from '@angular/animations';
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormControl } from '@angular/forms';
|
||||
import { MatPaginator, PageEvent } from '@angular/material/paginator';
|
||||
import { MatSort } from '@angular/material/sort';
|
||||
import { MatTableDataSource } from '@angular/material/table';
|
||||
import { Dates } from 'app/core/utils/dates';
|
||||
import { ExternalAssetOwner } from 'app/loans/services/external-asset-owner';
|
||||
import { ExternalAssetOwnerService } from 'app/loans/services/external-asset-owner.service';
|
||||
import { SettingsService } from 'app/settings/settings.service';
|
||||
|
||||
@Component({
|
||||
selector: 'mifosx-investors',
|
||||
templateUrl: './investors.component.html',
|
||||
styleUrls: ['./investors.component.scss']
|
||||
styleUrls: ['./investors.component.scss'],
|
||||
animations: [
|
||||
trigger('detailExpand', [
|
||||
state('collapsed', style({height: '0px', minHeight: '0'})),
|
||||
state('expanded', style({height: '*'})),
|
||||
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
||||
]),
|
||||
],
|
||||
})
|
||||
export class InvestorsComponent implements OnInit {
|
||||
|
||||
@@ -14,9 +28,28 @@ export class InvestorsComponent implements OnInit {
|
||||
/** Maximum transaction date allowed. */
|
||||
maxDate = new Date();
|
||||
|
||||
transferDateFrom = new FormControl('');
|
||||
transferDateTo = new FormControl('');
|
||||
transferExternalId = new FormControl('');
|
||||
searchText = new FormControl('');
|
||||
effectiveFromDate = new FormControl('');
|
||||
effectiveToDate = new FormControl('');
|
||||
settlementFromDate = new FormControl('');
|
||||
settlementToDate = new FormControl('');
|
||||
|
||||
dataSource: MatTableDataSource<any> = new MatTableDataSource();
|
||||
existsDataToFilter = false;
|
||||
expandedRowId: number | null;
|
||||
|
||||
totalRows: number;
|
||||
isLoading = false;
|
||||
|
||||
pageSize = 50;
|
||||
currentPage = 0;
|
||||
filterText = '';
|
||||
|
||||
sortAttribute = '';
|
||||
sortDirection = '';
|
||||
|
||||
@ViewChild(MatPaginator) paginator: MatPaginator;
|
||||
@ViewChild(MatSort) sort: MatSort;
|
||||
|
||||
/** Entry type filter form control. */
|
||||
entryTypeFilter = new FormControl('');
|
||||
@@ -27,7 +60,7 @@ export class InvestorsComponent implements OnInit {
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
option: 'Sale',
|
||||
option: 'Sell',
|
||||
value: true
|
||||
},
|
||||
{
|
||||
@@ -37,13 +70,87 @@ export class InvestorsComponent implements OnInit {
|
||||
];
|
||||
|
||||
/** Columns to be displayed in investors table. */
|
||||
displayedColumns: string[] = ['investor', 'loanAccount', 'totalAmount', 'principal', 'interest', 'fees', 'penalties', 'actions'];
|
||||
/** Data source for investors table. */
|
||||
dataSource: MatTableDataSource<any> = new MatTableDataSource();
|
||||
|
||||
constructor() { }
|
||||
displayedColumns: string[] = ['status', 'effectiveFrom', 'ownerExternalId', 'loanAccount', 'transferExternalId', 'settlementDate', 'purchasePriceRatio', 'totalAmount', 'actions'];
|
||||
constructor(private settingsService: SettingsService,
|
||||
private externalAssetOwner: ExternalAssetOwner,
|
||||
private externalAssetOwnerService: ExternalAssetOwnerService,
|
||||
private dateUtils: Dates) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.maxDate = this.settingsService.maxAllowedDate;
|
||||
this.searchEAO();
|
||||
}
|
||||
|
||||
itemStatus(status: string): string {
|
||||
return this.externalAssetOwner.itemStatus(status);
|
||||
}
|
||||
|
||||
isPending(item: any): boolean {
|
||||
return this.externalAssetOwner.isPending(item);
|
||||
}
|
||||
|
||||
isPendingOrCanceled(item: any): boolean {
|
||||
return this.externalAssetOwner.isPendingOrCanceled(item);
|
||||
}
|
||||
|
||||
isBuyBackPending(item: any): boolean {
|
||||
return this.externalAssetOwner.isBuyBackPending(item);
|
||||
}
|
||||
|
||||
canBeCancelled(item: any): boolean {
|
||||
return this.externalAssetOwner.validateStatus(item, 'PENDING');
|
||||
}
|
||||
|
||||
canBeSold(item: any): boolean {
|
||||
return this.externalAssetOwner.canBeSold(item);
|
||||
}
|
||||
|
||||
canBeBuyed(item: any): boolean {
|
||||
return this.externalAssetOwner.validateStatus(item, 'ACTIVE');
|
||||
}
|
||||
|
||||
searchEAO(): void {
|
||||
this.isLoading = true;
|
||||
const payload: any = {
|
||||
'request': {},
|
||||
'page': this.currentPage,
|
||||
'size': this.pageSize
|
||||
};
|
||||
const dateFormat = 'yyyy-MM-dd';
|
||||
const request: any = {};
|
||||
if (this.searchText.value) {
|
||||
request['text'] = this.searchText.value;
|
||||
}
|
||||
if (this.effectiveFromDate.value) {
|
||||
request['effectiveFromDate'] = this.dateUtils.formatDate(this.effectiveFromDate.value, dateFormat);
|
||||
}
|
||||
if (this.effectiveToDate.value) {
|
||||
request['effectiveToDate'] = this.dateUtils.formatDate(this.effectiveToDate.value, dateFormat);
|
||||
}
|
||||
if (this.settlementFromDate.value) {
|
||||
request['settlementFromDate'] = this.dateUtils.formatDate(this.settlementFromDate.value, dateFormat);
|
||||
}
|
||||
if (this.settlementToDate.value) {
|
||||
request['settlementToDate'] = this.dateUtils.formatDate(this.settlementToDate.value, dateFormat);
|
||||
}
|
||||
payload['request'] = request;
|
||||
this.externalAssetOwnerService.searchExternalAssetOwnerTransfer(payload).subscribe((response: any) => {
|
||||
this.totalRows = response.totalElements;
|
||||
this.existsDataToFilter = (response.totalElements > 0);
|
||||
this.dataSource.data = response.content;
|
||||
this.isLoading = false;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
pageChanged(event: PageEvent) {
|
||||
this.pageSize = event.pageSize;
|
||||
this.currentPage = event.pageIndex;
|
||||
this.searchEAO();
|
||||
}
|
||||
|
||||
private resetPaginator() {
|
||||
this.currentPage = 0;
|
||||
this.paginator.firstPage();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -78,6 +78,8 @@ import { CreateFundComponent } from './manage-funds/create-fund/create-fund.comp
|
||||
import { EditFundComponent } from './manage-funds/edit-fund/edit-fund.component';
|
||||
import { ViewFundComponent } from './manage-funds/view-fund/view-fund.component';
|
||||
import { InvestorsComponent } from './investors/investors.component';
|
||||
import { ExternalAssetTransferComponent } from 'app/loans/loans-view/external-asset-owner-tab/external-asset-transfer/external-asset-transfer.component';
|
||||
import { LoansModule } from 'app/loans/loans.module';
|
||||
|
||||
|
||||
/**
|
||||
@@ -90,7 +92,8 @@ import { InvestorsComponent } from './investors/investors.component';
|
||||
SharedModule,
|
||||
PipesModule,
|
||||
DirectivesModule,
|
||||
OrganizationRoutingModule
|
||||
OrganizationRoutingModule,
|
||||
LoansModule
|
||||
],
|
||||
declarations: [
|
||||
OrganizationComponent,
|
||||
@@ -155,7 +158,7 @@ import { InvestorsComponent } from './investors/investors.component';
|
||||
CreateFundComponent,
|
||||
EditFundComponent,
|
||||
ViewFundComponent,
|
||||
InvestorsComponent,
|
||||
InvestorsComponent
|
||||
],
|
||||
providers: [
|
||||
CreateHoliday,
|
||||
|
||||
Reference in New Issue
Block a user