Skip to content

Commit

Permalink
Fix/tx table red green (#524)
Browse files Browse the repository at this point in the history 
* fixed #523 - tx amounts in table on dashboard colored correctly

* Updated changelog
  • Loading branch information
@blankey1337
ohager authored and blankey1337 committed Jun 10, 2019
1 parent 4a9b154 commit b682632
Show file tree
Hide file tree
Showing 8 changed files with 85 additions and 102 deletions.
6 changes: 6 additions & 0 deletions web/angular-wallet/CHANGELOG.md
View file
Expand Up @@ -2,6 +2,12 @@

## unreleased

# Bug Fixes
- Fixed green/red transactions on dashboard


##1.0.0-beta.8

### New Features:
- Added ability to scan QR codes when sending BURST

Expand Down
2 changes: 1 addition & 1 deletion web/angular-wallet/src/app/main/accounts/account-details/account-details.component.html
View file
Expand Up @@ -34,7 +34,7 @@ <h4>{{ account.balanceNQT | convertNQTString | number: '1.0-6': this.language }}

<mat-tab-group>
<mat-tab label="{{ 'transactions' | i18n }}">
<app-transaction-table [dataSource]="dataSource"></app-transaction-table>
<app-transaction-table [dataSource]="dataSource" [account]="account"></app-transaction-table>
</mat-tab>
<mat-tab label="{{ 'assets' | i18n }}">
<table>
Expand Down
1 change: 1 addition & 0 deletions web/angular-wallet/src/app/main/dashboard/dashboard.component.html
View file
Expand Up @@ -55,6 +55,7 @@
<app-transaction-table *ngIf="dataSource && dataSource.data.length"
[displayedColumns]="['transaction_id', 'attachment', 'timestamp', 'amount', 'account']"
[dataSource]="dataSource"
[account]="account"
[paginationEnabled]="false"
></app-transaction-table>
<div *ngIf="!dataSource" class="text-center">
Expand Down
46 changes: 6 additions & 40 deletions ...angular-wallet/src/app/main/transactions/transaction-table/transaction-table.component.ts
View file
@@ -1,41 +1,33 @@
import {
Component,
Input,
OnInit,
ViewChild,
ChangeDetectionStrategy,
AfterViewInit,
OnChanges,
SimpleChanges
} from '@angular/core';
AfterViewInit} from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import {ActivatedRoute} from '@angular/router';
import {
Transaction,
Account,
isMultiOutSameTransaction,
isMultiOutTransaction, getRecipientsAmount
isMultiOutTransaction,
getRecipientsAmount
} from '@burstjs/core';
import {convertBurstTimeToDate, convertNQTStringToNumber} from '@burstjs/util';
import {UtilService} from 'app/util.service';
import {takeUntil} from 'rxjs/operators';
import {UnsubscribeOnDestroy} from '../../../util/UnsubscribeOnDestroy';
import {StoreService} from '../../../store/store.service';
import {AccountService} from 'app/setup/account/account.service';

