Skip to content
Permalink
Browse files
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
  • Loading branch information
Snehal Kumbhar committed Jan 21, 2021
1 parent 5e0a938 commit 17bf71c4502074264070bd513301139c43976a58
@@ -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",
@@ -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';
@@ -18,5 +18,5 @@ export class AttributionTabViewComponent {
if (agent.hasOwnProperty('url')){
return 'organisation';
}
};
}
}
@@ -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>
@@ -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;
}
}

@@ -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 {
@@ -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;
@@ -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 }}

0 comments on commit 17bf71c

Please sign in to comment.