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

Refactor table layouts.

Browse Source
This commit is contained in:
Spencer Ofwiti 2021-03-15 14:58:18 +03:00
parent d76a0b3196
commit 37a6f24201
11 changed files with 83 additions and 300 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/_helpers/global-error-handler.spec.ts
View File

@ -2,6 +2,6 @@ import { GlobalErrorHandler } from './global-error-handler';
describe('GlobalErrorHandler', () => { describe('GlobalErrorHandler', () => {
it('should create an instance', () => { it('should create an instance', () => {
expect(new GlobalErrorHandler()).toBeTruthy(); // expect(new GlobalErrorHandler()).toBeTruthy();
}); });
}); });

7
src/app/_helpers/index.ts
View File

@ -1,13 +1,6 @@
export * from '@app/_helpers/custom.validator'; export * from '@app/_helpers/custom.validator';
export * from '@app/_helpers/error.interceptor';
export * from '@app/_helpers/custom-error-state-matcher'; 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/mock-backend';
export * from '@app/_helpers/array-sum'; export * from '@app/_helpers/array-sum';
export * from '@app/_helpers/accountIndex';
export * from '@app/_helpers/http-getter'; 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'; export * from '@app/_helpers/global-error-handler';

8
src/app/app.module.ts
View File

@ -5,13 +5,18 @@ import {AppRoutingModule} from '@app/app-routing.module';
import {AppComponent} from '@app/app.component'; import {AppComponent} from '@app/app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http'; 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 {DataTablesModule} from 'angular-datatables';
import {SharedModule} from '@app/shared/shared.module'; import {SharedModule} from '@app/shared/shared.module';
import {MatTableModule} from '@angular/material/table'; import {MatTableModule} from '@angular/material/table';
import {AuthGuard} from '@app/_guards'; import {AuthGuard} from '@app/_guards';
import {LoggerModule} from 'ngx-logger'; import {LoggerModule} from 'ngx-logger';
import {environment} from '@src/environments/environment'; import {environment} from '@src/environments/environment';
import {ErrorInterceptor, HttpConfigInterceptor, LoggingInterceptor} from '@app/_interceptors';
import {MutablePgpKeyStore} from '@app/_pgp';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -38,6 +43,7 @@ import {environment} from '@src/environments/environment';
MockBackendProvider, MockBackendProvider,
GlobalErrorHandler, GlobalErrorHandler,
{ provide: ErrorHandler, useClass: GlobalErrorHandler }, { provide: ErrorHandler, useClass: GlobalErrorHandler },
{ provide: HTTP_INTERCEPTORS, useClass: HttpConfigInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }, { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true }, { provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true },
], ],

172
src/app/pages/accounts/account-details/account-details.component.html
View File

