-
Exchange:
-
Trader Address: {{conversion.trader}}
+
Exchange:
+
Trader: {{conversion.user?.vcard.fn}}
+
Trader Address: {{conversion.trader}}
+
+
Source Token:
@@ -20,7 +23,7 @@
Symbol: {{conversion.sourceToken.symbol}}
- Amount: {{conversion.fromValue | currency: conversion.sourceToken.name + ' ' }}
+ Amount: {{conversion.sourceToken.symbol + ' ' + conversion.fromValue}}
@@ -37,9 +40,15 @@
Symbol: {{conversion.destinationToken.symbol}}
- Amount: {{conversion.toValue | currency: conversion.destinationToken.name + ' ' }}
+ Amount: {{conversion.destinationToken.symbol + ' ' + conversion.toValue}}
+
+
+
+
+
+
-
+
+
-
-
-
-
- | Sender |
- Recipient |
- Value |
- |
-
-
-
-
- | {{transaction.from}} |
- {{transaction.to}} |
- {{transaction.value | currency: transaction.token.name + ' '}} |
-
- |
-
-
-
-
- | Sender |
- Recipient |
- Value |
- |
-
-
-
+
+
+
+
+
+
+ Filter
+
+ search
+
+
+
+
+ Sender
+ {{transaction.sender?.vcard.fn}}
+
+
+
+ Recipient
+ {{transaction.recipient?.vcard.fn}}
+
+
+
+ Token
+ {{transaction.token.name}}
+
+
+
+ Value
+ {{transaction.token.symbol + ' ' + transaction.value}}
+
+
+
+ Created
+ {{transaction.tx.timestamp | date}}
+
+
+
+ View Transaction
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
-
-
-
-
- | Initial Token |
- Initial Value |
- Final Token |
- Final Value |
- Trader |
- |
-
-
-
-
- | {{conversion.sourceToken.symbol}} |
- {{conversion.fromValue | currency: conversion.sourceToken.name + ' '}} |
- {{conversion.destinationToken.symbol}} |
- {{conversion.toValue | currency: conversion.destinationToken.name + ' '}} |
- {{conversion.trader}} |
-
- |
-
-
-
-
- | Initial Token |
- Initial Value |
- Final Token |
- Final Value |
- Trader |
- |
-
-
-
-
+
+ Filter
+
+ search
+
+
+
+
+ Initial Token
+ {{conversion.sourceToken.name}}
+
+
+
+ Initial Value
+ {{conversion.sourceToken.symbol + ' ' + conversion.fromValue}}
+
+
+
+ Final Token
+ {{conversion.destinationToken.name}}
+
+
+
+ Final Value
+ {{conversion.destinationToken.symbol + ' ' + conversion.toValue}}
+
+
+
+ Trader
+ {{conversion.user?.vcard.fn}}
+
+
+
+ Created
+ {{conversion.tx.timestamp | date}}
+
+
+
+ View Conversion
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/pages/transactions/transactions.component.spec.ts b/src/app/pages/transactions/transactions.component.spec.ts
index 0b9c390..c7c7f04 100644
--- a/src/app/pages/transactions/transactions.component.spec.ts
+++ b/src/app/pages/transactions/transactions.component.spec.ts
@@ -1,16 +1,35 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TransactionsComponent } from './transactions.component';
+import {HttpClient} from '@angular/common/http';
+import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
+import {FooterStubComponent, SidebarStubComponent, TopbarStubComponent} from '../../../testing';
+import {TransactionsModule} from './transactions.module';
+import {AppModule} from '../../app.module';
describe('TransactionsComponent', () => {
let component: TransactionsComponent;
let fixture: ComponentFixture
;
+ let httpClient: HttpClient;
+ let httpTestingController: HttpTestingController;
beforeEach(async () => {
await TestBed.configureTestingModule({
- declarations: [ TransactionsComponent ]
+ declarations: [
+ TransactionsComponent,
+ FooterStubComponent,
+ SidebarStubComponent,
+ TopbarStubComponent
+ ],
+ imports: [
+ AppModule,
+ HttpClientTestingModule,
+ TransactionsModule
+ ]
})
.compileComponents();
+ httpClient = TestBed.inject(HttpClient);
+ httpTestingController = TestBed.inject(HttpTestingController);
});
beforeEach(() => {
diff --git a/src/app/pages/transactions/transactions.component.ts b/src/app/pages/transactions/transactions.component.ts
index c284630..4a21a29 100644
--- a/src/app/pages/transactions/transactions.component.ts
+++ b/src/app/pages/transactions/transactions.component.ts
@@ -1,38 +1,51 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
-import {TransactionService} from '../../_services/transaction.service';
+import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
+import {BlockSyncService, TransactionService} from '../../_services';
import {Conversion, Transaction} from '../../_models';
-import {Subject} from 'rxjs';
+import {MatTableDataSource} from '@angular/material/table';
+import {SelectionModel} from '@angular/cdk/collections';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSort} from '@angular/material/sort';
@Component({
selector: 'app-transactions',
templateUrl: './transactions.component.html',
styleUrls: ['./transactions.component.scss']
})
-export class TransactionsComponent implements OnInit, OnDestroy {
- dtOptions: DataTables.Settings = {};
- dtTrigger: Subject = new Subject();
- transactions: Transaction[] = [];
- conversions: Conversion[] = [];
+export class TransactionsComponent implements OnInit, AfterViewInit {
+ transactionDataSource: MatTableDataSource;
+ conversionDataSource: MatTableDataSource;
+ transactionDisplayedColumns = ['sender', 'recipient', 'token', 'value', 'created', 'view', 'select'];
+ conversionDisplayedColumns = ['initialToken', 'initialValue', 'finalToken', 'finalValue', 'trader', 'created', 'view', 'select'];
+ initialSelection = [];
+ allowMultiSelect = true;
+ transactionSelection: SelectionModel;
+ conversionSelection: SelectionModel;
transaction: Transaction;
conversion: Conversion;
- constructor(private transactionService: TransactionService) { }
+ @ViewChild(MatPaginator) paginator: MatPaginator;
+ @ViewChild(MatSort) sort: MatSort;
+
+ constructor(
+ private transactionService: TransactionService,
+ private blockSyncService: BlockSyncService
+ ) {
+ this.blockSyncService.blockSync();
+ }
ngOnInit(): void {
- this.dtOptions = {
- pagingType: 'full_numbers',
- pageLength: 5,
- lengthMenu: [5, 10, 25, 50, 100],
- processing: true
- };
-
- this.transactions = this.transactionService.transactions;
- this.conversions = this.transactionService.conversions;
- this.dtTrigger.next();
- }
-
- ngOnDestroy(): void {
- this.dtTrigger.unsubscribe();
+ this.transactionService.transactionsSubject.subscribe(transactions => {
+ this.transactionDataSource = new MatTableDataSource(transactions);
+ this.transactionDataSource.paginator = this.paginator;
+ this.transactionDataSource.sort = this.sort;
+ });
+ this.transactionService.conversionsSubject.subscribe(conversions => {
+ this.conversionDataSource = new MatTableDataSource(this.transactionService.conversions);
+ this.conversionDataSource.paginator = this.paginator;
+ this.conversionDataSource.sort = this.sort;
+ });
+ this.transactionSelection = new SelectionModel(this.allowMultiSelect, this.initialSelection);
+ this.conversionSelection = new SelectionModel(this.allowMultiSelect, this.initialSelection);
}
viewTransaction(transaction): void {
@@ -42,4 +55,25 @@ export class TransactionsComponent implements OnInit, OnDestroy {
viewConversion(conversion): void {
this.conversion = conversion;
}
+
+ ngAfterViewInit(): void {
+ this.transactionDataSource.paginator = this.paginator;
+ this.transactionDataSource.sort = this.sort;
+ this.conversionDataSource.paginator = this.paginator;
+ this.conversionDataSource.sort = this.sort;
+ }
+
+ 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();
+ }
}
diff --git a/src/app/pages/transactions/transactions.module.ts b/src/app/pages/transactions/transactions.module.ts
index 70b9764..b6f209d 100644
--- a/src/app/pages/transactions/transactions.module.ts
+++ b/src/app/pages/transactions/transactions.module.ts
@@ -7,15 +7,38 @@ import { TransactionDetailsComponent } from './transaction-details/transaction-d
import {DataTablesModule} from 'angular-datatables';
import {SharedModule} from '../../shared/shared.module';
import { ConversionDetailsComponent } from './conversion-details/conversion-details.component';
+import {MatTableModule} from '@angular/material/table';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatPaginatorModule} from '@angular/material/paginator';
+import {MatSortModule} from '@angular/material/sort';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {MatSelectModule} from '@angular/material/select';
+import {MatCardModule} from '@angular/material/card';
@NgModule({
declarations: [TransactionsComponent, TransactionDetailsComponent, ConversionDetailsComponent],
+ exports: [
+ TransactionDetailsComponent
+ ],
imports: [
CommonModule,
TransactionsRoutingModule,
DataTablesModule,
- SharedModule
+ SharedModule,
+ MatTableModule,
+ MatCheckboxModule,
+ MatPaginatorModule,
+ MatSortModule,
+ MatFormFieldModule,
+ MatInputModule,
+ MatButtonModule,
+ MatIconModule,
+ MatSelectModule,
+ MatCardModule
]
})
export class TransactionsModule { }