From 96b53f4f30d31b116bea1cb2aefd817a4c24fe98 Mon Sep 17 00:00:00 2001 From: Anwesh Nayak Date: Fri, 6 Jul 2018 05:38:37 +0530 Subject: [PATCH] feat: client address feature (#99) * client address feature --- docs/templates/template.html | 2 +- src/app/clients/clients.module.ts | 4 +- src/app/clients/clients.service.ts | 26 +- .../create-client.component.html | 282 +++-------- .../create-client.component.scss | 13 + .../view-client/view-client.component.html | 440 ++++++++++-------- .../view-client/view-client.component.scss | 149 ++++-- .../view-client/view-client.component.ts | 81 ++-- 8 files changed, 515 insertions(+), 482 deletions(-) diff --git a/docs/templates/template.html b/docs/templates/template.html index 122c0b44b..81a56c5e7 100644 --- a/docs/templates/template.html +++ b/docs/templates/template.html @@ -1,5 +1,5 @@
-
+
diff --git a/src/app/clients/clients.module.ts b/src/app/clients/clients.module.ts index 1a33d5bfa..4a28c9db1 100644 --- a/src/app/clients/clients.module.ts +++ b/src/app/clients/clients.module.ts @@ -7,6 +7,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { CoreModule } from '../core/core.module'; import { MatTableModule } from '@angular/material/table'; import { FlexLayoutModule } from '@angular/flex-layout'; +import { ArchwizardModule } from 'angular-archwizard'; import { ClientsRoutingModule } from './clients-routing.module'; import { ClientsComponent } from './clients.component'; @@ -26,7 +27,8 @@ import { ClientsService } from './clients.service'; FlexLayoutModule, BrowserModule, // tslint:disable HttpModule, - MatTableModule + MatTableModule, + ArchwizardModule ], declarations: [ ClientsComponent, diff --git a/src/app/clients/clients.service.ts b/src/app/clients/clients.service.ts index adefd9493..39c9d9773 100644 --- a/src/app/clients/clients.service.ts +++ b/src/app/clients/clients.service.ts @@ -39,7 +39,8 @@ 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://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId + '?tenantIdentifier=default&pretty=true', + ('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId + + '?tenantIdentifier=default&pretty=true', {headers: headers}) .pipe( map( @@ -97,4 +98,27 @@ export class ClientsService { ) ); } + + getClientAddress (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/client/' + clientId + + '/addresses' + '?tenantIdentifier=default&pretty=true', + {headers: headers}) + .pipe( + map( + (response: Response) => { // tslint:disable-line + response = response.json(); + return response; + + } + ) + ); + } } diff --git a/src/app/clients/create-client/create-client.component.html b/src/app/clients/create-client/create-client.component.html index a86f70653..f50b881c4 100644 --- a/src/app/clients/create-client/create-client.component.html +++ b/src/app/clients/create-client/create-client.component.html @@ -1,74 +1,67 @@ - - -
--> -
- - - - -
- Fill out your name - - - -
- - - -
- - - - - - - - Option - - -
- -
-
- - -
- Fill out your address - - - -
- - -
-
- - - Done - You are now done. -
- - -
- - -
-
-
1. One
-
2. Two
-
3. Three
-
4. Four
-
\ No newline at end of file +
diff --git a/src/app/clients/create-client/create-client.component.scss b/src/app/clients/create-client/create-client.component.scss index e69de29bb..81c45bbeb 100644 --- a/src/app/clients/create-client/create-client.component.scss +++ b/src/app/clients/create-client/create-client.component.scss @@ -0,0 +1,13 @@ + .example-card { + width: 500px; + } + + .example-form { + min-width: 150px; + max-width: 500px; + width: 100%; + } + + .example-full-width { + width: 100%; + } \ No newline at end of file diff --git a/src/app/clients/view-client/view-client.component.html b/src/app/clients/view-client/view-client.component.html index 64c0996ea..bc8ea7c63 100644 --- a/src/app/clients/view-client/view-client.component.html +++ b/src/app/clients/view-client/view-client.component.html @@ -1,203 +1,277 @@
-
-
+ + +
+
+ -

{{clientInfo.displayName}}

 + +

{{clientInfo?.displayName}}

+ Photo of a Shiba Inu - - - - - - - - - - - - - - - - + - - - - +
Name:{{clientInfo.displayName}}
Activation date{{clientInfo.activationDate}}
Member{{clientInfo.groupNames}}
Is Staff{{clientInfo.isStaff}}
+ + + + + + + + - - - - + + + + - - - - - - - - - - - - - - - - - - - - -
Name:{{clientInfo?.displayName}}
Activation date{{clientInfo?.activationDate}}
Mobile No{{clientInfo.mobileNo}}
Member{{clientInfo?.groupNames}}
Gender{{clientInfo.gender.name }}
Client Type{{clientInfo.clientType.name}}
Client Classification{{clientInfo.clientClassification.name}}
Date of Birth{{clientInfo.dateOfBirth}}
+ + Is Staff + {{clientInfo?.isStaff}} + + + + Mobile No + {{clientInfo?.mobileNo}} + + + + Gender + {{clientInfo?.gender.name }} + + + Client Type + {{clientInfo?.clientType.name}} + + + Client Classification + {{clientInfo?.clientClassification.name}} + + + + Date of Birth + {{clientInfo?.dateOfBirth}} + + + + + -
+
-
+
- - -

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}}
-
- + + + Loan Account Overview + -
- -

Savings Account Overview

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

Shares Account Overview

 - -