@ -14,7 +14,7 @@
<ol class="breadcrumb"> <ol class="breadcrumb">
<li class="breadcrumb-item"><a routerLink="/home">Home</a></li> <li class="breadcrumb-item"><a routerLink="/home">Home</a></li>
<li class="breadcrumb-item"><a routerLink="/accounts">Accounts</a></li> <li class="breadcrumb-item"><a routerLink="/accounts">Accounts</a></li>
<!-- <li *ngIf="account" class="breadcrumb-item active" aria-current="page">{{account?.fn[0].value}}</li>--> <!-- <li *ngIf="account" class="breadcrumb-item active" aria-current="page">{{account?.vcard?.fn[0].value}}</li>-->
</ol> </ol>
</nav> </nav>
<div *ngIf="!account" class="text-center"> <div *ngIf="!account" class="text-center">
@ -33,7 +33,7 @@
<h3> <h3>
<strong> {{account?.vcard?.fn[0].value}} </strong> <strong> {{account?.vcard?.fn[0].value}} </strong>
</h3> </h3>
<span class="ml-auto"><strong>Balance:</strong> {{accountBalance}} SRF</span> <span class="ml-auto"><strong>Balance:</strong> {{account?.balance}} SRF</span>
<span class="ml-2"><strong>Created:</strong> {{account?.date_registered | date}}</span> <span class="ml-2"><strong>Created:</strong> {{account?.date_registered | date}}</span>
<span class="ml-2"><strong>Address:</strong><a href="{{bloxbergLink}}" target="_blank"> {{account?.identities.evm['bloxberg:8996']}} </a></span> <span class="ml-2"><strong>Address:</strong><a href="{{bloxbergLink}}" target="_blank"> {{account?.identities.evm['bloxberg:8996']}} </a></span>
</div> </div>
@ -41,33 +41,15 @@
<app-disbursement *ngIf="isDisbursing" (cancelDisbursmentEvent)="addTransfer()" [account]="account"> <app-disbursement *ngIf="isDisbursing" (cancelDisbursmentEvent)="addTransfer()" [account]="account">
</app-disbursement> </app-disbursement>
<div *ngIf="account" class="card mt-3 mb-3"> <div *ngIf="account" class="card mt-3 mb-3">
<mat-card-title class="card-header">
<div class="row">
DETAILS
<button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto"
(click)="addTransfer()"> NEW TRANSFER </button>
</div>
</mat-card-title>
<div class="card-body"> <div class="card-body">
<form [formGroup]="accountInfoForm" (ngSubmit)="saveInfo()"> <form [formGroup]="accountInfoForm" (ngSubmit)="saveInfo()">
<div class="row form-inline"> <div class="row form-inline">
<!-- <div class="col-md-6 col-lg-4">-->
<!-- <mat-form-field appearance="outline">-->
<!-- <mat-label> STATUS </mat-label>-->
<!-- <mat-select id="status" [(value)]="account.status" formControlName="status"-->
<!-- [errorStateMatcher]="matcher">-->
<!-- <mat-option value="blocked">Blocked</mat-option>-->
<!-- <mat-option value="active">Active</mat-option>-->
<!-- </mat-select>-->
<!-- <mat-error *ngIf="submitted && accountInfoFormStub.status.errors">Status is required.</mat-error>-->
<!-- </mat-form-field>-->
<!-- </div>-->
<div class="col-md-6 col-lg-4"> <div class="col-md-6 col-lg-4">
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label>Name(s): *</mat-label> <mat-label>Name(s): *</mat-label>
<input matInput type="text" id="givenNames" placeholder="{{account?.name}}" value="{{account?.name}}" <input matInput type="text" id="givenNames" placeholder="{{account?.vcard?.fn[0].value}}"
formControlName="name" [errorStateMatcher]="matcher"> value="{{account?.vcard?.fn[0].value}}" formControlName="name" [errorStateMatcher]="matcher">
<mat-error *ngIf="submitted && accountInfoFormStub.name.errors">Name is required.</mat-error> <mat-error *ngIf="submitted && accountInfoFormStub.name.errors">Name is required.</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
@ -75,8 +57,8 @@
<div class="col-md-6 col-lg-4"> <div class="col-md-6 col-lg-4">
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label>Phone Number: </mat-label> <mat-label>Phone Number: </mat-label>
<input matInput type="text" id="phoneNumber" placeholder="{{account?.phone}}" <input matInput type="text" id="phoneNumber" placeholder="{{account?.vcard?.tel[0].value}}"
value="{{account?.phone}}" formControlName="phoneNumber" [errorStateMatcher]="matcher"> value="{{account?.vcard?.tel[0].value}}" formControlName="phoneNumber" [errorStateMatcher]="matcher">
<mat-error *ngIf="submitted && accountInfoFormStub.phoneNumber.errors">Phone Number is required.</mat-error> <mat-error *ngIf="submitted && accountInfoFormStub.phoneNumber.errors">Phone Number is required.</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
@ -105,35 +87,10 @@
</mat-form-field> </mat-form-field>
</div> </div>
<!-- <div class="col-md-6 col-lg-4">-->
<!-- <mat-form-field appearance="outline">-->
<!-- <mat-label> USER TOKEN: </mat-label>-->
<!-- <mat-select id="token" [(value)]="account.token" formControlName="token"-->
<!-- [errorStateMatcher]="matcher">-->
<!-- <mat-option value="RSV"> RESERVE </mat-option>-->
<!-- <mat-option value="ERN"> ERNIE </mat-option>-->
<!-- <mat-option value="BRT"> BERT </mat-option>-->
<!-- </mat-select>-->
<!-- <mat-error *ngIf="submitted && accountInfoFormStub.token.errors">Token is required.</mat-error>-->
<!-- </mat-form-field>-->
<!-- </div>-->
<!-- <div class="col-md-6 col-lg-4">-->
<!-- <mat-form-field appearance="outline">-->
<!-- <mat-label>Failed Pin Attempts: </mat-label>-->
<!-- <input matInput type="text" id="failedPinAttempts" placeholder="{{account?.failedPinAttempts}}"-->
<!-- value="{{account?.failedPinAttempts}}" formControlName="failedPinAttempts" required-->
<!-- [errorStateMatcher]="matcher">-->
<!-- <mat-error *ngIf="submitted && accountInfoFormStub.failedPinAttempts.errors">-->
<!-- Failed Pin Attempts is required.-->
<!-- </mat-error>-->
<!-- </mat-form-field>-->
<!-- </div>-->
<div class="col-md-6 col-lg-4"> <div class="col-md-6 col-lg-4">
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label>Bio: </mat-label> <mat-label>Bio: </mat-label>
<input matInput type="text" id="bio" placeholder="{{account?.bio}}" value="{{account?.bio}}" <input matInput type="text" id="bio" placeholder="{{account?.products}}" value="{{account?.products}}"
formControlName="bio" [errorStateMatcher]="matcher"> formControlName="bio" [errorStateMatcher]="matcher">
<mat-error *ngIf="submitted && accountInfoFormStub.bio.errors">Bio is required.</mat-error> <mat-error *ngIf="submitted && accountInfoFormStub.bio.errors">Bio is required.</mat-error>
</mat-form-field> </mat-form-field>
@ -177,8 +134,9 @@
<div class="col-md-6 col-lg-4"> <div class="col-md-6 col-lg-4">
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label>User Location: </mat-label> <mat-label>User Location: </mat-label>
<input matInput type="text" id="userLocation" placeholder="{{account?.userLocation}}" <input matInput type="text" id="userLocation" placeholder="{{account?.location.area_name}}"
value="{{account?.userLocation}}" formControlName="userLocation" [errorStateMatcher]="matcher"> value="{{account?.location.area_name}}" formControlName="userLocation"
[errorStateMatcher]="matcher">
<mat-error *ngIf="submitted && accountInfoFormStub.userLocation.errors"> <mat-error *ngIf="submitted && accountInfoFormStub.userLocation.errors">
User Location is required. User Location is required.
</mat-error> </mat-error>
@ -188,7 +146,7 @@
<div class="col-md-6 col-lg-4"> <div class="col-md-6 col-lg-4">
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label> LOCATION: </mat-label> <mat-label> LOCATION: </mat-label>
<mat-select id="location" [(value)]="account.location" formControlName="location" <mat-select id="location" [(value)]="account.location.area" formControlName="location"
[errorStateMatcher]="matcher"> [errorStateMatcher]="matcher">
<div *ngFor="let county of locations; trackBy: trackByName"> <div *ngFor="let county of locations; trackBy: trackByName">
<div *ngFor="let district of county.districts; trackBy: trackByName"> <div *ngFor="let district of county.districts; trackBy: trackByName">
@ -208,7 +166,7 @@
<div class="col-md-6 col-lg-4"> <div class="col-md-6 col-lg-4">
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label> LOCATION TYPE: </mat-label> <mat-label> LOCATION TYPE: </mat-label>
<mat-select id="locationType" [(value)]="account.locationType" formControlName="locationType" <mat-select id="locationType" [(value)]="account.location.area_type" formControlName="locationType"
[errorStateMatcher]="matcher"> [errorStateMatcher]="matcher">
<mat-option value="Urban"> URBAN </mat-option> <mat-option value="Urban"> URBAN </mat-option>
<mat-option value="Periurban"> PERIURBAN </mat-option> <mat-option value="Periurban"> PERIURBAN </mat-option>
@ -219,22 +177,13 @@
</mat-form-field> </mat-form-field>
</div> </div>
<!-- <div class="col-md-6 col-lg-4">-->
<!-- <mat-form-field appearance="outline">-->
<!-- <mat-label>Referred By: </mat-label>-->
<!-- <input matInput type="text" id="referredBy" placeholder="{{account?.referrer}}" readonly-->
<!-- value="{{account?.referrer}}" formControlName="referrer" [errorStateMatcher]="matcher">-->
<!-- <mat-error *ngIf="submitted && accountInfoFormStub.referrer.errors">Referrer is required.</mat-error>-->
<!-- </mat-form-field>-->
<!-- </div>-->
<div class="col-md-6 col-lg-4"> <div class="col-md-6 col-lg-4">
<button mat-raised-button color="primary" type="button" class="btn btn btn-outline-primary mb-3"> <button mat-raised-button color="primary" type="button" class="btn btn btn-outline-primary mb-3">
Add User KYC Add User KYC
</button> </button>
</div> </div>
<div *ngIf="account.failedPinAttempts != 0" class="col-md-6 col-lg-4"> <div class="col-md-6 col-lg-4">
<button mat-raised-button color="primary" type="button" class="btn btn btn-outline-success mb-3" <button mat-raised-button color="primary" type="button" class="btn btn btn-outline-success mb-3"
(click)="resetPin()"> (click)="resetPin()">
Reset Pin Reset Pin
@ -367,59 +316,34 @@
<mat-table class="mat-elevation-z10" [dataSource]="transactionsDataSource" matSort matSortActive="created" <mat-table class="mat-elevation-z10" [dataSource]="transactionsDataSource" matSort matSortActive="created"
#TransactionTableSort="matSort" matSortDirection="asc" matSortDisableClear> #TransactionTableSort="matSort" matSortDirection="asc" matSortDisableClear>
<ng-container matColumnDef="view">
<mat-header-cell *matHeaderCellDef> View </mat-header-cell>
<mat-cell *matCellDef="let transaction" (click)="viewTransaction(transaction)">
<i class="fa fa-eye"></i>
</mat-cell>
</ng-container>
<ng-container matColumnDef="sender"> <ng-container matColumnDef="sender">
<mat-header-cell *matHeaderCellDef mat-sort-header> Sender </mat-header-cell> <th mat-header-cell *matHeaderCellDef mat-sort-header> Sender </th>
<mat-cell *matCellDef="let transaction"> {{transaction.sender?.vcard.fn}} </mat-cell> <td mat-cell *matCellDef="let transaction"> {{transaction?.sender?.vcard.fn[0].value}} </td>
</ng-container>
<ng-container matColumnDef="senderLocation">
<mat-header-cell *matHeaderCellDef mat-sort-header> Sender Location </mat-header-cell>
<mat-cell *matCellDef="let transaction"> {{account.location}} </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="recipient"> <ng-container matColumnDef="recipient">
<mat-header-cell *matHeaderCellDef mat-sort-header> Recipient </mat-header-cell> <th mat-header-cell *matHeaderCellDef mat-sort-header> Recipient </th>
<mat-cell *matCellDef="let transaction"> {{transaction.recipient?.vcard.fn}} </mat-cell> <td mat-cell *matCellDef="let transaction"> {{transaction?.recipient?.vcard.fn[0].value}} </td>
</ng-container>
<ng-container matColumnDef="recipientLocation">
<mat-header-cell *matHeaderCellDef mat-sort-header> Recipient Location </mat-header-cell>
<mat-cell *matCellDef="let transaction"> {{account.location}} </mat-cell>
</ng-container>
<ng-container matColumnDef="token">
<mat-header-cell *matHeaderCellDef mat-sort-header> Token </mat-header-cell>
<mat-cell *matCellDef="let transaction">
<span *ngIf="transaction.type == 'transaction'">{{transaction.token.name}}</span>
<span *ngIf="transaction.type == 'conversion'">{{transaction.destinationToken.name}}</span>
</mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="value"> <ng-container matColumnDef="value">
<mat-header-cell *matHeaderCellDef mat-sort-header> Value </mat-header-cell> <th mat-header-cell *matHeaderCellDef mat-sort-header> Value </th>
<mat-cell *matCellDef="let transaction"> <td mat-cell *matCellDef="let transaction">
<span *ngIf="transaction.type == 'transaction'">{{transaction.value | tokenRatio}}</span> <span *ngIf="transaction.type == 'transaction'">{{transaction?.value | tokenRatio}}</span>
<span *ngIf="transaction.type == 'conversion'">{{transaction.toValue | tokenRatio}}</span> <span *ngIf="transaction.type == 'conversion'">{{transaction?.toValue | tokenRatio}}</span>
</mat-cell> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="created"> <ng-container matColumnDef="created">
<mat-header-cell *matHeaderCellDef mat-sort-header> Created </mat-header-cell> <th mat-header-cell *matHeaderCellDef mat-sort-header> Created </th>
<mat-cell *matCellDef="let transaction"> {{transaction.tx.timestamp | date}} </mat-cell> <td mat-cell *matCellDef="let transaction"> {{transaction?.tx.timestamp | date}} </td>
</ng-container> </ng-container>
<ng-container matColumnDef="type"> <ng-container matColumnDef="type">
<mat-header-cell *matHeaderCellDef mat-sort-header> TYPE </mat-header-cell> <th mat-header-cell *matHeaderCellDef mat-sort-header> TYPE </th>
<mat-cell *matCellDef="let transaction"> <td mat-cell *matCellDef="let transaction">
<span class="badge badge-success badge-pill"> {{transaction.type}} </span> <span class="badge badge-success badge-pill"> {{transaction?.type}} </span>
</mat-cell> </td>
</ng-container> </ng-container>
<mat-header-row *matHeaderRowDef="transactionsDisplayedColumns"></mat-header-row> <mat-header-row *matHeaderRowDef="transactionsDisplayedColumns"></mat-header-row>
@ -427,8 +351,8 @@
(click)="viewTransaction(transaction)"></mat-row> (click)="viewTransaction(transaction)"></mat-row>
</mat-table> </mat-table>
<mat-paginator #TransactionTablePaginator="matPaginator" [pageSize]="10" <mat-paginator #TransactionTablePaginator="matPaginator" [pageSize]="transactionsDefaultPageSize"
[pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons></mat-paginator> [pageSizeOptions]="transactionsPageSizeOptions" showFirstLastButtons></mat-paginator>
</div> </div>
</div> </div>
@ -465,49 +389,27 @@
<ng-container matColumnDef="name"> <ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header> NAME </mat-header-cell> <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[0].value}} </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="phone"> <ng-container matColumnDef="phone">
<mat-header-cell *matHeaderCellDef mat-sort-header> PHONE NUMBER </mat-header-cell> <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}} </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="created"> <ng-container matColumnDef="created">
<mat-header-cell *matHeaderCellDef mat-sort-header> CREATED </mat-header-cell> <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>
<ng-container matColumnDef="balance"> <ng-container matColumnDef="balance">
<mat-header-cell *matHeaderCellDef mat-sort-header> BALANCE </mat-header-cell> <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>
</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>
</mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="location"> <ng-container matColumnDef="location">
<mat-header-cell *matHeaderCellDef mat-sort-header> LOCATION </mat-header-cell> <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>
</ng-container> </ng-container>
<mat-header-row *matHeaderRowDef=userDisplayedColumns></mat-header-row> <mat-header-row *matHeaderRowDef=userDisplayedColumns></mat-header-row>
@ -515,8 +417,8 @@
matRipple></mat-row> matRipple></mat-row>
</mat-table> </mat-table>
<mat-paginator #UserTablePaginator="matPaginator" [pageSize]="10" [pageSizeOptions]="[10, 20, 50, 100]" <mat-paginator #UserTablePaginator="matPaginator" [pageSize]="usersDefaultPageSize"
showFirstLastButtons></mat-paginator> [pageSizeOptions]="usersPageSizeOptions" showFirstLastButtons></mat-paginator>
</div> </div>
</div> </div>
</mat-tab> </mat-tab>

