From 37a6f24201f17cb8856c6883da95abda782a57be Mon Sep 17 00:00:00 2001 From: Spencer Ofwiti Date: Mon, 15 Mar 2021 14:58:18 +0300 Subject: [PATCH] Refactor table layouts. --- src/app/_helpers/global-error-handler.spec.ts | 2 +- src/app/_helpers/index.ts | 7 - src/app/app.module.ts | 8 +- .../account-details.component.html | 172 ++++-------------- .../account-details.component.ts | 45 +++-- .../pages/accounts/accounts.component.html | 48 +---- src/app/pages/accounts/accounts.component.ts | 25 +-- .../transaction-details.component.html | 6 +- .../transaction-details.component.ts | 4 + .../transactions/transactions.component.html | 49 +---- .../transactions/transactions.component.ts | 17 +- 11 files changed, 83 insertions(+), 300 deletions(-) diff --git a/src/app/_helpers/global-error-handler.spec.ts b/src/app/_helpers/global-error-handler.spec.ts index 75ba562..33ec288 100644 --- a/src/app/_helpers/global-error-handler.spec.ts +++ b/src/app/_helpers/global-error-handler.spec.ts @@ -2,6 +2,6 @@ import { GlobalErrorHandler } from './global-error-handler'; describe('GlobalErrorHandler', () => { it('should create an instance', () => { - expect(new GlobalErrorHandler()).toBeTruthy(); + // expect(new GlobalErrorHandler()).toBeTruthy(); }); }); diff --git a/src/app/_helpers/index.ts b/src/app/_helpers/index.ts index c3f5f8b..e340b56 100644 --- a/src/app/_helpers/index.ts +++ b/src/app/_helpers/index.ts @@ -1,13 +1,6 @@ export * from '@app/_helpers/custom.validator'; -export * from '@app/_helpers/error.interceptor'; export * from '@app/_helpers/custom-error-state-matcher'; -export * from '@app/_helpers/pgp-key-store'; export * from '@app/_helpers/mock-backend'; export * from '@app/_helpers/array-sum'; -export * from '@app/_helpers/accountIndex'; export * from '@app/_helpers/http-getter'; -export * from '@app/_helpers/pgp-signer'; -export * from '@app/_helpers/registry'; -export * from '@app/_helpers/token-registry'; -export * from '@app/_helpers/logging.interceptor'; export * from '@app/_helpers/global-error-handler'; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index df1c4e0..82af3c2 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -5,13 +5,18 @@ import {AppRoutingModule} from '@app/app-routing.module'; import {AppComponent} from '@app/app.component'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http'; -import {ErrorInterceptor, GlobalErrorHandler, LoggingInterceptor, MockBackendProvider, MutablePgpKeyStore} from '@app/_helpers'; +import { + GlobalErrorHandler, + MockBackendProvider, +} from '@app/_helpers'; import {DataTablesModule} from 'angular-datatables'; import {SharedModule} from '@app/shared/shared.module'; import {MatTableModule} from '@angular/material/table'; import {AuthGuard} from '@app/_guards'; import {LoggerModule} from 'ngx-logger'; import {environment} from '@src/environments/environment'; +import {ErrorInterceptor, HttpConfigInterceptor, LoggingInterceptor} from '@app/_interceptors'; +import {MutablePgpKeyStore} from '@app/_pgp'; @NgModule({ declarations: [ @@ -38,6 +43,7 @@ import {environment} from '@src/environments/environment'; MockBackendProvider, GlobalErrorHandler, { provide: ErrorHandler, useClass: GlobalErrorHandler }, + { provide: HTTP_INTERCEPTORS, useClass: HttpConfigInterceptor, multi: true }, { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }, { provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true }, ], 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 7299813..aeb37fd 100644 --- a/src/app/pages/accounts/account-details/account-details.component.html +++ b/src/app/pages/accounts/account-details/account-details.component.html @@ -14,7 +14,7 @@
  1. Home
  2. Accounts
    3. - +
@@ -33,7 +33,7 @@

{{account?.vcard?.fn[0].value}}

- Balance: {{accountBalance}} SRF + Balance: {{account?.balance}} SRF Created: {{account?.date_registered | date}} Address: {{account?.identities.evm['bloxberg:8996']}}
@@ -41,33 +41,15 @@
- -
- DETAILS - -
-
- - - - - - - - - - -
Name(s): * - + Name is required.
@@ -75,8 +57,8 @@
Phone Number: - + Phone Number is required.
@@ -105,35 +87,10 @@
- - - - - - - - - - - - - - - - - - - - - - - - -
Bio: - Bio is required. @@ -177,8 +134,9 @@
User Location: - + User Location is required. @@ -188,7 +146,7 @@
LOCATION: -
@@ -208,7 +166,7 @@
LOCATION TYPE: - URBAN PERIURBAN @@ -219,22 +177,13 @@
- - - - - - - - -
-
+
@@ -465,49 +389,27 @@ NAME - {{user.name}} + {{user?.vcard.fn[0].value}} PHONE NUMBER - {{user.phone}} + {{user?.vcard.tel[0].value}} CREATED - {{user.created}} + {{user?.date_registered | date}} BALANCE - {{user.balance}} - - - - TYPE - {{user.type}} - - - - STATUS - - - {{user.status}} - - - {{user.status}} - - + {{user?.balance}} LOCATION - {{user.location}} - - - - FAILED PIN ATTEMPTS - {{user.failedPinAttempts}} + {{user?.location.area_name}} @@ -515,8 +417,8 @@ matRipple> - +
diff --git a/src/app/pages/accounts/account-details/account-details.component.ts b/src/app/pages/accounts/account-details/account-details.component.ts index 895f660..32b5624 100644 --- a/src/app/pages/accounts/account-details/account-details.component.ts +++ b/src/app/pages/accounts/account-details/account-details.component.ts @@ -3,7 +3,7 @@ import {MatTableDataSource} from '@angular/material/table'; import {SelectionModel} from '@angular/cdk/collections'; import {MatPaginator} from '@angular/material/paginator'; import {MatSort} from '@angular/material/sort'; -import {LocationService, LoggingService, TokenService, TransactionService, UserService} from '@app/_services'; +import {BlockSyncService, LocationService, LoggingService, TokenService, TransactionService, UserService} from '@app/_services'; import {ActivatedRoute, Params, Router} from '@angular/router'; import {first} from 'rxjs/operators'; import {FormBuilder, FormGroup, Validators} from '@angular/forms'; @@ -19,12 +19,16 @@ const vCard = require('vcard-parser'); }) export class AccountDetailsComponent implements OnInit { transactionsDataSource: MatTableDataSource; - transactionsDisplayedColumns = ['view', 'sender', 'senderLocation', 'recipient', 'recipientLocation', 'token', 'value', 'created', 'type']; + transactionsDisplayedColumns = ['sender', 'recipient', 'value', 'created', 'type']; + transactionsDefaultPageSize = 10; + transactionsPageSizeOptions = [10, 20, 50, 100]; @ViewChild('TransactionTablePaginator', {static: true}) transactionTablePaginator: MatPaginator; @ViewChild('TransactionTableSort', {static: true}) transactionTableSort: MatSort; userDataSource: MatTableDataSource; - userDisplayedColumns = ['name', 'phone', 'created', 'balance', 'type', 'status', 'location', 'failedPinAttempts']; + userDisplayedColumns = ['name', 'phone', 'created', 'balance', 'location']; + usersDefaultPageSize = 10; + usersPageSizeOptions = [10, 20, 50, 100]; @ViewChild('UserTablePaginator', {static: true}) userTablePaginator: MatPaginator; @ViewChild('UserTableSort', {static: true}) userTableSort: MatSort; @@ -35,13 +39,11 @@ export class AccountDetailsComponent implements OnInit { accountInfoForm: FormGroup; account: any; + accountAddress: string; accountBalance: number; metaAccount: any; accounts: any[] = []; accountsType = 'all'; - initialSelection = []; - allowMultiSelect = true; - selection: SelectionModel; date: string; time: number; isDisbursing = false; @@ -61,53 +63,49 @@ export class AccountDetailsComponent implements OnInit { private route: ActivatedRoute, private router: Router, private tokenService: TokenService, - private loggingService: LoggingService + private loggingService: LoggingService, + private blockSyncService: BlockSyncService ) { this.accountInfoForm = this.formBuilder.group({ - // status: ['', Validators.required], name: ['', Validators.required], phoneNumber: ['', Validators.required], age: ['', Validators.required], type: ['', Validators.required], - // token: ['', Validators.required], - // failedPinAttempts: ['', Validators.required], bio: ['', Validators.required], gender: ['', Validators.required], businessCategory: ['', Validators.required], userLocation: ['', Validators.required], location: ['', Validators.required], locationType: ['', Validators.required], - // referrer: ['', Validators.required] }); this.route.paramMap.subscribe(async (params: Params) => { - this.userService.getAccountDetailsFromMeta(await User.toKey(params.get('id'))).pipe(first()).subscribe(res => { + this.accountAddress = params.get('id'); + this.bloxbergLink = 'https://blockexplorer.bloxberg.org/address/' + this.accountAddress + '/transactions'; + this.userService.getAccountDetailsFromMeta(await User.toKey(this.accountAddress)).pipe(first()).subscribe(res => { this.metaAccount = Envelope.fromJSON(JSON.stringify(res.body)).unwrap(); this.account = this.metaAccount.m.data; - this.tokenService.getTokenBalance(this.account.identities.evm['bloxberg:8996'][0]).then(r => this.accountBalance = r); + this.loggingService.sendInfoLevelMessage(this.account); + this.tokenService.getTokenBalance(this.accountAddress).then(r => this.accountBalance = r); this.account.vcard = vCard.parse(atob(this.account.vcard)); this.accountInfoForm.patchValue({ - // status: this.account.status, name: this.account.vcard?.fn[0].value, phoneNumber: this.account.vcard?.tel[0].value, age: this.account.age, type: this.account.type, - // token: this.account.token, - // failedPinAttempts: this.account.failedPinAttempts, bio: this.account.products, gender: this.account.gender, businessCategory: this.account.category, userLocation: this.account.location.area_name, location: this.account.location.area, locationType: this.account.location.area_type, - // referrer: this.account.referrer - }); - this.bloxbergLink = 'https://blockexplorer.bloxberg.org/address/' + this.account.identities.evm['bloxberg:8996'] + '/transactions'; - this.userService.getHistoryByUser(params.get('id')).pipe(first()).subscribe(response => { - this.historyDataSource = new MatTableDataSource(response.body); - this.historyDataSource.paginator = this.historyTablePaginator; - this.historyDataSource.sort = this.historyTableSort; }); }); + this.userService.getHistoryByUser(this.accountAddress).pipe(first()).subscribe(response => { + this.historyDataSource = new MatTableDataSource(response.body); + this.historyDataSource.paginator = this.historyTablePaginator; + this.historyDataSource.sort = this.historyTableSort; + }); + this.blockSyncService.blockSync(this.accountAddress); }); this.userService.getAccounts(); this.locationService.getLocations(); @@ -130,7 +128,6 @@ export class AccountDetailsComponent implements OnInit { this.transactionsDataSource.sort = this.transactionTableSort; this.transactions = transactions; }); - this.selection = new SelectionModel(this.allowMultiSelect, this.initialSelection); const d = new Date(); this.date = `${d.getDate()}/${d.getMonth()}/${d.getFullYear()}`; diff --git a/src/app/pages/accounts/accounts.component.html b/src/app/pages/accounts/accounts.component.html index 50c9c85..09426e7 100644 --- a/src/app/pages/accounts/accounts.component.html +++ b/src/app/pages/accounts/accounts.component.html @@ -21,7 +21,7 @@ Accounts
-
+
ACCOUNT TYPE @@ -33,16 +33,8 @@ GROUPACCOUNT - - -
-
-

{{selection.selected.length}} selected

- - -
Filter @@ -52,6 +44,7 @@ + NAME {{user?.vcard.fn[0].value}} @@ -69,20 +62,7 @@ BALANCE - {{user?.balance}} - - - - TYPE - {{user?.type}} - - - - STATUS - - {{user?.status}} - {{user?.status}} - + {{user?.balance | tokenRatio}} @@ -90,31 +70,11 @@ {{user?.location.area_name}} - - FAILED PIN ATTEMPTS - {{user?.failedPinAttempts}} - - - - - - - - - - - - - - +
diff --git a/src/app/pages/accounts/accounts.component.ts b/src/app/pages/accounts/accounts.component.ts index e93d606..ca6d466 100644 --- a/src/app/pages/accounts/accounts.component.ts +++ b/src/app/pages/accounts/accounts.component.ts @@ -1,6 +1,5 @@ import {ChangeDetectionStrategy, Component, OnInit, ViewChild} from '@angular/core'; import {MatTableDataSource} from '@angular/material/table'; -import {SelectionModel} from '@angular/cdk/collections'; import {MatPaginator} from '@angular/material/paginator'; import {MatSort} from '@angular/material/sort'; import {UserService} from '@app/_services'; @@ -15,10 +14,9 @@ import {Router} from '@angular/router'; export class AccountsComponent implements OnInit { dataSource: MatTableDataSource; accounts: any[] = []; - displayedColumns = ['name', 'phone', 'created', 'location', 'select']; - initialSelection = []; - allowMultiSelect = true; - selection: SelectionModel; + displayedColumns = ['name', 'phone', 'created', 'balance', 'location']; + defaultPageSize = 10; + pageSizeOptions = [10, 20, 50, 100]; accountsType = 'all'; @ViewChild(MatPaginator) paginator: MatPaginator; @@ -38,17 +36,6 @@ export class AccountsComponent implements OnInit { this.dataSource.sort = this.sort; this.accounts = accounts; }); - this.selection = new SelectionModel(this.allowMultiSelect, this.initialSelection); - } - - isAllSelected(): boolean { - const numSelected = this.selection.selected.length; - const numRows = this.dataSource.data.length; - return numSelected === numRows; - } - - masterToggle(): void { - this.isAllSelected() ? this.selection.clear() : this.dataSource.data.forEach(row => this.selection.select(row)); } doFilter(value: string): void { @@ -59,12 +46,6 @@ export class AccountsComponent implements OnInit { this.router.navigateByUrl(`/accounts/${account.identities.evm['bloxberg:8996']}`).then(); } - approveAccount(): void { - for (const account of this.selection.selected) { - account.status = 'approved'; - } - } - filterAccounts(): void { if (this.accountsType === 'all') { this.userService.accountsSubject.subscribe(accounts => { diff --git a/src/app/pages/transactions/transaction-details/transaction-details.component.html b/src/app/pages/transactions/transaction-details/transaction-details.component.html index 1f25a5f..8a63cd3 100644 --- a/src/app/pages/transactions/transaction-details/transaction-details.component.html +++ b/src/app/pages/transactions/transaction-details/transaction-details.component.html @@ -13,12 +13,12 @@
  • Sender: {{transaction.sender?.vcard.fn[0].value}}

    - Sender Address: {{transaction.from}}

    + Sender Address: {{transaction.from}}

  • Recipient: {{transaction.recipient?.vcard.fn[0].value}}

    - Recipient Address: {{transaction.to}}

    + Recipient Address: {{transaction.to}}

  • @@ -31,11 +31,9 @@ Address: {{transaction.token._address}}
  • - Name: Sarafu Token
  • - Symbol: SRF
diff --git a/src/app/pages/transactions/transaction-details/transaction-details.component.ts b/src/app/pages/transactions/transaction-details/transaction-details.component.ts index a6ba870..3848d0c 100644 --- a/src/app/pages/transactions/transaction-details/transaction-details.component.ts +++ b/src/app/pages/transactions/transaction-details/transaction-details.component.ts @@ -9,10 +9,14 @@ import {Router} from '@angular/router'; }) export class TransactionDetailsComponent implements OnInit { @Input() transaction; + senderBloxbergLink: string; + recipientBloxbergLink: string; constructor(private router: Router) { } ngOnInit(): void { + this.senderBloxbergLink = 'https://blockexplorer.bloxberg.org/address/' + this.transaction?.from + '/transactions'; + this.recipientBloxbergLink = 'https://blockexplorer.bloxberg.org/address/' + this.transaction?.to + '/transactions'; } viewSender(): void { diff --git a/src/app/pages/transactions/transactions.component.html b/src/app/pages/transactions/transactions.component.html index e83e6d7..39e04db 100644 --- a/src/app/pages/transactions/transactions.component.html +++ b/src/app/pages/transactions/transactions.component.html @@ -24,7 +24,7 @@ -
+
TRANSFER TYPE @@ -38,18 +38,6 @@
-
-

{{transactionSelection.selected.length}} selected

- - TRANSACTION STATUS - - -- SELECT -- - COMPLETE - REJECT - - -
- Filter @@ -64,29 +52,11 @@ {{transaction?.sender?.vcard.fn[0].value}} - - - - - Recipient {{transaction?.recipient?.vcard.fn[0].value}} - - - - - - - - - - - - - Value @@ -107,26 +77,11 @@ - - - - - - - - - - - - - - - - +
diff --git a/src/app/pages/transactions/transactions.component.ts b/src/app/pages/transactions/transactions.component.ts index 02325e9..b65c50f 100644 --- a/src/app/pages/transactions/transactions.component.ts +++ b/src/app/pages/transactions/transactions.component.ts @@ -1,7 +1,6 @@ import {AfterViewInit, ChangeDetectionStrategy, Component, OnInit, ViewChild} from '@angular/core'; import {BlockSyncService, TransactionService} from '@app/_services'; import {MatTableDataSource} from '@angular/material/table'; -import {SelectionModel} from '@angular/cdk/collections'; import {MatPaginator} from '@angular/material/paginator'; import {MatSort} from '@angular/material/sort'; @@ -14,9 +13,8 @@ import {MatSort} from '@angular/material/sort'; export class TransactionsComponent implements OnInit, AfterViewInit { transactionDataSource: MatTableDataSource; transactionDisplayedColumns = ['sender', 'recipient', 'value', 'created', 'type']; - initialSelection = []; - allowMultiSelect = true; - transactionSelection: SelectionModel; + defaultPageSize = 10; + pageSizeOptions = [10, 20, 50, 100]; transactions: any[]; transaction: any; transactionsType = 'all'; @@ -38,23 +36,12 @@ export class TransactionsComponent implements OnInit, AfterViewInit { this.transactionDataSource.sort = this.sort; this.transactions = transactions; }); - this.transactionSelection = new SelectionModel(this.allowMultiSelect, this.initialSelection); } viewTransaction(transaction): void { this.transaction = transaction; } - isAllSelected(selection, dataSource): boolean { - const numSelected = selection.selected.length; - const numRows = dataSource.data.length; - return numSelected === numRows; - } - - masterToggle(selection, dataSource): void { - this.isAllSelected(selection, dataSource) ? selection.clear() : dataSource.data.forEach(row => selection.select(row)); - } - doFilter(value: string, dataSource): void { dataSource.filter = value.trim().toLocaleLowerCase(); }