Feature/add link to transactions below holdings (#329)

* Add link: Manage transactions

* Update changelog

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Unreleased
 
+### Added
+
+- Added a link below the holdings to manage the transactions
+
 ### Fixed
 
 - Fixed the value formatting for integers (transactions count)

apps/client/src/app/pages/home/home-page.component.ts

@@ -58,6 +58,7 @@ export class HomePageComponent implements OnDestroy, OnInit {
   public fearAndGreedIndex: number;
   public hasImpersonationId: boolean;
   public hasPermissionToAccessFearAndGreedIndex: boolean;
+  public hasPermissionToCreateOrder: boolean;
   public hasPositions: boolean;
   public historicalDataItems: LineChartItem[];
   public isLoadingPerformance = true;
@@ -119,6 +120,11 @@ export class HomePageComponent implements OnDestroy, OnInit {
               });
           }
 
+          this.hasPermissionToCreateOrder = hasPermission(
+            this.user.permissions,
+            permissions.createOrder
+          );
+
           this.changeDetectorRef.markForCheck();
         }
       });
@@ -135,6 +141,8 @@ export class HomePageComponent implements OnDestroy, OnInit {
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((aId) => {
         this.hasImpersonationId = !!aId;
+
+        this.changeDetectorRef.markForCheck();
       });
 
     this.dateRange =

apps/client/src/app/pages/home/home-page.html

@@ -91,18 +91,28 @@
               (change)="onChangeDateRange($event.value)"
             ></gf-toggle>
           </div>
-
+          <ng-container *ngIf="hasPositions === true">
-          <mat-card *ngIf="hasPositions === true" class="p-0">
+            <mat-card class="p-0">
-            <mat-card-content>
+              <mat-card-content>
-              <gf-positions
+                <gf-positions
-                [baseCurrency]="user?.settings?.baseCurrency"
+                  [baseCurrency]="user?.settings?.baseCurrency"
-                [deviceType]="deviceType"
+                  [deviceType]="deviceType"
-                [locale]="user?.settings?.locale"
+                  [locale]="user?.settings?.locale"
-                [positions]="positions"
+                  [positions]="positions"
-                [range]="dateRange"
+                  [range]="dateRange"
-              ></gf-positions>
+                ></gf-positions>
-            </mat-card-content>
+              </mat-card-content>
-          </mat-card>
+            </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"

apps/client/src/app/pages/zen/zen-page.component.ts

@@ -19,6 +19,7 @@ import {
   Position,
   User
 } from '@ghostfolio/common/interfaces';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { DateRange } from '@ghostfolio/common/types';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
@@ -36,6 +37,7 @@ export class ZenPageComponent implements AfterViewInit, OnDestroy, OnInit {
   public dateRange: DateRange = 'max';
   public deviceType: string;
   public hasImpersonationId: boolean;
+  public hasPermissionToCreateOrder: boolean;
   public hasPositions: boolean;
   public historicalDataItems: LineChartItem[];
   public isLoadingPerformance = true;
@@ -63,6 +65,11 @@ export class ZenPageComponent implements AfterViewInit, OnDestroy, OnInit {
         if (state?.user) {
           this.user = state.user;
 
+          this.hasPermissionToCreateOrder = hasPermission(
+            this.user.permissions,
+            permissions.createOrder
+          );
+
           this.changeDetectorRef.markForCheck();
         }
       });
@@ -76,6 +83,8 @@ export class ZenPageComponent implements AfterViewInit, OnDestroy, OnInit {
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((aId) => {
         this.hasImpersonationId = !!aId;
+
+        this.changeDetectorRef.markForCheck();
       });
 
     this.update();

apps/client/src/app/pages/zen/zen-page.html

@@ -64,17 +64,28 @@
       <h3 class="d-flex justify-content-center mb-3" i18n>Holdings</h3>
       <div class="row">
         <div class="align-items-center col">
-          <mat-card *ngIf="hasPositions === true" class="p-0">
+          <ng-container *ngIf="hasPositions === true">
-            <mat-card-content>
+            <mat-card class="p-0">
-              <gf-positions
+              <mat-card-content>
-                [baseCurrency]="user?.settings?.baseCurrency"
+                <gf-positions
-                [deviceType]="deviceType"
+                  [baseCurrency]="user?.settings?.baseCurrency"
-                [locale]="user?.settings?.locale"
+                  [deviceType]="deviceType"
-                [positions]="positions"
+                  [locale]="user?.settings?.locale"
-                [range]="dateRange"
+                  [positions]="positions"
-              ></gf-positions>
+                  [range]="dateRange"
-            </mat-card-content>
+                ></gf-positions>
-          </mat-card>
+              </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"