39
src/app/pages/accounts/account-details/account-details.component.ts
View File

@ -3,7 +3,7 @@ import {MatTableDataSource} from '@angular/material/table';
import {SelectionModel} from '@angular/cdk/collections'; import {SelectionModel} from '@angular/cdk/collections';
import {MatPaginator} from '@angular/material/paginator'; import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort'; 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 {ActivatedRoute, Params, Router} from '@angular/router';
import {first} from 'rxjs/operators'; import {first} from 'rxjs/operators';
import {FormBuilder, FormGroup, Validators} from '@angular/forms'; import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@ -19,12 +19,16 @@ const vCard = require('vcard-parser');
}) })
export class AccountDetailsComponent implements OnInit { export class AccountDetailsComponent implements OnInit {
transactionsDataSource: MatTableDataSource<any>; transactionsDataSource: MatTableDataSource<any>;
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('TransactionTablePaginator', {static: true}) transactionTablePaginator: MatPaginator;
@ViewChild('TransactionTableSort', {static: true}) transactionTableSort: MatSort; @ViewChild('TransactionTableSort', {static: true}) transactionTableSort: MatSort;
userDataSource: MatTableDataSource<any>; userDataSource: MatTableDataSource<any>;
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('UserTablePaginator', {static: true}) userTablePaginator: MatPaginator;
@ViewChild('UserTableSort', {static: true}) userTableSort: MatSort; @ViewChild('UserTableSort', {static: true}) userTableSort: MatSort;
@ -35,13 +39,11 @@ export class AccountDetailsComponent implements OnInit {
accountInfoForm: FormGroup; accountInfoForm: FormGroup;
account: any; account: any;
accountAddress: string;
accountBalance: number; accountBalance: number;
metaAccount: any; metaAccount: any;
accounts: any[] = []; accounts: any[] = [];
accountsType = 'all'; accountsType = 'all';
initialSelection = [];
allowMultiSelect = true;
selection: SelectionModel<any>;
date: string; date: string;
time: number; time: number;
isDisbursing = false; isDisbursing = false;
@ -61,53 +63,49 @@ export class AccountDetailsComponent implements OnInit {
private route: ActivatedRoute, private route: ActivatedRoute,
private router: Router, private router: Router,
private tokenService: TokenService, private tokenService: TokenService,
private loggingService: LoggingService private loggingService: LoggingService,
private blockSyncService: BlockSyncService
) { ) {
this.accountInfoForm = this.formBuilder.group({ this.accountInfoForm = this.formBuilder.group({
// status: ['', Validators.required],
name: ['', Validators.required], name: ['', Validators.required],
phoneNumber: ['', Validators.required], phoneNumber: ['', Validators.required],
age: ['', Validators.required], age: ['', Validators.required],
type: ['', Validators.required], type: ['', Validators.required],
// token: ['', Validators.required],
// failedPinAttempts: ['', Validators.required],
bio: ['', Validators.required], bio: ['', Validators.required],
gender: ['', Validators.required], gender: ['', Validators.required],
businessCategory: ['', Validators.required], businessCategory: ['', Validators.required],
userLocation: ['', Validators.required], userLocation: ['', Validators.required],
location: ['', Validators.required], location: ['', Validators.required],
locationType: ['', Validators.required], locationType: ['', Validators.required],
// referrer: ['', Validators.required]
}); });
this.route.paramMap.subscribe(async (params: Params) => { 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.metaAccount = Envelope.fromJSON(JSON.stringify(res.body)).unwrap();
this.account = this.metaAccount.m.data; 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.account.vcard = vCard.parse(atob(this.account.vcard));
this.accountInfoForm.patchValue({ this.accountInfoForm.patchValue({
// status: this.account.status,
name: this.account.vcard?.fn[0].value, name: this.account.vcard?.fn[0].value,
phoneNumber: this.account.vcard?.tel[0].value, phoneNumber: this.account.vcard?.tel[0].value,
age: this.account.age, age: this.account.age,
type: this.account.type, type: this.account.type,
// token: this.account.token,
// failedPinAttempts: this.account.failedPinAttempts,
bio: this.account.products, bio: this.account.products,
gender: this.account.gender, gender: this.account.gender,
businessCategory: this.account.category, businessCategory: this.account.category,
userLocation: this.account.location.area_name, userLocation: this.account.location.area_name,
location: this.account.location.area, location: this.account.location.area,
locationType: this.account.location.area_type, 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.userService.getHistoryByUser(this.accountAddress).pipe(first()).subscribe(response => {
this.historyDataSource = new MatTableDataSource<any>(response.body); this.historyDataSource = new MatTableDataSource<any>(response.body);
this.historyDataSource.paginator = this.historyTablePaginator; this.historyDataSource.paginator = this.historyTablePaginator;
this.historyDataSource.sort = this.historyTableSort; this.historyDataSource.sort = this.historyTableSort;
}); });
}); this.blockSyncService.blockSync(this.accountAddress);
}); });
this.userService.getAccounts(); this.userService.getAccounts();
this.locationService.getLocations(); this.locationService.getLocations();
@ -130,7 +128,6 @@ export class AccountDetailsComponent implements OnInit {
this.transactionsDataSource.sort = this.transactionTableSort; this.transactionsDataSource.sort = this.transactionTableSort;
this.transactions = transactions; this.transactions = transactions;
}); });
this.selection = new SelectionModel<any>(this.allowMultiSelect, this.initialSelection);
const d = new Date(); const d = new Date();
this.date = `${d.getDate()}/${d.getMonth()}/${d.getFullYear()}`; this.date = `${d.getDate()}/${d.getMonth()}/${d.getFullYear()}`;

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

