Feature/add copy link to clipboard action to access table (#3768)

* Add copy link to clipboard action

* Update changelog

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Added support for bonds in the import dividends dialog
+- Added a _Copy link to clipboard_ action to the access table to share the portfolio
 - Added the current market price column to the historical market data table of the admin control
 - Introduced filters (`dataSource` and `symbol`) in the accounts endpoint
 

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

@@ -35,11 +35,9 @@
         @if (element.type === 'PUBLIC') {
           <div class="align-items-center d-flex">
             <ion-icon class="mr-1" name="link-outline" />
-            <a
-              href="{{ baseUrl }}/{{ defaultLanguageCode }}/p/{{ element.id }}"
-              target="_blank"
-              >{{ baseUrl }}/{{ defaultLanguageCode }}/p/{{ element.id }}</a
-            >
+            <a target="_blank" [href]="getPublicUrl(element.id)">{{
+              getPublicUrl(element.id)
+            }}</a>
           </div>
         }
       </td>
@@ -58,6 +56,11 @@
           <ion-icon name="ellipsis-horizontal" />
         </button>
         <mat-menu #transactionMenu="matMenu" xPosition="before">
+          @if (element.type === 'PUBLIC') {
+            <button mat-menu-item (click)="onCopyToClipboard(element.id)">
+              <ng-container i18n>Copy link to clipboard</ng-container>
+            </button>
+          }
           <button mat-menu-item (click)="onDeleteAccess(element.id)">
             <ng-container i18n>Revoke</ng-container>
           </button>

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

@@ -3,6 +3,7 @@ import { NotificationService } from '@ghostfolio/client/core/notification/notifi
 import { DEFAULT_LANGUAGE_CODE } from '@ghostfolio/common/config';
 import { Access } from '@ghostfolio/common/interfaces';
 
+import { Clipboard } from '@angular/cdk/clipboard';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -31,7 +32,10 @@ export class AccessTableComponent implements OnChanges, OnInit {
   public defaultLanguageCode = DEFAULT_LANGUAGE_CODE;
   public displayedColumns = [];
 
-  public constructor(private notificationService: NotificationService) {}
+  public constructor(
+    private clipboard: Clipboard,
+    private notificationService: NotificationService
+  ) {}
 
   public ngOnInit() {}
 
@@ -47,6 +51,14 @@ export class AccessTableComponent implements OnChanges, OnInit {
     }
   }
 
+  public getPublicUrl(aId: string): string {
+    return `${this.baseUrl}/${this.defaultLanguageCode}/p/${aId}`;
+  }
+
+  public onCopyToClipboard(aId: string): void {
+    this.clipboard.copy(this.getPublicUrl(aId));
+  }
+
   public onDeleteAccess(aId: string) {
     this.notificationService.confirm({
       confirmFn: () => {

apps/client/src/app/components/access-table/access-table.module.ts

@@ -1,3 +1,4 @@
+import { ClipboardModule } from '@angular/cdk/clipboard';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
@@ -11,6 +12,7 @@ import { AccessTableComponent } from './access-table.component';
   declarations: [AccessTableComponent],
   exports: [AccessTableComponent],
   imports: [
+    ClipboardModule,
     CommonModule,
     MatButtonModule,
     MatMenuModule,