From bf18722a899e387811f7fc3c8aa319df6fa0b3d0 Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Sun, 18 Jul 2021 09:01:52 +0200
Subject: [PATCH] Add no transactions info to zen page

---
 apps/client/src/app/components/header/header.module.ts   | 2 +-
 apps/client/src/app/components/logo/logo.component.html  | 2 +-
 apps/client/src/app/components/logo/logo.component.ts    | 4 +++-
 .../no-transactions-info.component.html                  | 4 +++-
 .../no-transactions-info.component.scss                  | 4 ++++
 .../no-transactions-info/no-transactions-info.module.ts  | 3 ++-
 apps/client/src/app/pages/zen/zen-page.component.ts      | 3 +++
 apps/client/src/app/pages/zen/zen-page.html              | 9 ++++++++-
 apps/client/src/app/pages/zen/zen-page.module.ts         | 2 ++
 9 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/app/components/header/header.module.ts b/apps/client/src/app/components/header/header.module.ts
index 41873f65b..2e27ae939 100644
--- a/apps/client/src/app/components/header/header.module.ts
+++ b/apps/client/src/app/components/header/header.module.ts
@@ -6,7 +6,7 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { RouterModule } from '@angular/router';
 import { LoginWithAccessTokenDialogModule } from '@ghostfolio/client/components/login-with-access-token-dialog/login-with-access-token-dialog.module';
 
-import { GfLogoModule } from '../logo/logo.module';
+import { GfLogoModule } from '@ghostfolio/client/components/logo/logo.module';
 import { HeaderComponent } from './header.component';
 
 @NgModule({
diff --git a/apps/client/src/app/components/logo/logo.component.html b/apps/client/src/app/components/logo/logo.component.html
index 15389c339..71524fb6f 100644
--- a/apps/client/src/app/components/logo/logo.component.html
+++ b/apps/client/src/app/components/logo/logo.component.html
@@ -1,4 +1,4 @@
 <span class="align-items-center d-flex"
   ><span class="d-inline-block logo mr-1"></span>
-  <span class="name">Ghostfolio</span></span
+  <span *ngIf="!hideName" class="name">Ghostfolio</span></span
 >
diff --git a/apps/client/src/app/components/logo/logo.component.ts b/apps/client/src/app/components/logo/logo.component.ts
index ed7f0d135..441f12e92 100644
--- a/apps/client/src/app/components/logo/logo.component.ts
+++ b/apps/client/src/app/components/logo/logo.component.ts
@@ -14,10 +14,12 @@ import {
 })
 export class LogoComponent implements OnInit {
   @HostBinding('class') @Input() size: 'large' | 'medium';
+  @Input() hideName: boolean;
 
   public constructor() {}
 
   public ngOnInit() {
-    this.size = this.size || 'medium';
+    this.hideName = this.hideName ?? false;
+    this.size = this.size ?? 'medium';
   }
 }
diff --git a/apps/client/src/app/components/no-transactions-info/no-transactions-info.component.html b/apps/client/src/app/components/no-transactions-info/no-transactions-info.component.html
index bc0879dcf..a5791ec0f 100644
--- a/apps/client/src/app/components/no-transactions-info/no-transactions-info.component.html
+++ b/apps/client/src/app/components/no-transactions-info/no-transactions-info.component.html
@@ -1,9 +1,11 @@
+<div class="d-flex justify-content-center mb-1">
+  <gf-logo size="large" [hideName]="true"></gf-logo>
+</div>
 <a
   class="align-items-center justify-content-center"
   color="primary"
   [routerLink]="['/transactions']"
   mat-button
 >
-  <ion-icon class="mr-1" name="time-outline" size="large"></ion-icon>
   <span i18n>Time to add your first transaction.</span>
 </a>
diff --git a/apps/client/src/app/components/no-transactions-info/no-transactions-info.component.scss b/apps/client/src/app/components/no-transactions-info/no-transactions-info.component.scss
index 5d4e87f30..453beea72 100644
--- a/apps/client/src/app/components/no-transactions-info/no-transactions-info.component.scss
+++ b/apps/client/src/app/components/no-transactions-info/no-transactions-info.component.scss
@@ -1,3 +1,7 @@
 :host {
   display: block;
+
+  gf-logo {
+    opacity: 0.25;
+  }
 }
diff --git a/apps/client/src/app/components/no-transactions-info/no-transactions-info.module.ts b/apps/client/src/app/components/no-transactions-info/no-transactions-info.module.ts
index e6aa10deb..917beb579 100644
--- a/apps/client/src/app/components/no-transactions-info/no-transactions-info.module.ts
+++ b/apps/client/src/app/components/no-transactions-info/no-transactions-info.module.ts
@@ -2,13 +2,14 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
+import { GfLogoModule } from '@ghostfolio/client/components/logo/logo.module';
 
 import { NoTransactionsInfoComponent } from './no-transactions-info.component';
 
 @NgModule({
   declarations: [NoTransactionsInfoComponent],
   exports: [NoTransactionsInfoComponent],
-  imports: [CommonModule, MatButtonModule, RouterModule],
+  imports: [CommonModule, GfLogoModule, MatButtonModule, RouterModule],
   providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
diff --git a/apps/client/src/app/pages/zen/zen-page.component.ts b/apps/client/src/app/pages/zen/zen-page.component.ts
index bcf75f392..8460d765e 100644
--- a/apps/client/src/app/pages/zen/zen-page.component.ts
+++ b/apps/client/src/app/pages/zen/zen-page.component.ts
@@ -20,6 +20,7 @@ export class ZenPageComponent implements OnDestroy, OnInit {
   public deviceType: string;
   public hasImpersonationId: boolean;
   public hasPermissionToReadForeignPortfolio: boolean;
+  public hasPositions: boolean;
   public historicalDataItems: LineChartItem[];
   public isLoadingPerformance = true;
   public performance: PortfolioPerformance;
@@ -88,6 +89,8 @@ export class ZenPageComponent implements OnDestroy, OnInit {
           };
         });
 
+        this.hasPositions = this.historicalDataItems?.length > 0;
+
         this.changeDetectorRef.markForCheck();
       });
 
