fix(copy): use new cdk function instead of extra package (#577)

fixes #253

Author: DanielHabenicht

Phonebook.Frontend/package-lock.json

@@ -56,7 +56,6 @@
     "classlist.js": "1.1.20150312",
     "markdown-it": "10.0.0",
     "ng2-rx-componentdestroyed": "3.0.1",
-    "ngx-clipboard": "12.3.1",
     "ngx-infinite-scroll": "8.0.1",
     "ngx-propagation-stop": "2.0.3",
     "ngx-vcard": "2.0.1",

Phonebook.Frontend/package.json

@@ -3,9 +3,8 @@
     <mat-card-header>
       <mat-card-title>
         <h1>
-          <mat-icon ngxClipboard [cbContent]="getLink()" (cbOnSuccess)="linkCopiedToast()" (cbOnError)="linkErrorToast()"
-            class="link pb-pointer">link</mat-icon>
-          <span>{{node.id + ': ' + node.name}}</span>
+          <mat-icon [cdkCopyToClipboard]="getLink()" (copied)="copiedToast($event)" class="link pb-pointer">link</mat-icon>
+          <span>{{ node.id + ': ' + node.name }}</span>
         </h1>
       </mat-card-title>
       <button mat-icon-button (click)="toggleExpand()" *ngIf="node.children.length != 0" i18n-matTooltip="OrganigramNodeComponent|Tooltip for expanding a Organigram Node@@OrganigramNodeComponentExpandTooltip"
@@ -57,4 +56,4 @@ <h2 i18n="OrganigramNodeComponent|Learners Property@@OrganigramNodeComponentProp
       </div>
     </mat-card-content>
   </mat-card>
-</div>
+</div>

Phonebook.Frontend/src/app/modules/organigram/components/organigram-node/organigram-node.component.html

@@ -65,25 +65,25 @@ export class OrganigramNodeComponent implements OnInit {
     return path;
   }
 
-  public linkCopiedToast() {
-    this.store.dispatch(new Navigate(this.generatePath(true)));
-    this.snackBar.open(
-      $localize`:OrganigramNodeComponent|First part of the message displayed when copying a link to the node@@OrganigramNodeComponentCopiedFirstPart:Link to` +
-        ' "' +
-        this.node.name +
-        '" ' +
-        $localize`:OrganigramNodeComponent|Second part of the message displayed when copying a link to the node@@OrganigramNodeComponentCopiedSecondPart:copied to clipboard!`,
-      '',
-      { duration: 2000 }
-    );
-  }
-
-  public linkErrorToast() {
-    this.snackBar.open(
-      $localize`:GeneralErrorMessageCopy|Message displayed when copying something went wrong@@GeneralErrorMessageCopy:Couldn't copy to the clipboard, something went wrong. Try again.`,
-      '',
-      { duration: 2000 }
-    );
+  public copiedToast(success: boolean) {
+    if (success) {
+      this.store.dispatch(new Navigate(this.generatePath(true)));
+      this.snackBar.open(
+        $localize`:OrganigramNodeComponent|First part of the message displayed when copying a link to the node@@OrganigramNodeComponentCopiedFirstPart:Link to` +
+          ' "' +
+          this.node.name +
+          '" ' +
+          $localize`:OrganigramNodeComponent|Second part of the message displayed when copying a link to the node@@OrganigramNodeComponentCopiedSecondPart:copied to clipboard!`,
+        '',
+        { duration: 2000 }
+      );
+    } else {
+      this.snackBar.open(
+        $localize`:GeneralErrorMessageCopy|Message displayed when copying something went wrong@@GeneralErrorMessageCopy:Couldn't copy to the clipboard, something went wrong. Try again.`,
+        '',
+        { duration: 2000 }
+      );
+    }
   }
 
   public getCurrentRouteAsArray(): string[] {

Phonebook.Frontend/src/app/modules/organigram/components/organigram-node/organigram-node.component.ts

@@ -5,7 +5,7 @@ import { MatCardModule } from '@angular/material/card';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { ClipboardModule } from 'ngx-clipboard';
+import { ClipboardModule } from '@angular/cdk/clipboard';
 import { OrganigramNodeComponent } from 'src/app/modules/organigram/components/organigram-node/organigram-node.component';
 import { OrganigramRoutingModule } from 'src/app/modules/organigram/organigram-routing.module';
 import { OrganigramComponent } from 'src/app/modules/organigram/pages/organigram/organigram.component';

Phonebook.Frontend/src/app/modules/organigram/organigram.module.ts

@@ -12,7 +12,6 @@ import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatTreeModule } from '@angular/material/tree';
-import { ClipboardModule } from 'ngx-clipboard';
 import { PropagationStopModule } from 'ngx-propagation-stop';
 import { FloorComponent } from 'src/app/modules/rooms/components/floor/floor.component';
 import { RoomTreeComponent } from 'src/app/modules/rooms/components/room-tree/room-tree.component';
@@ -34,7 +33,6 @@ import { OverviewComponent } from './components/overview/overview.component';
     RoomsRoutingModule,
     AddFilterModule,
     RoomPlanModule,
-    ClipboardModule,
     ActionDrawerModule,
     AddressModule,
     PropagationStopModule,

Phonebook.Frontend/src/app/modules/rooms/rooms.module.ts

@@ -9,7 +9,6 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
-import { ClipboardModule } from 'ngx-clipboard';
 import { PropagationStopModule } from 'ngx-propagation-stop';
 import { NgxVcardModule } from 'ngx-vcard';
 import { FeatureFlagModule } from 'src/app/modules/feature-flag/feature-flag.module';
@@ -33,7 +32,6 @@ import { PipesModule } from 'src/app/shared/pipes/pipes.module';
     AddFilterModule,
     RouterModule,
     ActionDrawerModule,
-    ClipboardModule,
     ProfilePictureModule,
     FeatureFlagModule,
     AddressModule,

Phonebook.Frontend/src/app/shared/components/user/user.module.ts

@@ -5,10 +5,8 @@ <h3 mat-line>{{ data.copy }}</h3>
     <button
       mat-button
       propagationStop
-      ngxClipboard
-      [cbContent]="data.copy"
-      (cbOnSuccess)="copySuccessToast()"
-      (cbOnError)="copyErrorToast()"
+      [cdkCopyToClipboard]="data.copy"
+      (copied)="copiedToast($event)"
       (click)="closeBottomSheet()"
     >
       <span i18n="GeneralCopyButton|Copy to Clipboard button@@GeneralCopyButton">Copy to clipboard</span>

Phonebook.Frontend/src/app/shared/directives/action-drawer/action-drawer-sheet/action-drawer-sheet.component.html

@@ -20,19 +20,19 @@ export class ActionDrawerSheetComponent {
     this.bottomSheetRef.dismiss();
   }
 
-  public copySuccessToast() {
-    this.snackBar.open(
-      $localize`:GeneralSuccessMessageCopy|Message displayed when copying a link is successfully@@GeneralSuccessMessageCopy:Copied to clipboard!`,
-      '',
-      { duration: 2000 }
-    );
-  }
-
-  public copyErrorToast() {
-    this.snackBar.open(
-      $localize`:ErrorMessageCopy|Message displayed if something was not copied succesfully@@GeneralErrorMessageCopy:Couldn't copy to the clipboard, something went wrong. Try again.`,
-      '',
-      { duration: 2000 }
-    );
+  public copiedToast(success: boolean) {
+    if (success) {
+      this.snackBar.open(
+        $localize`:GeneralSuccessMessageCopy|Message displayed when copying a link is successfully@@GeneralSuccessMessageCopy:Copied to clipboard!`,
+        '',
+        { duration: 2000 }
+      );
+    } else {
+      this.snackBar.open(
+        $localize`:ErrorMessageCopy|Message displayed if something was not copied succesfully@@GeneralErrorMessageCopy:Couldn't copy to the clipboard, something went wrong. Try again.`,
+        '',
+        { duration: 2000 }
+      );
+    }
   }
 }

Phonebook.Frontend/src/app/shared/directives/action-drawer/action-drawer-sheet/action-drawer-sheet.component.ts

@@ -2,7 +2,7 @@ import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 import { MatBottomSheet } from '@angular/material/bottom-sheet';
 import { MatSnackBar } from '@angular/material/snack-bar';
 
-import { ClipboardService } from 'ngx-clipboard';
+import { Clipboard } from '@angular/cdk/clipboard';
 import { ActionDrawerSheetComponent } from 'src/app/shared/directives/action-drawer/action-drawer-sheet/action-drawer-sheet.component';
 
 @Directive({ selector: '[actionDrawer]' })
@@ -12,7 +12,7 @@ export class ActionDrawerDirective {
     event.stopPropagation();
     // Checks if only one of the actions is true
     if (this.copy && !this.tel && !this.mailto) {
-      this.clipboardService.copyFromContent(this.copy);
+      this.clipboard.copy(this.copy);
       this.snackBar.open(
         $localize`:SuccessMessageCopy|Message displayed if something was copied succesfully@@GeneralSuccessMessageCopy:Copied to clipboard!`,
         '',
@@ -29,7 +29,7 @@ export class ActionDrawerDirective {
   constructor(
     el: ElementRef,
     private bottomSheet: MatBottomSheet,
-    private clipboardService: ClipboardService,
+    private clipboard: Clipboard,
     private snackBar: MatSnackBar
   ) {}