Feature/always show adapted portfolio page (#388)

* Always show adapted portfolio page

* Update changelog

CHANGELOG.md

@@ -12,6 +12,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added a story for the line chart component
 - Added a story for the portfolio proportion chart component
 
+### Changed
+
+- Changed the navigation to always show the portfolio page
+
 ## 1.55.0 - 20.09.2021
 
 ### Changed

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

@@ -17,7 +17,6 @@
       >Overview</a
     >
     <a
-      *ngIf="user?.settings?.viewMode === 'DEFAULT'"
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
@@ -28,18 +27,6 @@
       [routerLink]="['/portfolio']"
       >Portfolio</a
     >
-    <a
-      *ngIf="user?.settings?.viewMode !== 'DEFAULT'"
-      class="d-none d-sm-block mx-1"
-      i18n
-      mat-flat-button
-      [ngClass]="{
-        'font-weight-bold': currentRoute === 'portfolio',
-        'text-decoration-underline': currentRoute === 'portfolio'
-      }"
-      [routerLink]="['/portfolio', 'transactions']"
-      >Transactions</a
-    >
     <a
       class="d-none d-sm-block mx-1"
       i18n
@@ -166,7 +153,6 @@
         >Overview</a
       >
       <a
-        *ngIf="user?.settings?.viewMode === 'DEFAULT'"
         class="d-block d-sm-none"
         i18n
         mat-menu-item
@@ -176,17 +162,6 @@
         [routerLink]="['/portfolio']"
         >Portfolio</a
       >
-      <a
-        *ngIf="user?.settings?.viewMode !== 'DEFAULT'"
-        class="d-block d-sm-none"
-        i18n
-        mat-menu-item
-        [ngClass]="{
-          'font-weight-bold': currentRoute === 'portfolio'
-        }"
-        [routerLink]="['/portfolio', 'transactions']"
-        >Transactions</a
-      >
       <a
         class="d-block d-sm-none"
         i18n

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

@@ -1,6 +1,8 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { User } from '@ghostfolio/common/interfaces';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -10,6 +12,7 @@ import { takeUntil } from 'rxjs/operators';
   styleUrls: ['./portfolio-page.scss']
 })
 export class PortfolioPageComponent implements OnDestroy, OnInit {
+  public hasPermissionForSubscription: boolean;
   public user: User;
 
   private unsubscribeSubject = new Subject<void>();
@@ -19,8 +22,16 @@ export class PortfolioPageComponent implements OnDestroy, OnInit {
    */
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
+    private dataService: DataService,
     private userService: UserService
-  ) {}
+  ) {
+    const { globalPermissions } = this.dataService.fetchInfo();
+
+    this.hasPermissionForSubscription = hasPermission(
+      globalPermissions,
+      permissions.enableSubscription
+    );
+  }
 
   /**
    * Initializes the controller

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

@@ -17,18 +17,23 @@
         </p>
       </mat-card>
     </div>
-    <div
+    <div class="col-xs-12 col-md-6">
-      *ngIf="user?.settings?.viewMode === 'DEFAULT'"
-      class="col-xs-12 col-md-6"
-    >
       <mat-card class="mb-3">
-        <h4 i18n>Allocations</h4>
+        <h4 class="align-items-center d-flex">
+          <span i18n>Allocations</span>
+          <ion-icon
+            *ngIf="hasPermissionForSubscription"
+            class="ml-1 text-muted"
+            name="diamond-outline"
+          ></ion-icon>
+        </h4>
         <p class="mb-0">Check the allocations of your portfolio.</p>
         <p class="text-right">
           <a
             color="primary"
             i18n
             mat-button
+            [disabled]="hasPermissionForSubscription && user?.settings?.viewMode !== 'DEFAULT'"
             [routerLink]="['/portfolio', 'allocations']"
           >
             Open Allocations →
@@ -38,18 +43,23 @@
     </div>
   </div>
   <div class="row">
-    <div
+    <div class="col-xs-12 col-md-6">
-      *ngIf="user?.settings?.viewMode === 'DEFAULT'"
-      class="col-xs-12 col-md-6"
-    >
       <mat-card class="mb-3">
-        <h4 i18n>Analysis</h4>
+        <h4 class="align-items-center d-flex">
+          <span i18n>Analysis</span>
+          <ion-icon
+            *ngIf="hasPermissionForSubscription"
+            class="ml-1 text-muted"
+            name="diamond-outline"
+          ></ion-icon>
+        </h4>
         <p class="mb-0">Ghostfolio Analysis visualizes your portfolio.</p>
         <p class="text-right">
           <a
             color="primary"
             i18n
             mat-button
+            [disabled]="hasPermissionForSubscription && user?.settings?.viewMode !== 'DEFAULT'"
             [routerLink]="['/portfolio', 'analysis']"
           >
             Open Analysis →
@@ -57,12 +67,16 @@
         </p>
       </mat-card>
     </div>
-    <div
+    <div class="col-xs-12 col-md-6">
-      *ngIf="user?.settings?.viewMode === 'DEFAULT'"
-      class="col-xs-12 col-md-6"
-    >
       <mat-card class="mb-3">
-        <h4 i18n>X-ray</h4>
+        <h4 class="align-items-center d-flex">
+          <span i18n>X-ray</span>
+          <ion-icon
+            *ngIf="hasPermissionForSubscription"
+            class="ml-1 text-muted"
+            name="diamond-outline"
+          ></ion-icon>
+        </h4>
         <p class="mb-0">
           Ghostfolio X-ray uses static analysis to identify potential issues and
           risks in your portfolio.
@@ -72,6 +86,7 @@
             color="primary"
             i18n
             mat-button
+            [disabled]="hasPermissionForSubscription && user?.settings?.viewMode !== 'DEFAULT'"
             [routerLink]="['/portfolio', 'report']"
           >
             Open X-ray →

apps/client/src/app/pages/portfolio/portfolio-page.scss

@@ -1,6 +1,12 @@
 :host {
   color: rgb(var(--dark-primary-text));
   display: block;
+
+  .mat-card {
+    .mat-button-disabled {
+      pointer-events: none;
+    }
+  }
 }
 
 :host-context(.is-dark-theme) {

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

@@ -127,8 +127,8 @@
             [ngClass]="{ 'active': user?.subscription?.type === 'Premium' }"
           >
             <div class="flex-grow-1">
-              <h4 class="align-items-center d-flex" i18n>
+              <h4 class="align-items-center d-flex">
-                Premium
+                <span i18n>Premium</span>
                 <ion-icon
                   class="ml-1 text-muted"
                   name="diamond-outline"