Search External Asset Owner (#1851)
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
b50ac452f5
commit
10e84d1acb
@@ -2,7 +2,12 @@
|
||||
|
||||
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
|
||||
|
||||
<mat-form-field fxFlex="22%" (click)="effectiveFromDatePicker.open()">
|
||||
<mat-form-field fxFlex="18%">
|
||||
<mat-label>Search by Text</mat-label>
|
||||
<input matInput [formControl]="searchText">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="18%" (click)="effectiveFromDatePicker.open()">
|
||||
<mat-label>Effective Date From</mat-label>
|
||||
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="effectiveFromDatePicker"
|
||||
[formControl]="effectiveFromDate">
|
||||
@@ -10,7 +15,7 @@
|
||||
<mat-datepicker #effectiveFromDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="22%" (click)="effectiveToDatePicker.open()">
|
||||
<mat-form-field fxFlex="18%" (click)="effectiveToDatePicker.open()">
|
||||
<mat-label>Effective Date To</mat-label>
|
||||
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="effectiveToDatePicker"
|
||||
[formControl]="effectiveToDate">
|
||||
@@ -18,7 +23,7 @@
|
||||
<mat-datepicker #effectiveToDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="22%" (click)="settlementFromDatePicker.open()">
|
||||
<mat-form-field fxFlex="18%" (click)="settlementFromDatePicker.open()">
|
||||
<mat-label>Settlement Date From</mat-label>
|
||||
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="settlementFromDatePicker"
|
||||
[formControl]="settlementFromDate">
|
||||
@@ -26,7 +31,7 @@
|
||||
<mat-datepicker #settlementFromDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="22%" (click)="settlementToDatePicker.open()">
|
||||
<mat-form-field fxFlex="18%" (click)="settlementToDatePicker.open()">
|
||||
<mat-label>Settlement Date To</mat-label>
|
||||
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="settlementToDatePicker"
|
||||
[formControl]="settlementToDate">
|
||||
@@ -34,102 +39,118 @@
|
||||
<mat-datepicker #settlementToDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="60%">
|
||||
<mat-label>Transaction ID</mat-label>
|
||||
<input matInput [formControl]="searchText">
|
||||
</mat-form-field>
|
||||
|
||||
<ng-container fxFlex="40%" class="right">
|
||||
<div fxFlex="98%" class="center m-t-15">
|
||||
<button mat-raised-button color="primary" (click)="searchEAO()">
|
||||
<fa-icon icon="search" class="m-r-10"></fa-icon> Search
|
||||
</button>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mat-elevation-z8 container">
|
||||
<div class="mat-elevation-z8 container m-t-20">
|
||||
<mat-progress-bar mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>
|
||||
|
||||
<table mat-table [dataSource]="dataSource" matSort *ngIf="existsDataToFilter" multiTemplateDataRows>
|
||||
<mat-accordion *ngIf="existsDataToFilter">
|
||||
<mat-expansion-panel *ngFor="let record of searchResults;index as i" class="record">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<div [ngClass]="itemStatus(record.status)" class="m-r-20">
|
||||
<fa-icon icon="stop"></fa-icon>
|
||||
<span class="m-l-10 status">{{record.status}}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td> Owner ExternalId </td>
|
||||
<td>
|
||||
<mifosx-external-identifier externalId="{{record.owner.externalId}}"></mifosx-external-identifier>
|
||||
</td>
|
||||
<td> Effective From </td>
|
||||
<td> {{ record.effectiveFrom | dateFormat }} </td>
|
||||
</tr>
|
||||
</table>
|
||||
</mat-panel-title>
|
||||
<mat-panel-description>
|
||||
<mifosx-external-identifier externalId="{{record.transferExternalId}}"></mifosx-external-identifier>
|
||||
</mat-panel-description>
|
||||
|
||||
<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>
|
||||
</mat-expansion-panel-header>
|
||||
|
||||
<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>
|
||||
<div class="external-asset-transfer">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td fxFlex="25%" class="m-l-5">
|
||||
<b>Status :</b>
|
||||
</td>
|
||||
<td fxFlex="25%" class="m-l-5 left">
|
||||
<div [ngClass]="itemStatus(record.status)">
|
||||
<fa-icon icon="stop"></fa-icon>
|
||||
<span class="m-l-5 status">{{record.status}}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td fxFlex="25%" class="m-l-5">
|
||||
<b>Owner External Id :</b>
|
||||
</td>
|
||||
<td fxFlex="25%" class="m-l-5 left">
|
||||
<mifosx-external-identifier externalId="{{record.owner.externalId}}" completed="true"></mifosx-external-identifier>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td fxFlex="25%" class="m-l-5">
|
||||
<b>Settlement Date :</b>
|
||||
</td>
|
||||
<td fxFlex="25%" class="m-l-5">
|
||||
{{record.settlementDate | dateFormat}}
|
||||
</td>
|
||||
<td fxFlex="25%" class="m-l-5">
|
||||
<b>Effective Date :</b>
|
||||
</td>
|
||||
<td fxFlex="25%" class="m-l-5">
|
||||
{{record.effectiveFrom | dateFormat}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td fxFlex="25%" class="m-l-5">
|
||||
<b>Details :</b>
|
||||
</td>
|
||||
<td fxFlex="75%" class="left">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td fxFlex="50%" class="m-l-5"><b>Principal Outstanding :</b></td>
|
||||
<td fxFlex="50%" class="r-amount">{{record.details.totalPrincipalOutstanding | formatNumber}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td fxFlex="50%" class="m-l-5"><b>Interest Outstanding :</b></td>
|
||||
<td fxFlex="50%" class="r-amount">{{record.details.totalInterestOutstanding | formatNumber}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td fxFlex="50%" class="m-l-5"><b>Fees Outstanding :</b></td>
|
||||
<td fxFlex="50%" class="r-amount">{{record.details.totalFeeChargesOutstanding | formatNumber}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td fxFlex="50%" class="m-l-5"><b>Penalties Outstanding :</b></td>
|
||||
<td fxFlex="50%" class="r-amount">{{record.details.totalPenaltyChargesOutstanding | formatNumber}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td fxFlex="50%" class="m-l-5"><b>Outstanding :</b></td>
|
||||
<td fxFlex="50%" class="r-amount">{{record.details.totalOutstanding | formatNumber}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td fxFlex="50%" class="m-l-5"><b>Overpaid :</b></td>
|
||||
<td fxFlex="50%" class="r-amount">{{record.details.totalOverpaid | formatNumber}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<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="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="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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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-expansion-panel>
|
||||
</mat-accordion>
|
||||
|
||||
<mat-paginator [pageSize]="pageSize" [pageSizeOptions]="[50, 100, 200]" [length]="totalRows" (page)="pageChanged($event)"
|
||||
showFirstLastButtons *ngIf="existsDataToFilter"></mat-paginator>
|
||||
|
||||
@@ -2,39 +2,25 @@
|
||||
color: black;
|
||||
}
|
||||
|
||||
.account-action-button{
|
||||
min-width: 26px;
|
||||
padding: 0 0 3px 0;
|
||||
margin: 0 2%;
|
||||
line-height: 25px;
|
||||
.external-asset-transfer {
|
||||
margin-top: 10px;
|
||||
min-height: 160px;
|
||||
}
|
||||
|
||||
.item-detail {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
.record {
|
||||
.record-actions{
|
||||
margin-top: 1%;
|
||||
button{
|
||||
margin-right: 1%;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
margin: 1% auto;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 30px;
|
||||
margin-left: 2%;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -28,6 +28,7 @@ export class InvestorsComponent implements OnInit {
|
||||
/** Maximum transaction date allowed. */
|
||||
maxDate = new Date();
|
||||
|
||||
searchResults: any[] = [];
|
||||
searchText = new FormControl('');
|
||||
effectiveFromDate = new FormControl('');
|
||||
effectiveToDate = new FormControl('');
|
||||
@@ -138,11 +139,16 @@ export class InvestorsComponent implements OnInit {
|
||||
this.totalRows = response.totalElements;
|
||||
this.existsDataToFilter = (response.totalElements > 0);
|
||||
this.dataSource.data = response.content;
|
||||
this.searchResults = response.content;
|
||||
this.isLoading = false;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
transform(data: any): any {
|
||||
return data;
|
||||
}
|
||||
|
||||
pageChanged(event: PageEvent) {
|
||||
this.pageSize = event.pageSize;
|
||||
this.currentPage = event.pageIndex;
|
||||
|
||||
Reference in New Issue
Block a user