From 9f1df583a59a46c42f712bacb9d6eb9dd31cde47 Mon Sep 17 00:00:00 2001 From: Anwesh Nayak Date: Wed, 4 Jul 2018 07:30:25 +0530 Subject: [PATCH] feat: view client layout implemented (#93) * view client layout implemented --- docs/templates/template.html | 11 +- src/app/clients/clients-routing.module.ts | 2 +- src/app/clients/clients.component.html | 3 +- src/app/clients/clients.component.ts | 6 +- src/app/clients/clients.service.ts | 71 +++- .../view-client/view-client.component.html | 348 ++++++++++-------- .../view-client/view-client.component.scss | 44 +++ .../view-client/view-client.component.ts | 87 ++++- .../view-client/view-client.service.ts | 0 .../view-loan/view-loan.component.scss | 1 + src/assets/styles/_helper.scss | 2 +- 11 files changed, 404 insertions(+), 171 deletions(-) create mode 100644 src/app/clients/view-client/view-client.service.ts diff --git a/docs/templates/template.html b/docs/templates/template.html index f2660a9f9..122c0b44b 100644 --- a/docs/templates/template.html +++ b/docs/templates/template.html @@ -1,9 +1,6 @@ - -
-
-
-
-
-
+
+
+
+
\ No newline at end of file diff --git a/src/app/clients/clients-routing.module.ts b/src/app/clients/clients-routing.module.ts index 8f600884f..48cf5af27 100644 --- a/src/app/clients/clients-routing.module.ts +++ b/src/app/clients/clients-routing.module.ts @@ -20,7 +20,7 @@ const routes: Routes = [ data: { title: extract('Create Client') } }, { - path: 'clients/view', + path: 'clients/view/:id', component: ViewClientComponent, data: { title: extract('View Client') } }, diff --git a/src/app/clients/clients.component.html b/src/app/clients/clients.component.html index 927b4e73e..bb506cc94 100644 --- a/src/app/clients/clients.component.html +++ b/src/app/clients/clients.component.html @@ -47,7 +47,8 @@ - + + diff --git a/src/app/clients/clients.component.ts b/src/app/clients/clients.component.ts index 4697d61a3..ab4e9c354 100644 --- a/src/app/clients/clients.component.ts +++ b/src/app/clients/clients.component.ts @@ -11,7 +11,7 @@ import { Observable } from 'rxjs'; }) export class ClientsComponent implements OnInit { post: any = []; - private ELEMENT_DATA: any = null; + private ELEMENT_DATA: any = undefined; displayedColumns = ['name', 'clientno', 'externalid', 'status', 'office', 'staff']; dataSource = new MatTableDataSource(); @@ -20,10 +20,10 @@ export class ClientsComponent implements OnInit { constructor(private clientService: ClientsService) { // GET from clients API - this.clientService.getServer() + this.clientService.getClients() .subscribe( (res => { - console.log(res); + // console.log(res); this.ELEMENT_DATA = res; this.dataSource = new MatTableDataSource(this.ELEMENT_DATA); }) diff --git a/src/app/clients/clients.service.ts b/src/app/clients/clients.service.ts index 82e03dcdc..adefd9493 100644 --- a/src/app/clients/clients.service.ts +++ b/src/app/clients/clients.service.ts @@ -9,7 +9,7 @@ import { map } from 'rxjs/operators'; @Injectable() export class ClientsService { constructor(private http: Http) {} // tslint:disable-line - getServer() { + getClients() { const username = 'mifos'; const password = 'password'; 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-Origin', '*'); 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}) .pipe( 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; + + } + ) + ); + } } diff --git a/src/app/clients/view-client/view-client.component.html b/src/app/clients/view-client/view-client.component.html index 97f08f7fb..64c0996ea 100644 --- a/src/app/clients/view-client/view-client.component.html +++ b/src/app/clients/view-client/view-client.component.html @@ -1,161 +1,203 @@ - + +

Loan Account Overview

 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Account #ng {{row.accountNo}} Loan Account {{row.productName}} Original Loan {{row.originalLoan}} Loan Balance {{row.loanBalance}} Amount Paid {{row.amountPaid}} Type {{row.loanType.value}}
-
-
- + + - +
+ +

Savings Account Overview

 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Account # {{row.accountNo}} Saving Account {{row.productName}} Last Active {{row.lastActiveTransactionDate}} Balance {{row.accountBalance}}
+
+ + + + +
+ +

Shares Account Overview

 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Account # {{row.accountNo}} Share Account# {{row.productName}} Approved Shares {{row.totalApprovedShares}} Pending for Approval Shares {{row.totalPendingForApprovalShares}}
+
+ - - --> + +

User with ID {{ id }} loaded.

diff --git a/src/app/clients/view-client/view-client.component.scss b/src/app/clients/view-client/view-client.component.scss index e69de29bb..0a554ed4d 100644 --- a/src/app/clients/view-client/view-client.component.scss +++ b/src/app/clients/view-client/view-client.component.scss @@ -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%; + } + \ No newline at end of file diff --git a/src/app/clients/view-client/view-client.component.ts b/src/app/clients/view-client/view-client.component.ts index d365d6593..0eb847a66 100644 --- a/src/app/clients/view-client/view-client.component.ts +++ b/src/app/clients/view-client/view-client.component.ts @@ -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({ selector: 'mifosx-view-client', templateUrl: './view-client.component.html', 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() { + 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(); + } } diff --git a/src/app/clients/view-client/view-client.service.ts b/src/app/clients/view-client/view-client.service.ts new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/clients/view-loan/view-loan.component.scss b/src/app/clients/view-loan/view-loan.component.scss index ae12b1dce..c10ea5c95 100644 --- a/src/app/clients/view-loan/view-loan.component.scss +++ b/src/app/clients/view-loan/view-loan.component.scss @@ -12,3 +12,4 @@ // border-right-width: 0; // border-radius: 0; // } + diff --git a/src/assets/styles/_helper.scss b/src/assets/styles/_helper.scss index 90781abc2..7305a62d5 100644 --- a/src/assets/styles/_helper.scss +++ b/src/assets/styles/_helper.scss @@ -33,7 +33,7 @@ body, html { .container { margin: 0 auto; - max-width: 68rem; + max-width: 74rem; width: 90%; }