Feature/improve portfolio summary (#3472)

* Improve portfolio summary

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the portfolio summary
 - Improved the allocations by ETF holding on the allocations page (experimental)
 - Improved the error handling in the `HttpResponseInterceptor`
 - Improved the language localization for German (`de`)

apps/client/src/app/components/home-summary/home-summary.component.ts

@@ -9,12 +9,7 @@ import {
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
-import {
+import { MatSnackBarRef, TextOnlySnackBar } from '@angular/material/snack-bar';
-  MatSnackBar,
-  MatSnackBarRef,
-  TextOnlySnackBar
-} from '@angular/material/snack-bar';
-import { Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -39,8 +34,6 @@ export class HomeSummaryComponent implements OnDestroy, OnInit {
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
     private impersonationStorageService: ImpersonationStorageService,
-    private router: Router,
-    private snackBar: MatSnackBar,
     private userService: UserService
   ) {
     this.info = this.dataService.fetchInfo();
@@ -108,24 +101,6 @@ export class HomeSummaryComponent implements OnDestroy, OnInit {
         this.summary = summary;
         this.isLoading = false;
 
-        if (!this.summary) {
-          this.snackBarRef = this.snackBar.open(
-            $localize`This feature requires a subscription.`,
-            this.hasPermissionForSubscription
-              ? $localize`Upgrade Plan`
-              : undefined,
-            { duration: 6000 }
-          );
-
-          this.snackBarRef.afterDismissed().subscribe(() => {
-            this.snackBarRef = undefined;
-          });
-
-          this.snackBarRef.onAction().subscribe(() => {
-            this.router.navigate(['/' + $localize`pricing`]);
-          });
-        }
-
         this.changeDetectorRef.markForCheck();
       });
 

apps/client/src/app/components/home-summary/home-summary.html

@@ -13,6 +13,7 @@
             [language]="user?.settings?.language"
             [locale]="user?.settings?.locale"
             [summary]="summary"
+            [user]="user"
             (emergencyFundChanged)="onChangeEmergencyFund($event)"
           />
         </mat-card-content>

apps/client/src/app/components/home-summary/home-summary.module.ts

@@ -3,18 +3,12 @@ import { GfPortfolioSummaryModule } from '@ghostfolio/client/components/portfoli
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
-import { RouterModule } from '@angular/router';
 
 import { HomeSummaryComponent } from './home-summary.component';
 
 @NgModule({
   declarations: [HomeSummaryComponent],
-  imports: [
+  imports: [CommonModule, GfPortfolioSummaryModule, MatCardModule],
-    CommonModule,
-    GfPortfolioSummaryModule,
-    MatCardModule,
-    RouterModule
-  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfHomeSummaryModule {}

apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html

@@ -107,7 +107,9 @@
   <div class="flex-nowrap px-3 py-1 row">
     <div class="flex-grow-1 text-truncate" i18n>Fees</div>
     <div class="d-flex justify-content-end">
-      <span *ngIf="summary?.fees || summary?.fees === 0" class="mr-1">-</span>
+      @if (summary?.fees || summary?.fees === 0) {
+        <span class="mr-1">-</span>
+      }
       <gf-value
         class="justify-content-end"
         [isCurrency]="true"
@@ -190,14 +192,27 @@
     <div class="flex-grow-1 text-truncate" i18n>Emergency Fund</div>
     <div
       class="align-items-center d-flex justify-content-end"
-      [ngClass]="{ 'cursor-pointer': hasPermissionToUpdateUserSettings }"
+      [ngClass]="{
-      (click)="hasPermissionToUpdateUserSettings && onEditEmergencyFund()"
+        'cursor-pointer':
+          hasPermissionToUpdateUserSettings &&
+          user?.subscription?.type !== 'Basic'
+      }"
+      (click)="
+        hasPermissionToUpdateUserSettings &&
+          user?.subscription?.type !== 'Basic' &&
+          onEditEmergencyFund()
+      "
     >
-      <ion-icon
+      @if (
-        *ngIf="hasPermissionToUpdateUserSettings && !isLoading"
+        hasPermissionToUpdateUserSettings &&
-        class="mr-1 text-muted"
+        user?.subscription?.type !== 'Basic' &&
-        name="ellipsis-horizontal-circle-outline"
+        !isLoading
-      />
+      ) {
+        <ion-icon
+          class="mr-1 text-muted"
+          name="ellipsis-horizontal-circle-outline"
+        />
+      }
       <gf-value
         class="justify-content-end"
         [isCurrency]="true"
@@ -263,11 +278,9 @@
   <div class="flex-nowrap px-3 py-1 row">
     <div class="flex-grow-1 text-truncate" i18n>Liabilities</div>
     <div class="d-flex justify-content-end">
-      <span
+      @if (summary?.liabilities || summary?.liabilities === 0) {
-        *ngIf="summary?.liabilities || summary?.liabilities === 0"
+        <span class="mr-1">-</span>
-        class="mr-1"
+      }
-        >-</span
-      >
       <gf-value
         class="justify-content-end"
         [isCurrency]="true"

apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts

@@ -1,5 +1,5 @@
 import { getDateFnsLocale, getLocale } from '@ghostfolio/common/helper';
-import { PortfolioSummary } from '@ghostfolio/common/interfaces';
+import { PortfolioSummary, User } from '@ghostfolio/common/interfaces';
 import { translate } from '@ghostfolio/ui/i18n';
 
 import {
@@ -26,6 +26,7 @@ export class PortfolioSummaryComponent implements OnChanges, OnInit {
   @Input() language: string;
   @Input() locale = getLocale();
   @Input() summary: PortfolioSummary;
+  @Input() user: User;
 
   @Output() emergencyFundChanged = new EventEmitter<number>();