Add cash balances table to account detail dialog (#2549)
* Add cash balances table to account detail dialog * Update changelog --------- Co-authored-by: Thomas <4159106+dtslvr@users.noreply.github.com>pull/2705/head
parent
6f4fd0826c
commit
ed4dd79c72
@ -0,0 +1,36 @@
|
|||||||
|
<table
|
||||||
|
class="gf-table w-100"
|
||||||
|
mat-table
|
||||||
|
matSort
|
||||||
|
matSortActive="date"
|
||||||
|
matSortDirection="desc"
|
||||||
|
[dataSource]="dataSource"
|
||||||
|
>
|
||||||
|
<ng-container matColumnDef="date">
|
||||||
|
<th *matHeaderCellDef class="px-2" mat-header-cell mat-sort-header>
|
||||||
|
<ng-container i18n>Date</ng-container>
|
||||||
|
</th>
|
||||||
|
<td *matCellDef="let element" class="px-2" mat-cell>
|
||||||
|
<gf-value [isDate]="true" [locale]="locale" [value]="element?.date" />
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="value">
|
||||||
|
<th *matHeaderCellDef class="px-2 text-right" mat-header-cell>
|
||||||
|
<ng-container i18n>Value</ng-container>
|
||||||
|
</th>
|
||||||
|
<td *matCellDef="let element" class="px-2" mat-cell>
|
||||||
|
<div class="d-flex justify-content-end">
|
||||||
|
<gf-value
|
||||||
|
[isCurrency]="true"
|
||||||
|
[locale]="locale"
|
||||||
|
[unit]="element?.Account?.currency"
|
||||||
|
[value]="element?.value"
|
||||||
|
></gf-value>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
|
||||||
|
<tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
|
||||||
|
</table>
|
@ -0,0 +1,5 @@
|
|||||||
|
@import 'apps/client/src/styles/ghostfolio-style';
|
||||||
|
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
}
|
@ -0,0 +1,63 @@
|
|||||||
|
import {
|
||||||
|
ChangeDetectionStrategy,
|
||||||
|
ChangeDetectorRef,
|
||||||
|
Component,
|
||||||
|
Input,
|
||||||
|
OnDestroy,
|
||||||
|
OnInit,
|
||||||
|
ViewChild
|
||||||
|
} from '@angular/core';
|
||||||
|
import { MatSort } from '@angular/material/sort';
|
||||||
|
import { MatTableDataSource } from '@angular/material/table';
|
||||||
|
import { DataService } from '@ghostfolio/client/services/data.service';
|
||||||
|
import { AccountBalancesResponse } from '@ghostfolio/common/interfaces';
|
||||||
|
import { get } from 'lodash';
|
||||||
|
import { Subject, takeUntil } from 'rxjs';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
|
selector: 'gf-account-balances',
|
||||||
|
styleUrls: ['./account-balances.component.scss'],
|
||||||
|
templateUrl: './account-balances.component.html'
|
||||||
|
})
|
||||||
|
export class AccountBalancesComponent implements OnDestroy, OnInit {
|
||||||
|
@Input() accountId: string;
|
||||||
|
@Input() locale: string;
|
||||||
|
|
||||||
|
@ViewChild(MatSort) sort: MatSort;
|
||||||
|
|
||||||
|
public dataSource: MatTableDataSource<
|
||||||
|
AccountBalancesResponse['balances'][0]
|
||||||
|
> = new MatTableDataSource();
|
||||||
|
public displayedColumns: string[] = ['date', 'value'];
|
||||||
|
|
||||||
|
private unsubscribeSubject = new Subject<void>();
|
||||||
|
|
||||||
|
public constructor(
|
||||||
|
private changeDetectorRef: ChangeDetectorRef,
|
||||||
|
private dataService: DataService
|
||||||
|
) {}
|
||||||
|
|
||||||
|
public ngOnInit() {
|
||||||
|
this.fetchBalances();
|
||||||
|
}
|
||||||
|
|
||||||
|
public ngOnDestroy() {
|
||||||
|
this.unsubscribeSubject.next();
|
||||||
|
this.unsubscribeSubject.complete();
|
||||||
|
}
|
||||||
|
|
||||||
|
private fetchBalances() {
|
||||||
|
this.dataService
|
||||||
|
.fetchAccountBalances(this.accountId)
|
||||||
|
.pipe(takeUntil(this.unsubscribeSubject))
|
||||||
|
.subscribe(({ balances }) => {
|
||||||
|
this.dataSource = new MatTableDataSource(balances);
|
||||||
|
|
||||||
|
this.dataSource.sort = this.sort;
|
||||||
|
this.dataSource.sortingDataAccessor = get;
|
||||||
|
|
||||||
|
this.changeDetectorRef.markForCheck();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,15 @@
|
|||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
||||||
|
import { MatSortModule } from '@angular/material/sort';
|
||||||
|
import { MatTableModule } from '@angular/material/table';
|
||||||
|
import { GfValueModule } from '@ghostfolio/ui/value';
|
||||||
|
|
||||||
|
import { AccountBalancesComponent } from './account-balances.component';
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
declarations: [AccountBalancesComponent],
|
||||||
|
exports: [AccountBalancesComponent],
|
||||||
|
imports: [CommonModule, GfValueModule, MatSortModule, MatTableModule],
|
||||||
|
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
||||||
|
})
|
||||||
|
export class GfAccountBalancesModule {}
|
Loading…
Reference in new issue