import { AfterViewInit , ChangeDetectionStrategy , ChangeDetectorRef , Component , ElementRef , EventEmitter , Input , Output , ViewChild } from '@angular/core' ; import { getGroupTitle , sumGroup , Transaction , TransactionGroup , Amount } from 'monzolib' ; @ Component ( { selector : 'm-transaction-group' , templateUrl : './transaction-group.component.html' , styleUrls : [ './transaction-group.component.css' ] , changeDetection : ChangeDetectionStrategy . OnPush } ) export class TransactionGroupComponent implements AfterViewInit { @ Input ( ) readonly group ! : TransactionGroup ; @ Input ( ) readonly selectedTx ? : Transaction ; @ Output ( ) select = new EventEmitter < string > ( ) ; @ Output ( ) hide = new EventEmitter < Transaction > ( ) ; @ ViewChild ( 'groupTxs' , { static : true } ) $groupTxs ! : ElementRef < HTMLDivElement > ; collapsed = false ; txsTargetHeight ! : string ; txsHeight ! : string ; txsTransform ! : string ; txsOpacity ! : number ; constructor ( private ref ) { } get groupTitle ( ) : string { return getGroupTitle ( this . group ) ; } get visibleTxs ( ) : Transaction [ ] { return this . group . txs . filter ( tx => ! tx . is . auto_coin_jar ) . filter ( tx => ! tx . hidden ) ; } get groupTotal ( ) : Amount { return sumGroup ( this . group . txs ) ; } coinJarTxFor ( tx ) { if ( ! tx . is . rounded ) { return undefined ; } else { return this . group . txs . find ( otherTx => otherTx . id === tx . metadata . coin_jar_transaction ) ; } } ngAfterViewInit ( ) { const height = this . $groupTxs . nativeElement . getBoundingClientRect ( ) . height ; if ( height ) { this . txsTargetHeight = `${ height }px` ; this . txsHeight = this . txsTargetHeight ; } else { console . error ( 'could not set group height' ) ; } this . ref . detectChanges ( ) ; } toggleCollapse ( ) { if ( this . collapsed ) { this . txsHeight = this . txsTargetHeight ; this . txsTransform = 'rotateX(0)' ; this . txsOpacity = 1 ; } else { this . txsHeight = '0px' ; this . txsTransform = 'rotateX(90deg)' ; this . txsOpacity = 0 ; } this . collapsed = ! this . collapsed ; } selectTx ( txId ) { this . select . emit ( txId ) ; } hideTx ( tx ) { this . hide . emit ( tx ) ; } }