feat(home): implement data reload on logo click #2952

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "angular.enable-strict-mode-prompt": false
 }

apps/client/src/app/components/header/header.component.html

@@ -6,6 +6,7 @@
         mat-button
         [ngClass]="{ 'w-100': hasTabs }"
         [routerLink]="['/']"
+        (click)="onLogoClick()"
       >
         <gf-logo class="px-2" [label]="pageTitle" />
       </a>

apps/client/src/app/components/header/header.component.ts

@@ -13,6 +13,7 @@ import { MatMenuTrigger } from '@angular/material/menu';
 import { Router } from '@angular/router';
 import { UpdateUserSettingDto } from '@ghostfolio/api/app/user/update-user-setting.dto';
 import { LoginWithAccessTokenDialog } from '@ghostfolio/client/components/login-with-access-token-dialog/login-with-access-token-dialog.component';
+import { LayoutService } from '@ghostfolio/client/core/layout.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import {
@@ -89,6 +90,7 @@ export class HeaderComponent implements OnChanges {
     private dataService: DataService,
     private dialog: MatDialog,
     private impersonationStorageService: ImpersonationStorageService,
+    private layoutService: LayoutService,
     private router: Router,
     private settingsStorageService: SettingsStorageService,
     private tokenStorageService: TokenStorageService,
@@ -192,6 +194,12 @@ export class HeaderComponent implements OnChanges {
       });
   }
 
+  public onLogoClick() {
+    if (this.currentRoute === 'home') {
+      this.layoutService.triggerReload();
+    }
+  }
+
   public onMenuClosed() {
     this.isMenuOpen = false;
   }

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

@@ -2,6 +2,7 @@ import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { ToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
+import { LayoutService } from '@ghostfolio/client/core/layout.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import {
   LineChartItem,
@@ -12,7 +13,7 @@ import {
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { DateRange } from '@ghostfolio/common/types';
 import { DeviceDetectorService } from 'ngx-device-detector';
-import { Subject } from 'rxjs';
+import { Subject, Subscription } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
@@ -35,6 +36,7 @@ export class HomeOverviewComponent implements OnDestroy, OnInit {
   public showDetails = false;
   public unit: string;
   public user: User;
+  private subscription: Subscription;
 
   private unsubscribeSubject = new Subject<void>();
 
@@ -42,6 +44,7 @@ export class HomeOverviewComponent implements OnDestroy, OnInit {
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
     private deviceService: DeviceDetectorService,
+    private layoutService: LayoutService,
     private impersonationStorageService: ImpersonationStorageService,
     private userService: UserService
   ) {
@@ -78,6 +81,10 @@ export class HomeOverviewComponent implements OnDestroy, OnInit {
       this.user.settings.viewMode !== 'ZEN';
 
     this.unit = this.showDetails ? this.user.settings.baseCurrency : '%';
+
+    this.subscription = this.layoutService.shouldReload$.subscribe(() => {
+      this.update();
+    });
   }
 
   public onChangeDateRange(dateRange: DateRange) {
@@ -101,6 +108,9 @@ export class HomeOverviewComponent implements OnDestroy, OnInit {
   public ngOnDestroy() {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
   }
 
   private update() {

apps/client/src/app/core/layout.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LayoutService {
+  private shouldReloadSubject = new Subject<void>();
+
+  // Observable stream
+  public shouldReload$ = this.shouldReloadSubject.asObservable();
+
+  constructor() {}
+
+  // Method to trigger the reload
+  public triggerReload() {
+    this.shouldReloadSubject.next();
+  }
+}