feat(project landing page): add copy to clipboard functionality (DSP-…

…1248) (#368) * feat(project landing page): add copy to clipboard functionality for cite as, persistent identifier and license
dasch-swiss · Jan 21, 2021 · 17bf71c · 17bf71c
1 parent 5e0a938
commit 17bf71c
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 47 deletions.
diff --git a/package.json b/package.json
@@ -47,7 +47,6 @@
     "json2typescript": "^1.0.6",
     "jsonld": "^1.1.0",
     "moment": "^2.27.0",
-    "ngx-clipboard": "^14.0.1",
     "ngx-color-picker": "^10.0.1",
     "openseadragon": "^2.4.0",
     "rxjs": "~6.5.3",

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,3 +1,4 @@
+import { ClipboardModule } from '@angular/cdk/clipboard';
 import { CommonModule } from '@angular/common';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { APP_INITIALIZER, NgModule } from '@angular/core';
@@ -83,7 +84,6 @@ import { DatasetTabViewComponent } from './project/board/dataset-tab-view/datase
 import { AttributionTabViewComponent } from './project/board/attribution-tab-view/attribution-tab-view.component';
 import { TermsTabViewComponent } from './project/board/terms-tab-view/terms-tab-view.component';
 import { ContactsTabViewComponent } from './project/board/contacts-tab-view/contacts-tab-view.component';
-import { ClipboardModule } from 'ngx-clipboard';
 
 import { AngularSplitModule } from 'angular-split';
 import { PersonTemplateComponent } from './project/board/person-template/person-template.component';

diff --git a/src/app/project/board/attribution-tab-view/attribution-tab-view.component.ts b/src/app/project/board/attribution-tab-view/attribution-tab-view.component.ts
@@ -18,5 +18,5 @@ export class AttributionTabViewComponent {
         if (agent.hasOwnProperty('url')){
             return 'organisation';
         } 
-    };
+    }
 }
diff --git a/src/app/project/board/board.component.html b/src/app/project/board/board.component.html
@@ -125,31 +125,43 @@ <h3>Dataset(s)</h3>
             </div>
 
             <div class="metadata-box">
-                <h3 class="display-inline-block">Cite as</h3>
-                <div class="copy-to-clipboard">
-                    <button title="Copy to clipboard" (click)="copyHowToCiteToClipboard();">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-                            <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
-                        </svg>
+                <div>
+                    <h3 class='display-inline-block'>Cite as</h3>
+                    <button mat-button class="btn-copy-to-clipboard" [cdkCopyToClipboard]="selectedDataset.howToCite"
+                        matTooltip="Copy citation url" matTooltipPosition="below" (click)="copyToClipboard('Citation link')">
+                        <mat-icon class="icon-arkurl">content_copy</mat-icon>
                     </button>
                 </div>
                 <div class="sidenav-prop-text">
                     <p [innerHTML]="selectedDataset.howToCite"></p>
                 </div>
             </div>
+
             <div class="metadata-box">
                 <div class="sidenav-properties-container">
                     <div class="property">
-                        <div class="property-label">
-                            Persistent identifier
+                        <div>
+                            <div class="property-label display-inline-block">
+                                Persistent identifier
+                            </div>
+                                <button mat-button class="btn-copy-to-clipboard" [cdkCopyToClipboard]="selectedDataset.project.id"
+                                matTooltip="Copy persistent identifier" matTooltipPosition="below" (click)="copyToClipboard('Persistent identifier')">
+                                <mat-icon class="icon-arkurl">content_copy</mat-icon>
+                            </button>
                         </div>
                         <div class="sidenav-prop-text property-value">
                             <a href="{{ selectedDataset.project.id }}" target="_blank"> {{ selectedDataset.project.id }} </a>
                         </div>
                     </div>
                     <div class="property">
-                        <div class="property-label">
-                            License
+                        <div>
+                            <div class="property-label display-inline-block">
+                                License
+                            </div>
+                                <button mat-button class="btn-copy-to-clipboard" [cdkCopyToClipboard]="selectedDataset.license.value"
+                                matTooltip="Copy license" matTooltipPosition="below" (click)="copyToClipboard('License')">
+                                <mat-icon class="icon-arkurl">content_copy</mat-icon>
+                            </button>
                         </div>
                         <div class="sidenav-prop-text property-value">
                             <a href="{{ selectedDataset.license.value }}" target="_blank"> {{ selectedDataset.license.value }} </a>

