From 520c176cd6dcbe4c7be498e7aa6d82d87b0ac3fa Mon Sep 17 00:00:00 2001
From: Shaunak Das <51281688+shaun-ak@users.noreply.github.com>
Date: Tue, 17 Sep 2024 23:37:27 +0530
Subject: [PATCH] Feature/add copy link to clipboard action to access table
 (#3768)

* Add copy link to clipboard action

* Update changelog
---
 CHANGELOG.md                                       |  1 +
 .../access-table/access-table.component.html       | 13 ++++++++-----
 .../access-table/access-table.component.ts         | 14 +++++++++++++-
 .../components/access-table/access-table.module.ts |  2 ++
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6f3d7b1a9..dd2ec27a0 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/apps/client/src/app/components/access-table/access-table.component.html b/apps/client/src/app/components/access-table/access-table.component.html
index b1befc8c9..e625cbf75 100644
--- a/apps/client/src/app/components/access-table/access-table.component.html
+++ b/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>
diff --git a/apps/client/src/app/components/access-table/access-table.component.ts b/apps/client/src/app/components/access-table/access-table.component.ts
index 7772451d4..3d47c6087 100644
--- a/apps/client/src/app/components/access-table/access-table.component.ts
+++ b/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: () => {
diff --git a/apps/client/src/app/components/access-table/access-table.module.ts b/apps/client/src/app/components/access-table/access-table.module.ts
index 2ace3cfc1..4cbc7b580 100644
--- a/apps/client/src/app/components/access-table/access-table.module.ts
+++ b/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,