feat: view clients layout added (#76)

* Fetch all clients from mifos api

src/app/clients/clients.component.html

@@ -1,46 +1,81 @@
 <div class="container m-t-40">
 
-<mat-form-field class="filter">
+  <mat-form-field class="filter">
     <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
   </mat-form-field>
-  
+
   <div class="mat-elevation-z8">
     <table mat-table [dataSource]="dataSource" matSort>
-  
-      <!-- ID Column -->
-      <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
-        <td mat-cell *matCellDef="let row"> {{row.id}} </td>
-      </ng-container>
-  
-      <!-- Progress Column -->
-      <ng-container matColumnDef="progress">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Progress </th>
-        <td mat-cell *matCellDef="let row"> {{row.progress}}% </td>
-      </ng-container>
-  
+
       <!-- Name Column -->
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
-        <td mat-cell *matCellDef="let row"> {{row.name}} </td>
+        <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>
+        <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>
+        <td mat-cell *matCellDef="let row"> {{row.externalId}} </td>
+      </ng-container>
+
+
+
+      <!-- Status Column -->
+      <ng-container matColumnDef="status">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
+        <td mat-cell *matCellDef="let row"> {{row.active}} </td>
+      </ng-container>
+
       <!-- Color Column -->
-      <ng-container matColumnDef="color">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Color </th>
-        <td mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.color}} </td>
+      <ng-container matColumnDef="office">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> 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>
+        <td mat-cell *matCellDef="let row"> {{row.staffName}} </td>
+      </ng-container>
+
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;">
       </tr>
     </table>
-  
+
     <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
   </div>
-  
-  
+
+
   <!-- Copyright 2018 Google Inc. All Rights Reserved.
       Use of this source code is governed by an MIT-style license that
       can be found in the LICENSE file at http://angular.io/license -->
-</div>
+</div>
+
+
+
+<!-- <div class="container">
+  <div class="row">
+    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
+      <input type="text" #serverName>
+      <button class="btn btn-primary" (click)="onAddServer(serverName.value)">Add Server</button>
+      <br><br>
+      <button class="btn btn-primary" (click)="onSave()">Save</button>
+      <button class="btn btn-primary" (click)="onGet()">Get</button>
+      <hr>
+      <ul class="list-group" *ngFor="let server of post">
+        <li class="list-group-item">{{ server.firstname }} (ID: {{ server.id }})</li>
+      </ul>
+    </div>
+  </div>
+</div>
+ -->
+