diff --git a/apps/client/src/app/pages/zen/zen-page.html b/apps/client/src/app/pages/zen/zen-page.html
index a3e16b732..95d417cdd 100644
--- a/apps/client/src/app/pages/zen/zen-page.html
+++ b/apps/client/src/app/pages/zen/zen-page.html
@@ -1,4 +1,4 @@
-<div class="container">
+<div *ngIf="hasPositions || !historicalDataItems" class="container">
   <div class="row">
     <div class="chart-container col mr-3">
       <gf-line-chart
@@ -23,3 +23,10 @@
     </div>
   </div>
 </div>
+
+<div
+  *ngIf="!hasPositions && historicalDataItems"
+  class="d-flex justify-content-center my-5"
+>
+  <gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
+</div>
diff --git a/apps/client/src/app/pages/zen/zen-page.module.ts b/apps/client/src/app/pages/zen/zen-page.module.ts
index 117f69136..b878dbeda 100644
--- a/apps/client/src/app/pages/zen/zen-page.module.ts
+++ b/apps/client/src/app/pages/zen/zen-page.module.ts
@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
 import { GfLineChartModule } from '@ghostfolio/client/components/line-chart/line-chart.module';
+import { GfNoTransactionsInfoModule } from '@ghostfolio/client/components/no-transactions-info/no-transactions-info.module';
 import { GfPortfolioPerformanceSummaryModule } from '@ghostfolio/client/components/portfolio-performance-summary/portfolio-performance-summary.module';
 
 import { ZenPageRoutingModule } from './zen-page-routing.module';
@@ -13,6 +14,7 @@ import { ZenPageComponent } from './zen-page.component';
   imports: [
     CommonModule,
     GfLineChartModule,
+    GfNoTransactionsInfoModule,
     GfPortfolioPerformanceSummaryModule,
     MatCardModule,
     ZenPageRoutingModule