@Component({
selector: 'app-transaction-table',
styleUrls: ['./transaction-table.component.scss'],
templateUrl: './transaction-table.component.html',
})
export class TransactionTableComponent extends UnsubscribeOnDestroy implements OnInit, AfterViewInit, OnChanges {
export class TransactionTableComponent extends UnsubscribeOnDestroy implements AfterViewInit {
public locale: string;

constructor(private utilService: UtilService,
private storeService: StoreService,
private route: ActivatedRoute,
private accountService: AccountService) {
private storeService: StoreService) {
super();
this.storeService.settings
.pipe(
Expand All @@ -46,44 +38,18 @@ export class TransactionTableComponent extends UnsubscribeOnDestroy implements O
});
}


public convertNQTStringToNumber = convertNQTStringToNumber;
private account: Account;

@Input() dataSource: MatTableDataSource<Transaction>;
@Input() public displayedColumns = ['transaction_id', 'attachment', 'timestamp', 'type', 'amount', 'fee', 'account', 'confirmations'];
@Input() paginationEnabled = true;
@Input() account: Account;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;

public isMultiOutPayment(transaction: Transaction): boolean {
return isMultiOutSameTransaction(transaction) || isMultiOutTransaction(transaction);
}

public ngOnInit(): void {

const referencedAccount = this.route.snapshot.data.account;
if (referencedAccount) {
this.setAccount(referencedAccount);
return;
}

this.accountService.currentAccount
.pipe(
takeUntil(this.unsubscribeAll)
)
.subscribe((account) => {
this.setAccount(account);
});
}

ngOnChanges(changes: SimpleChanges): void {
const referencedAccount = this.route.snapshot.data.account;
this.setAccount(referencedAccount);
}

public setAccount(account: Account): void {
this.account = account;
}

public ngAfterViewInit(): void {
this.dataSource.paginator = this.paginator;
Expand Down
89 changes: 49 additions & 40 deletions web/angular-wallet/src/app/main/transactions/transactions.component.html
View file
@@ -1,50 +1,59 @@
<div class="page-layout blank simple" fusePerfectScrollbar>

<!-- HEADER -->
<div class="header accent p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
fxLayoutAlign.gt-xs="space-between center">
<!-- HEADER -->
<div class="header accent p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
fxLayoutAlign.gt-xs="space-between center">

<div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
<div fxLayout="row" fxLayoutAlign="start center">
<a [routerLink]="['/dashboard']"><mat-icon class="secondary-text s-18">home</mat-icon></a>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">{{ 'transactions' | i18n }}</span>
</div>
<div class="h1 mt-16">{{ 'transactions' | i18n }}</div>
</div>
<div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
<div fxLayout="row" fxLayoutAlign="start center">
<a [routerLink]="['/dashboard']">
<mat-icon class="secondary-text s-18">home</mat-icon>
</a>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">{{ 'transactions' | i18n }}</span>
</div>
<div class="h1 mt-16">{{ 'transactions' | i18n }}</div>
</div>
<!-- / HEADER -->
</div>
<!-- / HEADER -->

<div class="p-24 content">
<div class="p-24 content">

<div fxLayout="row wrap" fxLayoutAlign="space-between center" fxLayoutGap="20px">
<div fxFlex="50">
<div class="transaction-filter">
<mat-form-field class="search-form">
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search" #query>
</mat-form-field>
</div>
</div>
<div>
<mat-form-field>
<input matInput [matDatepicker]="pickerFrom" placeholder="{{ 'from' | i18n }}" [formControl]="pickerFromField"
(dateChange)="applyFilter(this.query.value)">
<mat-datepicker-toggle matSuffix [for]="pickerFrom"></mat-datepicker-toggle>
<mat-datepicker #pickerFrom></mat-datepicker>
</mat-form-field>
</div>
<div>
<mat-form-field>
<input matInput [matDatepicker]="pickerTo" placeholder="{{ 'to' | i18n }}" [formControl]="pickerToField"
(dateChange)="applyFilter(this.query.value)">
<mat-datepicker-toggle matSuffix [for]="pickerTo"></mat-datepicker-toggle>
<mat-datepicker #pickerTo></mat-datepicker>
</mat-form-field>
</div>
<div fxLayout="row wrap" fxLayoutAlign="space-between center" fxLayoutGap="20px">
<div fxFlex="50">
<div class="transaction-filter">
<mat-form-field class="search-form">
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search" #query>
</mat-form-field>
</div>
</div>
<div>
<mat-form-field>
<input matInput
placeholder="{{ 'from' | i18n }}"
[matDatepicker]="pickerFrom"
[formControl]="pickerFromField"
(dateChange)="applyFilter(this.query.value)">
<mat-datepicker-toggle matSuffix [for]="pickerFrom"></mat-datepicker-toggle>
<mat-datepicker #pickerFrom></mat-datepicker>
</mat-form-field>
</div>
<div>
<mat-form-field>
<input matInput
placeholder="{{ 'to' | i18n }}"
[matDatepicker]="pickerTo"
[formControl]="pickerToField"
(dateChange)="applyFilter(this.query.value)">
<mat-datepicker-toggle matSuffix [for]="pickerTo"></mat-datepicker-toggle>
<mat-datepicker #pickerTo></mat-datepicker>
</mat-form-field>
</div>
</div>

<div class="transactions-table">
<app-transaction-table [dataSource]="dataSource"></app-transaction-table>
</div>
<div class="transactions-table">
<app-transaction-table [dataSource]="dataSource"
[account]="account"></app-transaction-table>
</div>
</div>
</div>
27 changes: 14 additions & 13 deletions web/angular-wallet/src/app/main/transactions/transactions.component.ts
View file
@@ -1,39 +1,40 @@
import {Component, ViewChild} from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import {Transaction} from '@burstjs/core';
import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
import {FormControl} from '@angular/forms';
import {convertBurstTimeToDate, convertNQTStringToNumber} from '@burstjs/util';
import {ActivatedRoute} from '@angular/router';
import {Transaction, Account} from '@burstjs/core';
import {convertBurstTimeToDate, convertNQTStringToNumber} from '@burstjs/util';

@Component({
selector: 'app-transactions',
styleUrls: ['./transactions.component.scss'],
templateUrl: './transactions.component.html'
})
export class TransactionsComponent {
export class TransactionsComponent implements OnInit, AfterViewInit{
public dataSource: MatTableDataSource<Transaction>;
public convertNQTStringToNumber = convertNQTStringToNumber;
public account: Account;
pickerFromField = new FormControl();
pickerToField = new FormControl();

@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
@ViewChild(MatSort, { static: false }) sort: MatSort;
@ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
@ViewChild(MatSort, {static: false}) sort: MatSort;

constructor(
private route: ActivatedRoute
) {
}

public async ngOnInit() {
public ngOnInit(): void {
this.dataSource = new MatTableDataSource<Transaction>();
this.dataSource.data = this.route.snapshot.data.transactions;
this.account = this.route.snapshot.data.account;
}

public ngAfterViewInit() {
public ngAfterViewInit(): void {
const defaultFilterPredicate = this.dataSource.filterPredicate;
// this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.dataSource.filterPredicate = (data, filterValue: string) => {
const date = this.convertTimestamp(data.timestamp);
Expand All @@ -50,7 +51,7 @@ export class TransactionsComponent {
};
}

public applyFilter(filterValue: string) {
public applyFilter(filterValue: string): void {
filterValue = filterValue.trim();
filterValue = filterValue.toLowerCase();
this.dataSource.filter = filterValue || 'burst';
Expand Down
13 changes: 6 additions & 7 deletions web/angular-wallet/src/app/main/transactions/transactions.resolver.ts
View file
@@ -1,9 +1,8 @@
import { Injectable } from '@angular/core';
import {Injectable} from '@angular/core';

import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { TransactionService } from './transaction.service';
import { Transaction } from '@burstjs/core';
import { AccountService } from 'app/setup/account/account.service';
import {Resolve, ActivatedRouteSnapshot} from '@angular/router';
import {Transaction} from '@burstjs/core';
import {AccountService} from 'app/setup/account/account.service';

@Injectable({
providedIn: 'root'
Expand All @@ -12,7 +11,7 @@ export class TransactionsResolver implements Resolve<Promise<Transaction[]>> {
constructor(private accountService: AccountService) {
}

async resolve(route: ActivatedRouteSnapshot) {
async resolve(route: ActivatedRouteSnapshot): Promise<Transaction[]> {
const account = route.params.id || this.accountService.currentAccount.getValue().account;
try {
const unconfirmedTransactions = await this.accountService.getUnconfirmedTransactions(account);
Expand All @@ -22,4 +21,4 @@ export class TransactionsResolver implements Resolve<Promise<Transaction[]>> {
console.warn(e);
}
}
}
}
3 changes: 2 additions & 1 deletion web/angular-wallet/src/tsconfig.app.json
View file
Expand Up @@ -13,6 +13,7 @@
"test.ts",
"**/*.spec.ts",
"../../../lib/**/*.spec.ts",
"../../../lib/**/__tests__/**/*.ts"
"../../../lib/**/__tests__/**/*.ts",
"../../../lib/**/dist/**/*.ts"
]
}

0 comments on commit b682632

Please sign in to comment.