Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(project landing page): add copy to clipboard functionality (DSP-1248) #368

Merged
merged 7 commits into from Jan 21, 2021
Merged

feat(project landing page): add copy to clipboard functionality (DSP-1248) #368

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1999423
refactor (project landing page): Add interfaces for metadata object a…
Jan 20, 2021
1a972fe
Merge branch 'main' into DSP-1183-project-landing-page-second-draft
Jan 20, 2021
326a4b3
small changes
Jan 21, 2021
8e4abdb
feat (project landing page): add copy to clipboard functionality
Jan 21, 2021
2d1ddd9
Merge branch 'main' into dsp-1284-copy-to-clipboard
Jan 21, 2021
b3ea6db
typo
Jan 21, 2021
6691b02
formatting
Jan 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 0 additions & 1 deletion package.json
View file
Open in desktop
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion src/app/app.module.ts
View file
Open in desktop
@@ -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';
Expand Down Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion src/app/project/board/attribution-tab-view/attribution-tab-view.component.ts
View file
Open in desktop
Expand Up @@ -18,5 +18,5 @@ export class AttributionTabViewComponent {
if (agent.hasOwnProperty('url')){
return 'organisation';
}
};
}
}
32 changes: 22 additions & 10 deletions src/app/project/board/board.component.html
View file
Open in desktop
Expand Up @@ -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>
Expand Down
13 changes: 4 additions & 9 deletions src/app/project/board/board.component.scss
View file
Open in desktop
Expand Up @@ -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 {
Expand Down Expand Up @@ -155,7 +150,7 @@ section {
}

.property:not(:last-child) {
margin-bottom: 13px;
margin-bottom: 20px;
}
}

Expand Down
15 changes: 11 additions & 4 deletions src/app/project/board/board.component.ts
View file
Open in desktop
@@ -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 {
Expand All @@ -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';
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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 {
Expand Down
12 changes: 0 additions & 12 deletions src/app/project/board/dataset-metadata.ts
View file
Open in desktop
@@ -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;
Expand All @@ -22,7 +19,6 @@ export interface IOrganisation {
url?: string;
}

/* Interface to add person metadata */
export interface IPerson {
type: string;
id: string;
Expand All @@ -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;
Expand All @@ -77,7 +67,6 @@ export interface IGrant {
url?: UrlProperty;
}

/* Interface to add project metadata */
export interface IProject {
type: string;
id: string;
Expand All @@ -99,7 +88,6 @@ export interface IProject {
alternateName?: string | string[];
}

/* Interface to add dataset metadata */
export interface IDataset {
type: string;
id: string;
Expand Down
18 changes: 9 additions & 9 deletions src/app/project/board/project-tab-view/project-tab-view.component.html
View file
Open in desktop
Expand Up @@ -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>
Expand All @@ -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 }}
Expand Down