Display features based on permissions

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

@@ -1,6 +1,8 @@
 import { ChangeDetectorRef, Component, OnDestroy } 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 { InfoItem, User } from '@ghostfolio/common/interfaces';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
@@ -10,6 +12,8 @@ import { Subject, takeUntil } from 'rxjs';
   templateUrl: './features-page.html'
 })
 export class FeaturesPageComponent implements OnDestroy {
+  public hasPermissionForSubscription: boolean;
+  public info: InfoItem;
   public user: User;
 
   private unsubscribeSubject = new Subject<void>();
@@ -19,8 +23,11 @@ export class FeaturesPageComponent implements OnDestroy {
    */
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
+    private dataService: DataService,
     private userService: UserService
-  ) {}
+  ) {
+    this.info = this.dataService.fetchInfo();
+  }
 
   /**
    * Initializes the controller
@@ -35,6 +42,11 @@ export class FeaturesPageComponent implements OnDestroy {
           this.changeDetectorRef.markForCheck();
         }
       });
+
+    this.hasPermissionForSubscription = hasPermission(
+      this.info?.globalPermissions,
+      permissions.enableSubscription
+    );
   }
 
   public ngOnDestroy() {

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

@@ -89,6 +89,7 @@
               <h4 class="align-items-center d-flex">
                 <span i18n>Portfolio Calculations</span>
                 <ion-icon
+                  *ngIf="hasPermissionForSubscription"
                   class="ml-1 text-muted"
                   name="diamond-outline"
                 ></ion-icon>
@@ -107,6 +108,7 @@
               <h4 class="align-items-center d-flex">
                 <span i18n>Portfolio Allocations</span>
                 <ion-icon
+                  *ngIf="hasPermissionForSubscription"
                   class="ml-1 text-muted"
                   name="diamond-outline"
                 ></ion-icon>
@@ -139,7 +141,10 @@
             </div>
           </mat-card>
         </div>
-        <div class="col-xs-12 col-md-4 mb-3">
+        <div
+          *ngIf="hasPermissionForSubscription"
+          class="col-xs-12 col-md-4 mb-3"
+        >
           <mat-card class="d-flex flex-column h-100">
             <div class="flex-grow-1">
               <h4 class="align-items-center d-flex">
@@ -163,6 +168,7 @@
               <h4 class="align-items-center d-flex">
                 <span i18n>Static Analysis</span>
                 <ion-icon
+                  *ngIf="hasPermissionForSubscription"
                   class="ml-1 text-muted"
                   name="diamond-outline"
                 ></ion-icon>