@ -10,10 +10,12 @@ import {
Component , Component ,
EventEmitter , EventEmitter ,
Input , Input ,
OnChanges ,
OnDestroy , OnDestroy ,
Output , Output ,
ViewChild computed ,
inject ,
input ,
viewChild
} from '@angular/core' ; } from '@angular/core' ;
import { MatButtonModule } from '@angular/material/button' ; import { MatButtonModule } from '@angular/material/button' ;
import { MatMenuModule } from '@angular/material/menu' ; import { MatMenuModule } from '@angular/material/menu' ;
@ -33,7 +35,7 @@ import {
walletOutline walletOutline
} from 'ionicons/icons' ; } from 'ionicons/icons' ;
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader' ; import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader' ;
import { Subject , Subscription } from 'rxjs' ; import { Subject } from 'rxjs' ;
@Component ( { @Component ( {
changeDetection : ChangeDetectionStrategy.OnPush , changeDetection : ChangeDetectionStrategy.OnPush ,
@ -53,20 +55,13 @@ import { Subject, Subscription } from 'rxjs';
styleUrls : [ './accounts-table.component.scss' ] , styleUrls : [ './accounts-table.component.scss' ] ,
templateUrl : './accounts-table.component.html' templateUrl : './accounts-table.component.html'
} ) } )
export class GfAccountsTableComponent implements OnChanges , OnDestroy { export class GfAccountsTableComponent implements OnDestroy {
@Input ( ) accounts : Account [ ] ;
@Input ( ) activitiesCount : number ; @Input ( ) activitiesCount : number ;
@Input ( ) baseCurrency : string ; @Input ( ) baseCurrency : string ;
@Input ( ) deviceType : string ; @Input ( ) deviceType : string ;
@Input ( ) hasPermissionToOpenDetails = true ; @Input ( ) hasPermissionToOpenDetails = true ;
@Input ( ) locale = getLocale ( ) ; @Input ( ) locale = getLocale ( ) ;
@Input ( ) showActions : boolean ;
@Input ( ) showActivitiesCount = true ;
@Input ( ) showAllocationInPercentage : boolean ;
@Input ( ) showBalance = true ;
@Input ( ) showFooter = true ; @Input ( ) showFooter = true ;
@Input ( ) showValue = true ;
@Input ( ) showValueInBaseCurrency = true ;
@Input ( ) totalBalanceInBaseCurrency : number ; @Input ( ) totalBalanceInBaseCurrency : number ;
@Input ( ) totalValueInBaseCurrency : number ; @Input ( ) totalValueInBaseCurrency : number ;
@ -74,71 +69,72 @@ export class GfAccountsTableComponent implements OnChanges, OnDestroy {
@Output ( ) accountToUpdate = new EventEmitter < Account > ( ) ; @Output ( ) accountToUpdate = new EventEmitter < Account > ( ) ;
@Output ( ) transferBalance = new EventEmitter < void > ( ) ; @Output ( ) transferBalance = new EventEmitter < void > ( ) ;
@ViewChild ( MatSort ) sort : MatSort ; public readonly accounts = input . required < Account [ ] | undefined > ( ) ;
public readonly showActions = input < boolean > ( ) ;
public dataSource = new MatTableDataSource < Account > ( ) ; public readonly showActivitiesCount = input ( true ) ;
public displayedColumns = [ ] ; public readonly showAllocationInPercentage = input < boolean > ( ) ;
public isLoading = true ; public readonly showBalance = input ( true ) ;
public routeQueryParams : Subscription ; public readonly showValue = input ( true ) ;
public readonly showValueInBaseCurrency = input ( false ) ;
private unsubscribeSubject = new Subject < void > ( ) ; public readonly sort = viewChild . required ( MatSort ) ;
public constructor ( protected readonly dataSource = computed ( ( ) = > {
private notificationService : NotificationService , const dataSource = new MatTableDataSource < Account > ( this . accounts ( ) ) ;
private router : Router dataSource . sortingDataAccessor = getLowercase ;
) { dataSource . sort = this . sort ( ) ;
addIcons ( { return dataSource ;
arrowRedoOutline ,
createOutline ,
documentTextOutline ,
ellipsisHorizontal ,
eyeOffOutline ,
trashOutline ,
walletOutline
} ) ; } ) ;
}
public ngOnChanges() { protected readonly displayedColumns = computed ( ( ) = > {
this . displayedC olumns= [ 'status' , 'account' , 'platform' ] ; const columns = [ 'status' , 'account' , 'platform' ] ;
if ( this . showActivitiesCount ) { if ( this . showActivitiesCount ( ) ) {
this . displayedC olumns. push ( 'activitiesCount' ) ; columns . push ( 'activitiesCount' ) ;
} }
if ( this . showBalance ) { if ( this . showBalance ( ) ) {
this . displayedC olumns. push ( 'balance' ) ; c olumns. push ( 'balance' ) ;
} }
if ( this . showValue ) { if ( this . showValue ( ) ) {
this . displayedC olumns. push ( 'value' ) ; c olumns. push ( 'value' ) ;
} }
this . displayedC olumns. push ( 'currency' ) ; c olumns. push ( 'currency' ) ;
if ( this . showValueInBaseCurrency ) { if ( this . showValueInBaseCurrency ( ) ) {
this . displayedC olumns. push ( 'valueInBaseCurrency' ) ; c olumns. push ( 'valueInBaseCurrency' ) ;
} }
if ( this . showAllocationInPercentage ) { if ( this . showAllocationInPercentage ( ) ) {
this . displayedC olumns. push ( 'allocation' ) ; c olumns. push ( 'allocation' ) ;
} }
this . displayedC olumns. push ( 'comment' ) ; c olumns. push ( 'comment' ) ;
if ( this . showActions ) { if ( this . showActions ( ) ) {
this . displayedC olumns. push ( 'actions' ) ; c olumns. push ( 'actions' ) ;
} }
this . isLoading = true ; return columns ;
} ) ;
this . dataSource = new MatTableDataSource ( this . accounts ) ; protected readonly isLoading = computed ( ( ) = > ! this . accounts ( ) ) ;
this . dataSource . sortingDataAccessor = getLowercase ;
this . dataSource . sort = this . sort ; private readonly notificationService = inject ( NotificationService ) ;
private readonly router = inject ( Router ) ;
private readonly unsubscribeSubject = new Subject < void > ( ) ;
if ( this . accounts ) { public constructor ( ) {
this . isLoading = false ; addIcons ( {
} arrowRedoOutline ,
createOutline ,
documentTextOutline ,
ellipsisHorizontal ,
eyeOffOutline ,
trashOutline ,
walletOutline
} ) ;
} }
public onDeleteAccount ( aId : string ) { public onDeleteAccount ( aId : string ) {
Kenrick Tandrian
18 hours ago
GitHub