Bugfix/fix routing of create activity dialog (#615)

* Fix routing of create activity dialog

* Update changelog

CHANGELOG.md

@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Added the _Top 3_ and _Bottom 3_ performers to the analysis page
 
+### Fixed
+
+- Fixed the routing of the create activity dialog
+
 ## 1.99.0 - 01.01.2022
 
 ### Added

apps/client/src/app/components/home-holdings/home-holdings.html

@@ -14,6 +14,7 @@
           <gf-positions
             [baseCurrency]="user?.settings?.baseCurrency"
             [deviceType]="deviceType"
+            [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
             [locale]="user?.settings?.locale"
             [positions]="positions"
             [range]="dateRange"

apps/client/src/app/components/home-overview/home-overview.component.ts

@@ -8,6 +8,7 @@ import {
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { defaultDateRangeOptions } from '@ghostfolio/common/config';
 import { PortfolioPerformance, User } from '@ghostfolio/common/interfaces';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { DateRange } from '@ghostfolio/common/types';
 import { LineChartItem } from '@ghostfolio/ui/line-chart/interfaces/line-chart.interface';
 import { DeviceDetectorService } from 'ngx-device-detector';
@@ -25,6 +26,7 @@ export class HomeOverviewComponent implements OnDestroy, OnInit {
   public deviceType: string;
   public hasError: boolean;
   public hasImpersonationId: boolean;
+  public hasPermissionToCreateOrder: boolean;
   public historicalDataItems: LineChartItem[];
   public isAllTimeHigh: boolean;
   public isAllTimeLow: boolean;
@@ -51,6 +53,11 @@ export class HomeOverviewComponent implements OnDestroy, OnInit {
         if (state?.user) {
           this.user = state.user;
 
+          this.hasPermissionToCreateOrder = hasPermission(
+            this.user.permissions,
+            permissions.createOrder
+          );
+
           this.changeDetectorRef.markForCheck();
         }
       });

apps/client/src/app/components/home-overview/home-overview.html

@@ -13,7 +13,7 @@
         [showYAxis]="false"
       ></gf-line-chart>
       <div
-        *ngIf="historicalDataItems?.length === 0"
+        *ngIf="hasPermissionToCreateOrder&& historicalDataItems?.length === 0"
         class="align-items-center d-flex h-100 justify-content-center w-100"
       >
         <div class="d-flex justify-content-center">

apps/client/src/app/components/positions-table/positions-table.component.html

@@ -123,7 +123,12 @@
   }"
 ></ngx-skeleton-loader>
 
-<div *ngIf="dataSource.data.length === 0 && !isLoading" class="p-3 text-center">
+<div
+  *ngIf="
+    dataSource.data.length === 0 && hasPermissionToCreateOrder && !isLoading
+  "
+  class="p-3 text-center"
+>
   <gf-no-transactions-info-indicator
     [hasBorder]="false"
   ></gf-no-transactions-info-indicator>

apps/client/src/app/components/positions-table/positions-table.component.ts

@@ -26,6 +26,7 @@ import { Subject, Subscription } from 'rxjs';
 export class PositionsTableComponent implements OnChanges, OnDestroy, OnInit {
   @Input() baseCurrency: string;
   @Input() deviceType: string;
+  @Input() hasPermissionToCreateOrder: boolean;
   @Input() locale: string;
   @Input() positions: PortfolioPosition[];
 

apps/client/src/app/components/positions/positions.component.html

@@ -23,7 +23,10 @@
             [range]="range"
           ></gf-position>
         </ng-container>
-        <div *ngIf="!hasPositions" class="p-3 text-center">
+        <div
+          *ngIf="hasPermissionToCreateOrder && !hasPositions"
+          class="p-3 text-center"
+        >
           <gf-no-transactions-info-indicator
             [hasBorder]="false"
           ></gf-no-transactions-info-indicator>

apps/client/src/app/components/positions/positions.component.ts

@@ -17,6 +17,7 @@ import { Position } from '@ghostfolio/common/interfaces';
 export class PositionsComponent implements OnChanges, OnInit {
   @Input() baseCurrency: string;
   @Input() deviceType: string;
+  @Input() hasPermissionToCreateOrder: boolean;
   @Input() locale: string;
   @Input() positions: Position[];
   @Input() range: string;

apps/client/src/app/components/rules/rules.component.html

@@ -1,7 +1,10 @@
 <div class="container p-0">
   <div class="row no-gutters">
     <div class="col">
-      <mat-card *ngIf="rules === null" class="my-2 text-center">
+      <mat-card
+        *ngIf="hasPermissionToCreateOrder && rules === null"
+        class="my-2 text-center"
+      >
         <gf-no-transactions-info-indicator
           [hasBorder]="false"
         ></gf-no-transactions-info-indicator>

apps/client/src/app/components/rules/rules.component.ts

@@ -8,6 +8,7 @@ import { PortfolioReportRule } from '@ghostfolio/common/interfaces';
   styleUrls: ['./rules.component.scss']
 })
 export class RulesComponent {
+  @Input() hasPermissionToCreateOrder: boolean;
   @Input() rules: PortfolioReportRule;
 
   public constructor() {}

apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts

@@ -12,6 +12,7 @@ import {
   PortfolioPosition,
   User
 } from '@ghostfolio/common/interfaces';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { ToggleOption } from '@ghostfolio/common/types';
 import { AssetClass } from '@prisma/client';
 import { DeviceDetectorService } from 'ngx-device-detector';
@@ -36,6 +37,7 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
   };
   public deviceType: string;
   public hasImpersonationId: boolean;
+  public hasPermissionToCreateOrder: boolean;
   public period = 'current';
   public periodOptions: ToggleOption[] = [
     { label: 'Initial', value: 'original' },
@@ -120,6 +122,11 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
         if (state?.user) {
           this.user = state.user;
 
+          this.hasPermissionToCreateOrder = hasPermission(
+            this.user.permissions,
+            permissions.createOrder
+          );
+
           this.changeDetectorRef.markForCheck();
         }
       });

apps/client/src/app/pages/portfolio/allocations/allocations-page.html

@@ -197,6 +197,7 @@
       <gf-positions-table
         [baseCurrency]="user?.settings?.baseCurrency"
         [deviceType]="deviceType"
+        [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
         [locale]="user?.settings?.locale"
         [positions]="positionsArray"
       ></gf-positions-table>

apps/client/src/app/pages/portfolio/report/report-page.component.ts

@@ -1,6 +1,8 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { DataService } from '@ghostfolio/client/services/data.service';
-import { PortfolioReportRule } from '@ghostfolio/common/interfaces';
+import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { PortfolioReportRule, User } from '@ghostfolio/common/interfaces';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -14,6 +16,8 @@ export class ReportPageComponent implements OnDestroy, OnInit {
   public accountClusterRiskRules: PortfolioReportRule[];
   public currencyClusterRiskRules: PortfolioReportRule[];
   public feeRules: PortfolioReportRule[];
+  public hasPermissionToCreateOrder: boolean;
+  public user: User;
 
   private unsubscribeSubject = new Subject<void>();
 
@@ -22,7 +26,8 @@ export class ReportPageComponent implements OnDestroy, OnInit {
    */
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
-    private dataService: DataService
+    private dataService: DataService,
+    private userService: UserService
   ) {}
 
   /**
@@ -41,6 +46,21 @@ export class ReportPageComponent implements OnDestroy, OnInit {
 
         this.changeDetectorRef.markForCheck();
       });
+
+    this.userService.stateChanged
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((state) => {
+        if (state?.user) {
+          this.user = state.user;
+
+          this.hasPermissionToCreateOrder = hasPermission(
+            this.user.permissions,
+            permissions.createOrder
+          );
+
+          this.changeDetectorRef.markForCheck();
+        }
+      });
   }
 
   public ngOnDestroy() {

apps/client/src/app/pages/portfolio/report/report-page.html

@@ -15,15 +15,24 @@
       </p>
       <div class="mb-4">
         <h4 class="m-0" i18n>Currency Cluster Risks</h4>
-        <gf-rules [rules]="currencyClusterRiskRules"></gf-rules>
+        <gf-rules
+          [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
+          [rules]="currencyClusterRiskRules"
+        ></gf-rules>
       </div>
       <div class="mb-4">
         <h4 class="m-0" i18n>Account Cluster Risks</h4>
-        <gf-rules [rules]="accountClusterRiskRules"></gf-rules>
+        <gf-rules
+          [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
+          [rules]="accountClusterRiskRules"
+        ></gf-rules>
       </div>
       <div>
         <h4 class="m-0" i18n>Fees</h4>
-        <gf-rules [rules]="feeRules"></gf-rules>
+        <gf-rules
+          [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
+          [rules]="feeRules"
+        ></gf-rules>
       </div>
     </div>
   </div>

apps/client/src/app/pages/portfolio/transactions/transactions-page.component.ts

@@ -62,7 +62,7 @@ export class TransactionsPageComponent implements OnDestroy, OnInit {
     this.routeQueryParams = route.queryParams
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((params) => {
-        if (params['createDialog'] && this.hasPermissionToCreateOrder) {
+        if (params['createDialog']) {
           this.openCreateTransactionDialog();
         } else if (params['editDialog']) {
           if (this.transactions) {