refactor: add 'mobile' and 'gender' columns in client list (#354)

Fixes: #79

src/app/clients/clients.component.html

@@ -37,6 +37,18 @@
        </td> 
       </ng-container>
 
+      <!-- Mobile Number Column-->
+      <ng-container matColumnDef="mobileNo">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Mobile Number </th>
+        <td mat-cell *matCellDef="let client"> {{ client.mobileNo }} </td>
+      </ng-container>
+      
+      <!--Gender column-->
+      <ng-container matColumnDef="gender">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Gender </th>
+        <td mat-cell *matCellDef="let client" > {{ client.gender.name }} </td>
+      </ng-container>
+
       <!-- Color Column -->
       <ng-container matColumnDef="office">
         <th mat-header-cell *matHeaderCellDef mat-sort-header='officeName'> OfficeName </th>

src/app/clients/clients.component.ts

@@ -14,7 +14,7 @@ import { Observable } from 'rxjs';
 export class ClientsComponent implements OnInit {
   post: any = [];
   private ELEMENT_DATA: any = undefined;
-  displayedColumns =  ['name', 'clientno', 'externalid', 'status', 'office', 'staff'];
+  displayedColumns =  ['name', 'clientno', 'externalid', 'status', 'mobileNo', 'gender', 'office', 'staff'];
   dataSource = new MatTableDataSource();
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
@@ -35,8 +35,13 @@ export class ClientsComponent implements OnInit {
         res.active = !!res.active;
       this.dataSource = new MatTableDataSource(res);
       this.dataSource.paginator = this.paginator;
+      this.dataSource.sortingDataAccessor = (data: any, property: any) => {
+        switch (property) {
+          case 'gender': return data.gender.name;
+          default: return data[property];
+        }
+      };
       this.dataSource.sort = this.sort;
-      this.dataSource.sortingDataAccessor = (data, header) => data[header];
       })
     );
   }