From b9522307c4e703ef795712564e439eee8e549480 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Wed, 10 Nov 2021 21:03:25 +0100
Subject: [PATCH] Feature/various client improvements (#460)

* Various improvements
  * info messages
  * skeleton loader of portfolio holdings

* Update changelog
---
 CHANGELOG.md                                  | 10 ++++
 .../positions-table.component.html            |  4 +-
 .../positions/positions.component.html        |  4 +-
 .../app/components/rules/rules.component.html |  4 +-
 .../transactions-table.component.html         |  6 +++
 .../transactions-table.module.ts              |  2 +
 .../src/app/pages/home/home-page.component.ts |  2 -
 apps/client/src/app/pages/home/home-page.html | 46 ++++++++----------
 .../src/app/pages/zen/zen-page.component.ts   |  2 -
 apps/client/src/app/pages/zen/zen-page.html   | 48 ++++++++-----------
 .../no-transactions-info.component.html       |  1 +
 .../no-transactions-info.component.scss       |  7 ++-
 .../no-transactions-info.component.ts         | 13 +++--
 13 files changed, 80 insertions(+), 69 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 89ea0a3fd..32974da38 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Improved the info messages to add the first transaction
+
+### Fixed
+
+- Fixed the skeleton loader of the portfolio holdings
+
 ## 1.72.0 - 08.11.2021
 
 ### Changed
diff --git a/apps/client/src/app/components/positions-table/positions-table.component.html b/apps/client/src/app/components/positions-table/positions-table.component.html
index cf7fb1eb4..6b07f013d 100644
--- a/apps/client/src/app/components/positions-table/positions-table.component.html
+++ b/apps/client/src/app/components/positions-table/positions-table.component.html
@@ -103,7 +103,9 @@
 ></ngx-skeleton-loader>
 
 <div *ngIf="dataSource.data.length === 0 && !isLoading" class="p-3 text-center">
-  <gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
+  <gf-no-transactions-info-indicator
+    [hasBorder]="false"
+  ></gf-no-transactions-info-indicator>
 </div>
 
 <div
diff --git a/apps/client/src/app/components/positions/positions.component.html b/apps/client/src/app/components/positions/positions.component.html
index 869617f81..61ed865f7 100644
--- a/apps/client/src/app/components/positions/positions.component.html
+++ b/apps/client/src/app/components/positions/positions.component.html
@@ -24,7 +24,9 @@
           ></gf-position>
         </ng-container>
         <div *ngIf="!hasPositions" class="p-3 text-center">
-          <gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
+          <gf-no-transactions-info-indicator
+            [hasBorder]="false"
+          ></gf-no-transactions-info-indicator>
         </div>
       </ng-container>
     </div>
diff --git a/apps/client/src/app/components/rules/rules.component.html b/apps/client/src/app/components/rules/rules.component.html
index c0f19e47d..ba193f495 100644
--- a/apps/client/src/app/components/rules/rules.component.html
+++ b/apps/client/src/app/components/rules/rules.component.html
@@ -2,7 +2,9 @@
   <div class="row no-gutters">
     <div class="col">
       <mat-card *ngIf="rules === null" class="my-2 text-center">
-        <gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
+        <gf-no-transactions-info-indicator
+          [hasBorder]="false"
+        ></gf-no-transactions-info-indicator>
       </mat-card>
 
       <gf-rule *ngIf="rules === undefined" [isLoading]="true"></gf-rule>
diff --git a/apps/client/src/app/components/transactions-table/transactions-table.component.html b/apps/client/src/app/components/transactions-table/transactions-table.component.html
index 117774aed..ead16806c 100644
--- a/apps/client/src/app/components/transactions-table/transactions-table.component.html
+++ b/apps/client/src/app/components/transactions-table/transactions-table.component.html
@@ -270,3 +270,9 @@
     width: '100%'
   }"
 ></ngx-skeleton-loader>
