grassrootseconomics/cic-staff-client
5
0
Fork 0
Code Issues 26 Pull Requests Projects Releases Wiki Activity

Populate accounts list with accounts from the network.

Browse Source
This commit is contained in:
Spencer Ofwiti 2021-03-01 11:12:49 +03:00
parent ac9a6795a7
commit 2491dc54a0
5 changed files with 32 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/_services/user.service.ts
View File

@ -3,8 +3,9 @@ import {BehaviorSubject, Observable} from 'rxjs';
import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
import {environment} from '@src/environments/environment';
import {first} from 'rxjs/operators';
import {MutableKeyStore, MutablePgpKeyStore, PGPSigner, Signer} from '@app/_helpers';
import {AccountIndex, MutableKeyStore, MutablePgpKeyStore, PGPSigner, Signer} from '@app/_helpers';
import {ArgPair, Envelope, Syncable, User} from 'cic-client-meta';
import {parse} from '@src/assets/js/parse-vcard';
@Injectable({
providedIn: 'root'
@ -13,8 +14,9 @@ export class UserService {
headers: HttpHeaders = new HttpHeaders({'x-cic-automerge': 'client'});
keystore: MutableKeyStore = new MutablePgpKeyStore();
signer: Signer = new PGPSigner(this.keystore);
accountIndexQuery = new AccountIndex(environment.contractAddress);
accounts: any = '';
accounts: any = [];
private accountsList = new BehaviorSubject<any>(this.accounts);
accountsSubject = this.accountsList.asObservable();
@ -148,4 +150,16 @@ export class UserService {
await syncable.sign();
});
}
async loadAccounts(limit: number, offset: number = 0): Promise<void> {
const accountAddresses = await this.accountIndexQuery.last(await this.accountIndexQuery.totalAccounts());
for (const accountAddress of accountAddresses.slice(offset, offset + limit)) {
this.getAccountDetailsFromMeta(await User.toKey(accountAddress)).pipe(first()).subscribe(res => {
const accountInfo = Envelope.fromJSON(JSON.stringify(res)).unwrap().m.data;
accountInfo.vcard = parse(atob(accountInfo.vcard));
this.accounts.push(accountInfo);
this.accountsList.next(this.accounts);
});
}
}
}

13
src/app/app.component.ts
View File

@ -1,8 +1,6 @@
import {Component, HostListener, OnInit} from '@angular/core';
import {BlockSyncService, TransactionService} from '@app/_services';
import {TransactionService} from '@app/_services';
import {AuthService} from '@app/_services';
import {AccountIndex} from '@app/_helpers';
import {environment} from '@src/environments/environment';
@Component({
selector: 'app-root',
@ -14,26 +12,17 @@ export class AppComponent implements OnInit {
readyStateTarget: number = 3;
readyState: number = 0;
mediaQuery = window.matchMedia('(max-width: 768px)');
accountIndexQuery = new AccountIndex(environment.contractAddress);
constructor(
private authService: AuthService,
private transactionService: TransactionService,
private blockSyncService: BlockSyncService
) {
this.authService.mutableKeyStore.loadKeyring().then(r => this.authService.getPublicKeys().then());
this.blockSyncService.blockSync();
}
ngOnInit(): void {
this.mediaQuery.addListener(this.onResize);
this.onResize(this.mediaQuery);
this.queryAccountsIndex(20).then();
}
async queryAccountsIndex(numberOfAccounts: number): Promise<void> {
console.log(`Last ${numberOfAccounts} accounts are: `, await this.accountIndexQuery.last(numberOfAccounts));
console.log('Total number of accounts: ', await this.accountIndexQuery.totalAccounts());
}
// Load resize

18
src/app/pages/accounts/accounts.component.html
View File

@ -54,45 +54,45 @@
matSortDirection="desc" matSortDisableClear>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header> NAME </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.name}} </mat-cell>
<mat-cell *matCellDef="let user"> {{user?.vcard.fn}} </mat-cell>
</ng-container>
<ng-container matColumnDef="phone">
<mat-header-cell *matHeaderCellDef mat-sort-header> PHONE NUMBER </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.phone}} </mat-cell>
<mat-cell *matCellDef="let user"> {{user?.vcard.tel[0].value[0]}} </mat-cell>
</ng-container>
<ng-container matColumnDef="created">
<mat-header-cell *matHeaderCellDef mat-sort-header> CREATED </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.created}} </mat-cell>
<mat-cell *matCellDef="let user"> {{user?.date_registered | date}} </mat-cell>
</ng-container>
<ng-container matColumnDef="balance">
<mat-header-cell *matHeaderCellDef mat-sort-header> BALANCE </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.balance}} </mat-cell>
<mat-cell *matCellDef="let user"> {{user?.balance}} </mat-cell>
</ng-container>
<ng-container matColumnDef="type">
<mat-header-cell *matHeaderCellDef mat-sort-header> TYPE </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.type}} </mat-cell>
<mat-cell *matCellDef="let user"> {{user?.type}} </mat-cell>
</ng-container>
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef mat-sort-header> STATUS </mat-header-cell>
<mat-cell *matCellDef="let user">
<span *ngIf="user.status === 'approved'" class="badge badge-success badge-pill"> {{user.status}} </span>
<span *ngIf="user.status === 'unapproved'" class="badge badge-danger badge-pill"> {{user.status}} </span>
<span *ngIf="user?.status === 'approved'" class="badge badge-success badge-pill"> {{user?.status}} </span>
<span *ngIf="user?.status === 'unapproved'" class="badge badge-danger badge-pill"> {{user?.status}} </span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="location">
<mat-header-cell *matHeaderCellDef mat-sort-header> LOCATION </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.location}} </mat-cell>
<mat-cell *matCellDef="let user"> {{user?.location.area_name}} </mat-cell>
</ng-container>
<ng-container matColumnDef="failedPinAttempts">
<mat-header-cell *matHeaderCellDef mat-sort-header> FAILED PIN ATTEMPTS </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.failedPinAttempts}} </mat-cell>
<mat-cell *matCellDef="let user"> {{user?.failedPinAttempts}} </mat-cell>
</ng-container>
<ng-container matColumnDef="select">

2
src/app/pages/accounts/accounts.component.ts
View File

@ -27,7 +27,7 @@ export class AccountsComponent implements OnInit {
private userService: UserService,
private router: Router
) {
this.userService.getAccounts();
this.userService.loadAccounts(100).then();
}
ngOnInit(): void {

7
src/app/pages/transactions/transactions.component.ts
View File

@ -1,5 +1,5 @@
import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
import {TransactionService} from '@app/_services';
import {BlockSyncService, TransactionService} from '@app/_services';
import {MatTableDataSource} from '@angular/material/table';
import {SelectionModel} from '@angular/cdk/collections';
import {MatPaginator} from '@angular/material/paginator';
@ -24,8 +24,11 @@ export class TransactionsComponent implements OnInit, AfterViewInit {
@ViewChild(MatSort) sort: MatSort;
constructor(
private blockSyncService: BlockSyncService,
private transactionService: TransactionService,
) { }
) {
this.blockSyncService.blockSync();
}
ngOnInit(): void {
this.transactionService.transactionsSubject.subscribe(transactions => {