Add metadata history datatable.

src/app/_services/user.service.ts

@@ -13,6 +13,7 @@ import { CICRegistry } from '@cicnet/cic-client';
 import { personValidation, updateSyncable, vcardValidation } from '@app/_helpers';
 import { add0x } from '@src/assets/js/ethtx/dist/hex';
 import { KeystoreService } from '@app/_services/keystore.service';
+import * as Automerge from 'automerge';
 const vCard = require('vcard-parser');
 
 @Injectable({
@@ -38,6 +39,10 @@ export class UserService {
   private categoriesList: BehaviorSubject<object> = new BehaviorSubject<object>(this.categories);
   categoriesSubject: Observable<object> = this.categoriesList.asObservable();
 
+  history: Array<any> = [];
+  private historyList: BehaviorSubject<any> = new BehaviorSubject<any>(this.history);
+  historySubject: Observable<Array<any>> = this.historyList.asObservable();
+
   constructor(
     private httpClient: HttpClient,
     private loggingService: LoggingService,
@@ -234,13 +239,22 @@ export class UserService {
 
   async getAccountByAddress(
     accountAddress: string,
-    limit: number = 100
+    limit: number = 100,
+    history: boolean = false
   ): Promise<Observable<AccountDetails>> {
     const accountSubject: Subject<any> = new Subject<any>();
     this.getAccountDetailsFromMeta(await User.toKey(add0x(accountAddress)))
       .pipe(first())
       .subscribe(async (res) => {
         const account: Syncable = Envelope.fromJSON(JSON.stringify(res)).unwrap();
+        if (history) {
+          try {
+            // @ts-ignore
+            this.historyList.next(Automerge.getHistory(account.m));
+          } catch (error) {
+            this.loggingService.sendErrorLevelMessage('No history found', this, { error });
+          }
+        }
         const accountInfo = account.m.data;
         await personValidation(accountInfo);
         this.tokenService.load.subscribe(async (status: boolean) => {

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

@@ -333,6 +333,58 @@
         </div>
       </div>
 
+      <div *ngIf="account" class="card mt-1">
+        <mat-card-title class="card-header"> HISTORY </mat-card-title>
+        <div class="card-body">
+          <div *ngIf="historyLoading">
+            <h2 class="text-center"><strong>Loading History!</strong></h2>
+            <mat-progress-bar [mode]="'query'"></mat-progress-bar>
+          </div>
+
+          <table
+            mat-table
+            class="mat-elevation-z10"
+            [dataSource]="historyDataSource"
+            matSort
+            matSortActive="created"
+            #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">
+                {{ history?.change.actor }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="message">
+              <th mat-header-cell *matHeaderCellDef mat-sort-header>Message</th>
+              <td mat-cell *matCellDef="let history">
+                {{ history?.change.message }}
+              </td>
+            </ng-container>
+
+            <ng-container matColumnDef="sequence">
+              <th mat-header-cell *matHeaderCellDef mat-sort-header>Sequence</th>
+              <td mat-cell *matCellDef="let history">
+                {{ history?.change.seq }}
+              </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="historyDisplayedColumns"></tr>
+            <tr mat-row *matRowDef="let history; columns: historyDisplayedColumns"></tr>
+          </table>
+
+          <mat-paginator
+            #HistoryTablePaginator="matPaginator"
+            [pageSize]="historyDefaultPageSize"
+            [pageSizeOptions]="historyPageSizeOptions"
+            showFirstLastButtons
+          ></mat-paginator>
+        </div>
+      </div>
+
       <mat-tab-group *ngIf="account" dynamicHeight mat-align-tabs="start">
         <mat-tab label="Transactions">
           <app-transaction-details

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

@@ -47,6 +47,13 @@ export class AccountDetailsComponent implements OnInit, AfterViewInit {
   @ViewChild('UserTablePaginator', { static: true }) userTablePaginator: MatPaginator;
   @ViewChild('UserTableSort', { static: true }) userTableSort: MatSort;
 
+  historyDataSource: MatTableDataSource<any>;
+  historyDisplayedColumns: Array<string> = ['actor', 'message', 'sequence'];
+  historyDefaultPageSize: number = 10;
+  historyPageSizeOptions: Array<number> = [10, 20, 50, 100];
+  @ViewChild('HistoryTablePaginator', { static: true }) historyPaginator: MatPaginator;
+  @ViewChild('HistoryTableSort', { static: true }) historyTableSort: MatSort;
+
   accountInfoForm: FormGroup;
   account: AccountDetails;
   accountAddress: string;
@@ -71,6 +78,8 @@ export class AccountDetailsComponent implements OnInit, AfterViewInit {
   areaType: string;
   accountsLoading: boolean = true;
   transactionsLoading: boolean = true;
+  history: Array<any> = [];
+  historyLoading: boolean = true;
 
   constructor(
     private formBuilder: FormBuilder,
@@ -109,7 +118,7 @@ export class AccountDetailsComponent implements OnInit, AfterViewInit {
     this.transactionService.resetTransactionsList();
     await this.blockSyncService.blockSync(this.accountAddress);
     this.userService.resetAccountsList();
-    (await this.userService.getAccountByAddress(this.accountAddress, 100)).subscribe(
+    (await this.userService.getAccountByAddress(this.accountAddress, 100, true)).subscribe(
       async (res) => {
         if (res !== undefined) {
           this.account = res;
@@ -173,6 +182,18 @@ export class AccountDetailsComponent implements OnInit, AfterViewInit {
       }
       this.cdr.detectChanges();
     });
+
+    this.userService.historySubject.subscribe((history) => {
+      this.historyDataSource = new MatTableDataSource<any>(history);
+      this.historyDataSource.paginator = this.historyPaginator;
+      this.historyDataSource.sort = this.historyTableSort;
+      this.history = history;
+      if (history.length > 0) {
+        this.historyLoading = false;
+      }
+      this.cdr.detectChanges();
+    });
+
     this.userService.getCategories();
     this.userService.categoriesSubject.subscribe((res) => {
       this.categories = Object.keys(res);
@@ -213,6 +234,10 @@ export class AccountDetailsComponent implements OnInit, AfterViewInit {
       this.transactionsDataSource.paginator = this.transactionTablePaginator;
       this.transactionsDataSource.sort = this.transactionTableSort;
     }
+    if (this.historyDataSource) {
+      this.historyDataSource.paginator = this.historyPaginator;
+      this.historyDataSource.sort = this.historyTableSort;
+    }
   }
 
   doTransactionFilter(value: string): void {