Add history details presentational component.

src/app/pages/accounts/account-details/account-details.component.html

@@ -334,6 +334,11 @@
       </div>
 
       <div *ngIf="account" class="card mt-1">
+        <app-account-history
+          *ngIf="history"
+          [account]="history?.snapshot.data"
+          (closeWindow)="history = $event"
+        ></app-account-history>
         <mat-card-title class="card-header"> HISTORY </mat-card-title>
         <div class="card-body">
           <div *ngIf="historyLoading">
@@ -341,40 +346,57 @@
             <mat-progress-bar [mode]="'query'"></mat-progress-bar>
           </div>
 
-          <table
-            mat-table
+          <mat-table
             class="mat-elevation-z10"
             [dataSource]="historyDataSource"
             matSort
-            matSortActive="created"
+            matSortActive="timestamp"
             #HistoryTableSort="matSort"
             matSortDirection="asc"
             matSortDisableClear
           >
             <ng-container matColumnDef="actor">
-              <th mat-header-cell *matHeaderCellDef mat-sort-header>Actor</th>
-              <td mat-cell *matCellDef="let history">
+              <mat-header-cell *matHeaderCellDef mat-sort-header>Actor</mat-header-cell>
+              <mat-cell *matCellDef="let history">
                 {{ history?.change.actor }}
-              </td>
+              </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="message">
-              <th mat-header-cell *matHeaderCellDef mat-sort-header>Message</th>
-              <td mat-cell *matCellDef="let history">
+              <mat-header-cell *matHeaderCellDef mat-sort-header>Message</mat-header-cell>
+              <mat-cell *matCellDef="let history">
                 {{ history?.change.message }}
-              </td>
+              </mat-cell>
             </ng-container>
 
             <ng-container matColumnDef="sequence">
-              <th mat-header-cell *matHeaderCellDef mat-sort-header>Sequence</th>
-              <td mat-cell *matCellDef="let history">
+              <mat-header-cell *matHeaderCellDef mat-sort-header>Sequence</mat-header-cell>
+              <mat-cell *matCellDef="let history">
                 {{ history?.change.seq }}
-              </td>
+              </mat-cell>
             </ng-container>
 
-            <tr mat-header-row *matHeaderRowDef="historyDisplayedColumns"></tr>
-            <tr mat-row *matRowDef="let history; columns: historyDisplayedColumns"></tr>
-          </table>
+            <ng-container matColumnDef="dependencies">
+              <mat-header-cell *matHeaderCellDef mat-sort-header>Dependencies</mat-header-cell>
+              <mat-cell *matCellDef="let history">
+                {{ getKeyValue(history?.change.deps) }}
+              </mat-cell>
+            </ng-container>
+
+            <ng-container matColumnDef="timestamp">
+              <mat-header-cell *matHeaderCellDef mat-sort-header>ChangedAt</mat-header-cell>
+              <mat-cell *matCellDef="let history">
+                {{ history?.snapshot.timestamp | unixDate }}
+              </mat-cell>
+            </ng-container>
+
+            <mat-header-row *matHeaderRowDef="historyDisplayedColumns"></mat-header-row>
+            <mat-row
+              *matRowDef="let history; columns: historyDisplayedColumns"
+              (click)="viewHistory(history)"
+              matRipple
+            ></mat-row>
+          </mat-table>
 
           <mat-paginator
             #HistoryTablePaginator="matPaginator"

src/app/pages/accounts/account-details/account-details.component.ts

