Refactor table layouts.
This commit is contained in:
Spencer Ofwiti
parent
d76a0b3196
commit
37a6f24201
@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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 },
|
||||
],
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a routerLink="/home">Home</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>
|
||||
</nav>
|
||||
<div *ngIf="!account" class="text-center">
|
||||
@ -33,7 +33,7 @@
|
||||
<h3>
|
||||
<strong> {{account?.vcard?.fn[0].value}} </strong>
|
||||
</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>Address:</strong><a href="{{bloxbergLink}}" target="_blank"> {{account?.identities.evm['bloxberg:8996']}} </a></span>
|
||||
</div>
|
||||
@ -41,33 +41,15 @@
|
||||
<app-disbursement *ngIf="isDisbursing" (cancelDisbursmentEvent)="addTransfer()" [account]="account">
|
||||
</app-disbursement>
|
||||
<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">
|
||||
<form [formGroup]="accountInfoForm" (ngSubmit)="saveInfo()">
|
||||
<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">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Name(s): *</mat-label>
|
||||
<input matInput type="text" id="givenNames" placeholder="{{account?.name}}" value="{{account?.name}}"
|
||||
formControlName="name" [errorStateMatcher]="matcher">
|
||||
<input matInput type="text" id="givenNames" placeholder="{{account?.vcard?.fn[0].value}}"
|
||||
value="{{account?.vcard?.fn[0].value}}" formControlName="name" [errorStateMatcher]="matcher">
|
||||
<mat-error *ngIf="submitted && accountInfoFormStub.name.errors">Name is required.</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
@ -75,8 +57,8 @@
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Phone Number: </mat-label>
|
||||
<input matInput type="text" id="phoneNumber" placeholder="{{account?.phone}}"
|
||||
value="{{account?.phone}}" formControlName="phoneNumber" [errorStateMatcher]="matcher">
|
||||
<input matInput type="text" id="phoneNumber" placeholder="{{account?.vcard?.tel[0].value}}"
|
||||
value="{{account?.vcard?.tel[0].value}}" formControlName="phoneNumber" [errorStateMatcher]="matcher">
|
||||
<mat-error *ngIf="submitted && accountInfoFormStub.phoneNumber.errors">Phone Number is required.</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
@ -105,35 +87,10 @@
|
||||
</mat-form-field>
|
||||
</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">
|
||||
<mat-form-field appearance="outline">
|
||||
<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">
|
||||
<mat-error *ngIf="submitted && accountInfoFormStub.bio.errors">Bio is required.</mat-error>
|
||||
</mat-form-field>
|
||||
@ -177,8 +134,9 @@
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>User Location: </mat-label>
|
||||
<input matInput type="text" id="userLocation" placeholder="{{account?.userLocation}}"
|
||||
value="{{account?.userLocation}}" formControlName="userLocation" [errorStateMatcher]="matcher">
|
||||
<input matInput type="text" id="userLocation" placeholder="{{account?.location.area_name}}"
|
||||
value="{{account?.location.area_name}}" formControlName="userLocation"
|
||||
[errorStateMatcher]="matcher">
|
||||
<mat-error *ngIf="submitted && accountInfoFormStub.userLocation.errors">
|
||||
User Location is required.
|
||||
</mat-error>
|
||||
@ -188,7 +146,7 @@
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<mat-form-field appearance="outline">
|
||||
<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">
|
||||
<div *ngFor="let county of locations; trackBy: trackByName">
|
||||
<div *ngFor="let district of county.districts; trackBy: trackByName">
|
||||
@ -208,7 +166,7 @@
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<mat-form-field appearance="outline">
|
||||
<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">
|
||||
<mat-option value="Urban"> URBAN </mat-option>
|
||||
<mat-option value="Periurban"> PERIURBAN </mat-option>
|
||||
@ -219,22 +177,13 @@
|
||||
</mat-form-field>
|
||||
</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">
|
||||
<button mat-raised-button color="primary" type="button" class="btn btn btn-outline-primary mb-3">
|
||||
Add User KYC
|
||||
</button>
|
||||
</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"
|
||||
(click)="resetPin()">
|
||||
Reset Pin
|
||||
@ -367,59 +316,34 @@
|
||||
<mat-table class="mat-elevation-z10" [dataSource]="transactionsDataSource" matSort matSortActive="created"
|
||||
#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">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Sender </mat-header-cell>
|
||||
<mat-cell *matCellDef="let transaction"> {{transaction.sender?.vcard.fn}} </mat-cell>
|
||||
</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>
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Sender </th>
|
||||
<td mat-cell *matCellDef="let transaction"> {{transaction?.sender?.vcard.fn[0].value}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="recipient">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Recipient </mat-header-cell>
|
||||
<mat-cell *matCellDef="let transaction"> {{transaction.recipient?.vcard.fn}} </mat-cell>
|
||||
</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>
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Recipient </th>
|
||||
<td mat-cell *matCellDef="let transaction"> {{transaction?.recipient?.vcard.fn[0].value}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="value">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Value </mat-header-cell>
|
||||
<mat-cell *matCellDef="let transaction">
|
||||
<span *ngIf="transaction.type == 'transaction'">{{transaction.value | tokenRatio}}</span>
|
||||
<span *ngIf="transaction.type == 'conversion'">{{transaction.toValue | tokenRatio}}</span>
|
||||
</mat-cell>
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Value </th>
|
||||
<td mat-cell *matCellDef="let transaction">
|
||||
<span *ngIf="transaction.type == 'transaction'">{{transaction?.value | tokenRatio}}</span>
|
||||
<span *ngIf="transaction.type == 'conversion'">{{transaction?.toValue | tokenRatio}}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="created">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Created </mat-header-cell>
|
||||
<mat-cell *matCellDef="let transaction"> {{transaction.tx.timestamp | date}} </mat-cell>
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Created </th>
|
||||
<td mat-cell *matCellDef="let transaction"> {{transaction?.tx.timestamp | date}} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="type">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> TYPE </mat-header-cell>
|
||||
<mat-cell *matCellDef="let transaction">
|
||||
<span class="badge badge-success badge-pill"> {{transaction.type}} </span>
|
||||
</mat-cell>
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> TYPE </th>
|
||||
<td mat-cell *matCellDef="let transaction">
|
||||
<span class="badge badge-success badge-pill"> {{transaction?.type}} </span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="transactionsDisplayedColumns"></mat-header-row>
|
||||
@ -427,8 +351,8 @@
|
||||
(click)="viewTransaction(transaction)"></mat-row>
|
||||
</mat-table>
|
||||
|
||||
<mat-paginator #TransactionTablePaginator="matPaginator" [pageSize]="10"
|
||||
[pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons></mat-paginator>
|
||||
<mat-paginator #TransactionTablePaginator="matPaginator" [pageSize]="transactionsDefaultPageSize"
|
||||
[pageSizeOptions]="transactionsPageSizeOptions" showFirstLastButtons></mat-paginator>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -465,49 +389,27 @@
|
||||
|
||||
<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[0].value}} </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}} </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>
|
||||
</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>
|
||||
<mat-cell *matCellDef="let user"> {{user?.balance}} </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>
|
||||
</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?.location.area_name}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef=userDisplayedColumns></mat-header-row>
|
||||
@ -515,8 +417,8 @@
|
||||
matRipple></mat-row>
|
||||
</mat-table>
|
||||
|
||||
<mat-paginator #UserTablePaginator="matPaginator" [pageSize]="10" [pageSizeOptions]="[10, 20, 50, 100]"
|
||||
showFirstLastButtons></mat-paginator>
|
||||
<mat-paginator #UserTablePaginator="matPaginator" [pageSize]="usersDefaultPageSize"
|
||||
[pageSizeOptions]="usersPageSizeOptions" showFirstLastButtons></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
</mat-tab>
|
||||
|
||||
@ -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<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('TransactionTableSort', {static: true}) transactionTableSort: MatSort;
|
||||
|
||||
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('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<any>;
|
||||
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<any>(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<any>(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<any>(this.allowMultiSelect, this.initialSelection);
|
||||
|
||||
const d = new Date();
|
||||
this.date = `${d.getDate()}/${d.getMonth()}/${d.getFullYear()}`;
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
Accounts
|
||||
</mat-card-title>
|
||||
<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-label> ACCOUNT TYPE </mat-label>
|
||||
<mat-select id="typeSelect" [(value)]="accountsType" (selectionChange)="filterAccounts()">
|
||||
@ -33,16 +33,8 @@
|
||||
<mat-option value="group">GROUPACCOUNT</mat-option>
|
||||
</mat-select>
|
||||
</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>
|
||||
</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-label> Filter </mat-label>
|
||||
@ -52,6 +44,7 @@
|
||||
|
||||
<mat-table class="mat-elevation-z10" [dataSource]="dataSource" matSort matSortActive="created"
|
||||
matSortDirection="desc" matSortDisableClear>
|
||||
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> NAME </mat-header-cell>
|
||||
<mat-cell *matCellDef="let user"> {{user?.vcard.fn[0].value}} </mat-cell>
|
||||
@ -69,20 +62,7 @@
|
||||
|
||||
<ng-container matColumnDef="balance">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> BALANCE </mat-header-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>
|
||||
<mat-cell *matCellDef="let user"> {{user?.balance | tokenRatio}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="location">
|
||||
@ -90,31 +70,11 @@
|
||||
<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 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-row *matRowDef="let account; columns: displayedColumns" (click)="viewAccount(account)" matRipple></mat-row>
|
||||
</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>
|
||||
|
||||
@ -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<any>;
|
||||
accounts: any[] = [];
|
||||
displayedColumns = ['name', 'phone', 'created', 'location', 'select'];
|
||||
initialSelection = [];
|
||||
allowMultiSelect = true;
|
||||
selection: SelectionModel<any>;
|
||||
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<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 {
|
||||
@ -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 => {
|
||||
|
||||
@ -13,12 +13,12 @@
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item">
|
||||
<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>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<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>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
@ -31,11 +31,9 @@
|
||||
<span>Address: {{transaction.token._address}}</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<!-- <span>Name: {{transaction.token.name}}</span>-->
|
||||
<span>Name: Sarafu Token</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<!-- <span>Symbol: {{transaction.token.symbol}}</span>-->
|
||||
<span>Symbol: SRF</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
|
||||
<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-label> TRANSFER TYPE </mat-label>
|
||||
<mat-select id="typeSelect" [(value)]="transactionsType" (selectionChange)="filterTransactions()">
|
||||
@ -38,18 +38,6 @@
|
||||
</mat-form-field>
|
||||
</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-label> Filter </mat-label>
|
||||
<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>
|
||||
</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">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Recipient </th>
|
||||
<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"> {{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">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Value </th>
|
||||
<td mat-cell *matCellDef="let transaction">
|
||||
@ -107,26 +77,11 @@
|
||||
</td>
|
||||
</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-row *matRowDef="let transaction; columns: transactionDisplayedColumns;" (click)="viewTransaction(transaction)"></tr>
|
||||
</table>
|
||||
|
||||
<mat-paginator [pageSize]="10" [pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons></mat-paginator>
|
||||
<mat-paginator [pageSize]="defaultPageSize" [pageSizeOptions]="pageSizeOptions" showFirstLastButtons></mat-paginator>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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<any>;
|
||||
transactionDisplayedColumns = ['sender', 'recipient', 'value', 'created', 'type'];
|
||||
initialSelection = [];
|
||||
allowMultiSelect = true;
|
||||
transactionSelection: SelectionModel<any>;
|
||||
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<any>(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();
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user