Feature/add no transactions info on zen page (#222)

* Add no transactions info to zen page

* Update changelog

CHANGELOG.md

@@ -10,6 +10,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Improved the onboarding
+  - Flow of creating a new account
+  - Info message to add the first transaction
 
 ### Fixed
 

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

@@ -5,8 +5,8 @@ import { MatMenuModule } from '@angular/material/menu';
 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 '@ghostfolio/client/components/logo/logo.module';
 
-import { GfLogoModule } from '../logo/logo.module';
 import { HeaderComponent } from './header.component';
 
 @NgModule({

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
 >

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';
   }
 }

apps/client/src/app/components/no-transactions-info/no-transactions-info.component.html

@@ -1,9 +1,13 @@
+<div class="p-3">
+  <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>
+</div>

apps/client/src/app/components/no-transactions-info/no-transactions-info.component.scss

@@ -1,3 +1,13 @@
 :host {
+  border: 1px solid rgba(var(--dark-dividers));
+  border-radius: 0.25rem;
   display: block;
+
+  gf-logo {
+    opacity: 0.25;
+  }
+}
+
+:host-context(.is-dark-theme) {
+  border-color: rgba(var(--light-dividers));
 }

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]
 })

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();
       });
 

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>

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