Enhancement for global search view

src/app/search/search-page/search-page.component.html

@@ -1,22 +1,68 @@
 <div class="container">
 
-  <mat-card fxLayout="column" fxLayoutGap="2%">
+  <mat-card fxLayout="column" fxLayoutGap="2%" *ngIf="hasResults">
 
     <mat-error *ngIf="overload">Searched query resulted more than 200 records, showing first 200 records.</mat-error>
 
-    <mat-list>
+    <table mat-table [dataSource]="dataSource">
 
-      <mat-list-item (click)="navigate(entity)" *ngFor="let entity of searchResults">
-        <h3 matLine><span class="link">{{ entity.entityName }}</span> | #{{ entity.entityAccountNo }}</h3>
-        <p matLine>
-          <span>Entity: {{ entity.entityType }} 
-            | {{ ['CLIENT','GROUP', 'CENTER'].includes(entity.entityType) ? 'Office' : 'Client' }}: {{ entity.parentName }}
-          </span>
-        </p>
-      </mat-list-item>
-      
-    </mat-list>
+      <ng-container matColumnDef="entityType">
+        <th mat-header-cell *matHeaderCellDef> Entity Type </th>
+        <td mat-cell *matCellDef="let entity" class="view-details"> {{entity.entityType}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="entityName">
+        <th mat-header-cell *matHeaderCellDef> Entity Name </th>
+        <td mat-cell *matCellDef="let entity" class="view-details"> {{entity.entityName}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="entityAccount">
+        <th mat-header-cell *matHeaderCellDef> Account No </th>
+        <td mat-cell *matCellDef="let entity" class="view-details"> {{entity.entityAccountNo}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="externalId">
+        <th mat-header-cell *matHeaderCellDef> External Id </th>
+        <td mat-cell *matCellDef="let entity" class="view-details"> {{entity.entityExternalId | externalIdentifier}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="parentType">
+        <th mat-header-cell *matHeaderCellDef> Parent Type </th>
+        <td mat-cell *matCellDef="let entity" class="view-details"> {{ ['CLIENT','GROUP', 'CENTER'].includes(entity.entityType) ? 'Office' : 'Client' }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="parentName">
+        <th mat-header-cell *matHeaderCellDef> Parent Name </th>
+        <td mat-cell *matCellDef="let entity" class="view-details"> {{entity.parentName}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="details">
+        <th mat-header-cell *matHeaderCellDef> Details </th>
+        <td mat-cell *matCellDef="let entity" class="view-details">
+          <button mat-icon-button matTooltip="View Entity" (click)="navigate(entity)" matTooltipPosition="right">
+            <fa-icon icon="eye" size="lg"></fa-icon>
+          </button>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let entity; columns: displayedColumns;"></tr>
+
+    </table>
+
+    <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
 
   </mat-card>
 
+  <mat-card fxLayout="column" fxLayoutGap="2%" *ngIf="!hasResults">
+    <div class="alert">
+
+      <div class="message">
+        <i class="fa fa-exclamation-circle alert-check"></i>
+        No data found
+      </div>
+
+    </div>
+  </mat-card>
+
 </div>

src/app/search/search-page/search-page.component.scss

@@ -1,18 +1 @@
-mat-list {
-  padding-top: 0px;
-}
 
-mat-list-item {
-  .link {
-    color: blue;
-    text-decoration: underline;
-    width: fit-content;
-    &:hover{
-      cursor: pointer;
-    }
-  }
-  margin-block: 20px;
-  &:hover{
-    background-color: #f5f5f5;
-  }
-}

src/app/search/search-page/search-page.component.ts

@@ -1,5 +1,7 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
 import { Router, ActivatedRoute } from '@angular/router';
 
 /**
@@ -11,11 +13,16 @@ import { Router, ActivatedRoute } from '@angular/router';
   styleUrls: ['./search-page.component.scss']
 })
 export class SearchPageComponent {
-
-  /** Search Results */
-  searchResults: any;
   /** Flags if number of search results exceed 200 */
   overload: boolean;
+  /** Datasource for loans disbursal table */
+  dataSource: MatTableDataSource<any>;
+  /** Displayed Columns for serach results */
+  displayedColumns: string[] = ['entityType', 'entityName', 'entityAccount', 'externalId', 'parentType', 'parentName', 'details'];
+  /** Paginator for the table */
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+
+  hasResults = false;
 
   /**
    * @param {ActivatedRoute} route Activated Route
@@ -24,10 +31,12 @@ export class SearchPageComponent {
   constructor(private route: ActivatedRoute,
               private router: Router) {
     this.route.data.subscribe(( data: { searchResults: any }) => {
-      this.searchResults = data.searchResults;
-      this.overload = this.searchResults.length > 200 ? true : false;
+      this.dataSource = new MatTableDataSource(data.searchResults);
+      this.dataSource.paginator = this.paginator;
+      this.hasResults = (data.searchResults.length > 0);
+      this.overload = data.searchResults.length > 200 ? true : false;
       if (this.overload) {
-        this.searchResults = this.searchResults.slice(0, 200);
+        this.dataSource = new MatTableDataSource(data.searchResults.slice(0, 200));
       }
     });
   }
@@ -39,7 +48,7 @@ export class SearchPageComponent {
   navigate(entity: any) {
     switch (entity.entityType) {
       case 'CLIENT':
-        this.router.navigate(['clients', entity.entityId]);
+        this.router.navigate(['clients', entity.entityId, 'general']);
         break;
       case 'CENTER':
         this.router.navigate(['centers', entity.entityId]);
@@ -51,10 +60,10 @@ export class SearchPageComponent {
         this.router.navigate(['clients', entity.parentId, 'shares-accounts', entity.entityId]);
         break;
       case 'SAVING':
-        this.router.navigate(['clients', entity.parentId, 'savings-accounts', entity.entityId]);
+        this.router.navigate(['clients', entity.parentId, 'savings-accounts', entity.entityId, 'general']);
         break;
       case 'LOAN':
-        this.router.navigate(['clients', entity.parentId, 'loans-accounts', entity.entityId]);
+        this.router.navigate(['clients', entity.parentId, 'loans-accounts', entity.entityId, 'general']);
         break;
     }
   }

src/app/search/search.module.ts

@@ -7,6 +7,7 @@ import { SearchRoutingModule } from './search-routing.module';
 
 /** Custom Components */
 import { SearchPageComponent } from './search-page/search-page.component';
+import { PipesModule } from 'app/pipes/pipes.module';
 
 /**
  * Search Module
@@ -15,6 +16,7 @@ import { SearchPageComponent } from './search-page/search-page.component';
   declarations: [SearchPageComponent],
   imports: [
     SharedModule,
+    PipesModule,
     SearchRoutingModule
   ]
 })