diff --git a/src/app/project/board/board.component.scss b/src/app/project/board/board.component.scss
@@ -87,14 +87,9 @@ section {
     display: inline-block;
   }
 
-  .copy-to-clipboard {
-    display: inline-block;
-    float: right;
-
-    button {
-      cursor: pointer;
-      border: none;
-    }
+  .btn-copy-to-clipboard {
+    padding: 0px 10px;
+    min-width: auto;
   }
 
   .mat-radio-button {
@@ -155,7 +150,7 @@ section {
     }
 
     .property:not(:last-child) {
-      margin-bottom: 13px;
+      margin-bottom: 20px;
     }
   }
 

diff --git a/src/app/project/board/board.component.ts b/src/app/project/board/board.component.ts
@@ -1,6 +1,7 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
 import { MatRadioChange } from '@angular/material/radio';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, Params } from '@angular/router';
 import {
@@ -11,7 +12,6 @@ import {
     ReadProject
 } from '@dasch-swiss/dsp-js';
 import { DspApiConnectionToken, Session, SessionService } from '@dasch-swiss/dsp-ui';
-import { ClipboardService } from 'ngx-clipboard';
 import { DialogComponent } from 'src/app/main/dialog/dialog.component';
 import { ErrorHandlerService } from 'src/app/main/error/error-handler.service';
 import { CacheService } from '../../main/cache/cache.service';
@@ -71,7 +71,7 @@ export class BoardComponent implements OnInit {
         private _dialog: MatDialog,
         private _route: ActivatedRoute,
         private _titleService: Title,
-        private _clipboardService: ClipboardService
+        private _snackBar: MatSnackBar
     ) {
         // get the shortcode of the current project
         this._route.parent.paramMap.subscribe((params: Params) => {
@@ -422,8 +422,15 @@ export class BoardComponent implements OnInit {
         this.selectedDataset = this.datasets[event.value];
     }
 
-    copyHowToCiteToClipboard() {
-        this._clipboardService.copyFromContent(this.selectedDataset.howToCite);
+    // copy link to clipboard
+    copyToClipboard(msg: string) {
+        const message = 'Copied to clipboard!';
+        const action = msg;
+        this._snackBar.open(message, action, {
+            duration: 3000,
+            horizontalPosition: 'center',
+            verticalPosition: 'top'
+        });
     }
 
     openDialog(mode: string, name: string, id?: string): void {

diff --git a/src/app/project/board/dataset-metadata.ts b/src/app/project/board/dataset-metadata.ts
@@ -1,18 +1,15 @@
-/* Interface for url type */
 export interface UrlProperty {
     type: string;
     value: string;
 }
 
-/* Interface to add address metadata */
 export interface IAddress {
     type: string;
     streetAddress: string;
     postalCode: string;
     addressLocality: string;
 }
 
-/* Interface to add organisation metadata */
 export interface IOrganisation {
     type: string;
     id: string;
@@ -22,7 +19,6 @@ export interface IOrganisation {
     url?: string;
 }
 
-/* Interface to add person metadata */
 export interface IPerson {
     type: string;
     id: string;
@@ -36,38 +32,32 @@ export interface IPerson {
     address?: IAddress | IAddress[];
 }
 
-/* Interface for Attribution array available for every dataset */
 export interface IAttribution {
     type: string;
     role: string;
     agent: IPerson | IOrganisation;
 }
 
-/* Interface to add DMP metadata */
 export interface IDMP {
     type: string;
     id: string;
     isAvailable: boolean;
     url?: UrlProperty;
 }
 
-/* Interface to add SpatialCoverage: place metadata */
 export interface IPlace {
     name: string;
     url: string;
 }
 
-/* Interface to add SpatialCoverage metadata */
 export interface ISpatialCoverage {
     place: IPlace;
 }
 
-/* Interface for funder metadata */
 export interface IFunder {
     id: string;
 }
 
-/* Interface to add grant metadata */
 export interface IGrant {
     type: string;
     id: string;
@@ -77,7 +67,6 @@ export interface IGrant {
     url?: UrlProperty;
 }
 
-/* Interface to add project metadata */
 export interface IProject {
     type: string;
     id: string;
@@ -99,7 +88,6 @@ export interface IProject {
     alternateName?: string | string[];
 }
 
-/* Interface to add dataset metadata */
 export interface IDataset {
     type: string;
     id: string;

diff --git a/src/app/project/board/project-tab-view/project-tab-view.component.html b/src/app/project/board/project-tab-view/project-tab-view.component.html
@@ -11,42 +11,42 @@ <h3 class="label mat-subheading-1">
                 </div>
                 <div [ngSwitch]="prop.key" class="property-value">
 
-                    <!-- #################### template for discipline ################# -->
+                    <!-- template for discipline -->
                     <div *ngSwitchCase="'discipline'">
                         <a href="{{ metadata.discipline.url }}" target="_blank"> {{ metadata.discipline.name }} </a>
                     </div>
 
-                    <!-- #################### template for temporalCoverage ################# -->
+                    <!-- template for temporalCoverage -->
                     <div *ngSwitchCase="'temporalCoverage'">
                         <a href="{{ metadata.temporalCoverage.url }}" target="_blank"> {{ metadata.temporalCoverage.name }} </a>
                     </div>
 
-                    <!-- #################### template for url ################# -->
+                    <!-- template for url -->
                     <div *ngSwitchCase="'url'">
                         <a href="{{ metadata.url.value }}" target="_blank"> {{ metadata.url.value }} </a>
                     </div>
 
-                    <!-- #################### template for funder ################# -->
+                    <!-- template for funder -->
                     <div *ngSwitchCase="'funder'">
                         <a href="{{ metadata.funder.id }}" target="_blank"> {{ metadata.funder.id }} </a>
                     </div>
 
-                    <!-- #################### template for keywords ################# -->
+                    <!-- template for keywords -->
                     <div *ngSwitchCase="'keywords'">
                         <mat-chip-list>
                             <mat-chip *ngFor="let kword of metadata.keywords"> {{ kword }} </mat-chip>
                         </mat-chip-list>
                     </div>
 
-                    <!-- #################### template for dataManagementPlan ################# -->
+                    <!-- template for dataManagementPlan -->
                     <div *ngSwitchCase="'dataManagementPlan'">
                         <p class="remove-top-margin"> {{ metadata.dataManagementPlan.isAvailable? 'Available' : 'Unavailable' }} </p>
                         <p *ngIf="metadata.dataManagementPlan.isAvailable">
                             URL: <a href="{{ metadata.dataManagementPlan.url.value }}" target="_blank"> {{ metadata.dataManagementPlan.url.value }} </a>
                         </p>
                     </div>
 
-                    <!-- #################### template for dataManagementPlan ################# -->
+                    <!-- template for dataManagementPlan -->
                     <div *ngSwitchCase="'grant'">
                         <span *ngIf="metadata.grant.name"> {{ metadata.grant.name }} </span>
                         <p> Id: <a href="{{ metadata.grant.id }}" target="_blank"> {{ metadata.grant.id }} </a> </p>
@@ -58,14 +58,14 @@ <h3 class="label mat-subheading-1">
                         </div>
                     </div>
 
-                    <!-- #################### template for dataManagementPlan ################# -->
+                    <!-- template for dataManagementPlan -->
                     <div *ngSwitchCase="'spatialCoverage'">
                         <div *ngFor="let coverage of metadata.spatialCoverage">
                             {{ coverage.place.name }} (<a href="{{ coverage.place.url }}" target="_blank"> {{ coverage.place.url }} </a>)
                         </div>
                     </div>
 
-                    <!-- #################### default template ################# -->
+                    <!-- default template -->
                     <div *ngSwitchDefault>
                         <div *ngIf="dateKeys.indexOf(prop.key) < 0;">
                             {{ prop.value }}