Account #ng {{row.accountNo}} Loan Account {{row.productName}} Original Loan {{row.originalLoan}}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Account # {{row.accountNo}} Share Account# {{row.productName}} Approved Shares {{row.totalApprovedShares}} Pending for Approval Shares {{row.totalPendingForApprovalShares}}
-
+ + + 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}}
+
+
- + + + +
+
+ + +
+ {{item?.addressType}} + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Street{{item?.street}}
Address Line 1 {{item?.addressLine1}}
Address Line 2 {{item?.addressLine2}}
Address Line 3 {{item?.addressLine3}}
City {{item?.city}}
State / Province /th> + {{item?.stateName}}
Postal Code {{item?.postalCode}}
is Active ? {{item?.isActive}}
+
+ + + + + + +
+
+ + Content 1 + Content 2 + Content 3 + + + +

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 0a554ed4d..eab0d4f38 100644 --- a/src/app/clients/view-client/view-client.component.scss +++ b/src/app/clients/view-client/view-client.component.scss @@ -1,44 +1,127 @@ .example-card { - // max-width: 700px; - } - - .example-header-image { - background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg'); - background-size: cover; - } + // width:40%; +} +.address-card { + width: 470px; +} + +.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: 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; +} + +/* .mat-row:nth-child(even) { + background-color: #fafafa; +} + +.mat-header-row { + background-color: #fafafa; +} */ + +table { + width: 100%; +} + +.mat-form-field { + font-size: 14px; + width: 100%; +} + +td, +th { + width: 15%; +} + +.mat-tab-label { + // font-weight: bold; +} + +.mat-tab-label.mat-tab-label-active {} + +.mat-toolbar { + font-size: 18px; + background-color: #fafafa; +} + +.custom-table { + table { + width: 100%; + margin: 0; + padding: 0; + border-collapse: collapse; + border-spacing: 0; + } + table tr { + border: 1px 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; + padding: 5px; } - - - tr { - word-wrap: break-word; - padding: 6px 0px 6px; - } - - - table { - width: 100%; + table th { + padding: 10px; + text-align: middle; } - - .mat-form-field { + table td { + padding: 10px; + text-align: middle; + } + table th { + text-transform: uppercase; font-size: 14px; - width: 100%; + letter-spacing: 1px; } - - td, th { - width: 15%; + tr:nth-child(even) { + // background-color: #fafafa; } - \ No newline at end of file + @media screen and (max-width: 600px) { + table { + border: 0; + } + table thead { + display: none; + } + table tr { + margin-bottom: 10px; + display: block; + border-bottom: 2px solid #ddd; + } + table td { + display: block; + text-align: left; + font-size: 13px; + border-bottom: 1px dotted #ccc; + } + table td:last-child { + border-bottom: 0; + } + table td:before { + content: attr(data-label); + float: left; + text-transform: uppercase; + font-weight: bold; + } + table th { + border: 0px; + } + } +} diff --git a/src/app/clients/view-client/view-client.component.ts b/src/app/clients/view-client/view-client.component.ts index 0eb847a66..171aae274 100644 --- a/src/app/clients/view-client/view-client.component.ts +++ b/src/app/clients/view-client/view-client.component.ts @@ -1,5 +1,5 @@ import { ClientsService } from 'app/clients/clients.service'; -import { Component, OnInit, OnDestroy } from '@angular/core'; +import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core'; import { ActivatedRoute, Params } from '@angular/router'; import { Subscription } from 'rxjs'; import { DataSource } from '@angular/cdk/collections'; @@ -8,7 +8,8 @@ import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material'; @Component({ selector: 'mifosx-view-client', templateUrl: './view-client.component.html', - styleUrls: ['./view-client.component.scss'] + styleUrls: ['./view-client.component.scss'], + encapsulation: ViewEncapsulation.None }) export class ViewClientComponent implements OnInit, OnDestroy { id: number = undefined; @@ -19,12 +20,13 @@ export class ViewClientComponent implements OnInit, OnDestroy { clientInfo: any = undefined; paramsSubscription: Subscription; post: any = []; + clientAddress: any = undefined; 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']; + displayedLoanColumns = ['account', 'loanAccount', 'originalLoan', 'loanBalance', 'amountPaid', 'type']; + displayedSavingsColumns = ['account', 'savingsAccount', 'lastActive', 'balance']; + displayedSharesColumns = ['account', 'shareAccount', 'approvedShares', 'pending']; dataSourceLoan = new MatTableDataSource(); dataSourceSavings = new MatTableDataSource(); @@ -35,11 +37,11 @@ export class ViewClientComponent implements OnInit, OnDestroy { ngOnInit() { this.paramsSubscription = this.route.params - .subscribe( - (params: Params) => { - this.id = params['id']; - } - ); + .subscribe( + (params: Params) => { + this.id = params['id']; + } + ); this.clientService.getClientId(this.id) .subscribe( (res => { @@ -50,47 +52,42 @@ export class ViewClientComponent implements OnInit, OnDestroy { 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); */ - }) - ); + .subscribe( + (res => { + this.loanAccounts = res['loanAccounts']; + this.savingsAccounts = res['savingsAccounts']; + this.shareAccounts = res['shareAccounts']; + 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); + }) + ); this.clientService.getClientCharges(this.id) - .subscribe( - (res => { - this.upcomingCharges = res['pageItems']; - // console.log(this.upcomingCharges); - }) - ); + .subscribe( + (res => { + this.upcomingCharges = res['pageItems']; + }) + ); + this.clientService.getClientAddress(this.id) + .subscribe( + (res => { + this.clientAddress = res; + console.log(res); + }) + ); } ngOnDestroy() { this.paramsSubscription.unsubscribe(); } } +