feat(client): POST client address && fix(client): fixed sorting and pagination in view clients (#115)

* feat(client): POST client address && fix(client): fixed sorting and pagination in view clients

src/app/clients/clients-routing.module.ts

@@ -6,6 +6,7 @@ import { ClientsComponent } from './clients.component';
 import { CreateClientComponent} from './create-client/create-client.component';
 import { ViewClientComponent } from './view-client/view-client.component';
 import { ViewLoanComponent } from './view-loan/view-loan.component';
+import { CreateAddressComponent } from './create-address/create-address.component';
 
 const routes: Routes = [
   Route.withShell([
@@ -28,6 +29,11 @@ const routes: Routes = [
       path: 'clients/viewloan',
       component: ViewLoanComponent,
       data: { title: extract('View Loan') }
+    },
+    {
+      path: 'clients/address/:id',
+      component: CreateAddressComponent,
+      data: { title: extract('Create Address') }
     }
   ])
 ];

src/app/clients/clients.component.html

@@ -1,4 +1,4 @@
-<div class="container m-t-40">
+<div class="container m-t-40 m-b-40">
 
   <mat-form-field class="filter">
     <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
@@ -9,19 +9,19 @@
 
       <!-- Name Column -->
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header='displayName'> Name </th>
         <td mat-cell *matCellDef="let row"> {{row.displayName}} </td>
       </ng-container>
 
       <!-- Account no Column -->
       <ng-container matColumnDef="clientno">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Account # </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header='accountNo'> Account # </th>
         <td mat-cell *matCellDef="let row"> {{row.accountNo}} </td>
       </ng-container>
 
       <!-- External ID Column -->
       <ng-container matColumnDef="externalid">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> ExternalID </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header='externalId'> ExternalID </th>
         <td mat-cell *matCellDef="let row"> {{row.externalId}} </td>
       </ng-container>
 
@@ -29,20 +29,20 @@
 
       <!-- Status Column -->
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header='active'> Status </th>
         <td mat-cell *matCellDef="let row"> {{row.active}} </td>
       </ng-container>
 
       <!-- Color Column -->
       <ng-container matColumnDef="office">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> OfficeName </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header='officeName'> OfficeName </th>
         <td mat-cell *matCellDef="let row"> {{row.officeName}} </td>
       </ng-container>
 
 
       <!-- ID Column -->
       <ng-container matColumnDef="staff">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> StaffName </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header='staffName'> StaffName </th>
         <td mat-cell *matCellDef="let row"> {{row.staffName}} </td>
       </ng-container>
 
@@ -52,7 +52,7 @@
       </tr>
     </table>
 
-    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
+    <mat-paginator [pageSizeOptions]="[10, 25, 100]"></mat-paginator>
   </div>
 
 

src/app/clients/clients.component.scss

@@ -15,3 +15,12 @@ td, th {
 .filter{
   width: 50%;
 }
+
+.inactive {
+  color: grey;
+}
+
+.active {
+  color: green;
+}
+

src/app/clients/clients.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {Component, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
 import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
 import { Response} from '@angular/http';
 import {ClientsService} from './clients.service';
@@ -7,7 +7,9 @@ import { Observable } from 'rxjs';
 @Component({
   selector: 'mifosx-clients',
   templateUrl: './clients.component.html',
-  styleUrls: ['./clients.component.scss']
+  styleUrls: ['./clients.component.scss'],
+  encapsulation: ViewEncapsulation.None
+
 })
 export class ClientsComponent implements OnInit {
   post: any = [];
@@ -18,21 +20,24 @@ export class ClientsComponent implements OnInit {
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
-  constructor(private clientService: ClientsService) {
-      // GET from clients API
-      this.clientService.getClients()
-      .subscribe(
-        (res => {
-     //   console.log(res);
-        this.ELEMENT_DATA = res;
-        this.dataSource = new MatTableDataSource(this.ELEMENT_DATA);
-        })
-      );
-  }
+  constructor(private clientService: ClientsService) {}
 
   ngOnInit() {
-    this.dataSource.paginator = this.paginator;
-    this.dataSource.sort = this.sort;
+       this.getClients();
+  }
+
+  // GET from clients API
+  getClients() {
+    this.clientService.getClients()
+    .subscribe(
+      (res => {
+        console.log(res);
+      this.dataSource = new MatTableDataSource(res);
+      this.dataSource.paginator = this.paginator;
+      this.dataSource.sort = this.sort;
+      this.dataSource.sortingDataAccessor = (data, header) => data[header];
+      })
+    );
   }
 
   applyFilter(filterValue: string) {

src/app/clients/clients.module.ts

@@ -14,6 +14,7 @@ import { ClientsComponent } from './clients.component';
 import { CreateClientComponent} from './create-client/create-client.component';
 import { ViewClientComponent } from './view-client/view-client.component';
 import { ViewLoanComponent } from './view-loan/view-loan.component';
+import { CreateAddressComponent } from './create-address/create-address.component';
 
 import { ClientsService } from './clients.service';
 
@@ -28,14 +29,15 @@ import { ClientsService } from './clients.service';
     BrowserModule,  // tslint:disable
     HttpModule, 
     MatTableModule,
-    ArchwizardModule
+    ArchwizardModule,
   ],
   declarations: [
     ClientsComponent,
     CreateClientComponent,
     ViewClientComponent,
-    ViewLoanComponent
-  ],
+    ViewLoanComponent,
+    CreateAddressComponent
+],
   providers: [
     ClientsService,
     HttpModule  // tslint:disable

src/app/clients/clients.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Http, Headers, Response } from '@angular/http';
+import { Http, Headers, Response, RequestOptions, URLSearchParams } from '@angular/http';
 /* import { HttpHeaders, HttpClient } from '@angular/common/http';
  */
 import { Observable } from 'rxjs';
@@ -141,4 +141,45 @@ export class ClientsService {
       )
     );
   }
+
+  getClientAddressTemplate() {
+    const headers = new Headers();   // tslint:disable-line
+    this.createAuthorizationHeader(headers);
+    return this.http.get
+    ('https://demo.openmf.org/fineract-provider/api/v1/client/'
+      + 'addresses/template?tenantIdentifier=default',
+    {headers: headers})
+    .pipe(
+    map(
+        (response: Response) => {  // tslint:disable-line
+          response = response.json();
+          return response;
+
+        }
+    )
+  );
+  }
+
+  postClientAddress (clientId: number, body: any, type: any) {
+    const headers = new Headers();   // tslint:disable-line
+    const params = new URLSearchParams(); // tslint:disable-line
+    params.set('type', type);
+    this.createAuthorizationHeader(headers);
+    body = JSON.stringify(body);
+      const options = new RequestOptions({ // tslint:disable-line
+       headers: headers,
+       params: params,
+    });
+    return this.http.post
+    ('https://demo.openmf.org/fineract-provider/api/v1/client/' + clientId
+      + '/addresses?' + '&tenantIdentifier=default&pretty=true', body ,
+    options)
+    .pipe(
+      map(
+          (response: Response) => {  // tslint:disable-line
+            response.json();
+          }
+      )
+    );
+  }
 }

src/app/clients/create-address/create-address.component.html

@@ -0,0 +1,73 @@
+<div class="container m-t-40 m-b-40">
+
+  <aw-wizard class="m-t-10" #wizard [navBarLayout]="'large-empty-symbols'">
+    <aw-wizard-step stepTitle="Address" [navigationSymbol]="{ symbol: '1' }">
+
+      <!--         [(ngModel)]="item.id" [ngModelOptions]="{standalone: true}" ngDefaultControl
+ -->
+      <div fxLayoutAlign="center">
+        <mat-card class="example-card">
+          <mat-card-header>
+          </mat-card-header>
+          <mat-card-content>
+            <form class="example-form" (ngSubmit)="onSubmit()" #f="ngForm">
+              <mat-form-field class="example-full-width">
+                <mat-select placeholder="Address Type" [(ngModel)]="addressTypeId" [ngModelOptions]="{standalone: true}" ngDefaultControl>
+                  <div>
+
+                    <mat-option *ngFor="let item of clientAddress?.addressTypeIdOptions" name="option" [value]="item?.id">{{item?.name}}</mat-option>
+                  </div>
+                </mat-select>
+              </mat-form-field>
+
+              <mat-form-field class="example-full-width">
+                <input matInput name="street" placeholder="Street" ngModel>
+              </mat-form-field>
+              <mat-form-field class="example-full-width">
+                <input matInput name="addressLine1" placeholder="Address Line 1" ngModel>
+              </mat-form-field>
+
+
+              <mat-form-field class="example-full-width">
+                <input matInput name="addressLine2" placeholder="Address Line 2" ngModel>
+              </mat-form-field>
+              <mat-form-field class="example-full-width">
+                <input matInput name="addressLine3" placeholder="Address Line 3" ngModel>
+              </mat-form-field>
+              <mat-form-field class="example-full-width">
+                <input matInput name="city" placeholder="City" ngModel>
+              </mat-form-field>
+              <mat-form-field class="example-full-width">
+                <mat-select placeholder="State" [(ngModel)]="addressStateId" [ngModelOptions]="{standalone: true}" ngDefaultControl>
+                  <div>
+
+                    <mat-option *ngFor="let item of clientAddress?.stateProvinceIdOptions" name="option" [value]="item?.id">{{item?.name}}</mat-option>
+                  </div>
+                </mat-select>
+              </mat-form-field>
+              <mat-form-field class="example-full-width">
+                <mat-select placeholder="Country" [(ngModel)]="addressCountryId" [ngModelOptions]="{standalone: true}" ngDefaultControl>
+                  <div>
+
+                    <mat-option *ngFor="let item of clientAddress?.countryIdOptions" name="option" [value]="item?.id">{{item?.name}}</mat-option>
+                  </div>
+                </mat-select>
+              </mat-form-field>
+              <mat-form-field class="example-full-width">
+                <input matInput name="postalCode" placeholder="Postal Code" ngModel>
+              </mat-form-field>
+
+              <button mat-raised-button>Create</button>
+
+            </form>
+
+          </mat-card-content>
+        </mat-card>
+
+
+      </div>
+
+
+    </aw-wizard-step>
+  </aw-wizard>
+</div>

src/app/clients/create-address/create-address.component.scss

@@ -0,0 +1,17 @@
+ 
+  
+  .example-form {
+    min-width: 150px;
+    max-width: 500px;
+    width: 100%;
+  }
+  
+  .example-full-width {
+    width: 100%;
+    padding:5px 3px;
+  }
+  
+  .mat-raised-button{
+    margin-left:10px;
+    margin-top:10px;
+  }

src/app/clients/create-address/create-address.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { CreateAddressComponent } from './create-address.component';
+
+describe('CreateAddressComponent', () => {
+  let component: CreateAddressComponent;
+  let fixture: ComponentFixture<CreateAddressComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CreateAddressComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateAddressComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/clients/create-address/create-address.component.ts

@@ -0,0 +1,77 @@
+import { Component, OnInit, ViewEncapsulation, ViewChild  } from '@angular/core';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { NgForm } from '@angular/forms';
+import { Router } from '@angular/router';
+
+import { ClientsService } from 'app/clients/clients.service';
+
+@Component({
+  selector: 'mifosx-app-create-address',
+  templateUrl: './create-address.component.html',
+  styleUrls: ['./create-address.component.scss'],
+  encapsulation: ViewEncapsulation.None
+
+})
+export class CreateAddressComponent implements OnInit {
+  id: number = undefined;
+  paramsSubscription: Subscription;
+  clientAddress: any = undefined;
+  value: any = undefined;
+  mymodel: any = undefined;
+  addressTypeId: any = undefined;
+  addressStateId: any = undefined;
+  addressCountryId: any = undefined;
+
+  address: any = undefined;
+
+  constructor(private route: ActivatedRoute, private clientService: ClientsService) {}
+
+  @ViewChild('f') addressForm: NgForm;
+
+
+  ngOnInit() {
+    this.paramsSubscription = this.route.params
+      .subscribe(
+        (params: Params) => {
+          this.id = params['id'];
+        }
+      );
+    console.log(this.id);
+    this.getClientAddressTemplate();
+  }
+
+  getClientAddressTemplate() {
+    this.clientService.getClientAddressTemplate()
+      .subscribe(
+        (res => {
+          this.clientAddress = res;
+          console.log(res);
+        })
+      );
+  }
+
+  onSubmit() {
+    this.address = {};
+    console.log(this.addressTypeId);
+    this.address.street = this.addressForm.value.street;
+    this.address.addressLine1 = this.addressForm.value.addressLine1;
+    this.address.addressLine2 = this.addressForm.value.addressLine2;
+    this.address.addressLine3 = this.addressForm.value.addressLine3;
+    this.address.city = this.addressForm.value.city;
+    this.address.stateProvinceId = this.addressStateId;
+    this.address.countryId = this.addressCountryId;
+    this.address.postalCode = this.addressForm.value.postalCode;
+
+
+    this.clientService.postClientAddress(this.id, this.address, this.addressTypeId)
+      .subscribe(
+        (res => {
+          return true;
+        })
+      );
+    this.addressForm.reset();
+  }
+}
+
+

src/app/clients/view-client/view-client.component.html

@@ -69,25 +69,26 @@
             <!-- LOAN TABLE -->
             <mat-toolbar>
               <span>Loan Account Overview</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>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header='accountNo'> 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>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header='productName'> 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>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header='originalLoan'> Original Loan </th>
                 <td mat-cell *matCellDef="let row"> {{row.originalLoan}} </td>
               </ng-container>
 
@@ -95,20 +96,20 @@
 
               <!-- Status Column -->
               <ng-container matColumnDef="loanBalance">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> Loan Balance </th>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header='loanBalance'> 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>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header='amountPaid'> 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>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header='loanType.value'> Type </th>
                 <td mat-cell *matCellDef="let row"> {{row.loanType.value}} </td>
               </ng-container>
 
@@ -122,27 +123,25 @@
 
           <div class="mat-elevation-z8 m-b-55">
             <mat-toolbar>
-              <span>
-                <h4>Savings Account Overview</h4>
-              </span>
+              <span>Savings Account Overview</span>
             </mat-toolbar>
-            <table mat-table [dataSource]="dataSourceSavings" matSort>
+            <table mat-table [dataSource]="dataSourceSavings" matSort matSortActive="accountNo">
 
               <!-- Name Column -->
               <ng-container matColumnDef="account">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> Account # </th>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header="accountNo"> 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>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header='productName'> 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>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header='lastActiveTransactionDate'> Last Active </th>
                 <td mat-cell *matCellDef="let row"> {{row.lastActiveTransactionDate}} </td>
               </ng-container>
 
@@ -150,7 +149,7 @@
 
               <!-- Status Column -->
               <ng-container matColumnDef="balance">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> Balance </th>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header='accountBalance'> Balance </th>
                 <td mat-cell *matCellDef="let row"> {{row.accountBalance}} </td>
               </ng-container>
 
@@ -160,6 +159,7 @@
 
               </tr>
             </table>
+
           </div>
 
 
@@ -167,27 +167,25 @@
 
           <div class="mat-elevation-z8 m-b-55">
             <mat-toolbar>
-              <span>
-                <h4>Shares Account Overview</h4>
-              </span>
+              <span>Shares Account Overview</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>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header='accountNo'> 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>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header='productName'> 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>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header='totalApprovedShares'> Approved Shares </th>
                 <td mat-cell *matCellDef="let row"> {{row.totalApprovedShares}} </td>
               </ng-container>
 
@@ -195,7 +193,7 @@
 
               <!-- Status Column -->
               <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='totalPendingForApprovalShares'> Pending for Approval Shares </th>
                 <td mat-cell *matCellDef="let row"> {{row.totalPendingForApprovalShares}} </td>
               </ng-container>
 
@@ -205,15 +203,18 @@
 
               </tr>
             </table>
+
           </div>
         </div>
       </div>
     </mat-tab>
     <mat-tab label="Address">
-
+      <div class="m-l-20 m-t-30">
+        <button mat-raised-button [routerLink]="['/clients/address', id]" routerLinkActive="active">Create Address</button>
+      </div>
       <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 class="address-card m-t-20 m-l-20">
             <mat-card-header>
               <div mat-card-avatar class=""></div>
               <mat-card-title>{{item?.addressType}}</mat-card-title>
@@ -243,9 +244,13 @@
                     <td>{{item?.city}}</td>
                   </tr>
                   <tr>
-                    <th> State / Province /th>
+                    <th> State / Province
                       <td>{{item?.stateName}}</td>
                   </tr>
+                  <tr>
+                    <th> Country
+                      <td>{{item?.countryName}}</td>
+                  </tr>
                   <tr>
                     <th> Postal Code </th>
                     <td>{{item?.postalCode}}</td>
@@ -274,9 +279,9 @@
             <mat-form-field>
               <input matInput name="clientnotes" placeholder="Textarea" ngModel>
             </mat-form-field>
-            <mat-card-actions>
+            <div class="m-l-10">
               <button mat-raised-button>Create</button>
-            </mat-card-actions>
+            </div>
 
           </form>
           <div *ngFor="let item of allNotes">

src/app/clients/view-client/view-client.component.ts

@@ -5,7 +5,7 @@ import { Subscription } from 'rxjs';
 import { DataSource } from '@angular/cdk/collections';
 import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
 import { NgForm } from '@angular/forms';
-
+import { Router } from '@angular/router';
 @Component({
   selector: 'mifosx-view-client',
   templateUrl: './view-client.component.html',
@@ -31,13 +31,15 @@ export class ViewClientComponent implements OnInit, OnDestroy {
   displayedSavingsColumns = ['account', 'savingsAccount', 'lastActive', 'balance'];
   displayedSharesColumns = ['account', 'shareAccount', 'approvedShares', 'pending'];
 
-  dataSourceLoan = new MatTableDataSource();
-  dataSourceSavings = new MatTableDataSource();
-  dataSourceShares = new MatTableDataSource();
+  dataSourceLoan = new MatTableDataSource([]);
+  dataSourceSavings = new MatTableDataSource([]);
+  dataSourceShares = new MatTableDataSource([]);
 
   @ViewChild('f') noteForm: NgForm;
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
 
-  constructor(private route: ActivatedRoute, private clientService: ClientsService) {}
+  constructor(private route: ActivatedRoute, private clientService: ClientsService, private router: Router) {}
 
   ngOnInit() {
     this.paramsSubscription = this.route.params
@@ -85,6 +87,13 @@ export class ViewClientComponent implements OnInit, OnDestroy {
           this.dataSourceLoan = new MatTableDataSource(this.LOAN_DATA);
           this.dataSourceSavings = new MatTableDataSource(this.SAVINGS_DATA);
           this.dataSourceShares = new MatTableDataSource(this.SHARES_DATA);
+          this.dataSourceLoan.paginator = this.paginator;
+          this.dataSourceSavings.paginator = this.paginator;
+          this.dataSourceShares.paginator = this.paginator;
+          this.dataSourceLoan.sort = this.sort;
+          this.dataSourceSavings.sort = this.sort;
+          this.dataSourceShares.sort = this.sort;
+
         })
       );
   }