import { AfterContentInit , AfterViewInit , Component , Input , 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 { ActivatedRoute } from '@angular/router' ; import { Transaction , Account } from '@signumjs/core' ; import { ChainTime } from '@signumjs/util' ; import { MediaChange , MediaObserver } from '@angular/flex-layout' ; import { UnsubscribeOnDestroy } from '../../util/UnsubscribeOnDestroy' ; import { takeUntil } from 'rxjs/operators' ; import { UtilService } from '../../util.service' ; import { StoreService } from '../../store/store.service' ; import { AccountService } from '../../setup/account/account.service' ; const ColumnsQuery = { xl : [ 'transaction_id' , 'timestamp' , 'type' , 'amount' , 'account' , 'confirmations' ] , lg : [ 'transaction_id' , 'timestamp' , 'type' , 'amount' , 'account' , 'confirmations' ] , md : [ 'transaction_id' , 'timestamp' , 'type' , 'amount' , 'account' ] , sm : [ 'transaction_id' , 'timestamp' , 'amount' , 'account' ] , xs : [ 'transaction_id' , 'timestamp' , 'amount' ] , } ; interface Types { type : number ; subtype : number ; text : string ; } @ Component ( { selector : 'app-transactions' , styleUrls : [ './transactions.component.scss' ] , templateUrl : './transactions.component.html' } ) export class TransactionsComponent extends UnsubscribeOnDestroy implements OnInit , AfterContentInit , AfterViewInit { @ ViewChild ( MatPaginator , { static : false } ) paginator : MatPaginator ; @ ViewChild ( MatSort , { static : false } ) sort : MatSort ; public dataSource : MatTableDataSource < Transaction > ; public account : Account ; pickerFromField = new FormControl ( ) ; pickerToField = new FormControl ( ) ; typesField = new FormControl ( ) ; searchField = new FormControl ( ) ; typeOptions : string [ ] = [ ] ; columns : string [ ] = ColumnsQuery . xl ; today = new Date ( ) ; minDate : Date ; typeMap : object = { } ; language : any ; unsubscriber = takeUntil ( this . unsubscribeAll ) ; constructor ( private accountService , private storeService , private utilService , private observableMedia ) { super ( ) ; } public ngOnInit ( ) { this . dataSource = new MatTableDataSource < Transaction > ( ) ; this . storeService . settings . pipe ( this . unsubscriber ) . subscribe ( ( { language } ) => { this . language = language ; this . initTypes ( ) ; } ) ; this . accountService . currentAccount$ . pipe ( this . unsubscriber ) . subscribe ( ( acc ) => { this . account = acc ; this . dataSource . data = acc . transactions ; this . initTypes ( ) ; } ) ; } private initTypes ( ) { this . dataSource . data . forEach ( t => { const type = this . utilService . translateTransactionSubtype ( t , this . account ) ; this . typeMap [ type ] = { t : t . type , s : t . subtype } ; } ) ; this . typeOptions = Object . keys ( this . typeMap ) ; this . typeOptions . sort ( ) ; this . typeOptions . unshift ( '' ) ; } public ngAfterContentInit ( ) { this . observableMedia . asObservable ( ) . pipe ( this . unsubscriber ) . subscribe ( ( change ) => { this . columns = ColumnsQuery [ change [ 0 ] . mqAlias ] ; } ) ; } public ngAfterViewInit ( ) { const defaultFilterPredicate = this . dataSource . filterPredicate ; this . dataSource . sort = this . sort ; this . dataSource . filterPredicate = ( transaction , filterValue ) => this . isInDateRange ( transaction ) && this . isOfType ( transaction ) && defaultFilterPredicate ( transaction , filterValue ) ; } private isOfType ( transaction ) { const type = this . typeMap [ this . typesField . value ] ; return type ? type . t === transaction . type && type . s === transaction . subtype : true ; } private isInDateRange ( transaction ) { const date = this . convertTimestamp ( transaction . timestamp ) ; if ( this . pickerFromField . value && this . pickerToField . value ) { return date > this . pickerFromField . value && date < this . pickerToField . value ; } if ( this . pickerFromField . value ) { return date > this . pickerFromField . value ; } if ( this . pickerToField . value ) { return date < this . pickerToField . value ; } return true ; } public applyFilter ( filterValue = '1' ) { this . dataSource . filter = filterValue . trim ( ) . toLowerCase ( ) ; } public convertTimestamp ( timestamp ) { return ChainTime . fromChainTimestamp ( timestamp ) . getDate ( ) ; } public resetFilter ( ) { this . typesField . reset ( ) ; this . pickerToField . reset ( ) ; this . pickerFromField . reset ( ) ; this . searchField . reset ( ) ; this . applyFilter ( ) ; } }