Feature/various client improvements (#460)

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

* Update changelog

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

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

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>

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>

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>

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,

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

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>

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

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>

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>

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

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