@@ -48,7 +48,13 @@ export class AccountDetailsComponent implements OnInit, AfterViewInit {
   @ViewChild('UserTableSort', { static: true }) userTableSort: MatSort;
 
   historyDataSource: MatTableDataSource<any>;
-  historyDisplayedColumns: Array<string> = ['actor', 'message', 'sequence'];
+  historyDisplayedColumns: Array<string> = [
+    'actor',
+    'message',
+    'sequence',
+    'dependencies',
+    'timestamp',
+  ];
   historyDefaultPageSize: number = 10;
   historyPageSizeOptions: Array<number> = [10, 20, 50, 100];
   @ViewChild('HistoryTablePaginator', { static: true }) historyPaginator: MatPaginator;
@@ -78,7 +84,8 @@ export class AccountDetailsComponent implements OnInit, AfterViewInit {
   areaType: string;
   accountsLoading: boolean = true;
   transactionsLoading: boolean = true;
-  history: Array<any> = [];
+  histories: Array<any> = [];
+  history: any;
   historyLoading: boolean = true;
 
   constructor(
@@ -183,12 +190,12 @@ export class AccountDetailsComponent implements OnInit, AfterViewInit {
       this.cdr.detectChanges();
     });
 
-    this.userService.historySubject.subscribe((history) => {
-      this.historyDataSource = new MatTableDataSource<any>(history);
+    this.userService.historySubject.subscribe((histories) => {
+      this.historyDataSource = new MatTableDataSource<any>(histories);
       this.historyDataSource.paginator = this.historyPaginator;
       this.historyDataSource.sort = this.historyTableSort;
-      this.history = history;
-      if (history.length > 0) {
+      this.histories = histories;
+      if (histories.length > 0) {
         this.historyLoading = false;
       }
       this.cdr.detectChanges();
@@ -252,6 +259,10 @@ export class AccountDetailsComponent implements OnInit, AfterViewInit {
     this.transaction = transaction;
   }
 
+  viewHistory(history): void {
+    this.history = history;
+  }
+
   viewAccount(account): void {
     this.router.navigateByUrl(
       `/accounts/${strip0x(account.identities.evm[`bloxberg:${environment.bloxbergChainId}`][0])}`
@@ -332,4 +343,14 @@ export class AccountDetailsComponent implements OnInit, AfterViewInit {
       });
     }
   }
+
+  getKeyValue(obj: any): string {
+    let str = '';
+    if (obj instanceof Object) {
+      for (const [key, value] of Object.entries(obj)) {
+        str += `${key}: ${value} `;
+      }
+    }
+    return str;
+  }
 }

src/app/pages/accounts/account-history/account-history.component.html

@@ -0,0 +1,59 @@
+<div *ngIf="account" class="mb-3 mt-1">
+  <div class="card text-center">
+    <mat-card-title class="card-header">
+      <div class="row">
+        ACCOUNT DETAILS
+        <button
+          mat-raised-button
+          type="button"
+          class="btn btn-outline-secondary ml-auto mr-2"
+          (click)="close()"
+        >
+          CLOSE
+        </button>
+      </div>
+    </mat-card-title>
+    <div class="card-body">
+      <div class="row">
+        <div class="col-md-6">
+          <ul class="list-group list-group-flush">
+            <li class="list-group-item">
+              <span>Name: {{ account?.vcard?.fn[0].value }}</span>
+            </li>
+            <li class="list-group-item">
+              <span>Phone Number: {{ account?.vcard?.tel[0].value }}</span>
+            </li>
+            <li class="list-group-item">
+              <span>Account Type: {{ account?.type }}</span>
+            </li>
+            <li class="list-group-item">
+              <span>Gender: {{ account?.gender }}</span>
+            </li>
+            <li class="list-group-item">
+              <span>Age: {{ account?.age }}</span>
+            </li>
+          </ul>
+        </div>
+        <div class="col-md-6">
+          <ul class="list-group list-group-flush">
+            <li class="list-group-item">
+              <span>Bio: {{ account?.products }}</span>
+            </li>
+            <li class="list-group-item">
+              <span>Business Category: {{ account?.category }}</span>
+            </li>
+            <li class="list-group-item">
+              <span>User Location: {{ account?.location?.area_name }}</span>
+            </li>
+            <li class="list-group-item">
+              <span>Location: {{ account?.location?.area }}</span>
+            </li>
+            <li class="list-group-item">
+              <span>Location Type: {{ account?.location?.area_type }}</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/pages/accounts/account-history/account-history.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountHistoryComponent } from './account-history.component';
+
+describe('AccountHistoryComponent', () => {
+  let component: AccountHistoryComponent;
+  let fixture: ComponentFixture<AccountHistoryComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [AccountHistoryComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccountHistoryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/accounts/account-history/account-history.component.ts

@@ -0,0 +1,38 @@
+import {
+  Component,
+  OnInit,
+  ChangeDetectionStrategy,
+  Input,
+  Output,
+  EventEmitter,
+  SimpleChanges,
+  OnChanges,
+} from '@angular/core';
+const vCard = require('vcard-parser');
+
+@Component({
+  selector: 'app-account-history',
+  templateUrl: './account-history.component.html',
+  styleUrls: ['./account-history.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AccountHistoryComponent implements OnInit, OnChanges {
+  @Input() account;
+
+  @Output() closeWindow: EventEmitter<any> = new EventEmitter<any>();
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (this.account) {
+      this.account.vcard = vCard.parse(atob(this.account.vcard));
+    }
+  }
+
+  close(): void {
+    this.account = null;
+    this.closeWindow.emit(this.account);
+  }
+}

src/app/pages/accounts/accounts.module.ts

@@ -24,6 +24,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { AccountSearchComponent } from './account-search/account-search.component';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { AccountHistoryComponent } from './account-history/account-history.component';
 
 @NgModule({
   declarations: [
@@ -31,7 +32,9 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
     AccountDetailsComponent,
     CreateAccountComponent,
     AccountSearchComponent,
+    AccountHistoryComponent,
   ],
+  exports: [AccountHistoryComponent],
   imports: [
     CommonModule,
     AccountsRoutingModule,