2021-05-10 18:15:25 +02:00
|
|
|
import {
|
2021-07-13 18:57:28 +02:00
|
|
|
AfterViewInit,
|
2021-05-10 18:15:25 +02:00
|
|
|
ChangeDetectionStrategy,
|
|
|
|
ChangeDetectorRef,
|
|
|
|
Component,
|
|
|
|
OnInit,
|
|
|
|
ViewChild,
|
|
|
|
} from '@angular/core';
|
|
|
|
import { MatTableDataSource } from '@angular/material/table';
|
|
|
|
import { MatPaginator } from '@angular/material/paginator';
|
|
|
|
import { MatSort } from '@angular/material/sort';
|
|
|
|
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';
|
|
|
|
import { copyToClipboard, CustomErrorStateMatcher, exportCsv } from '@app/_helpers';
|
|
|
|
import { MatSnackBar } from '@angular/material/snack-bar';
|
|
|
|
import { add0x, strip0x } from '@src/assets/js/ethtx/dist/hex';
|
|
|
|
import { environment } from '@src/environments/environment';
|
2021-06-23 09:18:28 +02:00
|
|
|
import { AccountDetails, Transaction } from '@app/_models';
|
2020-11-25 08:57:17 +01:00
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'app-account-details',
|
|
|
|
templateUrl: './account-details.component.html',
|
2021-03-14 09:23:20 +01:00
|
|
|
styleUrls: ['./account-details.component.scss'],
|
2021-05-10 18:15:25 +02:00
|
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
2020-11-25 08:57:17 +01:00
|
|
|
})
|
2021-07-13 18:57:28 +02:00
|
|
|
export class AccountDetailsComponent implements OnInit, AfterViewInit {
|
2020-12-05 07:30:30 +01:00
|
|
|
transactionsDataSource: MatTableDataSource<any>;
|
2021-04-30 14:50:16 +02:00
|
|
|
transactionsDisplayedColumns: Array<string> = ['sender', 'recipient', 'value', 'created', 'type'];
|
|
|
|
transactionsDefaultPageSize: number = 10;
|
|
|
|
transactionsPageSizeOptions: Array<number> = [10, 20, 50, 100];
|
2021-05-10 18:15:25 +02:00
|
|
|
@ViewChild('TransactionTablePaginator', { static: true }) transactionTablePaginator: MatPaginator;
|
|
|
|
@ViewChild('TransactionTableSort', { static: true }) transactionTableSort: MatSort;
|
2020-12-05 07:30:30 +01:00
|
|
|
|
|
|
|
userDataSource: MatTableDataSource<any>;
|
2021-04-30 14:50:16 +02:00
|
|
|
userDisplayedColumns: Array<string> = ['name', 'phone', 'created', 'balance', 'location'];
|
|
|
|
usersDefaultPageSize: number = 10;
|
|
|
|
usersPageSizeOptions: Array<number> = [10, 20, 50, 100];
|
2021-05-10 18:15:25 +02:00
|
|
|
@ViewChild('UserTablePaginator', { static: true }) userTablePaginator: MatPaginator;
|
|
|
|
@ViewChild('UserTableSort', { static: true }) userTableSort: MatSort;
|
2020-12-05 07:30:30 +01:00
|
|
|
|
2021-02-08 12:47:07 +01:00
|
|
|
accountInfoForm: FormGroup;
|
2021-04-30 14:50:16 +02:00
|
|
|
account: AccountDetails;
|
2021-03-15 12:58:18 +01:00
|
|
|
accountAddress: string;
|
2021-03-24 10:42:19 +01:00
|
|
|
accountStatus: any;
|
2021-04-30 14:50:16 +02:00
|
|
|
accounts: Array<AccountDetails> = [];
|
|
|
|
accountsType: string = 'all';
|
2021-06-23 09:18:28 +02:00
|
|
|
categories: Array<string>;
|
|
|
|
areaNames: Array<string>;
|
|
|
|
areaTypes: Array<string>;
|
2020-12-05 07:30:30 +01:00
|
|
|
transaction: any;
|
2021-04-30 14:50:16 +02:00
|
|
|
transactions: Array<Transaction>;
|
|
|
|
transactionsType: string = 'all';
|
|
|
|
accountTypes: Array<string>;
|
|
|
|
transactionsTypes: Array<string>;
|
|
|
|
genders: Array<string>;
|
|
|
|
matcher: CustomErrorStateMatcher = new CustomErrorStateMatcher();
|
2021-02-08 12:47:07 +01:00
|
|
|
submitted: boolean = false;
|
2021-02-23 13:32:02 +01:00
|
|
|
bloxbergLink: string;
|
2021-06-09 17:04:29 +02:00
|
|
|
tokenSymbol: string;
|
2021-06-23 09:18:28 +02:00
|
|
|
category: string;
|
|
|
|
area: string;
|
|
|
|
areaType: string;
|
2021-07-13 18:57:28 +02:00
|
|
|
accountsLoading: boolean = true;
|
|
|
|
transactionsLoading: boolean = true;
|
2020-11-25 08:57:17 +01:00
|
|
|
|
|
|
|
constructor(
|
2021-02-08 12:47:07 +01:00
|
|
|
private formBuilder: FormBuilder,
|
2020-12-05 07:30:30 +01:00
|
|
|
private locationService: LocationService,
|
2020-11-25 08:57:17 +01:00
|
|
|
private transactionService: TransactionService,
|
|
|
|
private userService: UserService,
|
2020-12-05 07:30:30 +01:00
|
|
|
private route: ActivatedRoute,
|
2021-03-10 10:47:01 +01:00
|
|
|
private router: Router,
|
2021-03-14 09:23:20 +01:00
|
|
|
private tokenService: TokenService,
|
2021-03-15 12:58:18 +01:00
|
|
|
private loggingService: LoggingService,
|
2021-04-25 12:32:23 +02:00
|
|
|
private blockSyncService: BlockSyncService,
|
|
|
|
private cdr: ChangeDetectorRef,
|
2021-05-10 18:15:25 +02:00
|
|
|
private snackBar: MatSnackBar
|
2020-11-25 08:57:17 +01:00
|
|
|
) {
|
2021-05-19 18:57:10 +02:00
|
|
|
this.route.paramMap.subscribe((params: Params) => {
|
|
|
|
this.accountAddress = add0x(params.get('id'));
|
|
|
|
this.bloxbergLink =
|
|
|
|
'https://blockexplorer.bloxberg.org/address/' + this.accountAddress + '/transactions';
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
async ngOnInit(): Promise<void> {
|
2021-02-08 12:47:07 +01:00
|
|
|
this.accountInfoForm = this.formBuilder.group({
|
2021-06-02 11:10:28 +02:00
|
|
|
firstName: ['', Validators.required],
|
|
|
|
lastName: ['', Validators.required],
|
2021-02-08 12:47:07 +01:00
|
|
|
phoneNumber: ['', Validators.required],
|
2021-06-23 09:18:28 +02:00
|
|
|
age: [''],
|
2021-02-08 12:47:07 +01:00
|
|
|
type: ['', Validators.required],
|
|
|
|
bio: ['', Validators.required],
|
|
|
|
gender: ['', Validators.required],
|
|
|
|
businessCategory: ['', Validators.required],
|
|
|
|
userLocation: ['', Validators.required],
|
|
|
|
location: ['', Validators.required],
|
2021-02-23 13:32:02 +01:00
|
|
|
locationType: ['', Validators.required],
|
2021-02-08 12:47:07 +01:00
|
|
|
});
|
2021-07-13 18:57:28 +02:00
|
|
|
this.transactionService.resetTransactionsList();
|
2021-05-19 18:57:10 +02:00
|
|
|
await this.blockSyncService.blockSync(this.accountAddress);
|
2021-06-04 14:16:57 +02:00
|
|
|
this.userService.resetAccountsList();
|
2021-05-19 09:56:39 +02:00
|
|
|
(await this.userService.getAccountByAddress(this.accountAddress, 100)).subscribe(
|
|
|
|
async (res) => {
|
|
|
|
if (res !== undefined) {
|
|
|
|
this.account = res;
|
|
|
|
this.cdr.detectChanges();
|
2021-06-23 09:18:28 +02:00
|
|
|
this.locationService.areaNamesSubject.subscribe((response) => {
|
|
|
|
this.area = this.locationService.getAreaNameByLocation(
|
|
|
|
this.account.location.area_name,
|
|
|
|
response
|
|
|
|
);
|
|
|
|
this.cdr.detectChanges();
|
|
|
|
this.locationService.areaTypesSubject.subscribe((result) => {
|
|
|
|
this.areaType = this.locationService.getAreaTypeByArea(this.area, result);
|
|
|
|
this.cdr.detectChanges();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
this.userService.categoriesSubject.subscribe((result) => {
|
|
|
|
this.category = this.userService.getCategoryByProduct(this.account.products[0], result);
|
|
|
|
this.cdr.detectChanges();
|
|
|
|
});
|
2021-06-02 11:10:28 +02:00
|
|
|
const fullName = this.account.vcard?.fn[0].value.split(' ');
|
2021-05-19 09:56:39 +02:00
|
|
|
this.accountInfoForm.patchValue({
|
2021-06-09 17:04:29 +02:00
|
|
|
firstName: fullName[0].split(',')[0],
|
2021-06-02 11:10:28 +02:00
|
|
|
lastName: fullName.slice(1).join(' '),
|
2021-05-19 09:56:39 +02:00
|
|
|
phoneNumber: this.account.vcard?.tel[0].value,
|
|
|
|
age: this.account.age,
|
|
|
|
type: this.account.type,
|
|
|
|
bio: this.account.products,
|
|
|
|
gender: this.account.gender,
|
2021-06-23 09:18:28 +02:00
|
|
|
businessCategory: this.account.category || this.category || 'other',
|
2021-05-19 09:56:39 +02:00
|
|
|
userLocation: this.account.location.area_name,
|
2021-06-23 09:18:28 +02:00
|
|
|
location: this.account.location.area || this.area || 'other',
|
|
|
|
locationType: this.account.location.area_type || this.areaType || 'other',
|
2021-05-19 09:56:39 +02:00
|
|
|
});
|
2021-05-26 10:30:38 +02:00
|
|
|
this.userService
|
|
|
|
.getAccountStatus(this.account.vcard?.tel[0].value)
|
|
|
|
.pipe(first())
|
|
|
|
.subscribe((response) => (this.accountStatus = response.status));
|
2021-05-19 09:56:39 +02:00
|
|
|
} else {
|
|
|
|
alert('Account not found!');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
);
|
|
|
|
this.userService.accountsSubject.subscribe((accounts) => {
|
|
|
|
this.userDataSource = new MatTableDataSource<any>(accounts);
|
|
|
|
this.userDataSource.paginator = this.userTablePaginator;
|
|
|
|
this.userDataSource.sort = this.userTableSort;
|
|
|
|
this.accounts = accounts;
|
2021-07-13 18:57:28 +02:00
|
|
|
if (accounts.length > 0) {
|
|
|
|
this.accountsLoading = false;
|
|
|
|
}
|
2021-06-04 14:16:57 +02:00
|
|
|
this.cdr.detectChanges();
|
2021-05-19 09:56:39 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
this.transactionService.transactionsSubject.subscribe((transactions) => {
|
|
|
|
this.transactionsDataSource = new MatTableDataSource<any>(transactions);
|
|
|
|
this.transactionsDataSource.paginator = this.transactionTablePaginator;
|
|
|
|
this.transactionsDataSource.sort = this.transactionTableSort;
|
|
|
|
this.transactions = transactions;
|
2021-07-13 18:57:28 +02:00
|
|
|
if (transactions.length > 0) {
|
|
|
|
this.transactionsLoading = false;
|
|
|
|
}
|
2021-05-19 09:56:39 +02:00
|
|
|
this.cdr.detectChanges();
|
|
|
|
});
|
2021-06-23 09:18:28 +02:00
|
|
|
this.userService.getCategories();
|
|
|
|
this.userService.categoriesSubject.subscribe((res) => {
|
|
|
|
this.categories = Object.keys(res);
|
|
|
|
});
|
|
|
|
this.locationService.getAreaNames();
|
|
|
|
this.locationService.areaNamesSubject.subscribe((res) => {
|
|
|
|
this.areaNames = Object.keys(res);
|
|
|
|
});
|
|
|
|
this.locationService.getAreaTypes();
|
|
|
|
this.locationService.areaTypesSubject.subscribe((res) => {
|
|
|
|
this.areaTypes = Object.keys(res);
|
|
|
|
});
|
2021-05-10 18:15:25 +02:00
|
|
|
this.userService
|
|
|
|
.getAccountTypes()
|
|
|
|
.pipe(first())
|
|
|
|
.subscribe((res) => (this.accountTypes = res));
|
|
|
|
this.userService
|
|
|
|
.getTransactionTypes()
|
|
|
|
.pipe(first())
|
|
|
|
.subscribe((res) => (this.transactionsTypes = res));
|
|
|
|
this.userService
|
|
|
|
.getGenders()
|
|
|
|
.pipe(first())
|
|
|
|
.subscribe((res) => (this.genders = res));
|
2021-06-09 17:52:59 +02:00
|
|
|
this.tokenService.load.subscribe(async (status: boolean) => {
|
2021-06-09 17:04:29 +02:00
|
|
|
if (status) {
|
|
|
|
this.tokenSymbol = await this.tokenService.getTokenSymbol();
|
|
|
|
}
|
|
|
|
});
|
2020-11-25 08:57:17 +01:00
|
|
|
}
|
|
|
|
|
2021-07-13 18:57:28 +02:00
|
|
|
ngAfterViewInit(): void {
|
|
|
|
if (this.userDataSource) {
|
|
|
|
this.userDataSource.paginator = this.userTablePaginator;
|
|
|
|
this.userDataSource.sort = this.userTableSort;
|
|
|
|
}
|
|
|
|
if (this.transactionsDataSource) {
|
|
|
|
this.transactionsDataSource.paginator = this.transactionTablePaginator;
|
|
|
|
this.transactionsDataSource.sort = this.transactionTableSort;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-12-05 07:30:30 +01:00
|
|
|
doTransactionFilter(value: string): void {
|
|
|
|
this.transactionsDataSource.filter = value.trim().toLocaleLowerCase();
|
2020-11-25 08:57:17 +01:00
|
|
|
}
|
|
|
|
|
2020-12-05 07:30:30 +01:00
|
|
|
doUserFilter(value: string): void {
|
|
|
|
this.userDataSource.filter = value.trim().toLocaleLowerCase();
|
2020-11-25 08:57:17 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
viewTransaction(transaction): void {
|
|
|
|
this.transaction = transaction;
|
|
|
|
}
|
2020-12-05 07:30:30 +01:00
|
|
|
|
|
|
|
viewAccount(account): void {
|
2021-05-10 18:15:25 +02:00
|
|
|
this.router.navigateByUrl(
|
|
|
|
`/accounts/${strip0x(account.identities.evm[`bloxberg:${environment.bloxbergChainId}`][0])}`
|
|
|
|
);
|
2020-12-05 07:30:30 +01:00
|
|
|
}
|
|
|
|
|
2021-05-10 18:15:25 +02:00
|
|
|
get accountInfoFormStub(): any {
|
|
|
|
return this.accountInfoForm.controls;
|
|
|
|
}
|
2021-02-08 12:47:07 +01:00
|
|
|
|
2021-03-18 10:10:55 +01:00
|
|
|
async saveInfo(): Promise<void> {
|
2021-02-08 12:47:07 +01:00
|
|
|
this.submitted = true;
|
2021-05-10 18:15:25 +02:00
|
|
|
if (this.accountInfoForm.invalid || !confirm(`Change user's profile information?`)) {
|
|
|
|
return;
|
|
|
|
}
|
2021-03-18 10:10:55 +01:00
|
|
|
const accountKey = await this.userService.changeAccountInfo(
|
2021-04-25 12:32:23 +02:00
|
|
|
this.accountAddress,
|
2021-06-09 17:04:29 +02:00
|
|
|
this.accountInfoFormStub.firstName.value + ', ' + this.accountInfoFormStub.lastName.value,
|
2021-02-08 12:47:07 +01:00
|
|
|
this.accountInfoFormStub.phoneNumber.value,
|
2021-02-23 13:32:02 +01:00
|
|
|
this.accountInfoFormStub.age.value,
|
2021-02-08 12:47:07 +01:00
|
|
|
this.accountInfoFormStub.type.value,
|
|
|
|
this.accountInfoFormStub.bio.value,
|
|
|
|
this.accountInfoFormStub.gender.value,
|
|
|
|
this.accountInfoFormStub.businessCategory.value,
|
|
|
|
this.accountInfoFormStub.userLocation.value,
|
|
|
|
this.accountInfoFormStub.location.value,
|
2021-04-27 19:22:42 +02:00
|
|
|
this.accountInfoFormStub.locationType.value
|
2021-03-18 10:10:55 +01:00
|
|
|
);
|
2021-02-08 12:47:07 +01:00
|
|
|
this.submitted = false;
|
|
|
|
}
|
2020-12-05 07:30:30 +01:00
|
|
|
|
|
|
|
filterAccounts(): void {
|
|
|
|
if (this.accountsType === 'all') {
|
2021-05-10 18:15:25 +02:00
|
|
|
this.userService.accountsSubject.subscribe((accounts) => {
|
2020-12-05 07:30:30 +01:00
|
|
|
this.userDataSource.data = accounts;
|
|
|
|
this.accounts = accounts;
|
|
|
|
});
|
|
|
|
} else {
|
2021-05-10 18:15:25 +02:00
|
|
|
this.userDataSource.data = this.accounts.filter(
|
|
|
|
(account) => account.type === this.accountsType
|
|
|
|
);
|
2020-12-05 07:30:30 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
filterTransactions(): void {
|
|
|
|
if (this.transactionsType === 'all') {
|
2021-05-10 18:15:25 +02:00
|
|
|
this.transactionService.transactionsSubject.subscribe((transactions) => {
|
2020-12-05 07:30:30 +01:00
|
|
|
this.transactionsDataSource.data = transactions;
|
|
|
|
this.transactions = transactions;
|
|
|
|
});
|
|
|
|
} else {
|
2021-05-10 18:15:25 +02:00
|
|
|
this.transactionsDataSource.data = this.transactions.filter(
|
2021-06-23 09:18:28 +02:00
|
|
|
(transaction) => transaction.type + 's' === this.transactionsType
|
2021-05-10 18:15:25 +02:00
|
|
|
);
|
2020-12-05 07:30:30 +01:00
|
|
|
}
|
|
|
|
}
|
2021-02-08 12:47:07 +01:00
|
|
|
|
|
|
|
resetPin(): void {
|
2021-05-10 18:15:25 +02:00
|
|
|
if (!confirm(`Reset user's pin?`)) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.userService
|
|
|
|
.resetPin(this.account.vcard.tel[0].value)
|
|
|
|
.pipe(first())
|
|
|
|
.subscribe((res) => {
|
|
|
|
this.loggingService.sendInfoLevelMessage(`Response: ${res}`);
|
|
|
|
});
|
2021-02-08 12:47:07 +01:00
|
|
|
}
|
2021-03-14 09:23:20 +01:00
|
|
|
|
2021-03-24 14:26:51 +01:00
|
|
|
downloadCsv(data: any, filename: string): void {
|
|
|
|
exportCsv(data, filename);
|
|
|
|
}
|
2021-04-26 12:14:36 +02:00
|
|
|
|
|
|
|
copyAddress(): void {
|
|
|
|
if (copyToClipboard(this.accountAddress)) {
|
2021-05-10 18:15:25 +02:00
|
|
|
this.snackBar.open(this.accountAddress + ' copied successfully!', 'Close', {
|
|
|
|
duration: 3000,
|
|
|
|
});
|
2021-04-26 12:14:36 +02:00
|
|
|
}
|
|
|
|
}
|
2020-11-25 08:57:17 +01:00
|
|
|
}
|