refactor: implement pagination to view accounts of clients (#352)

Fixes: #133

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

@@ -118,6 +118,7 @@
 
               </tr>
             </table>
+            <mat-paginator #loanPaginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
           </div>
           <!-- SAVINGS TABLE -->
 
@@ -159,6 +160,7 @@
 
               </tr>
             </table>
+            <mat-paginator #savingsPaginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
 
           </div>
 
@@ -203,6 +205,7 @@
 
               </tr>
             </table>
+            <mat-paginator #sharesPaginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
 
           </div>
         </div>

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

@@ -44,6 +44,9 @@ export class ViewClientComponent implements OnInit, OnDestroy {
 
   @ViewChild('f') noteForm: NgForm;
   @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild('loanPaginator') loanPaginator: MatPaginator;
+  @ViewChild('savingsPaginator') savingsPaginator: MatPaginator;
+  @ViewChild('sharesPaginator') sharesPaginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
   constructor(private route: ActivatedRoute, private clientService: ClientsService,
@@ -97,9 +100,9 @@ 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.paginator = this.loanPaginator;
+          this.dataSourceSavings.paginator = this.savingsPaginator;
+          this.dataSourceShares.paginator = this.sharesPaginator;
           this.dataSourceLoan.sort = this.sort;
           this.dataSourceSavings.sort = this.sort;
           this.dataSourceShares.sort = this.sort;