Feature/add user interface for received access (#4146)

* Add user interface for received access

* 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 the user interface for received access from others
+
 ### Changed
 
 - Upgraded `husky` from version `9.1.6` to `9.1.7`

apps/api/src/app/user/user.service.ts

@@ -89,6 +89,7 @@ export class UserService {
       }),
       this.tagService.getTagsForUser(id)
     ]);
+
     const access = userData[0];
     const firstActivity = userData[1];
     let tags = userData[2];
@@ -119,7 +120,8 @@ export class UserService {
       access: access.map((accessItem) => {
         return {
           alias: accessItem.alias,
-          id: accessItem.id
+          id: accessItem.id,
+          permissions: accessItem.permissions
         };
       }),
       accounts: Account,

apps/client/src/app/components/user-account-access/user-account-access.component.ts

@@ -27,7 +27,8 @@ import { CreateOrUpdateAccessDialog } from './create-or-update-access-dialog/cre
   templateUrl: './user-account-access.html'
 })
 export class UserAccountAccessComponent implements OnDestroy, OnInit {
-  public accesses: Access[];
+  public accessesGet: Access[];
+  public accessesGive: Access[];
   public deviceType: string;
   public hasPermissionToCreateAccess: boolean;
   public hasPermissionToDeleteAccess: boolean;
@@ -125,11 +126,21 @@ export class UserAccountAccessComponent implements OnDestroy, OnInit {
   }
 
   private update() {
+    this.accessesGet = this.user.access.map(({ alias, id, permissions }) => {
+      return {
+        alias,
+        id,
+        permissions,
+        grantee: $localize`Me`,
+        type: 'PRIVATE'
+      };
+    });
+
     this.dataService
       .fetchAccesses()
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((accesses) => {
-        this.accesses = accesses;
+        this.accessesGive = accesses;
 
         this.changeDetectorRef.markForCheck();
       });

apps/client/src/app/components/user-account-access/user-account-access.html

@@ -1,14 +1,16 @@
 <div class="container">
-  <h1
-    class="align-items-center d-none d-sm-flex h3 justify-content-center mb-3 text-center"
-  >
+  @if (accessesGet.length > 0) {
+    <h1 class="h3 mb-3 text-center" i18n>Received Access</h1>
+    <gf-access-table class="mb-5" [accesses]="accessesGet" [user]="user" />
+  }
+  <h1 class="align-items-center d-flex h3 justify-content-center mb-3">
     <span i18n>Granted Access</span>
     @if (user?.subscription?.type === 'Basic') {
       <gf-premium-indicator class="ml-1" />
     }
   </h1>
   <gf-access-table
-    [accesses]="accesses"
+    [accesses]="accessesGive"
     [showActions]="hasPermissionToDeleteAccess"
     [user]="user"
     (accessDeleted)="onDeleteAccess($event)"

libs/common/src/lib/interfaces/user.interface.ts

@@ -1,17 +1,14 @@
 import { SubscriptionOfferKey } from '@ghostfolio/common/types';
 import { SubscriptionType } from '@ghostfolio/common/types/subscription-type.type';
 
-import { Account, Tag } from '@prisma/client';
+import { Access, Account, Tag } from '@prisma/client';
 
 import { SystemMessage } from './system-message.interface';
 import { UserSettings } from './user-settings.interface';
 
 // TODO: Compare with UserWithSettings
 export interface User {
-  access: {
-    alias?: string;
-    id: string;
-  }[];
+  access: Pick<Access, 'alias' | 'id' | 'permissions'>[];
   accounts: Account[];
   dateOfFirstActivity: Date;
   id: string;