feat: view client layout implemented (#93)
* view client layout implemented
This commit is contained in:
Anwesh Nayak
Vendored
+4
-7
@@ -1,9 +1,6 @@
|
|||||||
<app-header></app-header>
|
<div class="container m-t-40 m-b-40">
|
||||||
<div class="fluid-container">
|
<div fxLayout="row" fxLayoutGap="20px">
|
||||||
<div class="container">
|
<div fxFlex="30%" ></div>
|
||||||
<div class="card">
|
<div fxFlex="70%" ></div>
|
||||||
<div class="card-header"> </div>
|
|
||||||
<div class="card-body"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -20,7 +20,7 @@ const routes: Routes = [
|
|||||||
data: { title: extract('Create Client') }
|
data: { title: extract('Create Client') }
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'clients/view',
|
path: 'clients/view/:id',
|
||||||
component: ViewClientComponent,
|
component: ViewClientComponent,
|
||||||
data: { title: extract('View Client') }
|
data: { title: extract('View Client') }
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -47,7 +47,8 @@
|
|||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;">
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['view', row.id]">
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ import { Observable } from 'rxjs';
|
|||||||
})
|
})
|
||||||
export class ClientsComponent implements OnInit {
|
export class ClientsComponent implements OnInit {
|
||||||
post: any = [];
|
post: any = [];
|
||||||
private ELEMENT_DATA: any = null;
|
private ELEMENT_DATA: any = undefined;
|
||||||
displayedColumns = ['name', 'clientno', 'externalid', 'status', 'office', 'staff'];
|
displayedColumns = ['name', 'clientno', 'externalid', 'status', 'office', 'staff'];
|
||||||
dataSource = new MatTableDataSource();
|
dataSource = new MatTableDataSource();
|
||||||
|
|
||||||
@@ -20,10 +20,10 @@ export class ClientsComponent implements OnInit {
|
|||||||
|
|
||||||
constructor(private clientService: ClientsService) {
|
constructor(private clientService: ClientsService) {
|
||||||
// GET from clients API
|
// GET from clients API
|
||||||
this.clientService.getServer()
|
this.clientService.getClients()
|
||||||
.subscribe(
|
.subscribe(
|
||||||
(res => {
|
(res => {
|
||||||
console.log(res);
|
// console.log(res);
|
||||||
this.ELEMENT_DATA = res;
|
this.ELEMENT_DATA = res;
|
||||||
this.dataSource = new MatTableDataSource(this.ELEMENT_DATA);
|
this.dataSource = new MatTableDataSource(this.ELEMENT_DATA);
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ import { map } from 'rxjs/operators';
|
|||||||
@Injectable()
|
@Injectable()
|
||||||
export class ClientsService {
|
export class ClientsService {
|
||||||
constructor(private http: Http) {} // tslint:disable-line
|
constructor(private http: Http) {} // tslint:disable-line
|
||||||
getServer() {
|
getClients() {
|
||||||
const username = 'mifos';
|
const username = 'mifos';
|
||||||
const password = 'password';
|
const password = 'password';
|
||||||
const headers = new Headers(); // tslint:disable-line
|
const headers = new Headers(); // tslint:disable-line
|
||||||
@@ -18,7 +18,7 @@ export class ClientsService {
|
|||||||
headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
|
headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
|
||||||
headers.append('Access-Control-Allow-Origin', '*');
|
headers.append('Access-Control-Allow-Origin', '*');
|
||||||
return this.http.get
|
return this.http.get
|
||||||
('https://mobile.openmf.org/fineract-provider/api/v1/clients?tenantIdentifier=mobile&pretty=true',
|
('https://demo.openmf.org/fineract-provider/api/v1/clients?tenantIdentifier=default&pretty=true',
|
||||||
{headers: headers})
|
{headers: headers})
|
||||||
.pipe(
|
.pipe(
|
||||||
map(
|
map(
|
||||||
@@ -30,4 +30,71 @@ export class ClientsService {
|
|||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
getClientId(clientId: number) {
|
||||||
|
const username = 'mifos';
|
||||||
|
const password = 'password';
|
||||||
|
const headers = new Headers(); // tslint:disable-line
|
||||||
|
headers.append('Authorization', 'Basic ' + btoa(username + ':' + password));
|
||||||
|
headers.append('Content-Type', 'application/json');
|
||||||
|
headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
|
||||||
|
headers.append('Access-Control-Allow-Origin', '*');
|
||||||
|
return this.http.get
|
||||||
|
('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId + '?tenantIdentifier=default&pretty=true',
|
||||||
|
{headers: headers})
|
||||||
|
.pipe(
|
||||||
|
map(
|
||||||
|
(response: Response) => { // tslint:disable-line
|
||||||
|
response = response.json();
|
||||||
|
return response;
|
||||||
|
|
||||||
|
}
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
getClientAccounts(clientId: number) {
|
||||||
|
const username = 'mifos';
|
||||||
|
const password = 'password';
|
||||||
|
const headers = new Headers(); // tslint:disable-line
|
||||||
|
headers.append('Authorization', 'Basic ' + btoa(username + ':' + password));
|
||||||
|
headers.append('Content-Type', 'application/json');
|
||||||
|
headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
|
||||||
|
headers.append('Access-Control-Allow-Origin', '*');
|
||||||
|
return this.http.get
|
||||||
|
('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId
|
||||||
|
+ '/accounts' + '?tenantIdentifier=default&pretty=true',
|
||||||
|
{headers: headers})
|
||||||
|
.pipe(
|
||||||
|
map(
|
||||||
|
(response: Response) => { // tslint:disable-line
|
||||||
|
response = response.json();
|
||||||
|
return response;
|
||||||
|
|
||||||
|
}
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
getClientCharges(clientId: number) {
|
||||||
|
const username = 'mifos';
|
||||||
|
const password = 'password';
|
||||||
|
const headers = new Headers(); // tslint:disable-line
|
||||||
|
headers.append('Authorization', 'Basic ' + btoa(username + ':' + password));
|
||||||
|
headers.append('Content-Type', 'application/json');
|
||||||
|
headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
|
||||||
|
headers.append('Access-Control-Allow-Origin', '*');
|
||||||
|
return this.http.get
|
||||||
|
('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId
|
||||||
|
+ '/charges' + '?tenantIdentifier=default&pretty=true',
|
||||||
|
{headers: headers})
|
||||||
|
.pipe(
|
||||||
|
map(
|
||||||
|
(response: Response) => { // tslint:disable-line
|
||||||
|
response = response.json();
|
||||||
|
return response;
|
||||||
|
|
||||||
|
}
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,161 +1,203 @@
|
|||||||
<!-- <div class="fluid-container">
|
<div class="container m-t-40 m-b-40">
|
||||||
<div class="container">
|
<div fxLayout="row" fxLayoutGap="20px">
|
||||||
<div class="row">
|
<div fxFlex="30%" ><mat-card class="example-card">
|
||||||
|
<mat-card-header>
|
||||||
|
<mat-card-title><h3>{{clientInfo.displayName}}</h3></mat-card-title>
|
||||||
|
<mat-card-subtitle> </mat-card-subtitle>
|
||||||
|
</mat-card-header>
|
||||||
|
<img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
|
||||||
|
<mat-card-content class="border">
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th>Name:</th>
|
||||||
|
<td>{{clientInfo.displayName}}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Activation date</th>
|
||||||
|
<td>{{clientInfo.activationDate}}</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<th>Member</th>
|
||||||
|
<td>{{clientInfo.groupNames}}</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
<div class="col-sm-4">
|
<tr>
|
||||||
<div class="card mt-5 mb-5">
|
<th>Is Staff</th>
|
||||||
<h3 class="card-header">Client Information</h3>
|
<td>{{clientInfo.isStaff}}</td>
|
||||||
<div class="card-body">
|
</tr>
|
||||||
<h5 class="card-title">Name</h5>
|
|
||||||
<h6 class="card-subtitle text-muted">Other details</h6>
|
|
||||||
</div>
|
|
||||||
<img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_158bd1d28ef%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_158bd1d28ef%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22129.359375%22%20y%3D%2297.35%22%3EImage%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image">
|
|
||||||
<div class="card-body">
|
|
||||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
||||||
</div>
|
|
||||||
<ul class="list-group list-group-flush">
|
|
||||||
<li class="list-group-item">Cras justo odio</li>
|
|
||||||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|
||||||
<li class="list-group-item">Vestibulum at eros</li>
|
|
||||||
</ul>
|
|
||||||
<div class="card-body">
|
|
||||||
<a href="#" class="card-link">Card link</a>
|
|
||||||
<a href="#" class="card-link">Another link</a>
|
|
||||||
</div>
|
|
||||||
<div class="card-footer text-muted">
|
|
||||||
2 days ago
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
<tr>
|
||||||
|
<th>Mobile No</th>
|
||||||
|
<td>{{clientInfo.mobileNo}}</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<th>Gender</th>
|
||||||
|
<td>{{clientInfo.gender.name }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Client Type</th>
|
||||||
|
<td>{{clientInfo.clientType.name}}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Client Classification</th>
|
||||||
|
<td>{{clientInfo.clientClassification.name}}</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<th>Date of Birth</th>
|
||||||
|
<td>{{clientInfo.dateOfBirth}}</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</table>
|
||||||
|
</mat-card-content>
|
||||||
|
|
||||||
<div class="col-sm-8">
|
</mat-card>
|
||||||
<div class="card mt-5 mb-5">
|
</div >
|
||||||
<div class="card-header">Loan table</div>
|
<div fxFlex="70%">
|
||||||
<div class="card-body">
|
<div class="mat-elevation-z8 m-b-55">
|
||||||
<table class="table table-hover table-responsive-md table-fixed">
|
|
||||||
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>#</th>
|
|
||||||
<th>Name</th>
|
|
||||||
<th>Surname</th>
|
|
||||||
<th>Country</th>
|
|
||||||
<th>City</th>
|
|
||||||
<th>Position</th>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<th scope="row">4</th>
|
|
||||||
<td>Jerry</td>
|
|
||||||
<td>Horwitz</td>
|
|
||||||
<td>Italy</td>
|
|
||||||
<td>Bari</td>
|
|
||||||
<td>Editor-in-chief</td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th scope="row">5</th>
|
|
||||||
<td>Janis</td>
|
|
||||||
<td>Joplin</td>
|
|
||||||
<td>Poland</td>
|
|
||||||
<td>Warsaw</td>
|
|
||||||
<td>Video Maker</td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th scope="row">6</th>
|
|
||||||
<td>Gary</td>
|
|
||||||
<td>Winogrand</td>
|
|
||||||
<td>Germany</td>
|
|
||||||
<td>Berlin</td>
|
|
||||||
<td>Photographer</td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th scope="row">7</th>
|
|
||||||
<td>Angie</td>
|
|
||||||
<td>Smith</td>
|
|
||||||
<td>USA</td>
|
|
||||||
<td>San Francisco</td>
|
|
||||||
<td>Teacher</td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th scope="row">8</th>
|
|
||||||
<td>John</td>
|
|
||||||
<td>Mattis</td>
|
|
||||||
<td>France</td>
|
|
||||||
<td>Paris</td>
|
|
||||||
<td>Actor</td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th scope="row">9</th>
|
|
||||||
<td>Otto</td>
|
|
||||||
<td>Morris</td>
|
|
||||||
<td>Germany</td>
|
|
||||||
<td>Munich</td>
|
|
||||||
<td>Singer</td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th scope="row">9</th>
|
|
||||||
<td>Otto</td>
|
|
||||||
<td>Morris</td>
|
|
||||||
<td>Germany</td>
|
|
||||||
<td>Munich</td>
|
|
||||||
<td>Singer</td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th scope="row">9</th>
|
|
||||||
<td>Otto</td>
|
|
||||||
<td>Morris</td>
|
|
||||||
<td>Germany</td>
|
|
||||||
<td>Munich</td>
|
|
||||||
<td>Singer</td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th scope="row">9</th>
|
|
||||||
<td>Otto</td>
|
|
||||||
<td>Morris</td>
|
|
||||||
<td>Germany</td>
|
|
||||||
<td>Munich</td>
|
|
||||||
<td>Singer</td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th scope="row">9</th>
|
|
||||||
<td>Otto</td>
|
|
||||||
<td>Morris</td>
|
|
||||||
<td>Germany</td>
|
|
||||||
<td>Munich</td>
|
|
||||||
<td>Singer</td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th scope="row">9</th>
|
|
||||||
<td>Otto</td>
|
|
||||||
<td>Morris</td>
|
|
||||||
<td>Germany</td>
|
|
||||||
<td>Munich</td>
|
|
||||||
<td>Singer</td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
|
|
||||||
|
<!-- LOAN TABLE -->
|
||||||
|
<mat-toolbar>
|
||||||
|
<span><h4>Loan Account Overview</h4> </span>
|
||||||
|
</mat-toolbar>
|
||||||
|
|
||||||
|
<table mat-table [dataSource]="dataSourceLoan" matSort>
|
||||||
|
|
||||||
|
<!-- Name Column -->
|
||||||
|
<ng-container matColumnDef="account">
|
||||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Account #ng </th>
|
||||||
|
<td mat-cell *matCellDef="let row"> {{row.accountNo}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Account no Column -->
|
||||||
|
<ng-container matColumnDef="loanAccount">
|
||||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Loan Account </th>
|
||||||
|
<td mat-cell *matCellDef="let row"> {{row.productName}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- External ID Column -->
|
||||||
|
<ng-container matColumnDef="originalLoan">
|
||||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Original Loan </th>
|
||||||
|
<td mat-cell *matCellDef="let row"> {{row.originalLoan}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Status Column -->
|
||||||
|
<ng-container matColumnDef="loanBalance">
|
||||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Loan Balance </th>
|
||||||
|
<td mat-cell *matCellDef="let row"> {{row.loanBalance}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Color Column -->
|
||||||
|
<ng-container matColumnDef="amountPaid">
|
||||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Amount Paid </th>
|
||||||
|
<td mat-cell *matCellDef="let row"> {{row.amountPaid}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ID Column -->
|
||||||
|
<ng-container matColumnDef="type">
|
||||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Type </th>
|
||||||
|
<td mat-cell *matCellDef="let row"> {{row.loanType.value}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<tr mat-header-row *matHeaderRowDef="displayedLoanColumns"></tr>
|
||||||
|
<tr mat-row *matRowDef="let row; columns: displayedLoanColumns;" [routerLink]="[]">
|
||||||
|
|
||||||
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<!-- SAVINGS TABLE -->
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
<div class="mat-elevation-z8 m-b-55">
|
||||||
|
<mat-toolbar>
|
||||||
|
<span><h4>Savings Account Overview</h4> </span>
|
||||||
|
</mat-toolbar>
|
||||||
|
<table mat-table [dataSource]="dataSourceSavings" matSort>
|
||||||
|
|
||||||
|
<!-- Name Column -->
|
||||||
|
<ng-container matColumnDef="account">
|
||||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Account # </th>
|
||||||
|
<td mat-cell *matCellDef="let row"> {{row.accountNo}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Account no Column -->
|
||||||
|
<ng-container matColumnDef="savingsAccount">
|
||||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Saving Account </th>
|
||||||
|
<td mat-cell *matCellDef="let row"> {{row.productName}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- External ID Column -->
|
||||||
|
<ng-container matColumnDef="lastActive">
|
||||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Last Active </th>
|
||||||
|
<td mat-cell *matCellDef="let row"> {{row.lastActiveTransactionDate}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Status Column -->
|
||||||
|
<ng-container matColumnDef="balance">
|
||||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Balance </th>
|
||||||
|
<td mat-cell *matCellDef="let row"> {{row.accountBalance}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
|
||||||
|
<tr mat-header-row *matHeaderRowDef="displayedSavingsColumns"></tr>
|
||||||
|
<tr mat-row *matRowDef="let row; columns: displayedSavingsColumns;" [routerLink]="[]">
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- SHARES TABLE -->
|
||||||
|
|
||||||
|
<div class="mat-elevation-z8 m-b-55">
|
||||||
|
<mat-toolbar>
|
||||||
|
<span><h4>Shares Account Overview</h4> </span>
|
||||||
|
</mat-toolbar>
|
||||||
|
<table mat-table [dataSource]="dataSourceShares" matSort>
|
||||||
|
|
||||||
|
<!-- Name Column -->
|
||||||
|
<ng-container matColumnDef="account">
|
||||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Account # </th>
|
||||||
|
<td mat-cell *matCellDef="let row"> {{row.accountNo}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Account no Column -->
|
||||||
|
<ng-container matColumnDef="shareAccount">
|
||||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Share Account#</th>
|
||||||
|
<td mat-cell *matCellDef="let row"> {{row.productName}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- External ID Column -->
|
||||||
|
<ng-container matColumnDef="approvedShares">
|
||||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Approved Shares </th>
|
||||||
|
<td mat-cell *matCellDef="let row"> {{row.totalApprovedShares}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Status Column -->
|
||||||
|
<ng-container matColumnDef="pending">
|
||||||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Pending for Approval Shares </th>
|
||||||
|
<td mat-cell *matCellDef="let row"> {{row.totalPendingForApprovalShares}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
|
||||||
|
<tr mat-header-row *matHeaderRowDef="displayedSharesColumns"></tr>
|
||||||
|
<tr mat-row *matRowDef="let row; columns: displayedSharesColumns;" [routerLink]="[]">
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
<p>User with ID {{ id }} loaded.</p>
|
||||||
|
|||||||
@@ -0,0 +1,44 @@
|
|||||||
|
.example-card {
|
||||||
|
// max-width: 700px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-header-image {
|
||||||
|
background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.border {
|
||||||
|
border: 0.5px solid #DDD;
|
||||||
|
border-right-width: 0;
|
||||||
|
border-left-width: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: left;
|
||||||
|
padding: 6px 3px 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
tr {
|
||||||
|
word-wrap: break-word;
|
||||||
|
padding: 6px 0px 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-form-field {
|
||||||
|
font-size: 14px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
td, th {
|
||||||
|
width: 15%;
|
||||||
|
}
|
||||||
|
|
||||||
@@ -1,15 +1,96 @@
|
|||||||
import { Component, OnInit } from '@angular/core';
|
import { ClientsService } from 'app/clients/clients.service';
|
||||||
|
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||||
|
import { ActivatedRoute, Params } from '@angular/router';
|
||||||
|
import { Subscription } from 'rxjs';
|
||||||
|
import { DataSource } from '@angular/cdk/collections';
|
||||||
|
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'mifosx-view-client',
|
selector: 'mifosx-view-client',
|
||||||
templateUrl: './view-client.component.html',
|
templateUrl: './view-client.component.html',
|
||||||
styleUrls: ['./view-client.component.scss']
|
styleUrls: ['./view-client.component.scss']
|
||||||
})
|
})
|
||||||
export class ViewClientComponent implements OnInit {
|
export class ViewClientComponent implements OnInit, OnDestroy {
|
||||||
|
id: number = undefined;
|
||||||
|
loanAccounts: any = undefined;
|
||||||
|
savingsAccounts: any = undefined;
|
||||||
|
shareAccounts: any = undefined;
|
||||||
|
upcomingCharges: any = undefined;
|
||||||
|
clientInfo: any = undefined;
|
||||||
|
paramsSubscription: Subscription;
|
||||||
|
post: any = [];
|
||||||
|
private LOAN_DATA: any = undefined;
|
||||||
|
private SAVINGS_DATA: any = undefined;
|
||||||
|
private SHARES_DATA: any = undefined;
|
||||||
|
displayedLoanColumns = ['account', 'loanAccount', 'originalLoan', 'loanBalance', 'amountPaid', 'type'];
|
||||||
|
displayedSavingsColumns = ['account', 'savingsAccount', 'lastActive', 'balance'];
|
||||||
|
displayedSharesColumns = ['account', 'shareAccount', 'approvedShares', 'pending'];
|
||||||
|
|
||||||
constructor() { }
|
dataSourceLoan = new MatTableDataSource();
|
||||||
|
dataSourceSavings = new MatTableDataSource();
|
||||||
|
dataSourceShares = new MatTableDataSource();
|
||||||
|
|
||||||
|
|
||||||
|
constructor(private route: ActivatedRoute, private clientService: ClientsService) {}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
|
this.paramsSubscription = this.route.params
|
||||||
|
.subscribe(
|
||||||
|
(params: Params) => {
|
||||||
|
this.id = params['id'];
|
||||||
|
}
|
||||||
|
);
|
||||||
|
this.clientService.getClientId(this.id)
|
||||||
|
.subscribe(
|
||||||
|
(res => {
|
||||||
|
const groupArray = new Array;
|
||||||
|
this.clientInfo = res;
|
||||||
|
this.clientInfo.dateOfBirth = this.clientInfo.dateOfBirth.reverse().join('-');
|
||||||
|
this.clientInfo.activationDate = this.clientInfo.activationDate.reverse().join('-');
|
||||||
|
|
||||||
|
this.clientInfo.groups.forEach(function (item: any) {
|
||||||
|
groupArray.push(item.name);
|
||||||
|
console.log(item.name);
|
||||||
|
});
|
||||||
|
this.clientInfo.groupNames = groupArray.join('|');
|
||||||
|
|
||||||
|
console.log( this.clientInfo.groupNames);
|
||||||
|
// console.log(res['dateOfBirth'][1]);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
this.clientService.getClientAccounts(this.id)
|
||||||
|
.subscribe(
|
||||||
|
(res => {
|
||||||
|
this.loanAccounts = res['loanAccounts'];
|
||||||
|
this.savingsAccounts = res['savingsAccounts'];
|
||||||
|
this.shareAccounts = res['shareAccounts'];
|
||||||
|
// this.savingsAccounts.lastActiveTransactionDate = this.savingsAccounts
|
||||||
|
// .lastActiveTransactionDate.reverse().join('-');
|
||||||
|
console.log(this.savingsAccounts.lastActiveTransactionDate);
|
||||||
|
this.LOAN_DATA = this.loanAccounts;
|
||||||
|
this.SAVINGS_DATA = this.savingsAccounts;
|
||||||
|
this.SHARES_DATA = this.shareAccounts;
|
||||||
|
this.dataSourceLoan = new MatTableDataSource(this.LOAN_DATA);
|
||||||
|
this.dataSourceSavings = new MatTableDataSource(this.SAVINGS_DATA);
|
||||||
|
this.dataSourceShares = new MatTableDataSource(this.SHARES_DATA);
|
||||||
|
|
||||||
|
/*
|
||||||
|
console.log(res);
|
||||||
|
console.log(this.loanAccounts);
|
||||||
|
console.log(this.savingsAccounts);
|
||||||
|
console.log(this.shareAccounts); */
|
||||||
|
})
|
||||||
|
);
|
||||||
|
this.clientService.getClientCharges(this.id)
|
||||||
|
.subscribe(
|
||||||
|
(res => {
|
||||||
|
this.upcomingCharges = res['pageItems'];
|
||||||
|
// console.log(this.upcomingCharges);
|
||||||
|
})
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.paramsSubscription.unsubscribe();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -12,3 +12,4 @@
|
|||||||
// border-right-width: 0;
|
// border-right-width: 0;
|
||||||
// border-radius: 0;
|
// border-radius: 0;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
|||||||
@@ -33,7 +33,7 @@ body, html {
|
|||||||
|
|
||||||
.container {
|
.container {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 68rem;
|
max-width: 74rem;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user