+
+<div *ngIf="dataSource.data.length === 0 && !isLoading" class="p-3 text-center">
+  <gf-no-transactions-info-indicator
+    [hasBorder]="false"
+  ></gf-no-transactions-info-indicator>
+</div>
diff --git a/apps/client/src/app/components/transactions-table/transactions-table.module.ts b/apps/client/src/app/components/transactions-table/transactions-table.module.ts
index 6e8769c4d..c8bca3c62 100644
--- a/apps/client/src/app/components/transactions-table/transactions-table.module.ts
+++ b/apps/client/src/app/components/transactions-table/transactions-table.module.ts
@@ -10,6 +10,7 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
+import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
 import { GfValueModule } from '@ghostfolio/ui/value';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
@@ -22,6 +23,7 @@ import { TransactionsTableComponent } from './transactions-table.component';
   exports: [TransactionsTableComponent],
   imports: [
     CommonModule,
+    GfNoTransactionsInfoModule,
     GfPositionDetailDialogModule,
     GfSymbolIconModule,
     GfSymbolModule,
diff --git a/apps/client/src/app/pages/home/home-page.component.ts b/apps/client/src/app/pages/home/home-page.component.ts
index f31502a7a..9b85c9e42 100644
--- a/apps/client/src/app/pages/home/home-page.component.ts
+++ b/apps/client/src/app/pages/home/home-page.component.ts
@@ -61,7 +61,6 @@ export class HomePageComponent implements OnDestroy, OnInit {
   public hasImpersonationId: boolean;
   public hasPermissionToAccessFearAndGreedIndex: boolean;
   public hasPermissionToCreateOrder: boolean;
-  public hasPositions: boolean;
   public historicalDataItems: LineChartItem[];
   public isLoadingPerformance = true;
   public isLoadingSummary = true;
@@ -225,7 +224,6 @@ export class HomePageComponent implements OnDestroy, OnInit {
         .pipe(takeUntil(this.unsubscribeSubject))
         .subscribe((response) => {
           this.positions = response.positions;
-          this.hasPositions = this.positions?.length > 0;
 
           this.changeDetectorRef.markForCheck();
         });
diff --git a/apps/client/src/app/pages/home/home-page.html b/apps/client/src/app/pages/home/home-page.html
index 5e37d668f..e2c351cfe 100644
--- a/apps/client/src/app/pages/home/home-page.html
+++ b/apps/client/src/app/pages/home/home-page.html
@@ -92,33 +92,25 @@
               (change)="onChangeDateRange($event.value)"
             ></gf-toggle>
           </div>
-          <ng-container *ngIf="hasPositions === true">
-            <mat-card class="p-0">
-              <mat-card-content>
-                <gf-positions
-                  [baseCurrency]="user?.settings?.baseCurrency"
-                  [deviceType]="deviceType"
-                  [locale]="user?.settings?.locale"
-                  [positions]="positions"
-                  [range]="dateRange"
-                ></gf-positions>
-              </mat-card-content>
-            </mat-card>
-            <div *ngIf="hasPermissionToCreateOrder" class="text-center">
-              <a
-                class="mt-3"
-                i18n
-                mat-button
-                [routerLink]="['/portfolio', 'transactions']"
-                >Manage Transactions...</a
-              >
-            </div>
-          </ng-container>
-          <div
-            *ngIf="hasPositions === false"
-            class="d-flex justify-content-center"
-          >
-            <gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
+          <mat-card class="p-0">
+            <mat-card-content>
+              <gf-positions
+                [baseCurrency]="user?.settings?.baseCurrency"
+                [deviceType]="deviceType"
+                [locale]="user?.settings?.locale"
+                [positions]="positions"
+                [range]="dateRange"
+              ></gf-positions>
+            </mat-card-content>
+          </mat-card>
+          <div *ngIf="hasPermissionToCreateOrder" class="text-center">
+            <a
+              class="mt-3"
+              i18n
+              mat-button
+              [routerLink]="['/portfolio', 'transactions']"
+              >Manage Transactions...</a
+            >
           </div>
         </div>
       </div>
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 f8e257b29..91c2c302f 100644
--- a/apps/client/src/app/pages/zen/zen-page.component.ts
+++ b/apps/client/src/app/pages/zen/zen-page.component.ts
@@ -38,7 +38,6 @@ export class ZenPageComponent implements AfterViewInit, OnDestroy, OnInit {
   public deviceType: string;
   public hasImpersonationId: boolean;
   public hasPermissionToCreateOrder: boolean;
-  public hasPositions: boolean;
   public historicalDataItems: LineChartItem[];
   public isLoadingPerformance = true;
   public performance: PortfolioPerformance;
@@ -140,7 +139,6 @@ export class ZenPageComponent implements AfterViewInit, OnDestroy, OnInit {
         .pipe(takeUntil(this.unsubscribeSubject))
         .subscribe((response) => {
           this.positions = response.positions;
-          this.hasPositions = this.positions?.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 25d036224..b7773a360 100644
--- a/apps/client/src/app/pages/zen/zen-page.html
+++ b/apps/client/src/app/pages/zen/zen-page.html
@@ -65,35 +65,25 @@
       <h3 class="d-flex justify-content-center mb-3" i18n>Holdings</h3>
       <div class="row">
         <div class="align-items-center col">
-          <ng-container *ngIf="hasPositions === true">
-            <mat-card class="p-0">
-              <mat-card-content>
-                <gf-positions
-                  [baseCurrency]="user?.settings?.baseCurrency"
-                  [deviceType]="deviceType"
-                  [locale]="user?.settings?.locale"
-                  [positions]="positions"
-                  [range]="dateRange"
-                ></gf-positions>
-              </mat-card-content>
-            </mat-card>
-            <div *ngIf="hasPermissionToCreateOrder" class="text-center">
-              <a
-                class="mt-3"
-                i18n
-                mat-button
-                [routerLink]="['/portfolio', 'transactions']"
-                >Manage Transactions...</a
-              >
-            </div>
-          </ng-container>
-          <div
-            *ngIf="hasPositions === false"
-            class="d-flex justify-content-center"
-          >
-            <div>
-              <gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
-            </div>
+          <mat-card class="p-0">
+            <mat-card-content>
+              <gf-positions
+                [baseCurrency]="user?.settings?.baseCurrency"
+                [deviceType]="deviceType"
+                [locale]="user?.settings?.locale"
+                [positions]="positions"
+                [range]="dateRange"
+              ></gf-positions>
+            </mat-card-content>
+          </mat-card>
+          <div *ngIf="hasPermissionToCreateOrder" class="text-center">
+            <a
+              class="mt-3"
+              i18n
+              mat-button
+              [routerLink]="['/portfolio', 'transactions']"
+              >Manage Transactions...</a
+            >
           </div>
         </div>
       </div>
diff --git a/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.html b/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.html
index a5bafc3b4..bb3ce1238 100644
--- a/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.html
+++ b/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.html
@@ -6,6 +6,7 @@
     class="align-items-center justify-content-center"
     color="primary"
     [routerLink]="['/portfolio', 'transactions']"
+    [queryParams]="{ createDialog: true }"
     mat-button
   >
     <span i18n>Time to add your first transaction.</span>
diff --git a/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.scss b/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.scss
index 9c9f064b7..4f5588302 100644
--- a/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.scss
+++ b/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.scss
@@ -1,8 +1,11 @@
 :host {
-  border: 1px solid rgba(var(--dark-dividers));
-  border-radius: 0.25rem;
   display: block;
 
+  &.has-border {
+    border: 1px solid rgba(var(--dark-dividers));
+    border-radius: 0.25rem;
+  }
+
   gf-logo {
     opacity: 0.25;
   }
diff --git a/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.ts b/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.ts
index 113de7c73..8910943b0 100644
--- a/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.ts
+++ b/libs/ui/src/lib/no-transactions-info/no-transactions-info.component.ts
@@ -1,4 +1,9 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  Input
+} from '@angular/core';
 
 @Component({
   selector: 'gf-no-transactions-info-indicator',
@@ -6,8 +11,8 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
   templateUrl: './no-transactions-info.component.html',
   styleUrls: ['./no-transactions-info.component.scss']
 })
-export class NoTransactionsInfoComponent implements OnInit {
-  public constructor() {}
+export class NoTransactionsInfoComponent {
+  @HostBinding('class.has-border') @Input() hasBorder = true;
 
-  public ngOnInit() {}
+  public constructor() {}
 }