argos/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html

451 lines
23 KiB
HTML

<div class="main-content dmp-overview pl-5 pr-5">
<div class="container-fluid pl-0 pr-0">
<div *ngIf="dmp">
<a class="row mb-2 pl-1" (click)="goBack()" role="button">
<mat-icon class="back-icon pointer">chevron_left</mat-icon>
<p class="label-txt pointer">{{'DMP-WIZARD.ACTIONS.BACK' | translate}}</p>
</a>
<div class="row">
<div class="col-md-8 col-lg-8 pl-4">
<div class="row">
<span class="dmp-logo">{{ 'DATASET-LISTING.COLUMNS.DMP' | translate }}</span>
<p class="dmp-label ml-3 mb-0">{{ dmp.label }}</p>
</div>
<div class="row d-flex align-items-center mt-3 mb-4 label-txt">
<div *ngIf="isUserDMPRelated()" class="d-flex">
<p class="ml-0 mb-0 label2-txt">
{{ roleDisplayFromList(dmp.users) }}</p>
</div>
<span *ngIf="isUserDMPRelated() && (dmp.isPublic || lockStatus)" class="ml-2 mr-2">.</span>
<!-- UNCOMMENT TO ADD PRIVATE ICON -->
<!-- <span *ngIf="isUserDMPRelated() && (dmp.isPublic || !dmp.isPublic || lockStatus)" class="ml-2 mr-2">.</span> -->
<div *ngIf="dmp.isPublic" class="d-flex flex-row">
<mat-icon class="status-icon">public</mat-icon>
{{'DMP-OVERVIEW.PUBLIC' | translate}}
</div>
<span *ngIf="dmp.isPublic && lockStatus" class="ml-2 mr-2">.</span>
<!-- UNCOMMENT TO ADD PRIVATE ICON -->
<!-- <div *ngIf="!dmp.isPublic" class="d-flex flex-row">
<mat-icon class="status-icon">public_off</mat-icon>
{{'DMP-OVERVIEW.PRIVATE' | translate}}
</div>
<span *ngIf="!dmp.isPublic && lockStatus" class="ml-2 mr-2">.</span> -->
<div *ngIf="lockStatus" class="d-flex flex-row">
<mat-icon class="status-icon">lock_outline</mat-icon>
{{'DMP-OVERVIEW.LOCKED' | translate}}
</div>
<mat-form-field appearance="outline" class="versions-select ml-3 mr-3">
<mat-select placeholder="{{'DMP-LISTING.VERSION' | translate}} {{dmp.version}}" [(ngModel)]="version" (ngModelChange)="versionChanged(version.id)">
<mat-option *ngFor="let version of versions" [value]="version">
{{'DMP-LISTING.VERSION' | translate}} {{version.version}}</mat-option>
</mat-select>
</mat-form-field>
<div class="d-flex mr-4">{{'GENERAL.STATUSES.EDIT' | translate}} :
{{dmp.modifiedTime | dateTimeCultureFormatter: "d MMMM y"}}
</div>
<div class="d-flex mr-4">
<div *ngIf="dmp.status" class="d-flex flex-row uppercase">
<mat-icon class="status-icon">check</mat-icon>
{{'TYPES.DMP.FINALISED' | translate}}
</div>
</div>
</div>
<div class="row">
<button *ngIf="isDraftDmp(dmp) && isUserOwner && !lockStatus" (click)="editClicked(dmp)" mat-mini-fab class="mr-3 d-flex justify-content-center align-items-center" matTooltip="{{'DMP-LISTING.ACTIONS.EDIT' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-mini-fab-icon">create</mat-icon>
</button>
<button *ngIf="isAuthenticated()" (click)="cloneOrNewVersionClicked(dmp, false)" mat-mini-fab class="mr-3 d-flex justify-content-center align-items-center" matTooltip="{{'DMP-LISTING.ACTIONS.CLONE' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
</button>
<button *ngIf="isUserOwner && !lockStatus" (click)="deleteClicked()" mat-mini-fab class="mr-3 d-flex justify-content-center align-items-center" matTooltip="{{'DMP-LISTING.ACTIONS.DELETE' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-mini-fab-icon">delete</mat-icon>
</button>
</div>
<div class="row header">{{'DMP-OVERVIEW.GRANT' | translate}}</div>
<div class="row dmp-label">{{ dmp.grant.label }}</div>
<div class="row header">{{'DMP-OVERVIEW.RESEARCHERS' | translate}}</div>
<div class="row">
<div *ngFor="let researcher of dmp.researchers; let last = last">
<span *ngIf="isOrcid(researcher.reference)">
<a href="{{ getOrcidPathForResearcher(researcher.reference) }}" target="blank" class="researcher">
<div class="id-btn">&nbsp;</div>
<div *ngIf="!last">{{ researcher.name }}, </div>
<div *ngIf="last">{{ researcher.name }}</div>
</a>
</span>
<span *ngIf="!isOrcid(researcher.reference)">
<div *ngIf="!last">{{ researcher.name }}, </div>
<div *ngIf="last">{{ researcher.name }}</div>
</span>
</div>
<span *ngIf="!dmp.researchers || dmp.researchers.length === 0" class="material-icons">horizontal_rule</span>
</div>
<div class="row header">{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</div>
<div class="row" *ngIf="dmp.description">
<p class="desc-txt" [innerHTML]="dmp.description"></p>
</div>
<div class="row" *ngIf="!dmp.description">
<span class="material-icons">horizontal_rule</span>
</div>
<div class="row header">{{'DMP-OVERVIEW.DATASETS-USED' | translate}}</div>
<div class="d-flex flex-column">
<div *ngFor="let dataset of dmp.datasets">
<a class="row dataset" [routerLink]="isPublicView ? ['/datasets/publicOverview/' + dataset.id] : ['/datasets/overview/' + dataset.id]" target="_blank">
<button mat-raised-button class="mb-2 mr-2 pl-0 pr-0">
<div matTooltip="{{ dataset.label }}" class="col-auto" [ngClass]="{'dataset-btn': dataset.status === 0, 'dataset-finalized-btn': dataset.status === 1}">
<div class="dataset-btn-label">{{ dataset.label }}</div>
<mat-icon>launch</mat-icon>
</div>
</button>
</a>
</div>
<div class="row" *ngIf="!dmp.datasets || dmp.datasets.length === 0">
<span class="material-icons">horizontal_rule</span>
</div>
</div>
<div class="row mt-2 add-dataset-txt" *ngIf="!lockStatus">
<a class="add-dataset-btn" *ngIf="isDraftDmp(dmp)" [routerLink]="['/datasets/new/' + dmp.id]" target="_blank">
<mat-icon>add</mat-icon>
{{'DMP-LISTING.ACTIONS.ADD-DATASET-SHORT' | translate}}
</a>
</div>
</div>
<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">
<p class="doi-label">{{'DMP-EDITOR.TITLE.SUBTITLE' | translate}}</p>
<div class="doi-panel">
<mat-select class="mb-0 ml-3" placeholder="{{ dmp.dois[0].doi }}">
<mat-option *ngFor="let x of dmp.dois">
{{x.repositoryId}}
</mat-option>
</mat-select>
<div class="d-flex justify-content-end ml-3">
<button (click)="copyDoi(doi)" mat-mini-fab class="mr-2 d-flex justify-content-center align-items-center" matTooltip="{{'DMP-LISTING.ACTIONS.COPY' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
</button>
<button mat-mini-fab class="mr-2 d-flex justify-content-center align-items-center" matTooltip="{{'GRANT-EDITOR.ACTIONS.VISIT-WEBSITE' | translate}}" matTooltipPosition="above">
<a [href]="createDoiLink(dmp.dois[0].doi)" class="doi-link" target="_blank">
<mat-icon class="mat-mini-fab-icon">launch</mat-icon>
</a>
</button>
</div>
</div>
</div>
<!-- <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>
<div class="doi-panel">
<p *ngIf="!hasDoi(dmp)" class="mb-0 ml-3">
<textarea #doi class="doi-txt">{{ dmp.dois[0].doi }}</textarea>
</p>
<div class="d-flex justify-content-end">
<button (click)="copyDoi(doi)" mat-mini-fab class="mr-2 d-flex justify-content-center align-items-center" matTooltip="{{'DMP-LISTING.ACTIONS.COPY' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
</button>
<button mat-mini-fab class="mr-2 d-flex justify-content-center align-items-center" matTooltip="{{'GRANT-EDITOR.ACTIONS.VISIT-WEBSITE' | translate}}" matTooltipPosition="above">
<a [href]="createDoiLink(dmp.dois[0].doi)" class="doi-link" target="_blank">
<mat-icon class="mat-mini-fab-icon">launch</mat-icon>
</a>
</button>
</div>
</div>
</div> -->
<div class="frame mb-3 pt-4 pl-3 pr-5 pb-1">
<div *ngIf="isDraftDmp(dmp) && isUserOwner && !lockStatus">
<div class="row ml-0 mr-0 pl-4 d-flex align-items-center" (click)="finalize(dmp)">
<button mat-mini-fab class="finalize-btn">
<mat-icon class="mat-mini-fab-icon">check</mat-icon>
</button>
<p class="mb-0 pl-2 finalize-txt">{{ 'DMP-LISTING.ACTIONS.FINALIZE' | translate }}</p>
</div>
<div class="row ml-0 mr-0 pl-4 d-flex align-items-center">
<hr class="hr-line">
</div>
</div>
<div *ngIf="(hasDoi(dmp) || moreDeposit()) && isFinalizedDmp(dmp) && !this.isPublicView && isUserOwner" (click)="deposit()" class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center">
<button mat-mini-fab class="frame-btn">
<mat-icon class="mat-mini-fab-icon">archive</mat-icon>
</button>
<p class="mb-0 pl-2 frame-txt">{{ 'DMP-LISTING.ACTIONS.DEPOSIT' | translate }}</p>
</div>
<div *ngIf="isFinalizedDmp(dmp) && hasDoi(dmp) && !isPublishedDMP(dmp) && isUserOwner" (click)="reverse(dmp)" class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center">
<button mat-mini-fab class="frame-btn">
<mat-icon class="mat-mini-fab-icon">unarchive</mat-icon>
</button>
<p class="mb-0 pl-2 frame-txt">{{ 'DMP-LISTING.ACTIONS.UNFINALIZE' | translate }}</p>
</div>
<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">
<mat-icon class="mat-mini-fab-icon">open_in_new</mat-icon>
</button>
<p class="mb-0 mr-0 pl-2 frame-txt" [matMenuTriggerFor]="exportMenu">
{{ 'DMP-LISTING.ACTIONS.EXPORT' | translate }}</p>
</div>
<div *ngIf="isUserOwner" class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center" (click)="cloneOrNewVersionClicked(dmp, true)">
<button mat-mini-fab class="frame-btn">
<mat-icon class="mat-mini-fab-icon">add_to_photos</mat-icon>
</button>
<p class="mb-0 pl-2 frame-txt">{{ 'DMP-LISTING.ACTIONS.START-NEW-VERSION' | translate }}
</p>
</div>
<div *ngIf="!dmp.isPublic && showPublishButton(dmp) && isUserOwner" 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">
<mat-icon class="mat-mini-fab-icon">public</mat-icon>
</button>
<p class="mb-0 pl-2 frame-txt">{{ 'DMP-LISTING.ACTIONS.MAKE-PUBLIC' | translate }}</p>
</div>
<mat-menu #exportMenu="matMenu" xPosition="before">
<button mat-menu-item (click)="downloadPDF(dmp.id)">
<i class="fa fa-file-pdf-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.PDF' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadDocx(dmp.id)">
<i class="fa fa-file-word-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.DOC' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadXml(dmp.id)">
<i class="fa fa-file-code-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.XML' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadJson(dmp.id)">
<i class="fa fa-file-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.JSON' | translate}}</span>
</button>
</mat-menu>
</div>
<div class="frame mb-3 pt-4 pl-3 pr-3 pb-1">
<div class="row ml-0 mr-0 pl-4 pb-3">
<p class="header">{{ 'DMP-OVERVIEW.DMP-AUTHORS' | translate }}</p>
</div>
<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 class="d-flex flex-row">
<button class="account_btn mr-3 pl-0">
<mat-icon class="account-icon">account_circle</mat-icon>
</button>
<div>
<p class="authors-label">{{ user.name }}
<span *ngIf="isUserAuthor(user.id)">({{ 'DMP-OVERVIEW.YOU' | translate }})</span>
</p>
<p class="authors-role">{{ roleDisplay(user) }}</p>
</div>
</div>
<button *ngIf="isUserOwner && !dmp.status && user.role" (click)="removeUserFromDmp(user)" class="remove-btn">{{ 'GENERAL.CONFIRMATION-DIALOG.ACTIONS.REMOVE' | translate}}</button>
</div>
</div>
<div *ngIf="isUserOwner" class="row mt-3 mb-3 d-flex align-items-center justify-content-center">
<button mat-raised-button class="invite-btn" (click)="openShareDialog(dmp.id,dmp.label)">
<mat-icon>group_add</mat-icon>
{{'DMP-LISTING.ACTIONS.INVITE-SHORT' | translate}}
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
<div class="main-content">
<div class="container-fluid">
<div *ngIf="dmp" class="card pb-4">
<div class="row card-header card-header-plain d-flex">
<div class="col-12 card-desc d-flex flex-column justify-content-center">
<div class="row">
<div class="col d-flex align-items-center flex-wrap-nowrap">
<h4 class="card-title">{{ dmp.label }}</h4>
<button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto more-icon" (click)="$event.stopImmediatePropagation();">
<mat-icon class="more-horiz">more_horiz</mat-icon>
</button>
<mat-menu #actionsMenu="matMenu" xPosition="before">
<button *ngIf="isUserOwner" mat-menu-item (click)="openShareDialog(dmp.id,dmp.label)">
<mat-icon>share</mat-icon>{{'DMP-LISTING.ACTIONS.INVITE' | translate}}
</button>
-->
<!-- <button *ngIf="isDraftDmp(dmp) && isUserOwner" mat-menu-item (click)="addDataset(dmp.id)">
<mat-icon>add_box</mat-icon>{{'DMP-LISTING.ACTIONS.ADD-DATASET' | translate}}
</button> -->
<!--
<button *ngIf="isUserOwner" mat-menu-item (click)="newVersion(dmp.id, dmp.label)">
<mat-icon>queue</mat-icon>{{'DMP-LISTING.ACTIONS.NEW-VERSION' | translate}}
</button>
<button mat-menu-item (click)="viewVersions(dmp.groupId, dmp.label)">
<mat-icon>library_books</mat-icon>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}
</button>
<button *ngIf="isAuthenticated()" mat-menu-item (click)="cloneClicked(dmp)" class="menu-item">
<mat-icon>add</mat-icon>{{ 'DMP-LISTING.ACTIONS.CLONE' | translate }}
</button>
<button mat-menu-item *ngIf="isDraftDmp(dmp) && isUserOwner" (click)="deleteClicked()" class="menu-item">
<mat-icon>delete</mat-icon>{{ 'DMP-LISTING.ACTIONS.DELETE' | translate }}
</button>
</mat-menu>
</div>
<div class="col-auto d-flex flex-wrap p-2">
<button *ngIf="(isFinalizedDmp(dmp) && hasDoi(dmp) && !isPublishedDMP(dmp)) && isUserOwner" mat-raised-button class="lightblue-btn mt-2 ml-2" color="primary" (click)="reverse()" type="button">{{ 'DMP-LISTING.ACTIONS.UNFINALIZE' | translate }}</button>
<button *ngIf="isDraftDmp(dmp) && isUserOwner" mat-raised-button color="primary" (click)="editClicked(dmp)" class="lightblue-btn mt-2 ml-2">
<mat-icon>edit</mat-icon> {{ 'DMP-LISTING.ACTIONS.EDIT' | translate }}
</button>
<button mat-raised-button [matMenuTriggerFor]="exportMenu" color="primary" class="lightblue-btn export-btn mt-2 ml-2">
{{ 'DMP-LISTING.ACTIONS.EXPORT' | translate }} <mat-icon>arrow_drop_down</mat-icon>
</button>
<button *ngIf="showPublishButton(dmp) && isUserOwner" mat-raised-button (click)="publish(dmp.id)" class="lightblue-btn mt-2 ml-2">
<mat-icon>public</mat-icon> {{ 'DMP-LISTING.ACTIONS.PUBLISH' | translate }}
</button>
<button *ngIf="isDraftDmp(dmp) && isUserOwner" mat-raised-button color="primary" (click)="finalize(dmp)" class="lightblue-btn mt-2 ml-2">
<mat-icon>done_all</mat-icon> {{ 'DMP-LISTING.ACTIONS.FINALIZE' | translate }}
</button>
<button *ngIf="hasDoi(dmp) && isFinalizedDmp(dmp) && !this.isPublicView && isUserOwner" mat-raised-button color="primary" (click)="getDoi(dmp)" class="lightblue-btn mt-2 ml-2">
<mat-icon>archive</mat-icon> {{ 'DMP-LISTING.ACTIONS.GETDOI' | translate }}
</button>
<mat-menu #exportMenu="matMenu" xPosition="before">
<button mat-menu-item (click)="downloadPDF(dmp.id)">
<i class="fa fa-file-pdf-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.PDF' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadDocx(dmp.id)">
<i class="fa fa-file-word-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.DOC' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadXml(dmp.id)">
<i class="fa fa-file-code-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.XML' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadJson(dmp.id)">
<i class="fa fa-file-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.JSON' | translate}}</span>
</button>
</mat-menu>
</div>
</div>
<div class="row">
<mat-card-subtitle class="col" *ngIf="!hasDoi(dmp)">
{{ 'DMP-EDITOR.TITLE.SUBTITLE' | translate }}: <a [href]="createDoiLink(dmp.doi)">{{ dmp.doi }}</a>
</mat-card-subtitle>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col-md-9 col-lg-9">
<div class="row">
<div class="col-sm-12 col-md-6 ml-3 dmp-info">
<p class="card-subtitle">{{ dmp.label }}</p>
<p>{{ dmp.description }}</p>
</div>
<div class="col-12 d-flex flex-row flex-wrap ml-3">
<div *ngIf="isUserDMPRelated()" class="d-flex">
<mat-icon matTooltip="{{'DMP-OVERVIEW.TOOLTIP.LEVEL-OF-ACCESS' | translate}}" class="gray-icon pt-2">settings</mat-icon>
<p class="mt-2 ml-1 mr-3 p-1">{{ roleDisplayFromList(dmp.users) }}</p>
</div>
<div class="datasets-counter" *ngIf="!isPublishedDMP(dmp)">
<mat-icon matTooltip="{{'DMP-OVERVIEW.TOOLTIP.INVOLVED-DATASETS' | translate}}" class="gray-icon pt-2" (click)="datasetsClicked(dmp.id)">storage
</mat-icon>
<p class="mt-2 ml-1 p-1" (click)="datasetsClicked(dmp.id)">
{{ dmp.datasets.length }}</p>
<p class="mt-2 mr-3 p-1" (click)="datasetsClicked(dmp.id)">
{{'NAV-BAR.DATASETS' | translate}}</p>
</div>
<div class="d-flex">
<mat-icon matTooltip="{{'DMP-OVERVIEW.TOOLTIP.INVOLVED-DATASETS' | translate}}" class="gray-icon pt-2" *ngIf="isPublishedDMP(dmp)">storage</mat-icon>
<p class="mt-2 ml-1 p-1" *ngIf="isPublishedDMP(dmp)">{{ dmp.datasets.length }}</p>
<p class="mt-2 mr-3 p-1" *ngIf="isPublishedDMP(dmp)">{{'NAV-BAR.DATASETS' | translate}}</p>
</div>
<div class="d-flex">
<mat-icon matTooltip="{{'DMP-OVERVIEW.TOOLTIP.TEMPLATES-INVOLVED' | translate}}" class="gray-icon pt-2">assignment</mat-icon>
<p class="mt-2 ml-1 p-1">{{ dmp.associatedProfiles.length }}</p>
<p class="mt-2 mr-3 p-1">{{ 'DMP-EDITOR.FIELDS.TEMPLATES' | translate }}</p>
</div>
<div class="d-flex">
<mat-icon matTooltip="{{'DMP-OVERVIEW.RESEARCHERS' | translate}}" class="gray-icon pt-2">person</mat-icon>
<p class="mt-2 ml-1 p-1">{{ dmp.researchers.length }}</p>
<p class="mt-2 mr-3 p-1">{{ 'DMP-EDITOR.FIELDS.RESEARCHERS' | translate }}</p>
</div>
<div class="d-flex" *ngIf="!isPublicView">
<mat-icon matTooltip="{{'DMP-OVERVIEW.COLLABORATORS' | translate}}" class="gray-icon pt-2">person</mat-icon>
<p class="mt-2 ml-1 p-1">{{ dmp.users.length }}</p>
<p class="mt-2 mr-3 p-1">{{ 'DMP-EDITOR.FIELDS.COLLABORATORS' | translate }}</p>
</div>
</div>
</div>
<div class="row">
<div class="interact-icon">
<mat-icon *ngIf="isDraftDmp(dmp) && isUserOwner" matTooltip="{{'DMP-LISTING.ACTIONS.ADD-DATASET' | translate}}" (click)="addDataset(dmp.id)">add_box</mat-icon>
</div>
</div>
<div class="row">
<div *ngFor="let dataset of dmp.datasets; let i=index" class="col-md-4">
<div *ngIf="i < 9" class="dataset-card" (click)="datasetClicked(dataset.id)">
<mat-icon *ngIf="isDraftDataset(dataset)" class="draft-bookmark">bookmark</mat-icon>
<mat-icon *ngIf="!isDraftDataset(dataset)" class="finalized-bookmark">bookmark</mat-icon>
<h4 *ngIf="isDraftDataset(dataset)">
<span>{{ 'TYPES.DMP.DRAFT' | translate }}:</span> {{ dataset.label }}</h4>
<h4 *ngIf="!isDraftDataset(dataset)">{{ dataset.label }}</h4>
<div matTooltip="{{ dataset.datasetTemplate.label }}" class="chip">
{{ dataset.datasetTemplate.label }}</div>
</div>
</div>
</div>
<div *ngIf="dmp.datasets.length > 9" class="gray-container d-flex justify-content-center">
<button mat-button (click)="datasetsClicked(dmp.id)" class="show-more">
<mat-icon class="mr-2">expand_more</mat-icon>{{ 'GENERAL.ACTIONS.SHOW-MORE' | translate }}
</button>
</div>
</div>
<div class="col-md-3 col-lg-3">
<div class="grant-item">
<h6 class="grant-title">{{'DMP-OVERVIEW.GRANT' | translate}}</h6>
<div *ngIf="dmp.grant.abbreviation" class="gray-container container-header">
<span class="ml-2 pt-2" (click)="grantClicked(dmp.grant.id)">{{ dmp.grant.abbreviation }}</span>
</div>
<p class="card-subtitle mt-3 mb-1 ml-3 mr-3">{{ dmp.grant.label }}</p>
<p *ngIf="dmp.grant.startDate && dmp.grant.endDate" class="mb-1 ml-3 mr-3">{{ dmp.grant.startDate | date: "shortDate" }} - {{ dmp.grant.endDate | date: "shortDate" }}</p>
<div class="row desc-container" *ngIf="dmp.grant.description">
<p #desc class="ml-3 mr-3 desc" [ngClass]="{'desc-expanded': expand}">{{ dmp.grant.description }}</p>
<button *ngIf="checkOverflow(desc)" mat-flat-button class="show-more col-12" (click)="expandDesc()"> -->
<!-- (click)="grantClicked(dmp.grant.id)"> -->
<!--<mat-icon class="mr-2">{{!expand ? 'expand_more' : 'expand_less'}}</mat-icon>
{{ (!expand ? 'GENERAL.ACTIONS.SHOW-MORE' : 'GENERAL.ACTIONS.SHOW-LESS') | translate }}
</button>
</div>-->
<!-- <button mat-flat-button class="show-more" (click)="grantClicked(dmp.grant.id)">
<mat-icon class="mr-2">expand_more</mat-icon>
{{ 'GENERAL.ACTIONS.SHOW-MORE' | translate }}
</button> -->
<!--
<a *ngIf="dmp.grant.uri" mat-raised-button class="visit-website" href="{{dmp.grant.uri}}" target="_blank">
<mat-icon class="mr-2">open_in_new</mat-icon>
{{ 'GRANT-EDITOR.ACTIONS.VISIT-WEBSITE' | translate }}
</a>
</div>
<div class="researchers">
<h6 class="researchers-title">{{'DMP-OVERVIEW.RESEARCHERS' | translate}}</h6>
<div *ngFor="let researcher of dmp.researchers">
<div matTooltip="{{ researcher.name }}" class="avatar">{{ researcher.name }}</div>
</div>
</div>
<div class="collaborators" *ngIf="!isPublicView">
<h6 class="collaborators-title">{{'DMP-OVERVIEW.COLLABORATORS' | translate}}</h6>
<div *ngFor="let user of dmp.users">
<div matTooltip="{{ roleDisplay(user) }}" class="avatar">{{ user.name }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
-->