@ -21,7 +21,7 @@
Accounts Accounts
</mat-card-title> </mat-card-title>
<div class="card-body"> <div class="card-body">
<div *ngIf="selection.selected.length <= 0" class="row card-header"> <div class="row card-header">
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label> ACCOUNT TYPE </mat-label> <mat-label> ACCOUNT TYPE </mat-label>
<mat-select id="typeSelect" [(value)]="accountsType" (selectionChange)="filterAccounts()"> <mat-select id="typeSelect" [(value)]="accountsType" (selectionChange)="filterAccounts()">
@ -33,16 +33,8 @@
<mat-option value="group">GROUPACCOUNT</mat-option> <mat-option value="group">GROUPACCOUNT</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<!-- <button mat-raised-button color="primary" routerLink="/accounts/create" type="button" class="btn btn-outline-primary ml-auto">-->
<!-- <mat-icon>add</mat-icon>-->
<!-- ADD NEW </button>-->
<button mat-raised-button color="primary" routerLink="/accounts/export" type="button" class="btn btn-outline-primary ml-auto"> EXPORT </button> <button mat-raised-button color="primary" routerLink="/accounts/export" type="button" class="btn btn-outline-primary ml-auto"> EXPORT </button>
</div> </div>
<div *ngIf="selection.selected.length" class="row card-header">
<p><strong> {{selection.selected.length}} selected </strong></p>
<button mat-raised-button color="primary" type="button" class="btn btn-outline-primary ml-auto" (click)="approveAccount()"> APPROVE </button>
<button mat-raised-button color="primary" routerLink="/accounts/export" type="button" class="btn btn-outline-primary ml-2"> EXPORT </button>
</div>
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label> Filter </mat-label> <mat-label> Filter </mat-label>
@ -52,6 +44,7 @@
<mat-table class="mat-elevation-z10" [dataSource]="dataSource" matSort matSortActive="created" <mat-table class="mat-elevation-z10" [dataSource]="dataSource" matSort matSortActive="created"
matSortDirection="desc" matSortDisableClear> matSortDirection="desc" matSortDisableClear>
<ng-container matColumnDef="name"> <ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header> NAME </mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header> NAME </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user?.vcard.fn[0].value}} </mat-cell> <mat-cell *matCellDef="let user"> {{user?.vcard.fn[0].value}} </mat-cell>
@ -69,20 +62,7 @@
<ng-container matColumnDef="balance"> <ng-container matColumnDef="balance">
<mat-header-cell *matHeaderCellDef mat-sort-header> BALANCE </mat-header-cell> <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 | tokenRatio}} </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>
</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>
</mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="location"> <ng-container matColumnDef="location">
@ -90,31 +70,11 @@
<mat-cell *matCellDef="let user"> {{user?.location.area_name}} </mat-cell> <mat-cell *matCellDef="let user"> {{user?.location.area_name}} </mat-cell>
</ng-container> </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>
</ng-container>
<ng-container matColumnDef="select">
<mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected">
</mat-checkbox>
</mat-header-cell>
<mat-cell *matCellDef="let transaction">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(transaction) : null"
[checked]="selection.isSelected(transaction)">
</mat-checkbox>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let account; columns: displayedColumns" (click)="viewAccount(account)" matRipple></mat-row> <mat-row *matRowDef="let account; columns: displayedColumns" (click)="viewAccount(account)" matRipple></mat-row>
</mat-table> </mat-table>
<mat-paginator [pageSize]="10" [pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons></mat-paginator> <mat-paginator [pageSize]="defaultPageSize" [pageSizeOptions]="pageSizeOptions" showFirstLastButtons></mat-paginator>
</div> </div>
</div> </div>
</div> </div>

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

@ -1,6 +1,5 @@
import {ChangeDetectionStrategy, Component, OnInit, ViewChild} from '@angular/core'; import {ChangeDetectionStrategy, Component, OnInit, ViewChild} from '@angular/core';
import {MatTableDataSource} from '@angular/material/table'; import {MatTableDataSource} from '@angular/material/table';
import {SelectionModel} from '@angular/cdk/collections';
import {MatPaginator} from '@angular/material/paginator'; import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort'; import {MatSort} from '@angular/material/sort';
import {UserService} from '@app/_services'; import {UserService} from '@app/_services';
@ -15,10 +14,9 @@ import {Router} from '@angular/router';
export class AccountsComponent implements OnInit { export class AccountsComponent implements OnInit {
dataSource: MatTableDataSource<any>; dataSource: MatTableDataSource<any>;
accounts: any[] = []; accounts: any[] = [];
displayedColumns = ['name', 'phone', 'created', 'location', 'select']; displayedColumns = ['name', 'phone', 'created', 'balance', 'location'];
initialSelection = []; defaultPageSize = 10;
allowMultiSelect = true; pageSizeOptions = [10, 20, 50, 100];
selection: SelectionModel<any>;
accountsType = 'all'; accountsType = 'all';
@ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatPaginator) paginator: MatPaginator;
@ -38,17 +36,6 @@ export class AccountsComponent implements OnInit {
this.dataSource.sort = this.sort; this.dataSource.sort = this.sort;
this.accounts = accounts; this.accounts = accounts;
}); });
this.selection = new SelectionModel<any>(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 { doFilter(value: string): void {
@ -59,12 +46,6 @@ export class AccountsComponent implements OnInit {
this.router.navigateByUrl(`/accounts/${account.identities.evm['bloxberg:8996']}`).then(); this.router.navigateByUrl(`/accounts/${account.identities.evm['bloxberg:8996']}`).then();
} }
approveAccount(): void {
for (const account of this.selection.selected) {
account.status = 'approved';
}
}
filterAccounts(): void { filterAccounts(): void {
if (this.accountsType === 'all') { if (this.accountsType === 'all') {
this.userService.accountsSubject.subscribe(accounts => { this.userService.accountsSubject.subscribe(accounts => {

6
src/app/pages/transactions/transaction-details/transaction-details.component.html
View File

@ -13,12 +13,12 @@
<ul class="list-group list-group-flush"> <ul class="list-group list-group-flush">
<li class="list-group-item"> <li class="list-group-item">
<span>Sender: {{transaction.sender?.vcard.fn[0].value}}</span><br><br> <span>Sender: {{transaction.sender?.vcard.fn[0].value}}</span><br><br>
<span>Sender Address: {{transaction.from}}</span><br><br> <span>Sender Address: <a href="{{senderBloxbergLink}}" target="_blank"> {{transaction.from}} </a></span><br><br>
<button mat-raised-button color="primary" class="btn btn-outline-info" (click)="viewSender()">View Sender</button> <button mat-raised-button color="primary" class="btn btn-outline-info" (click)="viewSender()">View Sender</button>
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<span>Recipient: {{transaction.recipient?.vcard.fn[0].value}}</span><br><br> <span>Recipient: {{transaction.recipient?.vcard.fn[0].value}}</span><br><br>
<span>Recipient Address: {{transaction.to}}</span><br><br> <span>Recipient Address: <a href="{{recipientBloxbergLink}}" target="_blank"> {{transaction.to}} </a></span><br><br>
<button mat-raised-button color="primary" class="btn btn-outline-info" (click)="viewRecipient()">View Recipient</button> <button mat-raised-button color="primary" class="btn btn-outline-info" (click)="viewRecipient()">View Recipient</button>
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
@ -31,11 +31,9 @@
<span>Address: {{transaction.token._address}}</span> <span>Address: {{transaction.token._address}}</span>
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<!-- <span>Name: {{transaction.token.name}}</span>-->
<span>Name: Sarafu Token</span> <span>Name: Sarafu Token</span>
</li> </li>
<li class="list-group-item"> <li class="list-group-item">
<!-- <span>Symbol: {{transaction.token.symbol}}</span>-->
<span>Symbol: SRF</span> <span>Symbol: SRF</span>
</li> </li>
</ul> </ul>

4
src/app/pages/transactions/transaction-details/transaction-details.component.ts
View File

@ -9,10 +9,14 @@ import {Router} from '@angular/router';
}) })
export class TransactionDetailsComponent implements OnInit { export class TransactionDetailsComponent implements OnInit {
@Input() transaction; @Input() transaction;
senderBloxbergLink: string;
recipientBloxbergLink: string;
constructor(private router: Router) { } constructor(private router: Router) { }
ngOnInit(): void { 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 { viewSender(): void {

49
src/app/pages/transactions/transactions.component.html
View File

@ -24,7 +24,7 @@
<app-transaction-details [transaction]="transaction"></app-transaction-details> <app-transaction-details [transaction]="transaction"></app-transaction-details>
<div *ngIf="transactionSelection.selected.length <=0" class="row card-header"> <div class="row card-header">
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label> TRANSFER TYPE </mat-label> <mat-label> TRANSFER TYPE </mat-label>
<mat-select id="typeSelect" [(value)]="transactionsType" (selectionChange)="filterTransactions()"> <mat-select id="typeSelect" [(value)]="transactionsType" (selectionChange)="filterTransactions()">
@ -38,18 +38,6 @@
</mat-form-field> </mat-form-field>
</div> </div>
<div *ngIf="transactionSelection.selected.length > 0" class="row card-header">
<p><strong> {{transactionSelection.selected.length}} selected </strong></p>
<mat-form-field appearance="outline" class="ml-auto">
<mat-label> TRANSACTION STATUS </mat-label>
<mat-select id="statusSelect">
<mat-option selected disabled> -- SELECT -- </mat-option>
<mat-option value="complete">COMPLETE</mat-option>
<mat-option value="reject">REJECT</mat-option>
</mat-select>
</mat-form-field>
</div>
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label> Filter </mat-label> <mat-label> Filter </mat-label>
<input matInput type="text" (keyup)="doFilter($event.target.value, transactionDataSource)" placeholder="Filter"> <input matInput type="text" (keyup)="doFilter($event.target.value, transactionDataSource)" placeholder="Filter">
@ -64,29 +52,11 @@
<td mat-cell *matCellDef="let transaction"> {{transaction?.sender?.vcard.fn[0].value}} </td> <td mat-cell *matCellDef="let transaction"> {{transaction?.sender?.vcard.fn[0].value}} </td>
</ng-container> </ng-container>
<!-- <ng-container matColumnDef="senderLocation">-->
<!-- <mat-header-cell *matHeaderCellDef mat-sort-header> Sender Location </mat-header-cell>-->
<!-- <mat-cell *matCellDef="let transaction"> {{transaction?.sender?.location.area_name}} </mat-cell>-->
<!-- </ng-container>-->
<ng-container matColumnDef="recipient"> <ng-container matColumnDef="recipient">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Recipient </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Recipient </th>
<td mat-cell *matCellDef="let transaction"> {{transaction?.recipient?.vcard.fn[0].value}} </td> <td mat-cell *matCellDef="let transaction"> {{transaction?.recipient?.vcard.fn[0].value}} </td>
</ng-container> </ng-container>
<!-- <ng-container matColumnDef="recipientLocation">-->
<!-- <mat-header-cell *matHeaderCellDef mat-sort-header> Recipient Location </mat-header-cell>-->
<!-- <mat-cell *matCellDef="let transaction"> {{transaction?.recipient?.location.area_name}} </mat-cell>-->
<!-- </ng-container>-->
<!-- <ng-container matColumnDef="token">-->
<!-- <mat-header-cell *matHeaderCellDef mat-sort-header> Token </mat-header-cell>-->
<!-- <mat-cell *matCellDef="let transaction">-->
<!-- <span *ngIf="transaction.type == 'transaction'">{{transaction?.token.name}}</span>-->
<!-- <span *ngIf="transaction.type == 'conversion'">{{transaction?.destinationToken.name}}</span>-->
<!-- </mat-cell>-->
<!-- </ng-container>-->
<ng-container matColumnDef="value"> <ng-container matColumnDef="value">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Value </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Value </th>
<td mat-cell *matCellDef="let transaction"> <td mat-cell *matCellDef="let transaction">
@ -107,26 +77,11 @@
</td> </td>
</ng-container> </ng-container>
<!-- <ng-container matColumnDef="select">-->
<!-- <mat-header-cell *matHeaderCellDef>-->
<!-- <mat-checkbox (change)="$event ? masterToggle(transactionSelection, transactionDataSource) : null"-->
<!-- [checked]="transactionSelection.hasValue() && isAllSelected(transactionSelection, transactionDataSource)"-->
<!-- [indeterminate]="transactionSelection.hasValue() && !isAllSelected(transactionSelection, transactionDataSource)">-->
<!-- </mat-checkbox>-->
<!-- </mat-header-cell>-->
<!-- <mat-cell *matCellDef="let transaction">-->
<!-- <mat-checkbox (click)="$event.stopPropagation()"-->
<!-- (change)="$event ? transactionSelection.toggle(transaction) : null"-->
<!-- [checked]="transactionSelection.isSelected(transaction)">-->
<!-- </mat-checkbox>-->
<!-- </mat-cell>-->
<!-- </ng-container>-->
<tr mat-header-row *matHeaderRowDef="transactionDisplayedColumns"></tr> <tr mat-header-row *matHeaderRowDef="transactionDisplayedColumns"></tr>
<tr mat-row *matRowDef="let transaction; columns: transactionDisplayedColumns;" (click)="viewTransaction(transaction)"></tr> <tr mat-row *matRowDef="let transaction; columns: transactionDisplayedColumns;" (click)="viewTransaction(transaction)"></tr>
</table> </table>
<mat-paginator [pageSize]="10" [pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons></mat-paginator> <mat-paginator [pageSize]="defaultPageSize" [pageSizeOptions]="pageSizeOptions" showFirstLastButtons></mat-paginator>
</div> </div>
</div> </div>

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

@ -1,7 +1,6 @@
import {AfterViewInit, ChangeDetectionStrategy, Component, OnInit, ViewChild} from '@angular/core'; import {AfterViewInit, ChangeDetectionStrategy, Component, OnInit, ViewChild} from '@angular/core';
import {BlockSyncService, TransactionService} from '@app/_services'; import {BlockSyncService, TransactionService} from '@app/_services';
import {MatTableDataSource} from '@angular/material/table'; import {MatTableDataSource} from '@angular/material/table';
import {SelectionModel} from '@angular/cdk/collections';
import {MatPaginator} from '@angular/material/paginator'; import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort'; import {MatSort} from '@angular/material/sort';
@ -14,9 +13,8 @@ import {MatSort} from '@angular/material/sort';
export class TransactionsComponent implements OnInit, AfterViewInit { export class TransactionsComponent implements OnInit, AfterViewInit {
transactionDataSource: MatTableDataSource<any>; transactionDataSource: MatTableDataSource<any>;
transactionDisplayedColumns = ['sender', 'recipient', 'value', 'created', 'type']; transactionDisplayedColumns = ['sender', 'recipient', 'value', 'created', 'type'];
initialSelection = []; defaultPageSize = 10;
allowMultiSelect = true; pageSizeOptions = [10, 20, 50, 100];
transactionSelection: SelectionModel<any>;
transactions: any[]; transactions: any[];
transaction: any; transaction: any;
transactionsType = 'all'; transactionsType = 'all';
@ -38,23 +36,12 @@ export class TransactionsComponent implements OnInit, AfterViewInit {
this.transactionDataSource.sort = this.sort; this.transactionDataSource.sort = this.sort;
this.transactions = transactions; this.transactions = transactions;
}); });
this.transactionSelection = new SelectionModel<any>(this.allowMultiSelect, this.initialSelection);
} }
viewTransaction(transaction): void { viewTransaction(transaction): void {
this.transaction = transaction; 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 { doFilter(value: string, dataSource): void {
dataSource.filter = value.trim().toLocaleLowerCase(); dataSource.filter = value.trim().toLocaleLowerCase();
} }