|
|
@ -8,13 +8,11 @@ import { CommonModule } from '@angular/common'; |
|
|
import { |
|
|
import { |
|
|
ChangeDetectionStrategy, |
|
|
ChangeDetectionStrategy, |
|
|
Component, |
|
|
Component, |
|
|
EventEmitter, |
|
|
|
|
|
Input, |
|
|
|
|
|
OnDestroy, |
|
|
|
|
|
Output, |
|
|
|
|
|
computed, |
|
|
computed, |
|
|
|
|
|
effect, |
|
|
inject, |
|
|
inject, |
|
|
input, |
|
|
input, |
|
|
|
|
|
output, |
|
|
viewChild |
|
|
viewChild |
|
|
} from '@angular/core'; |
|
|
} from '@angular/core'; |
|
|
import { MatButtonModule } from '@angular/material/button'; |
|
|
import { MatButtonModule } from '@angular/material/button'; |
|
|
@ -35,7 +33,6 @@ import { |
|
|
walletOutline |
|
|
walletOutline |
|
|
} from 'ionicons/icons'; |
|
|
} from 'ionicons/icons'; |
|
|
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; |
|
|
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; |
|
|
import { Subject } from 'rxjs'; |
|
|
|
|
|
|
|
|
|
|
|
@Component({ |
|
|
@Component({ |
|
|
changeDetection: ChangeDetectionStrategy.OnPush, |
|
|
changeDetection: ChangeDetectionStrategy.OnPush, |
|
|
@ -55,35 +52,29 @@ import { Subject } 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 OnDestroy { |
|
|
export class GfAccountsTableComponent { |
|
|
@Input() activitiesCount: number; |
|
|
|
|
|
@Input() baseCurrency: string; |
|
|
|
|
|
@Input() deviceType: string; |
|
|
|
|
|
@Input() hasPermissionToOpenDetails = true; |
|
|
|
|
|
@Input() locale = getLocale(); |
|
|
|
|
|
@Input() showFooter = true; |
|
|
|
|
|
@Input() totalBalanceInBaseCurrency: number; |
|
|
|
|
|
@Input() totalValueInBaseCurrency: number; |
|
|
|
|
|
|
|
|
|
|
|
@Output() accountDeleted = new EventEmitter<string>(); |
|
|
|
|
|
@Output() accountToUpdate = new EventEmitter<Account>(); |
|
|
|
|
|
@Output() transferBalance = new EventEmitter<void>(); |
|
|
|
|
|
|
|
|
|
|
|
public readonly accounts = input.required<Account[] | undefined>(); |
|
|
public readonly accounts = input.required<Account[] | undefined>(); |
|
|
|
|
|
public readonly activitiesCount = input<number>(); |
|
|
|
|
|
public readonly baseCurrency = input<string>(); |
|
|
|
|
|
public readonly hasPermissionToOpenDetails = input(true); |
|
|
|
|
|
public readonly locale = input(getLocale()); |
|
|
public readonly showActions = input<boolean>(); |
|
|
public readonly showActions = input<boolean>(); |
|
|
public readonly showActivitiesCount = input(true); |
|
|
public readonly showActivitiesCount = input(true); |
|
|
public readonly showAllocationInPercentage = input<boolean>(); |
|
|
public readonly showAllocationInPercentage = input<boolean>(); |
|
|
public readonly showBalance = input(true); |
|
|
public readonly showBalance = input(true); |
|
|
|
|
|
public readonly showFooter = input(true); |
|
|
public readonly showValue = input(true); |
|
|
public readonly showValue = input(true); |
|
|
public readonly showValueInBaseCurrency = input(false); |
|
|
public readonly showValueInBaseCurrency = input(false); |
|
|
|
|
|
public readonly totalBalanceInBaseCurrency = input<number>(); |
|
|
|
|
|
public readonly totalValueInBaseCurrency = input<number>(); |
|
|
|
|
|
|
|
|
|
|
|
public readonly accountDeleted = output<string>(); |
|
|
|
|
|
public readonly accountToUpdate = output<Account>(); |
|
|
|
|
|
public readonly transferBalance = output<void>(); |
|
|
|
|
|
|
|
|
public readonly sort = viewChild.required(MatSort); |
|
|
public readonly sort = viewChild.required(MatSort); |
|
|
|
|
|
|
|
|
protected readonly dataSource = computed(() => { |
|
|
protected readonly dataSource = new MatTableDataSource<Account>([]); |
|
|
const dataSource = new MatTableDataSource<Account>(this.accounts()); |
|
|
|
|
|
dataSource.sortingDataAccessor = getLowercase; |
|
|
|
|
|
dataSource.sort = this.sort(); |
|
|
|
|
|
return dataSource; |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
protected readonly displayedColumns = computed(() => { |
|
|
protected readonly displayedColumns = computed(() => { |
|
|
const columns = ['status', 'account', 'platform']; |
|
|
const columns = ['status', 'account', 'platform']; |
|
|
@ -123,7 +114,6 @@ export class GfAccountsTableComponent implements OnDestroy { |
|
|
|
|
|
|
|
|
private readonly notificationService = inject(NotificationService); |
|
|
private readonly notificationService = inject(NotificationService); |
|
|
private readonly router = inject(Router); |
|
|
private readonly router = inject(Router); |
|
|
private readonly unsubscribeSubject = new Subject<void>(); |
|
|
|
|
|
|
|
|
|
|
|
public constructor() { |
|
|
public constructor() { |
|
|
addIcons({ |
|
|
addIcons({ |
|
|
@ -135,9 +125,21 @@ export class GfAccountsTableComponent implements OnDestroy { |
|
|
trashOutline, |
|
|
trashOutline, |
|
|
walletOutline |
|
|
walletOutline |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
this.dataSource.sortingDataAccessor = getLowercase; |
|
|
|
|
|
|
|
|
|
|
|
// Reactive data update
|
|
|
|
|
|
effect(() => { |
|
|
|
|
|
this.dataSource.data = this.accounts(); |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
// Reactive view connection
|
|
|
|
|
|
effect(() => { |
|
|
|
|
|
this.dataSource.sort = this.sort(); |
|
|
|
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
public onDeleteAccount(aId: string) { |
|
|
protected onDeleteAccount(aId: string) { |
|
|
this.notificationService.confirm({ |
|
|
this.notificationService.confirm({ |
|
|
confirmFn: () => { |
|
|
confirmFn: () => { |
|
|
this.accountDeleted.emit(aId); |
|
|
this.accountDeleted.emit(aId); |
|
|
@ -147,30 +149,25 @@ export class GfAccountsTableComponent implements OnDestroy { |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
public onOpenAccountDetailDialog(accountId: string) { |
|
|
protected onOpenAccountDetailDialog(accountId: string) { |
|
|
if (this.hasPermissionToOpenDetails) { |
|
|
if (this.hasPermissionToOpenDetails()) { |
|
|
this.router.navigate([], { |
|
|
this.router.navigate([], { |
|
|
queryParams: { accountId, accountDetailDialog: true } |
|
|
queryParams: { accountId, accountDetailDialog: true } |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
public onOpenComment(aComment: string) { |
|
|
protected onOpenComment(aComment: string) { |
|
|
this.notificationService.alert({ |
|
|
this.notificationService.alert({ |
|
|
title: aComment |
|
|
title: aComment |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
public onTransferBalance() { |
|
|
protected onTransferBalance() { |
|
|
this.transferBalance.emit(); |
|
|
this.transferBalance.emit(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
public onUpdateAccount(aAccount: Account) { |
|
|
protected onUpdateAccount(aAccount: Account) { |
|
|
this.accountToUpdate.emit(aAccount); |
|
|
this.accountToUpdate.emit(aAccount); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
public ngOnDestroy() { |
|
|
|
|
|
this.unsubscribeSubject.next(); |
|
|
|
|
|
this.unsubscribeSubject.complete(); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
|
KenTandrian
3 weeks ago