fix: revert problematic copiable links

and add copy button to shortcut widget

see #1217

Author: sleidig

src/app/features/dashboard-widgets/shortcut-dashboard-widget/shortcut-dashboard/shortcut-dashboard.component.html

@@ -16,21 +16,31 @@
         <th scope="col">Label</th>
       </tr>
       <ng-container matColumnDef="icon">
-        <td *matCellDef="let row">
+        <td *matCellDef="let row" class="pointer" [routerLink]="row.link">
           <app-fa-dynamic-icon [icon]="row.icon"></app-fa-dynamic-icon>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="label">
-        <td *matCellDef="let row">{{ row.label }}</td>
+        <td *matCellDef="let row" class="pointer" [routerLink]="row.link">
+          {{ row.label }}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="copy">
+        <td *matCellDef="let row" class="text-align-end">
+          <button
+            mat-icon-button
+            (click)="copyAbsoluteLink2Clipboard(row.link)"
+            matTooltip="Copy the link to share or paste it somewhere else"
+            i18n-matTooltip
+          >
+            <fa-icon [icon]="['far', 'copy']" size="xs"></fa-icon>
+          </button>
+        </td>
       </ng-container>
 
-      <tr
-        mat-row
-        *matRowDef="let row; columns: ['icon', 'label']"
-        class="pointer"
-        [routerLink]="row.link"
-      ></tr>
+      <tr mat-row *matRowDef="let row; columns: ['icon', 'label', 'copy']"></tr>
     </table>
   </div>
 </app-dashboard-list-widget>

src/app/features/dashboard-widgets/shortcut-dashboard-widget/shortcut-dashboard/shortcut-dashboard.component.ts

@@ -6,6 +6,12 @@ import { FaDynamicIconComponent } from "../../../../core/common-components/fa-dy
 import { RouterLink } from "@angular/router";
 import { DashboardListWidgetComponent } from "../../../../core/dashboard/dashboard-list-widget/dashboard-list-widget.component";
 import { RoutePermissionsService } from "../../../../core/config/dynamic-routing/route-permissions.service";
+import { FaIconComponent } from "@fortawesome/angular-fontawesome";
+import { MatIconButton } from "@angular/material/button";
+import { MatTooltip } from "@angular/material/tooltip";
+import { LocationStrategy } from "@angular/common";
+import { AlertService } from "../../../../core/alerts/alert.service";
+import { Clipboard } from "@angular/cdk/clipboard";
 
 /**
  * A simple list of shortcuts displayed as a dashboard widget for easy access to important navigation.
@@ -20,6 +26,9 @@ import { RoutePermissionsService } from "../../../../core/config/dynamic-routing
     MatTableModule,
     FaDynamicIconComponent,
     RouterLink,
+    FaIconComponent,
+    MatIconButton,
+    MatTooltip,
   ],
   standalone: true,
 })
@@ -35,5 +44,19 @@ export class ShortcutDashboardComponent {
   }
   _shortcuts: MenuItem[] = [];
 
-  constructor(private routePermissionsService: RoutePermissionsService) {}
+  constructor(
+    private routePermissionsService: RoutePermissionsService,
+    private locationStrategy: LocationStrategy,
+    private clipboard: Clipboard,
+    private alertService: AlertService,
+  ) {}
+
+  async copyAbsoluteLink2Clipboard(link: string) {
+    const externalLink =
+      window.location.origin + this.locationStrategy.prepareExternalUrl(link);
+    const success = this.clipboard.copy(externalLink);
+    if (success) {
+      this.alertService.addInfo("Link copied: " + externalLink);
+    }
+  }
 }