From 2b476f3c8bf83b82c4573e5bb8127368bbe2641f Mon Sep 17 00:00:00 2001 From: Spencer Ofwiti Date: Wed, 21 Jul 2021 17:29:21 +0300 Subject: [PATCH] Add history details presentational component. --- .../account-details.component.html | 52 +++++++++++----- .../account-details.component.ts | 33 +++++++++-- .../account-history.component.html | 59 +++++++++++++++++++ .../account-history.component.scss | 0 .../account-history.component.spec.ts | 24 ++++++++ .../account-history.component.ts | 38 ++++++++++++ src/app/pages/accounts/accounts.module.ts | 3 + 7 files changed, 188 insertions(+), 21 deletions(-) create mode 100644 src/app/pages/accounts/account-history/account-history.component.html create mode 100644 src/app/pages/accounts/account-history/account-history.component.scss create mode 100644 src/app/pages/accounts/account-history/account-history.component.spec.ts create mode 100644 src/app/pages/accounts/account-history/account-history.component.ts diff --git a/src/app/pages/accounts/account-details/account-details.component.html b/src/app/pages/accounts/account-details/account-details.component.html index bfc9b1e..7468fe2 100644 --- a/src/app/pages/accounts/account-details/account-details.component.html +++ b/src/app/pages/accounts/account-details/account-details.component.html @@ -334,6 +334,11 @@
+ HISTORY
@@ -341,40 +346,57 @@
- - - + - - + - - + - - -
Actor + Actor + {{ history?.change.actor }} - Message + Message + {{ history?.change.message }} - Sequence + Sequence + {{ history?.change.seq }} -
+ + Dependencies + + {{ getKeyValue(history?.change.deps) }} + + + + + ChangedAt + + {{ history?.snapshot.timestamp | unixDate }} + + + + + + ; - historyDisplayedColumns: Array = ['actor', 'message', 'sequence']; + historyDisplayedColumns: Array = [ + 'actor', + 'message', + 'sequence', + 'dependencies', + 'timestamp', + ]; historyDefaultPageSize: number = 10; historyPageSizeOptions: Array = [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 = []; + histories: Array = []; + 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(history); + this.userService.historySubject.subscribe((histories) => { + this.historyDataSource = new MatTableDataSource(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; + } } diff --git a/src/app/pages/accounts/account-history/account-history.component.html b/src/app/pages/accounts/account-history/account-history.component.html new file mode 100644 index 0000000..cd12fe6 --- /dev/null +++ b/src/app/pages/accounts/account-history/account-history.component.html @@ -0,0 +1,59 @@ +
+
+ +
+ ACCOUNT DETAILS + +
+ +
+
+
+
    +
  • + Name: {{ account?.vcard?.fn[0].value }} +
    • +
  • + Phone Number: {{ account?.vcard?.tel[0].value }} +
    • +
  • + Account Type: {{ account?.type }} +
    • +
  • + Gender: {{ account?.gender }} +
    • +
  • + Age: {{ account?.age }} +
    • +
+
+
+
    +
  • + Bio: {{ account?.products }} +
    • +
  • + Business Category: {{ account?.category }} +
    • +
  • + User Location: {{ account?.location?.area_name }} +
    • +
  • + Location: {{ account?.location?.area }} +
    • +
  • + Location Type: {{ account?.location?.area_type }} +
    • +
+
+
+
+
+
diff --git a/src/app/pages/accounts/account-history/account-history.component.scss b/src/app/pages/accounts/account-history/account-history.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/accounts/account-history/account-history.component.spec.ts b/src/app/pages/accounts/account-history/account-history.component.spec.ts new file mode 100644 index 0000000..c74a164 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [AccountHistoryComponent], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AccountHistoryComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/accounts/account-history/account-history.component.ts b/src/app/pages/accounts/account-history/account-history.component.ts new file mode 100644 index 0000000..1e4ab10 --- /dev/null +++ b/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 = new EventEmitter(); + + 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); + } +} diff --git a/src/app/pages/accounts/accounts.module.ts b/src/app/pages/accounts/accounts.module.ts index fde59b1..3bec9ae 100644 --- a/src/app/pages/accounts/accounts.module.ts +++ b/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,