diff --git a/CHANGELOG.md b/CHANGELOG.md index 538815f1d..8109d54f7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed +- Improved the usability of the portfolio summary by collapsing the _Holdings_ and _Cash_ breakdowns by default - Extended the support of the _Exclude from Analysis_ tag from accounts to activities - Optimized the performance of the search in the assistant by reusing the cached portfolio snapshot - Improved the validation of the import functionality when referencing an asset profile with the data source `MANUAL` diff --git a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html index e4ff1ba93..9394d7624 100644 --- a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html +++ b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html @@ -164,7 +164,22 @@
-
+
+ @if (hasHoldingsBreakdown) { + + + + } Holdings @if ( !hasImpersonationId && @@ -192,7 +207,7 @@ />
- @if (isLoading || summary?.emergencyFund?.assets > 0) { + @if (hasHoldingsBreakdown && isHoldingsExpanded) {
Investments
@@ -223,7 +238,22 @@
}
-
+
+ @if (hasCashBreakdown) { + + + + } Cash @if ( !hasImpersonationId && @@ -251,7 +281,7 @@ />
- @if (isLoading || summary?.emergencyFund?.cash > 0) { + @if (hasCashBreakdown && isCashExpanded) {
Buying Power
diff --git a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.scss b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.scss index 6feaa22d1..534976f11 100644 --- a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.scss +++ b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.scss @@ -1,6 +1,19 @@ :host { display: block; + .caret-container { + width: 1rem; + + .caret { + font-size: 0.7rem; + transition: transform 150ms ease-in-out; + + &.caret-expanded { + transform: rotate(90deg); + } + } + } + .indent-1 { margin-left: 1rem; } diff --git a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts index eaf71210f..eac5ef9a6 100644 --- a/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts +++ b/apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts @@ -18,6 +18,7 @@ import { IonIcon } from '@ionic/angular/standalone'; import { formatDistanceToNow } from 'date-fns'; import { addIcons } from 'ionicons'; import { + caretForwardOutline, ellipsisHorizontalCircleOutline, informationCircleOutline } from 'ionicons/icons'; @@ -47,13 +48,19 @@ export class GfPortfolioSummaryComponent implements OnChanges { 'BUY_AND_SELL_ACTIVITIES_TOOLTIP' ); + protected isCashExpanded = false; + protected isHoldingsExpanded = false; protected precision = 2; protected timeInMarket: string | undefined; private readonly notificationService = inject(NotificationService); public constructor() { - addIcons({ ellipsisHorizontalCircleOutline, informationCircleOutline }); + addIcons({ + caretForwardOutline, + ellipsisHorizontalCircleOutline, + informationCircleOutline + }); } protected get cashPercentage() { @@ -77,6 +84,14 @@ export class GfPortfolioSummaryComponent implements OnChanges { : 0; } + protected get hasCashBreakdown() { + return !this.isLoading && this.summary?.emergencyFund?.cash > 0; + } + + protected get hasHoldingsBreakdown() { + return !this.isLoading && this.summary?.emergencyFund?.assets > 0; + } + protected get holdingsInBaseCurrency() { if ( !isNumber(this.summary?.totalAssetsInBaseCurrency) || @@ -145,4 +160,12 @@ export class GfPortfolioSummaryComponent implements OnChanges { title: $localize`Please set the amount of your emergency fund.` }); } + + protected onToggleCash() { + this.isCashExpanded = !this.isCashExpanded; + } + + protected onToggleHoldings() { + this.isHoldingsExpanded = !this.isHoldingsExpanded; + } }