dataset-overview_update v2

This commit is contained in:
gpapavgeri 2020-07-03 18:31:35 +03:00
parent aec542a067
commit 21d19dbf58
7 changed files with 105 additions and 114 deletions

View File

@ -1,4 +1,5 @@
import { DatasetProfileModel } from "./dataset-profile"; import { DatasetProfileModel } from "./dataset-profile";
import { GrantOverviewModel } from '../grant/grant-overview';
export interface DatasetOverviewModel { export interface DatasetOverviewModel {
id: string; id: string;
@ -8,7 +9,7 @@ export interface DatasetOverviewModel {
users: any[]; users: any[];
dmp: String; dmp: String;
grant: String; grant: GrantOverviewModel;
description: String; description: String;
public: boolean; public: boolean;
modified: Date; modified: Date;

View File

@ -1,6 +1,6 @@
<div class="main-content pl-5 pr-5"> <div class="main-content pl-5 pr-5">
<div class="container-fluid pl-0 pr-0"> <div class="container-fluid pl-0 pr-0">
<!-- <div *ngIf="dataset"> --> <div *ngIf="dataset">
<a class="row mb-2 pl-1" (click)="goBack()" role="button"> <a class="row mb-2 pl-1" (click)="goBack()" role="button">
<mat-icon class="back-icon">chevron_left</mat-icon> <mat-icon class="back-icon">chevron_left</mat-icon>
<p class="label-txt">{{'DMP-WIZARD.ACTIONS.BACK' | translate}}</p> <p class="label-txt">{{'DMP-WIZARD.ACTIONS.BACK' | translate}}</p>
@ -9,28 +9,23 @@
<div class="col-md-8 col-lg-8 pl-4"> <div class="col-md-8 col-lg-8 pl-4">
<div class="row"> <div class="row">
<span class="dataset-logo">{{ 'NAV-BAR.DATASET' | translate }}</span> <span class="dataset-logo">{{ 'NAV-BAR.DATASET' | translate }}</span>
<!-- <p class="dataset-label ml-2 mb-0">{{ dataset.label }}</p> --> <p class="dataset-label ml-2 mb-0">{{ dataset.label }}</p>
<p class="dataset-label ml-3 mb-0">Dataset Label dataset label</p>
</div> </div>
<div class="row d-flex align-items-center mt-3 mb-4 label-txt"> <div class="row d-flex align-items-center mt-3 mb-4 label-txt">
<!-- <div *ngIf="isUserDatasetRelated()" class="d-flex"> --> <div *ngIf="isUserDatasetRelated()" class="d-flex">
<div class="d-flex">
<p class="ml-0 mr-3 mb-0 label2-txt"> <p class="ml-0 mr-3 mb-0 label2-txt">
Owner {{ roleDisplayFromList(dataset.users) }}
<!-- {{ roleDisplayFromList(dataset.users) }} -->
</p> </p>
</div> </div>
<div class="d-flex mr-4"> <div class="d-flex mr-4">
<!-- <div *ngIf="dataset.public" class="d-flex flex-row"> --> <div *ngIf="dataset.public" class="d-flex flex-row">
<div class="d-flex flex-row">
<mat-icon class="status-icon">public</mat-icon> <mat-icon class="status-icon">public</mat-icon>
<!-- {{'DMP-OVERVIEW.PUBLIC' | translate}} --> {{'DMP-OVERVIEW.PUBLIC' | translate}}
Public
</div> </div>
<!-- <div *ngIf="!dataset.public" class="d-flex flex-row"> <div *ngIf="!dataset.public" class="d-flex flex-row">
<mat-icon class="status-icon">public_off</mat-icon> <mat-icon class="status-icon">public_off</mat-icon>
{{'DMP-OVERVIEW.PRIVATE' | translate}} {{'DMP-OVERVIEW.PRIVATE' | translate}}
</div> --> </div>
</div> </div>
<!-- <div class="d-flex mr-4"> <!-- <div class="d-flex mr-4">
<div *ngIf="lockStatus" class="d-flex flex-row"> <div *ngIf="lockStatus" class="d-flex flex-row">
@ -47,8 +42,7 @@
{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}} {{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}
</button> --> </button> -->
<div class="d-flex mr-4">{{'GENERAL.STATUSES.EDIT' | translate}} : <div class="d-flex mr-4">{{'GENERAL.STATUSES.EDIT' | translate}} :
<!-- {{dataset.modified | date:"longDate"}} --> {{dataset.modified | date:"longDate"}}
03/07/2020
</div> </div>
<!-- <div class="d-flex mr-4"> <!-- <div class="d-flex mr-4">
<div *ngIf="dmp.status" class="d-flex flex-row uppercase"> <div *ngIf="dmp.status" class="d-flex flex-row uppercase">
@ -58,18 +52,18 @@
</div> --> </div> -->
</div> </div>
<div class="row mb-4 pb-3"> <div class="row mb-4 pb-3">
<!-- <button *ngIf="isAuthenticated()" (click)="cloneClicked(dataset)" mat-mini-fab --> <button *ngIf="isAuthenticated()" (click)="cloneClicked(dataset)" mat-mini-fab
<button mat-mini-fab class="mr-3 d-flex justify-content-center align-items-center" class="mr-3 d-flex justify-content-center align-items-center"
matTooltip="{{'DMP-LISTING.ACTIONS.CLONE' | translate}}" matTooltipPosition="above"> matTooltip="{{'DMP-LISTING.ACTIONS.CLONE' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon> <mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
</button> </button>
<!-- <button *ngIf="isDraftDataset(dataset) && isUserOwner" (click)="editClicked(dataset)" mat-mini-fab --> <button *ngIf="isDraftDataset(dataset) && isUserOwner" (click)="editClicked(dataset)"
<button mat-mini-fab class="mr-3 d-flex justify-content-center align-items-center" mat-mini-fab class="mr-3 d-flex justify-content-center align-items-center"
matTooltip="{{'DMP-LISTING.ACTIONS.EDIT' | translate}}" matTooltipPosition="above"> matTooltip="{{'DMP-LISTING.ACTIONS.EDIT' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-mini-fab-icon">create</mat-icon> <mat-icon class="mat-mini-fab-icon">create</mat-icon>
</button> </button>
<!-- <button *ngIf="isDraftDataset(dataset) && isUserOwner" (click)="deleteClicked()" mat-mini-fab --> <button *ngIf="isDraftDataset(dataset) && isUserOwner" (click)="deleteClicked()" mat-mini-fab
<button mat-mini-fab class="mr-3 d-flex justify-content-center align-items-center" class="mr-3 d-flex justify-content-center align-items-center"
matTooltip="{{'DMP-LISTING.ACTIONS.DELETE' | translate}}" matTooltipPosition="above"> matTooltip="{{'DMP-LISTING.ACTIONS.DELETE' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-mini-fab-icon">delete</mat-icon> <mat-icon class="mat-mini-fab-icon">delete</mat-icon>
</button> </button>
@ -81,42 +75,34 @@
</button> --> </button> -->
</div> </div>
<div class="row header">{{'DATASET-LISTING.TOOLTIP.PART-OF' | translate}}</div> <div class="row header">{{'DATASET-LISTING.TOOLTIP.PART-OF' | translate}}</div>
<div class="row d-flex flex-column"> <div class="row ">
<button mat-raised-button class="mb-2 pl-0 pr-0"> <button class="dmp-btn">
<div class="dmp-btn">
<div class="dmp-btn-label"> <div class="dmp-btn-label">
<!-- {{ 'DATASET-LISTING.TOOLTIP.DMP-FOR' | translate }}: {{ dataset.datasetTemplate.label }} --> {{ 'DATASET-LISTING.TOOLTIP.DMP-FOR' | translate }}: {{ dataset.datasetTemplate.label }}
{{ 'DATASET-LISTING.TOOLTIP.DMP-FOR' | translate }}: HORIZON 2020 FOR GRANT DMP
</div> </div>
<mat-icon>launch</mat-icon> <mat-icon>launch</mat-icon>
</div>
</button> </button>
</div> </div>
<div class="row header">{{'DMP-OVERVIEW.GRANT' | translate}}</div> <div class="row header">{{'DMP-OVERVIEW.GRANT' | translate}}</div>
<div class="row dmp-label">Label</div> <div class="row dmp-label">Grant label</div>
<!-- <div class="row dmp-label">{{ dataset.grant.label }}</div> --> <!-- <div class="row dmp-label">{{ dataset.grant.label }}</div> -->
<div class="row header">{{'DMP-OVERVIEW.RESEARCHERS' | translate}}</div> <div class="row header">{{'DMP-OVERVIEW.RESEARCHERS' | translate}}</div>
<div class="row"> <div class="row">
<div *ngFor="let researcher of dataset.dmp.researchers; let last = last"> <!-- <div *ngFor="let researcher of dataset.dmp.researchers; let last = last">
<a href="{{getOrcidPath() + dmp.id }}" target="blank" class="researcher"> <a href="{{getOrcidPath() + researcher.id }}" target="blank" class="researcher">
<div class="id-btn">&nbsp;</div> <div class="id-btn">&nbsp;</div>
<div *ngIf="!last">{{ researcher.name }}, </div> <div *ngIf="!last">{{ researcher.name }}, </div>
<div *ngIf="last">{{ researcher.name }}</div> <div *ngIf="last">{{ researcher.name }}</div>
</a> </a>
</div>
</div>
<!-- <div class="row header">{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</div>
<div class="row" *ngIf="dmp.description">
<p class="desc-txt">{{ dmp.description }}</p>
</div> -->
<!-- <div class="row mt-2 add-dataset-txt">
<button class="add-dataset-btn" *ngIf="isDraftDmp(dmp) && isUserOwner"
(click)="addDataset(dmp.id)">
<mat-icon>add</mat-icon>
{{'DMP-LISTING.ACTIONS.ADD-DATASET-SHORT' | translate}}
</button>
</div> --> </div> -->
</div> </div>
<div class="row header">{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</div>
<div class="row" *ngIf="dataset.description">
<p class="desc-txt">{{ dataset.description }}</p>
</div>
</div>
<div class="col-md-4 col-lg-4 p-0"> <div class="col-md-4 col-lg-4 p-0">
<!-- <div *ngIf="!hasDoi(dmp)" class="row d-flex flex-column ml-0 mr-0 mb-3"> <!-- <div *ngIf="!hasDoi(dmp)" class="row d-flex flex-column ml-0 mr-0 mb-3">
<p class="doi-label">{{'DMP-EDITOR.TITLE.SUBTITLE' | translate}}</p> <p class="doi-label">{{'DMP-EDITOR.TITLE.SUBTITLE' | translate}}</p>
@ -139,9 +125,9 @@
</button> </button>
</div> </div>
</div> </div>
</div> </div> -->
<div class="frame mb-3 pt-4 pl-3 pr-5 pb-1"> <div class="frame mb-3 pt-4 pl-3 pr-5 pb-1">
<div *ngIf="!dmp.status && isDraftDmp(dmp) && isUserOwner"> <!-- <div *ngIf="!dmp.status && isDraftDmp(dmp) && isUserOwner">
<div class="row ml-0 mr-0 pl-4 d-flex align-items-center" (click)="finalize(dmp)"> <div class="row ml-0 mr-0 pl-4 d-flex align-items-center" (click)="finalize(dmp)">
<button mat-mini-fab class="finalize-btn"> <button mat-mini-fab class="finalize-btn">
<mat-icon class="mat-mini-fab-icon">check</mat-icon> <mat-icon class="mat-mini-fab-icon">check</mat-icon>
@ -151,30 +137,30 @@
<div class="row ml-0 mr-0 pl-4 d-flex align-items-center"> <div class="row ml-0 mr-0 pl-4 d-flex align-items-center">
<hr class="hr-line"> <hr class="hr-line">
</div> </div>
</div> </div> -->
<div *ngIf="hasDoi(dmp) && isFinalizedDmp(dmp) && !this.isPublicView && isUserOwner" <!-- <div *ngIf="hasDoi(dmp) && isFinalizedDmp(dmp) && !this.isPublicView && isUserOwner"
(click)="getDoi(dmp)" class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center"> (click)="getDoi(dmp)" class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center">
<button mat-mini-fab class="frame-btn"> <button mat-mini-fab class="frame-btn">
<mat-icon class="mat-mini-fab-icon">archive</mat-icon> <mat-icon class="mat-mini-fab-icon">archive</mat-icon>
</button> </button>
<p class="mb-0 pl-2 frame-txt">{{ 'DMP-LISTING.ACTIONS.DEPOSIT' | translate }}</p> <p class="mb-0 pl-2 frame-txt">{{ 'DMP-LISTING.ACTIONS.DEPOSIT' | translate }}</p>
</div> </div> -->
<div class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center"> <!-- <div class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center">
<button mat-mini-fab class="frame-btn" [matMenuTriggerFor]="exportMenu"> <button mat-mini-fab class="frame-btn" [matMenuTriggerFor]="exportMenu">
<mat-icon class="mat-mini-fab-icon">open_in_new</mat-icon> <mat-icon class="mat-mini-fab-icon">open_in_new</mat-icon>
</button> </button>
<p class="mb-0 mr-0 pl-2 frame-txt" [matMenuTriggerFor]="exportMenu"> <p class="mb-0 mr-0 pl-2 frame-txt" [matMenuTriggerFor]="exportMenu">
{{ 'DMP-LISTING.ACTIONS.EXPORT' | translate }}</p> {{ 'DMP-LISTING.ACTIONS.EXPORT' | translate }}</p>
</div> </div> -->
<div class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center" *ngIf="isUserOwner" <!-- <div class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center" *ngIf="isUserOwner"
(click)="newVersion(dmp.id, dmp.label)"> (click)="newVersion(dmp.id, dmp.label)">
<button mat-mini-fab class="frame-btn"> <button mat-mini-fab class="frame-btn">
<mat-icon class="mat-mini-fab-icon">add_to_photos</mat-icon> <mat-icon class="mat-mini-fab-icon">add_to_photos</mat-icon>
</button> </button>
<p class="mb-0 pl-2 frame-txt">{{ 'DMP-LISTING.ACTIONS.START-NEW-VERSION' | translate }} <p class="mb-0 pl-2 frame-txt">{{ 'DMP-LISTING.ACTIONS.START-NEW-VERSION' | translate }}
</p> </p>
</div> </div> -->
<div *ngIf="!dmp.isPublic && showPublishButton(dmp) && isUserOwner" <!-- <div *ngIf="!dataset.public && showPublishButton(dmp) && isUserOwner"
class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center" (click)="publish(dmp.id)"> class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center" (click)="publish(dmp.id)">
<button mat-mini-fab class="frame-btn"> <button mat-mini-fab class="frame-btn">
<mat-icon class="mat-mini-fab-icon">public</mat-icon> <mat-icon class="mat-mini-fab-icon">public</mat-icon>
@ -199,10 +185,10 @@
<span>{{'GENERAL.FILE-TYPES.JSON' | translate}}</span> <span>{{'GENERAL.FILE-TYPES.JSON' | translate}}</span>
</button> </button>
</mat-menu> </mat-menu>
</div> </div> -->
<div class="frame mb-3 pt-4 pl-3 pr-3 pb-1"> <!-- <div class="frame mb-3 pt-4 pl-3 pr-3 pb-1">
<div class="row ml-0 mr-0 pl-4 pb-3"> <div class="row ml-0 mr-0 pl-4 pb-3">
<p class="header">{{ 'DMP-OVERVIEW.DMP-AUTHORS' | translate }}</p> <p class="header">{{ 'DATASET-OVERVIEW.DATASET-AUTHORS' | translate }}</p>
</div> </div>
<div class="row ml-0 mr-0 pl-4 ml-2 pb-3 d-flex align-items-center"> <div class="row ml-0 mr-0 pl-4 ml-2 pb-3 d-flex align-items-center">
<div *ngFor="let user of dmp.users" class="row authors"> <div *ngFor="let user of dmp.users" class="row authors">
@ -233,6 +219,6 @@
</div> --> </div> -->
</div> </div>
</div> </div>
<!-- </div> --> </div>
</div> </div>
</div> </div>

View File

@ -52,11 +52,16 @@
.dmp-btn { .dmp-btn {
width: 35em; width: 35em;
padding: 0 1em; height: 2.3em;
background-color: #129D99; background-color: #129D99;
border-radius: 4px; border-radius: 4px;
flex-direction: rows;
justify-content: space-between; justify-content: space-between;
color: #212121; border: none;
}
.dmp-btn, .dmp-btn > mat-icon {
color: #ffffff;
opacity: 0.8; opacity: 0.8;
} }
@ -68,13 +73,6 @@
font-weight: 700; font-weight: 700;
} }
.add-dataset-btn {
border: none;
font: Bold 0.875em Open Sans;
color: #444444;
background-color: transparent;
}
.frame-btn { .frame-btn {
border: 1px solid #212121; border: 1px solid #212121;
color: black; color: black;
@ -176,6 +174,8 @@
.dmp-btn-label { .dmp-btn-label {
margin-right: 1em; margin-right: 1em;
overflow: hidden; overflow: hidden;
color: #FFFFFF;
opacity: 0.8;
} }
.doi-label { .doi-label {
@ -269,7 +269,7 @@
align-items: center; align-items: center;
} }
.dataset-label, .dmp-btn, .add-dataset-btn, .dataset-label, .dmp-btn,
.doi-panel, .researcher { .doi-panel, .researcher {
display: flex; display: flex;
align-items: center; align-items: center;

View File

@ -172,7 +172,7 @@ export class DatasetOverviewComponent extends BaseComponent implements OnInit {
} }
isDraftDataset(dataset: DatasetOverviewModel) { isDraftDataset(dataset: DatasetOverviewModel) {
// return dataset.status == DatasetStatus.Draft; return dataset.status == DatasetStatus.Draft;
} }
editClicked(dataset: DatasetOverviewModel) { editClicked(dataset: DatasetOverviewModel) {
@ -214,4 +214,8 @@ export class DatasetOverviewComponent extends BaseComponent implements OnInit {
return this.configurationService.orcidPath; return this.configurationService.orcidPath;
} }
// showPublishButton(dataset: DatasetOverviewModel) {
// return this.isFinalizedDmp(dmp) && !dmp.isPublic && this.hasPublishButton;
// }
} }

View File

@ -78,7 +78,7 @@
<div class="row header">{{'DMP-OVERVIEW.RESEARCHERS' | translate}}</div> <div class="row header">{{'DMP-OVERVIEW.RESEARCHERS' | translate}}</div>
<div class="row"> <div class="row">
<div *ngFor="let researcher of dmp.researchers; let last = last"> <div *ngFor="let researcher of dmp.researchers; let last = last">
<a href="{{getOrcidPath() + dmp.id }}" target="blank" class="researcher"> <a href="{{ getOrcidPath() + researcher.id}}" target="blank" class="researcher">
<div class="id-btn">&nbsp;</div> <div class="id-btn">&nbsp;</div>
<div *ngIf="!last">{{ researcher.name }}, </div> <div *ngIf="!last">{{ researcher.name }}, </div>
<div *ngIf="last">{{ researcher.name }}</div> <div *ngIf="last">{{ researcher.name }}</div>

View File

@ -567,7 +567,7 @@
} }
}, },
"DATASET-OVERVIEW": { "DATASET-OVERVIEW": {
"DATASET-AUTHORS": "Dataset Authors", "DATASET-AUTHORS": "Dataset description Authors",
"ERROR": { "ERROR": {
"DELETED-DATASET": "The requested dataset is deleted", "DELETED-DATASET": "The requested dataset is deleted",
"FORBIDEN-DATASET": "You are not allowed to access this dataset" "FORBIDEN-DATASET": "You are not allowed to access this dataset"

View File

@ -565,7 +565,7 @@
} }
}, },
"DATASET-OVERVIEW": { "DATASET-OVERVIEW": {
"DATASET-AUTHORS": "Dataset Autores", "DATASET-AUTHORS": "Descripciones del Dataset Autores",
"ERROR": { "ERROR": {
"DELETED-DATASET": "El Dataset solicitado está borrado", "DELETED-DATASET": "El Dataset solicitado está borrado",
"FORBIDEN-DATASET": "No tiene permiso para acceder a esto Dataset" "FORBIDEN-DATASET": "No tiene permiso para acceder a esto Dataset"