CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: add groups view page (general-tab) (#784)

Browse Source 
Fixes: #217
This commit is contained in:
Karan Takalkar
2020-05-20 15:13:50 +05:30
committed by GitHub
parent a5ee70090c
commit 3fe5a05fed
21 changed files with 869 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/groups/groups-view/general-tab/general-tab.component.html
+289
View File
@@ -0,0 +1,289 @@
<div class="tab-container mat-typography">
<h3>Group Details</h3>
<div fxLayout="row" fxLayoutGap="32px" class="group-details-container">
<p>
Active Client Loans: {{groupSummary?.activeClientLoans}}<br/>
Active Client Borrowers: {{groupSummary?.activeClientBorrowers}}<br/>
Active Overdue Client Loans: {{groupSummary?.overdueClientLoans}}<br/>
</p>
<p>
Active Group Loans: {{groupSummary?.activeGroupLoans}}<br/>
Active Group Borrowers: {{groupSummary?.activeGroupBorrowers}}<br/>
Active Overdue Group Loans: {{groupSummary?.overdueGroupLoans}}<br/>
</p>
<p>
Active Clients: {{groupSummary?.activeClients}}<br/>
</p>
</div>
<!-- Client Members Table -->
<div *ngIf="groupClientMembers">
<h3>Client Members</h3>
<table mat-table [dataSource]="groupClientMembers"
class="mat-elevation-z1">
<ng-container matColumnDef="Name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element">
<i class="fa fa-stop" [ngClass]="element.status.code|statusLookup" [matTooltip]="element.status.value"></i>
{{element.displayName}}
</td>
</ng-container>
<ng-container matColumnDef="Account No">
<th mat-header-cell *matHeaderCellDef> Account No. </th>
<td mat-cell *matCellDef="let element"> {{element.accountNo}} </td>
</ng-container>
<ng-container matColumnDef="Office">
<th mat-header-cell *matHeaderCellDef> Office </th>
<td mat-cell *matCellDef="let element"> {{element.officeName}} </td>
</ng-container>
<ng-container matColumnDef="JLG Loan Application">
<th mat-header-cell *matHeaderCellDef> JLG Loan Application </th>
<td mat-cell *matCellDef="let element">
<div class="m-l-30" *ngIf="element.status.code !== 'clientStatusType.closed'">
<button class="account-action-button" mat-raised-button color="primary">
<i class="fa fa-plus" matTooltip="New Loan Application"></i>
</button>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="clientMemberColumns"></tr>
<tr mat-row *matRowDef="let row; columns: clientMemberColumns;" [routerLink]="['/clients', row.id, 'general']" class="select-row"></tr>
</table>
</div>
<div *ngIf="loanAccounts">
<div fxLayout="row" fxLayoutAlign="start" class="table-header">
<div class="m-b-10">
<h3>Loan Accounts</h3>
</div>
<div *ngIf="(loanAccounts|accountsFilter:'loan':'closed').length" class="action-button m-b-10" fxLayoutGap="25px">
<button mat-raised-button class="f-right" color="primary"
(click)="toggleLoanAccountsOverview()">{{showClosedLoanAccounts?'View Active Accounts':'View Closed Accounts'}}</button>
</div>
</div>
<!-- Open Loan Accounts Table -->
<table *ngIf="!showClosedLoanAccounts" mat-table [dataSource]="loanAccounts|accountsFilter:'loan'"
class="mat-elevation-z1">
<ng-container matColumnDef="Account No">
<th mat-header-cell *matHeaderCellDef> Account No. </th>
<td mat-cell *matCellDef="let element"> <i class="fa fa-stop"
[ngClass]="element.inArrears?'status-active-overdue':(element.status.code|statusLookup)"
[matTooltip]="element.inArrears?'Active Overdue':element.status.value"></i>
{{element.accountNo}}
</td>
</ng-container>
<ng-container matColumnDef="Loan Account">
<th mat-header-cell *matHeaderCellDef> Loan Account </th>
<td mat-cell *matCellDef="let element"> {{element.productName}} </td>
</ng-container>
<ng-container matColumnDef="Original Loan">
<th mat-header-cell *matHeaderCellDef> Original Loan </th>
<td mat-cell *matCellDef="let element"> {{element.originalLoan}} </td>
</ng-container>
<ng-container matColumnDef="Loan Balance">
<th mat-header-cell *matHeaderCellDef> Loan Balance </th>
<td mat-cell *matCellDef="let element"> {{element.loanBalance}} </td>
</ng-container>
<ng-container matColumnDef="Amount Paid">
<th mat-header-cell *matHeaderCellDef> Amount Paid </th>
<td mat-cell *matCellDef="let element"> {{element.amountPaid}} </td>
</ng-container>
<ng-container matColumnDef="Type">
<th mat-header-cell *matHeaderCellDef> Type </th>
<td mat-cell *matCellDef="let element">
<i class="fa fa-large" [ngClass]="(element.loanType.value==='Individual')?'fa-user':'fa-group'"
[matTooltip]="(element.loanType.value==='Individual')?'Individual':'Group'"></i>
</td>
</ng-container>
<ng-container matColumnDef="Actions">
<th mat-header-cell *matHeaderCellDef> Actions </th>
<td mat-cell *matCellDef="let element">
<button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary">
<i class="fa fa-dollar" matTooltip="Make Repayment"></i>
</button>
<button *ngIf="element.status.pendingApproval" class="account-action-button" mat-raised-button color="primary">
<i class="fa fa-check" matTooltip="Approve"></i>
</button>
<button *ngIf="!element.status.pendingApproval && !element.status.active && !element.status.overpaid"
class="account-action-button" mat-raised-button color="primary">
<i class="fa fa-flag" matTooltip="Disburse"></i>
</button>
<button *ngIf="!element.status.pendingApproval && !element.status.active && element.status.overpaid"
class="account-action-button" mat-raised-button color="primary">
<i class="fa fa-exchange" matTooltip="Transfer Funds"></i>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="openLoansColumns"></tr>
<tr mat-row *matRowDef="let row; columns: openLoansColumns;"></tr>
</table>
<!-- Closed Loan Accounts Table-->
<table *ngIf="showClosedLoanAccounts" mat-table [dataSource]="loanAccounts|accountsFilter:'loan':'closed'"
class="mat-elevation-z1">
<ng-container matColumnDef="Account No">
<th mat-header-cell *matHeaderCellDef> Account No. </th>
<td mat-cell *matCellDef="let element"> <i class="fa fa-stop"
[ngClass]="element.inArrears?'status-active-overdue':(element.status.code|statusLookup)"
[matTooltip]="element.inArrears?'Active Overdue':element.status.value"></i>
{{element.accountNo}}
</td>
</ng-container>
<ng-container matColumnDef="Loan Account">
<th mat-header-cell *matHeaderCellDef> Loan Account </th>
<td mat-cell *matCellDef="let element"> {{element.productName}} </td>
</ng-container>
<ng-container matColumnDef="Original Loan">
<th mat-header-cell *matHeaderCellDef> Original Loan </th>
<td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate | date}} </td>
</ng-container>
<ng-container matColumnDef="Loan Balance">
<th mat-header-cell *matHeaderCellDef>Loan Balance </th>
<td mat-cell *matCellDef="let element"> {{element.loanBalance}} </td>
</ng-container>
<ng-container matColumnDef="Amount Paid">
<th mat-header-cell *matHeaderCellDef> Amount Paid </th>
<td mat-cell *matCellDef="let element"> {{element.accountBalance}} </td>
</ng-container>
<ng-container matColumnDef="Type">
<th mat-header-cell *matHeaderCellDef> Type </th>
<td mat-cell *matCellDef="let element">
<i class="fa fa-large" [ngClass]="(element.loanType.value=== 'Individual')?'fa-user':'fa-group'"
[matTooltip]="(element.loanType.value==='Individual')?'Individual':'Group'"></i>
</td>
</ng-container>
<ng-container matColumnDef="Closed Date">
<th mat-header-cell *matHeaderCellDef> Closed Date </th>
<td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate | date}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="closedLoansColumns"></tr>
<tr mat-row *matRowDef="let row; columns: closedLoansColumns;"></tr>
</table>
</div>
<div *ngIf="savingAccounts">
<div fxLayout="row" fxLayoutAlign="start" class="table-header">
<div class="m-b-10">
<h3>Saving Accounts</h3>
</div>
<div class="action-button m-b-10" fxLayoutGap="25px">
<button *ngIf="(savingAccounts|accountsFilter:'saving':'closed').length" mat-raised-button class="f-right" color="primary"
(click)="toggleSavingAccountsOverview()">{{showClosedSavingAccounts?'View Active Accounts':'View Closed Accounts'}}</button>
</div>
</div>
<!-- Open Savings Accounts Table -->
<table *ngIf="!showClosedSavingAccounts" mat-table [dataSource]="savingAccounts|accountsFilter:'saving'"
class="mat-elevation-z1">
<ng-container matColumnDef="Account No">
<th mat-header-cell *matHeaderCellDef> Account No. </th>
<td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup" [matTooltip]="element.status.value"></i>
{{element.accountNo}} </td>
</ng-container>
<ng-container matColumnDef="Saving Account">
<th mat-header-cell *matHeaderCellDef> Saving Account </th>
<td mat-cell *matCellDef="let element"> {{element.productName}} </td>
</ng-container>
<ng-container matColumnDef="Last Active">
<th mat-header-cell *matHeaderCellDef> Last Active </th>
<td mat-cell *matCellDef="let element"> {{element.lastActiveTransactionDate | date}} </td>
</ng-container>
<ng-container matColumnDef="Balance">
<th mat-header-cell *matHeaderCellDef> Balance </th>
<td mat-cell *matCellDef="let element"> {{element.accountBalance}} </td>
</ng-container>
<ng-container matColumnDef="Actions">
<th mat-header-cell *matHeaderCellDef> Actions </th>
<td mat-cell *matCellDef="let element">
<button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary">
<i class="fa fa-arrow-up" matTooltip="Deposit"></i>
</button>
<button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary">
<i class="fa fa-arrow-down" matTooltip="Withdraw"></i>
</button>
<button *ngIf="element.status.submittedAndPendingApproval" class="account-action-button" mat-raised-button
color="primary">
<i class="fa fa-check" matTooltip="Approve"></i>
</button>
<button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
class="account-action-button" mat-raised-button color="primary">
<i class="fa fa-undo" matTooltip="Undo Approval"></i>
</button>
<button *ngIf="!element.status.submittedAndPendingApproval && !element.status.active"
class="account-action-button" mat-raised-button color="primary">
<i class="fa fa-check-circle" matTooltip="Activate"></i>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="openSavingsColumns"></tr>
<tr mat-row *matRowDef="let row; columns: openSavingsColumns;"></tr>
</table>
<!-- Closed Saving Accounts Table -->
<table *ngIf="showClosedSavingAccounts" mat-table [dataSource]="savingAccounts|accountsFilter:'saving':'closed'"
class="mat-elevation-z1">
<ng-container matColumnDef="Account No">
<th mat-header-cell *matHeaderCellDef> Account No. </th>
<td mat-cell *matCellDef="let element"> <i class="fa fa-stop" [ngClass]="element.status.code|statusLookup" [matTooltip]="element.status.value"></i>
{{element.accountNo}} </td>
</ng-container>
<ng-container matColumnDef="Saving Account">
<th mat-header-cell *matHeaderCellDef> Saving Account </th>
<td mat-cell *matCellDef="let element"> {{element.productName}} </td>
</ng-container>
<ng-container matColumnDef="Closed Date">
<th mat-header-cell *matHeaderCellDef> Closed Date </th>
<td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate | date}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="closedSavingsColumns"></tr>
<tr mat-row *matRowDef="let row; columns: closedSavingsColumns;"></tr>
</table>
</div>
</div>