sudacode/ghostfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Feature/Add holdings tab to account detail dialog (#2853) (#2864)

Browse Source 
* Feature/Add holdings tab to account detail dialog (#2853)

* Update changelog
This commit is contained in:
TobiasXy 2024-01-15 20:35:45 +01:00 committed by GitHub
parent bde8be1385
commit 1b2d2a9860
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 78 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
CHANGELOG.md
View File

@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## Unreleased
### Added
- Added the holdings table to the account detail dialog
## 2.40.0 - 2024-01-15
### Changed

22
apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.ts
View File

@ -16,6 +16,7 @@ import { downloadAsFile } from '@ghostfolio/common/helper';
import {
AccountBalancesResponse,
HistoricalDataItem,
PortfolioPosition,
User
} from '@ghostfolio/common/interfaces';
import { hasPermission, permissions } from '@ghostfolio/common/permissions';
@ -45,6 +46,7 @@ export class AccountDetailDialog implements OnDestroy, OnInit {
public hasImpersonationId: boolean;
public hasPermissionToDeleteAccountBalance: boolean;
public historicalDataItems: HistoricalDataItem[];
public holdings: PortfolioPosition[];
public isLoadingActivities: boolean;
public isLoadingChart: boolean;
public name: string;
@ -114,6 +116,26 @@ export class AccountDetailDialog implements OnDestroy, OnInit {
}
);
this.dataService
.fetchPortfolioDetails({
filters: [
{
type: 'ACCOUNT',
id: this.data.accountId
}
]
})
.pipe(takeUntil(this.unsubscribeSubject))
.subscribe(({ holdings }) => {
this.holdings = [];
for (const [symbol, holding] of Object.entries(holdings)) {
this.holdings.push(holding);
}
this.changeDetectorRef.markForCheck();
});
this.impersonationStorageService
.onChangeHasImpersonation()
.pipe(takeUntil(this.unsubscribeSubject))

24
apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html
View File

@ -70,12 +70,27 @@
[ngClass]="{ 'd-none': isLoadingActivities }"
>
<mat-tab>
<ng-template i18n mat-tab-label>Activities</ng-template>
<ng-template mat-tab-label>
<ion-icon name="wallet-outline" />
<div class="d-none d-sm-block ml-2" i18n>Holdings</div>
</ng-template>
<gf-holdings-table
[baseCurrency]="user?.settings?.baseCurrency"
[deviceType]="data.deviceType"
[holdings]="holdings"
[locale]="user?.settings?.locale"
></gf-holdings-table>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<ion-icon name="swap-vertical-outline" />
<div class="d-none d-sm-block ml-2" i18n>Activities</div>
</ng-template>
<gf-activities-table-lazy
*ngIf="user?.settings?.isExperimentalFeatures === true"
[baseCurrency]="user?.settings?.baseCurrency"
[dataSource]="dataSource"
[deviceType]="deviceType"
[deviceType]="data.deviceType"
[hasPermissionToCreateActivity]="false"
[hasPermissionToExportActivities]="!hasImpersonationId && !user.settings.isRestrictedView"
[hasPermissionToFilter]="false"
@ -103,7 +118,10 @@
></gf-activities-table>
</mat-tab>
<mat-tab>
<ng-template i18n mat-tab-label>Cash Balances</ng-template>
<ng-template mat-tab-label>
<ion-icon name="cash-outline" />
<div class="d-none d-sm-block ml-2" i18n>Cash Balances</div>
</ng-template>
<gf-account-balances
[accountBalances]="accountBalances"
[accountId]="data.accountId"

2
apps/client/src/app/components/account-detail-dialog/account-detail-dialog.module.ts
View File

@ -5,6 +5,7 @@ import { MatDialogModule } from '@angular/material/dialog';
import { MatTabsModule } from '@angular/material/tabs';
import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
import { GfHoldingsTableModule } from '@ghostfolio/ui/holdings-table/holdings-table.module';
import { GfInvestmentChartModule } from '@ghostfolio/client/components/investment-chart/investment-chart.module';
import { GfAccountBalancesModule } from '@ghostfolio/ui/account-balances/account-balances.module';
import { GfActivitiesTableLazyModule } from '@ghostfolio/ui/activities-table-lazy/activities-table-lazy.module';
@ -23,6 +24,7 @@ import { AccountDetailDialog } from './account-detail-dialog.component';
GfActivitiesTableLazyModule,
GfDialogFooterModule,
GfDialogHeaderModule,
GfHoldingsTableModule,
GfInvestmentChartModule,
GfValueModule,
MatButtonModule,

4
apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts
View File

@ -344,9 +344,9 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
this.positions[symbol] = {
value,
assetClass: position.assetClass,
assetClassLabel: translate(position.assetClass),
assetClassLabel: position.assetClassLabel,
assetSubClass: position.assetSubClass,
assetSubClassLabel: translate(position.assetSubClass),
assetSubClassLabel: position.assetSubClassLabel,
currency: position.currency,
etfProvider: this.extractEtfProvider({
assetSubClass: position.assetSubClass,

12
apps/client/src/app/pages/portfolio/holdings/holdings-page.component.ts
View File

@ -31,10 +31,10 @@ export class HoldingsPageComponent implements OnDestroy, OnInit {
public filters$ = new Subject<Filter[]>();
public hasImpersonationId: boolean;
public hasPermissionToCreateOrder: boolean;
public holdings: PortfolioPosition[];
public isLoading = false;
public placeholder = '';
public portfolioDetails: PortfolioDetails;
public positionsArray: PortfolioPosition[];
public user: User;
private unsubscribeSubject = new Subject<void>();
@ -152,20 +152,16 @@ export class HoldingsPageComponent implements OnDestroy, OnInit {
}
public initialize() {
this.positionsArray = [];
this.holdings = [];
}
public initializeAnalysisData() {
this.initialize();
for (const [symbol, position] of Object.entries(
for (const [symbol, holding] of Object.entries(
this.portfolioDetails.holdings
)) {
this.positionsArray.push({
...position,
assetClassLabel: translate(position.assetClass),
assetSubClassLabel: translate(position.assetSubClass)
});
this.holdings.push(holding);
}
}

4
apps/client/src/app/pages/portfolio/holdings/holdings-page.html
View File

@ -16,11 +16,11 @@
[baseCurrency]="user?.settings?.baseCurrency"
[deviceType]="deviceType"
[hasPermissionToCreateActivity]="hasPermissionToCreateOrder"
[holdings]="holdings"
[locale]="user?.settings?.locale"
[positions]="positionsArray"
></gf-holdings-table>
<div
*ngIf="hasPermissionToCreateOrder && positionsArray?.length > 0"
*ngIf="hasPermissionToCreateOrder && holdings?.length > 0"
class="text-center"
>
<a

11
apps/client/src/app/pages/public/public-page.component.ts
View File

@ -28,6 +28,7 @@ export class PublicPageComponent implements OnInit {
[code: string]: { name: string; value: number };
};
public deviceType: string;
public holdings: PortfolioPublicDetails['holdings'][string][];
public markets: {
[key in Market]: { name: string; value: number };
};
@ -37,7 +38,6 @@ export class PublicPageComponent implements OnInit {
value: number;
};
};
public positionsArray: PortfolioPublicDetails['holdings'][string][];
public sectors: {
[name: string]: { name: string; value: number };
};
@ -99,6 +99,7 @@ export class PublicPageComponent implements OnInit {
value: 0
}
};
this.holdings = [];
this.markets = {
[UNKNOWN_KEY]: {
name: UNKNOWN_KEY,
@ -118,7 +119,6 @@ export class PublicPageComponent implements OnInit {
}
};
this.positions = {};
this.positionsArray = [];
this.sectors = {
[UNKNOWN_KEY]: {
name: UNKNOWN_KEY,
@ -136,14 +136,13 @@ export class PublicPageComponent implements OnInit {
for (const [symbol, position] of Object.entries(
this.portfolioPublicDetails.holdings
)) {
const value = position.allocationInPercentage;
this.holdings.push(position);
this.positions[symbol] = {
value,
currency: position.currency,
name: position.name
name: position.name,
value: position.allocationInPercentage
};
this.positionsArray.push(position);
if (position.countries.length > 0) {
this.markets.developedMarkets.value +=

2
apps/client/src/app/pages/public/public-page.html
View File

@ -133,8 +133,8 @@
<gf-holdings-table
[deviceType]="deviceType"
[hasPermissionToShowValues]="false"
[holdings]="holdings"
[pageSize]="7"
[positions]="positionsArray"
></gf-holdings-table>
</div>
</div>

9
apps/client/src/app/services/data.service.ts
View File

@ -39,6 +39,7 @@ import {
} from '@ghostfolio/common/interfaces';
import { filterGlobalPermissions } from '@ghostfolio/common/permissions';
import { AccountWithValue, DateRange, GroupBy } from '@ghostfolio/common/types';
import { translate } from '@ghostfolio/ui/i18n';
import { DataSource, Order as OrderModel } from '@prisma/client';
import { format, parseISO } from 'date-fns';
import { cloneDeep, groupBy, isNumber } from 'lodash';
@ -399,6 +400,14 @@ export class DataService {
if (response.holdings) {
for (const symbol of Object.keys(response.holdings)) {
response.holdings[symbol].assetClassLabel = translate(
response.holdings[symbol].assetClass
);
response.holdings[symbol].assetSubClassLabel = translate(
response.holdings[symbol].assetSubClass
);
response.holdings[symbol].dateOfFirstActivity = response.holdings[
symbol
].dateOfFirstActivity

13
libs/ui/src/lib/holdings-table/holdings-table.component.ts
View File

@ -1,12 +1,10 @@
import {
ChangeDetectionStrategy,
Component,
EventEmitter,
Input,
OnChanges,
OnDestroy,
OnInit,
Output,
ViewChild
} from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
@ -14,7 +12,7 @@ import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { Router } from '@angular/router';
import { PortfolioPosition, UniqueAsset } from '@ghostfolio/common/interfaces';
import { AssetClass, Order as OrderModel } from '@prisma/client';
import { AssetClass } from '@prisma/client';
import { Subject, Subscription } from 'rxjs';
@Component({
@ -28,12 +26,9 @@ export class HoldingsTableComponent implements OnChanges, OnDestroy, OnInit {
@Input() deviceType: string;
@Input() hasPermissionToCreateActivity: boolean;
@Input() hasPermissionToShowValues = true;
@Input() holdings: PortfolioPosition[];
@Input() locale: string;
@Input() pageSize = Number.MAX_SAFE_INTEGER;
@Input() positions: PortfolioPosition[];
@Output() transactionDeleted = new EventEmitter<string>();
@Output() transactionToUpdate = new EventEmitter<OrderModel>();
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
@ -63,8 +58,8 @@ export class HoldingsTableComponent implements OnChanges, OnDestroy, OnInit {
this.isLoading = true;
if (this.positions) {
this.dataSource = new MatTableDataSource(this.positions);
if (this.holdings) {
this.dataSource = new MatTableDataSource(this.holdings);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;