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

feat: client address feature (#99)

Browse Source 
* client address feature
This commit is contained in:
Anwesh Nayak
2018-07-06 05:38:37 +05:30
committed by GitHub
parent 772f422d5e
commit 96b53f4f30
8 changed files with 515 additions and 482 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/templates/template.html
Vendored
+1 -1
View File
@@ -1,5 +1,5 @@
<div class="container m-t-40 m-b-40"> <div class="container m-t-40 m-b-40">
<div fxLayout="row" fxLayoutGap="20px"> <div fxLayout="row" fxLayoutGap="20px" class="m-t-30">
<div fxFlex="30%" ></div> <div fxFlex="30%" ></div>
<div fxFlex="70%" ></div> <div fxFlex="70%" ></div>
</div> </div>
src/app/clients/clients.module.ts
+3 -1
View File
@@ -7,6 +7,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CoreModule } from '../core/core.module'; import { CoreModule } from '../core/core.module';
import { MatTableModule } from '@angular/material/table'; import { MatTableModule } from '@angular/material/table';
import { FlexLayoutModule } from '@angular/flex-layout'; import { FlexLayoutModule } from '@angular/flex-layout';
import { ArchwizardModule } from 'angular-archwizard';
import { ClientsRoutingModule } from './clients-routing.module'; import { ClientsRoutingModule } from './clients-routing.module';
import { ClientsComponent } from './clients.component'; import { ClientsComponent } from './clients.component';
@@ -26,7 +27,8 @@ import { ClientsService } from './clients.service';
FlexLayoutModule, FlexLayoutModule,
BrowserModule, // tslint:disable BrowserModule, // tslint:disable
HttpModule, HttpModule,
MatTableModule MatTableModule,
ArchwizardModule
], ],
declarations: [ declarations: [
ClientsComponent, ClientsComponent,
src/app/clients/clients.service.ts
+25 -1
View File
@@ -39,7 +39,8 @@ 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://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}) {headers: headers})
.pipe( .pipe(
map( 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;
}
)
);
}
} }
src/app/clients/create-client/create-client.component.html
+54 -214
View File
@@ -1,74 +1,67 @@
<!-- <div class="container"> <div class="container m-t-40 m-b-40">
<aw-wizard class="mt-5" #wizard [navBarLayout]="'large-empty-symbols'"> <aw-wizard class="m-t-10" #wizard [navBarLayout]="'large-empty-symbols'">
<aw-wizard-step stepTitle="Title of step 1" [navigationSymbol]="{ symbol: '1' }"> <aw-wizard-step stepTitle="Title of step 1" [navigationSymbol]="{ symbol: '1' }">
<div class="col-sm-6 mx-auto">
<div class="card mt-5">
<div class="card-body">
<div class="form-group">
<fieldset disabled="">
<label class="control-label" for="disabledInput">Disabled input</label>
<input class="form-control" id="disabledInput" placeholder="Disabled input here..." disabled="" type="text">
</fieldset>
</div>
<div class="form-group"> <div fxLayoutAlign="center">
<fieldset> <mat-card class="example-card">
<label class="control-label" for="readOnlyInput">Readonly input</label> <mat-card-header>
<input class="form-control" id="readOnlyInput" placeholder="Readonly input here…" readonly="" type="text"> <div mat-card-avatar class="example-header-image"></div>
</fieldset> <mat-card-title>Shiba Inu</mat-card-title>
</div> <mat-card-subtitle>Dog Breed</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<form class="example-form">
<mat-form-field class="example-full-width">
<input matInput placeholder="Company (disabled)" disabled value="Google">
</mat-form-field>
<div class="form-group has-success"> <table class="example-full-width" cellspacing="0"><tr>
<label class="form-control-label" for="inputSuccess1">Valid input</label> <td><mat-form-field class="example-full-width">
<input value="correct value" class="form-control is-valid" id="inputValid" type="text"> <input matInput placeholder="First name">
<div class="valid-feedback">Success! You've done it.</div> </mat-form-field></td>
</div> <td><mat-form-field class="example-full-width">
<input matInput placeholder="Long Last Name That Will Be Truncated">
</mat-form-field></td>
</tr></table>
<div class="form-group has-danger"> <p>
<label class="form-control-label" for="inputDanger1">Invalid input</label> <mat-form-field class="example-full-width">
<input value="wrong value" class="form-control is-invalid" id="inputInvalid" type="text"> <textarea matInput placeholder="Address">1600 Amphitheatre Pkwy</textarea>
<div class="invalid-feedback">Sorry, that username's taken. Try another?</div> </mat-form-field>
</div> <mat-form-field class="example-full-width">
<textarea matInput placeholder="Address 2"></textarea>
</mat-form-field>
</p>
<div class="form-group"> <table class="example-full-width" cellspacing="0"><tr>
<label class="col-form-label col-form-label-lg" for="inputLarge">Large input</label> <td><mat-form-field class="example-full-width">
<input class="form-control form-control-lg" placeholder=".form-control-lg" id="inputLarge" type="text"> <input matInput placeholder="City">
</div> </mat-form-field></td>
<td><mat-form-field class="example-full-width">
<input matInput placeholder="State">
</mat-form-field></td>
<td><mat-form-field class="example-full-width">
<input matInput #postalCode maxlength="5" placeholder="Postal Code" value="94043">
<mat-hint align="end">{{postalCode.value.length}} / 5</mat-hint>
</mat-form-field></td>
</tr></table>
</form>
<div class="form-group"> </mat-card-content>
<label class="col-form-label" for="inputDefault">Default input</label> <mat-card-actions>
<input class="form-control" placeholder="Default input" id="inputDefault" type="text"> <button mat-button>LIKE</button>
</div> <button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>
<div class="form-group">
<label class="col-form-label col-form-label-sm" for="inputSmall">Small input</label>
<input class="form-control form-control-sm" placeholder=".form-control-sm" id="inputSmall" type="text">
</div>
<div class="form-group">
<label class="control-label">Input addons</label>
<div class="form-group">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input class="form-control" aria-label="Amount (to the nearest dollar)" type="text">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
</div>
</div> </div>
<button type="button" class="btn btn-primary float-right" awNextStep>Next Step</button>
</div>
</div>
</div>
</aw-wizard-step> </aw-wizard-step>
<aw-wizard-step stepTitle="Title of step 2" [navigationSymbol]="{ symbol: '2' }" > <!-- <aw-wizard-step stepTitle="Title of step 2" [navigationSymbol]="{ symbol: '2' }" >
<div class="col-sm-6 mx-auto"> <div class="col-sm-6 mx-auto">
<div class="card mt-5"> <div class="card mt-5">
<div class="card-body"> <div class="card-body">
@@ -171,8 +164,8 @@
<button type="button" class="btn btn-primary" >Finish</button> <button type="button" class="btn btn-primary" >Finish</button>
</aw-wizard-step> </aw-wizard-step>
</aw-wizard> </aw-wizard>
</div> --> </div>
<!-- <div class="container"> <div class="container">
<aw-wizard class="mt-5" #wizard [navBarLayout]="'large-empty-symbols'"> <aw-wizard class="mt-5" #wizard [navBarLayout]="'large-empty-symbols'">
<aw-wizard-step stepTitle="Title of step 1" [navigationSymbol]="{ symbol: '1' }"> <aw-wizard-step stepTitle="Title of step 1" [navigationSymbol]="{ symbol: '1' }">
@@ -243,166 +236,13 @@
</aw-wizard-step> </aw-wizard-step>
<aw-wizard-step stepTitle="Title of step 2" [navigationSymbol]="{ symbol: '2' }" > <aw-wizard-step stepTitle="Title of step 2" [navigationSymbol]="{ symbol: '2' }" >
<div class="col-sm-6 mx-auto">
<div class="card mt-5">
<div class="card-body">
<form>
<fieldset>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input readonly="" class="form-control-plaintext" id="staticEmail" value="email@example.com" type="text">
</div>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" type="email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input class="form-control" id="exampleInputPassword1" placeholder="Password" type="password">
</div>
<div class="form-group">
<label for="exampleSelect1">Example select</label>
<select class="form-control" id="exampleSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleSelect2">Example multiple select</label>
<select multiple="" class="form-control" id="exampleSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleTextarea">Example textarea</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp" type="file">
<small id="fileHelp" class="form-text text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
</div>
<fieldset class="form-group">
<legend>Radio buttons</legend>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked="" type="radio">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2" type="radio">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled="" type="radio">
Option three is disabled
</label>
</div>
</fieldset>
<fieldset class="form-group">
<legend>Checkboxes</legend>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" value="" checked="" type="checkbox">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input class="form-check-input" value="" disabled="" type="checkbox">
Option two is disabled
</label>
</div>
</fieldset>
</fieldset>
</form>
<button type="button" class="btn btn-primary float-left" awPreviousStep>Go to previous step</button>
<button type="button" class="btn btn-primary float-right" awNextStep>Go to next step</button>
</div>
</div>
</div>
</aw-wizard-step> </aw-wizard-step>
<aw-wizard-step stepTitle="Title of step 3" [navigationSymbol]="{ symbol: '3' }"> <aw-wizard-step stepTitle="Title of step 3" [navigationSymbol]="{ symbol: '3' }">
Content of Step 3 Content of Step 3
<button type="button" class="btn btn-primary" awPreviousStep>Previous Step</button> <button type="button" class="btn btn-primary" awPreviousStep>Previous Step</button>
<button type="button" class="btn btn-primary" >Finish</button> <button type="button" class="btn btn-primary" >Finish</button>
</aw-wizard-step> </aw-wizard-step> -->
</aw-wizard> </aw-wizard>
</div> --> </div>
<div class="container m-t-40">
<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">
{{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
</button>
<mat-horizontal-stepper [linear]="isLinear" #stepper>
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup" fxLayout="column">
<ng-template matStepLabel>Fill out your name</ng-template>
<mat-form-field>
<input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
</mat-form-field>
<div>
<mat-form-field>
<input matInput placeholder="Input">
</mat-form-field>
</div>
<mat-form-field>
<textarea matInput placeholder="Textarea"></textarea>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Select">
<mat-option value="option">Option</mat-option>
</mat-select>
</mat-form-field>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Fill out your address</ng-template>
<mat-form-field>
<input matInput placeholder="Address" formControlName="secondCtrl" required>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
You are now done.
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="stepper.reset()">Reset</button>
</div>
</mat-step>
</mat-horizontal-stepper>
</div>
<div fxLayout="row">
<div>1. One</div>
<div>2. Two</div>
<div>3. Three</div>
<div>4. Four</div>
</div>
src/app/clients/create-client/create-client.component.scss
+13
View File
@@ -0,0 +1,13 @@
.example-card {
width: 500px;
}
.example-form {
min-width: 150px;
max-width: 500px;
width: 100%;
}
.example-full-width {
width: 100%;
}
src/app/clients/view-client/view-client.component.html
+220 -146
View File
@@ -1,203 +1,277 @@
<div class="container m-t-40 m-b-40"> <div class="container m-t-40 m-b-40">
<div fxLayout="row" fxLayoutGap="20px"> <mat-tab-group mat-stretch-tabs>
<div fxFlex="30%" ><mat-card class="example-card"> <mat-tab label="Clients">
<div fxLayout="row" fxLayoutGap="20px" class="m-t-30">
<div fxFlex="30%">
<mat-card class="example-card">
<mat-card-header> <mat-card-header>
<mat-card-title><h3>{{clientInfo.displayName}}</h3></mat-card-title> <mat-card-title>
<h3>{{clientInfo?.displayName}}</h3>
</mat-card-title>
<mat-card-subtitle> </mat-card-subtitle> <mat-card-subtitle> </mat-card-subtitle>
</mat-card-header> </mat-card-header>
<img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu"> <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"> <mat-card-content class="border">
<table> <table>
<tr> <tr>
<th>Name:</th> <th>Name:</th>
<td>{{clientInfo.displayName}}</td> <td>{{clientInfo?.displayName}}</td>
</tr> </tr>
<tr> <tr>
<th>Activation date</th> <th>Activation date</th>
<td>{{clientInfo.activationDate}}</td> <td>{{clientInfo?.activationDate}}</td>
</tr> </tr>
<tr> <tr>
<th>Member</th> <th>Member</th>
<td>{{clientInfo.groupNames}}</td> <td>{{clientInfo?.groupNames}}</td>
</tr> </tr>
<tr> <tr>
<th>Is Staff</th> <th>Is Staff</th>
<td>{{clientInfo.isStaff}}</td> <td>{{clientInfo?.isStaff}}</td>
</tr> </tr>
<tr> <tr>
<th>Mobile No</th> <th>Mobile No</th>
<td>{{clientInfo.mobileNo}}</td> <td>{{clientInfo?.mobileNo}}</td>
</tr> </tr>
<tr> <tr>
<th>Gender</th> <th>Gender</th>
<td>{{clientInfo.gender.name }}</td> <td>{{clientInfo?.gender.name }}</td>
</tr> </tr>
<tr> <tr>
<th>Client Type</th> <th>Client Type</th>
<td>{{clientInfo.clientType.name}}</td> <td>{{clientInfo?.clientType.name}}</td>
</tr> </tr>
<tr> <tr>
<th>Client Classification</th> <th>Client Classification</th>
<td>{{clientInfo.clientClassification.name}}</td> <td>{{clientInfo?.clientClassification.name}}</td>
</tr> </tr>
<tr> <tr>
<th>Date of Birth</th> <th>Date of Birth</th>
<td>{{clientInfo.dateOfBirth}}</td> <td>{{clientInfo?.dateOfBirth}}</td>
</tr> </tr>
</table> </table>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
</div > </div>
<div fxFlex="70%"> <div fxFlex="70%">
<div class="mat-elevation-z8 m-b-55"> <div class="mat-elevation-z8 m-b-55">
<!-- LOAN TABLE --> <!-- LOAN TABLE -->
<mat-toolbar> <mat-toolbar>
<span><h4>Loan Account Overview</h4> </span> <span>Loan Account Overview</span>
</mat-toolbar> </mat-toolbar>
<table mat-table [dataSource]="dataSourceLoan" matSort> <table mat-table [dataSource]="dataSourceLoan" matSort>
<!-- Name Column --> <!-- Name Column -->
<ng-container matColumnDef="account"> <ng-container matColumnDef="account">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Account #ng </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Account #ng </th>
<td mat-cell *matCellDef="let row"> {{row.accountNo}} </td> <td mat-cell *matCellDef="let row"> {{row.accountNo}} </td>
</ng-container> </ng-container>
<!-- Account no Column --> <!-- Account no Column -->
<ng-container matColumnDef="loanAccount"> <ng-container matColumnDef="loanAccount">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Loan Account </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Loan Account </th>
<td mat-cell *matCellDef="let row"> {{row.productName}} </td> <td mat-cell *matCellDef="let row"> {{row.productName}} </td>
</ng-container> </ng-container>
<!-- External ID Column --> <!-- External ID Column -->
<ng-container matColumnDef="originalLoan"> <ng-container matColumnDef="originalLoan">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Original Loan </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Original Loan </th>
<td mat-cell *matCellDef="let row"> {{row.originalLoan}} </td> <td mat-cell *matCellDef="let row"> {{row.originalLoan}} </td>
</ng-container> </ng-container>
<!-- Status Column --> <!-- Status Column -->
<ng-container matColumnDef="loanBalance"> <ng-container matColumnDef="loanBalance">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Loan Balance </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Loan Balance </th>
<td mat-cell *matCellDef="let row"> {{row.loanBalance}} </td> <td mat-cell *matCellDef="let row"> {{row.loanBalance}} </td>
</ng-container> </ng-container>
<!-- Color Column --> <!-- Color Column -->
<ng-container matColumnDef="amountPaid"> <ng-container matColumnDef="amountPaid">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Amount Paid </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount Paid </th>
<td mat-cell *matCellDef="let row"> {{row.amountPaid}} </td> <td mat-cell *matCellDef="let row"> {{row.amountPaid}} </td>
</ng-container> </ng-container>
<!-- ID Column --> <!-- ID Column -->
<ng-container matColumnDef="type"> <ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Type </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Type </th>
<td mat-cell *matCellDef="let row"> {{row.loanType.value}} </td> <td mat-cell *matCellDef="let row"> {{row.loanType.value}} </td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="displayedLoanColumns"></tr> <tr mat-header-row *matHeaderRowDef="displayedLoanColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedLoanColumns;" [routerLink]="[]"> <tr mat-row *matRowDef="let row; columns: displayedLoanColumns;" [routerLink]="[]">
</tr> </tr>
</table> </table>
</div> </div>
<!-- SAVINGS TABLE --> <!-- SAVINGS TABLE -->
<div class="mat-elevation-z8 m-b-55"> <div class="mat-elevation-z8 m-b-55">
<mat-toolbar> <mat-toolbar>
<span><h4>Savings Account Overview</h4> </span> <span>
</mat-toolbar> <h4>Savings Account Overview</h4>
<table mat-table [dataSource]="dataSourceSavings" matSort> </span>
</mat-toolbar>
<table mat-table [dataSource]="dataSourceSavings" matSort>
<!-- Name Column --> <!-- Name Column -->
<ng-container matColumnDef="account"> <ng-container matColumnDef="account">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Account # </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Account # </th>
<td mat-cell *matCellDef="let row"> {{row.accountNo}} </td> <td mat-cell *matCellDef="let row"> {{row.accountNo}} </td>
</ng-container> </ng-container>
<!-- Account no Column --> <!-- Account no Column -->
<ng-container matColumnDef="savingsAccount"> <ng-container matColumnDef="savingsAccount">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Saving Account </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Saving Account </th>
<td mat-cell *matCellDef="let row"> {{row.productName}} </td> <td mat-cell *matCellDef="let row"> {{row.productName}} </td>
</ng-container> </ng-container>
<!-- External ID Column --> <!-- External ID Column -->
<ng-container matColumnDef="lastActive"> <ng-container matColumnDef="lastActive">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Last Active </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Last Active </th>
<td mat-cell *matCellDef="let row"> {{row.lastActiveTransactionDate}} </td> <td mat-cell *matCellDef="let row"> {{row.lastActiveTransactionDate}} </td>
</ng-container> </ng-container>
<!-- Status Column --> <!-- Status Column -->
<ng-container matColumnDef="balance"> <ng-container matColumnDef="balance">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Balance </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Balance </th>
<td mat-cell *matCellDef="let row"> {{row.accountBalance}} </td> <td mat-cell *matCellDef="let row"> {{row.accountBalance}} </td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="displayedSavingsColumns"></tr> <tr mat-header-row *matHeaderRowDef="displayedSavingsColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedSavingsColumns;" [routerLink]="[]"> <tr mat-row *matRowDef="let row; columns: displayedSavingsColumns;" [routerLink]="[]">
</tr> </tr>
</table> </table>
</div> </div>
<!-- SHARES TABLE --> <!-- SHARES TABLE -->
<div class="mat-elevation-z8 m-b-55"> <div class="mat-elevation-z8 m-b-55">
<mat-toolbar> <mat-toolbar>
<span><h4>Shares Account Overview</h4> </span> <span>
</mat-toolbar> <h4>Shares Account Overview</h4>
<table mat-table [dataSource]="dataSourceShares" matSort> </span>
</mat-toolbar>
<table mat-table [dataSource]="dataSourceShares" matSort>
<!-- Name Column --> <!-- Name Column -->
<ng-container matColumnDef="account"> <ng-container matColumnDef="account">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Account # </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Account # </th>
<td mat-cell *matCellDef="let row"> {{row.accountNo}} </td> <td mat-cell *matCellDef="let row"> {{row.accountNo}} </td>
</ng-container> </ng-container>
<!-- Account no Column --> <!-- Account no Column -->
<ng-container matColumnDef="shareAccount"> <ng-container matColumnDef="shareAccount">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Share Account#</th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Share Account#</th>
<td mat-cell *matCellDef="let row"> {{row.productName}} </td> <td mat-cell *matCellDef="let row"> {{row.productName}} </td>
</ng-container> </ng-container>
<!-- External ID Column --> <!-- External ID Column -->
<ng-container matColumnDef="approvedShares"> <ng-container matColumnDef="approvedShares">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Approved Shares </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Approved Shares </th>
<td mat-cell *matCellDef="let row"> {{row.totalApprovedShares}} </td> <td mat-cell *matCellDef="let row"> {{row.totalApprovedShares}} </td>
</ng-container> </ng-container>
<!-- Status Column --> <!-- Status Column -->
<ng-container matColumnDef="pending"> <ng-container matColumnDef="pending">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Pending for Approval Shares </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Pending for Approval Shares </th>
<td mat-cell *matCellDef="let row"> {{row.totalPendingForApprovalShares}} </td> <td mat-cell *matCellDef="let row"> {{row.totalPendingForApprovalShares}} </td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="displayedSharesColumns"></tr> <tr mat-header-row *matHeaderRowDef="displayedSharesColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedSharesColumns;" [routerLink]="[]"> <tr mat-row *matRowDef="let row; columns: displayedSharesColumns;" [routerLink]="[]">
</tr> </tr>
</table> </table>
</div> </div>
</div>
</div> </div>
</mat-tab>
<mat-tab label="Address">
<div fxLayout="row wrap" fxLayoutGap="40px" class="m-t-30 m-b-30">
<div *ngFor="let item of clientAddress">
<mat-card class="address-card m-t-30 m-l-20">
<mat-card-header>
<div mat-card-avatar class=""></div>
<mat-card-title>{{item?.addressType}}</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="custom-table">
<table>
<tr>
<th>Street</th>
<td>{{item?.street}}</td>
</tr>
<tr>
<th> Address Line 1 </th>
<td>{{item?.addressLine1}}</td>
</tr>
<tr>
<th> Address Line 2 </th>
<td>{{item?.addressLine2}}</td>
</tr>
<tr>
<th> Address Line 3 </th>
<td>{{item?.addressLine3}}</td>
</tr>
<tr>
<th> City </th>
<td>{{item?.city}}</td>
</tr>
<tr>
<th> State / Province /th>
<td>{{item?.stateName}}</td>
</tr>
<tr>
<th> Postal Code </th>
<td>{{item?.postalCode}}</td>
</tr>
<tr>
<th> is Active ? </th>
<td>{{item?.isActive}}</td>
</tr>
</table>
</div>
</mat-card-content>
<mat-card-actions>
<button mat-button>EDIT</button>
<button mat-button>ENABLE</button>
</mat-card-actions>
</mat-card>
</div>
</div>
</mat-tab>
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>
</div> </div>
<p>User with ID {{ id }} loaded.</p> <p>User with ID {{ id }} loaded.</p>
src/app/clients/view-client/view-client.component.scss
+115 -32
View File
@@ -1,44 +1,127 @@
.example-card { .example-card {
// max-width: 700px; // width:40%;
} }
.example-header-image { .address-card {
background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg'); width: 470px;
background-size: cover; }
}
.example-header-image {
background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
background-size: cover;
}
.border { .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-right-width: 0;
border-left-width: 0; border-left-width: 0;
border-radius: 0; padding: 5px;
}
th {
white-space: nowrap;
overflow: hidden;
text-align: left;
padding: 6px 3px 6px;
} }
table th {
padding: 10px;
tr { text-align: middle;
word-wrap: break-word;
padding: 6px 0px 6px;
}
table {
width: 100%;
} }
table td {
.mat-form-field { padding: 10px;
text-align: middle;
}
table th {
text-transform: uppercase;
font-size: 14px; font-size: 14px;
width: 100%; letter-spacing: 1px;
} }
tr:nth-child(even) {
td, th { // background-color: #fafafa;
width: 15%;
} }
@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;
}
}
}
src/app/clients/view-client/view-client.component.ts
+39 -42
View File
@@ -1,5 +1,5 @@
import { ClientsService } from 'app/clients/clients.service'; 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 { ActivatedRoute, Params } from '@angular/router';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
import { DataSource } from '@angular/cdk/collections'; import { DataSource } from '@angular/cdk/collections';
@@ -8,7 +8,8 @@ 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'],
encapsulation: ViewEncapsulation.None
}) })
export class ViewClientComponent implements OnInit, OnDestroy { export class ViewClientComponent implements OnInit, OnDestroy {
id: number = undefined; id: number = undefined;
@@ -19,12 +20,13 @@ export class ViewClientComponent implements OnInit, OnDestroy {
clientInfo: any = undefined; clientInfo: any = undefined;
paramsSubscription: Subscription; paramsSubscription: Subscription;
post: any = []; post: any = [];
clientAddress: any = undefined;
private LOAN_DATA: any = undefined; private LOAN_DATA: any = undefined;
private SAVINGS_DATA: any = undefined; private SAVINGS_DATA: any = undefined;
private SHARES_DATA: any = undefined; private SHARES_DATA: any = undefined;
displayedLoanColumns = ['account', 'loanAccount', 'originalLoan', 'loanBalance', 'amountPaid', 'type']; displayedLoanColumns = ['account', 'loanAccount', 'originalLoan', 'loanBalance', 'amountPaid', 'type'];
displayedSavingsColumns = ['account', 'savingsAccount', 'lastActive', 'balance']; displayedSavingsColumns = ['account', 'savingsAccount', 'lastActive', 'balance'];
displayedSharesColumns = ['account', 'shareAccount', 'approvedShares', 'pending']; displayedSharesColumns = ['account', 'shareAccount', 'approvedShares', 'pending'];
dataSourceLoan = new MatTableDataSource(); dataSourceLoan = new MatTableDataSource();
dataSourceSavings = new MatTableDataSource(); dataSourceSavings = new MatTableDataSource();
@@ -35,11 +37,11 @@ export class ViewClientComponent implements OnInit, OnDestroy {
ngOnInit() { ngOnInit() {
this.paramsSubscription = this.route.params this.paramsSubscription = this.route.params
.subscribe( .subscribe(
(params: Params) => { (params: Params) => {
this.id = params['id']; this.id = params['id'];
} }
); );
this.clientService.getClientId(this.id) this.clientService.getClientId(this.id)
.subscribe( .subscribe(
(res => { (res => {
@@ -50,47 +52,42 @@ export class ViewClientComponent implements OnInit, OnDestroy {
this.clientInfo.groups.forEach(function (item: any) { this.clientInfo.groups.forEach(function (item: any) {
groupArray.push(item.name); groupArray.push(item.name);
console.log(item.name); });
});
this.clientInfo.groupNames = groupArray.join('|'); this.clientInfo.groupNames = groupArray.join('|');
console.log( this.clientInfo.groupNames);
// console.log(res['dateOfBirth'][1]);
}) })
); );
this.clientService.getClientAccounts(this.id) this.clientService.getClientAccounts(this.id)
.subscribe( .subscribe(
(res => { (res => {
this.loanAccounts = res['loanAccounts']; this.loanAccounts = res['loanAccounts'];
this.savingsAccounts = res['savingsAccounts']; this.savingsAccounts = res['savingsAccounts'];
this.shareAccounts = res['shareAccounts']; this.shareAccounts = res['shareAccounts'];
// this.savingsAccounts.lastActiveTransactionDate = this.savingsAccounts this.LOAN_DATA = this.loanAccounts;
// .lastActiveTransactionDate.reverse().join('-'); this.SAVINGS_DATA = this.savingsAccounts;
console.log(this.savingsAccounts.lastActiveTransactionDate); this.SHARES_DATA = this.shareAccounts;
this.LOAN_DATA = this.loanAccounts; this.dataSourceLoan = new MatTableDataSource(this.LOAN_DATA);
this.SAVINGS_DATA = this.savingsAccounts; this.dataSourceSavings = new MatTableDataSource(this.SAVINGS_DATA);
this.SHARES_DATA = this.shareAccounts; this.dataSourceShares = new MatTableDataSource(this.SHARES_DATA);
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) this.clientService.getClientCharges(this.id)
.subscribe( .subscribe(
(res => { (res => {
this.upcomingCharges = res['pageItems']; this.upcomingCharges = res['pageItems'];
// console.log(this.upcomingCharges); })
}) );
); this.clientService.getClientAddress(this.id)
.subscribe(
(res => {
this.clientAddress = res;
console.log(res);
})
);
} }
ngOnDestroy() { ngOnDestroy() {
this.paramsSubscription.unsubscribe(); this.paramsSubscription.unsubscribe();
} }
} }