more ui changes

This commit is contained in:
Diamantis Tziotzios 2023-12-04 17:56:12 +02:00
parent 567b09a26b
commit 7c9e36341b
12 changed files with 436 additions and 832 deletions

View File

@ -78,14 +78,13 @@ public class DescriptionEntity implements DataEntity<DescriptionEntity, UUID> {
@Column(name = "dmp", columnDefinition = "uuid", nullable = false) @Column(name = "dmp", columnDefinition = "uuid", nullable = false)
private UUID dmpId; private UUID dmpId;
public static final String _dmpId = "dmpId";
@Column(name = "description_template", columnDefinition = "uuid", nullable = false) @Column(name = "description_template", columnDefinition = "uuid", nullable = false)
private UUID descriptionTemplateId; private UUID descriptionTemplateId;
public static final String _descriptionTemplateId = "descriptionTemplateId"; public static final String _descriptionTemplateId = "descriptionTemplateId";
public static final String _dmpId = "dmpId";
public UUID getId() { public UUID getId() {
return id; return id;

View File

@ -203,8 +203,7 @@ public class DmpBuilder extends BaseBuilder<Dmp, DmpEntity> {
Map<UUID, List<Description>> itemMap; Map<UUID, List<Description>> itemMap;
FieldSet clone = new BaseFieldSet(fields.getFields()).ensure(this.asIndexer(Description._dmp, Dmp._id)); FieldSet clone = new BaseFieldSet(fields.getFields()).ensure(this.asIndexer(Description._dmp, Dmp._id));
DmpQuery dmpQuery = this.queryFactory.query(DmpQuery.class).authorize(this.authorize).ids(data.stream().map(DmpEntity::getId).distinct().collect(Collectors.toList())); DescriptionQuery query = this.queryFactory.query(DescriptionQuery.class).authorize(this.authorize).dmpIds(data.stream().map(DmpEntity::getId).distinct().collect(Collectors.toList()));
DescriptionQuery query = this.queryFactory.query(DescriptionQuery.class).authorize(this.authorize).dmpSubQuery(dmpQuery);
itemMap = this.builderFactory.builder(DescriptionBuilder.class).authorize(this.authorize).asMasterKey(query, clone, x -> x.getDmp().getId()); itemMap = this.builderFactory.builder(DescriptionBuilder.class).authorize(this.authorize).asMasterKey(query, clone, x -> x.getDmp().getId());
if (!fields.hasField(this.asIndexer(Description._dmp, Dmp._id))) { if (!fields.hasField(this.asIndexer(Description._dmp, Dmp._id))) {

View File

@ -43,6 +43,7 @@ public class DescriptionQuery extends QueryBase<DescriptionEntity> {
private Collection<IsActive> isActives; private Collection<IsActive> isActives;
private Collection<DescriptionStatus> statuses; private Collection<DescriptionStatus> statuses;
private Collection<UUID> dmpIds;
private EnumSet<AuthorizationFlags> authorize = EnumSet.of(AuthorizationFlags.None); private EnumSet<AuthorizationFlags> authorize = EnumSet.of(AuthorizationFlags.None);
@ -152,6 +153,16 @@ public class DescriptionQuery extends QueryBase<DescriptionEntity> {
return this; return this;
} }
public DescriptionQuery dmpIds(Collection<UUID> values) {
this.dmpIds = values;
return this;
}
public DescriptionQuery dmpIds(UUID value) {
this.dmpIds = List.of(value);
return this;
}
public DescriptionQuery authorize(EnumSet<AuthorizationFlags> values) { public DescriptionQuery authorize(EnumSet<AuthorizationFlags> values) {
this.authorize = values; this.authorize = values;
return this; return this;
@ -225,6 +236,12 @@ public class DescriptionQuery extends QueryBase<DescriptionEntity> {
notInClause.value(item); notInClause.value(item);
predicates.add(notInClause.not()); predicates.add(notInClause.not());
} }
if (this.dmpIds != null) {
CriteriaBuilder.In<UUID> inClause = queryContext.CriteriaBuilder.in(queryContext.Root.get(DescriptionEntity._dmpId));
for (UUID item : this.dmpIds)
inClause.value(item);
predicates.add(inClause);
}
if (this.isActives != null) { if (this.isActives != null) {
CriteriaBuilder.In<IsActive> inClause = queryContext.CriteriaBuilder.in(queryContext.Root.get(DescriptionEntity._isActive)); CriteriaBuilder.In<IsActive> inClause = queryContext.CriteriaBuilder.in(queryContext.Root.get(DescriptionEntity._isActive));
for (IsActive item : this.isActives) for (IsActive item : this.isActives)

View File

@ -0,0 +1,3 @@
export enum EntityType {
DMP = 0,
}

View File

@ -18,6 +18,7 @@ import { DmpAccessType } from '@app/core/common/enum/dmp-access-type';
import { DmpUserRole } from '@app/core/common/enum/dmp-user-role'; import { DmpUserRole } from '@app/core/common/enum/dmp-user-role';
import { Guid } from '@common/types/guid'; import { Guid } from '@common/types/guid';
import { DescriptionTemplate } from '../description-template/description-template'; import { DescriptionTemplate } from '../description-template/description-template';
import { EntityDoi } from '../entity-doi/entity-doi';
export interface DmpModel { //TODO: Delete export interface DmpModel { //TODO: Delete
id: string; id: string;
@ -70,6 +71,7 @@ export interface Dmp extends BaseEntity {
dmpReferences: DmpReference[]; dmpReferences: DmpReference[];
dmpUsers: DmpUser[]; dmpUsers: DmpUser[];
descriptions: Description[]; descriptions: Description[];
entityDois: EntityDoi[];
// TODO: delete // TODO: delete

View File

@ -0,0 +1,11 @@
import { EntityType } from "@app/core/common/enum/entity-type";
import { BaseEntity } from "@common/base/base-entity.model";
import { Guid } from "@common/types/guid";
export interface EntityDoi extends BaseEntity {
id: Guid;
entityType: EntityType;
entityId: Guid;
repositoryId: string;
doi: string;
}

View File

@ -64,6 +64,15 @@ export class DmpServiceNew {
catchError((error: any) => throwError(error))); catchError((error: any) => throwError(error)));
} }
getPublicSingle(id: Guid, reqFields: string[] = []): Observable<Dmp> { //TODO: add this to backend.
const url = `${this.apiBase}/public/${id}`;
const options = { params: { f: reqFields } };
return this.http
.get<Dmp>(url, options).pipe(
catchError((error: any) => throwError(error)));
}
persist(item: DmpPersist): Observable<Dmp> { persist(item: DmpPersist): Observable<Dmp> {
const url = `${this.apiBase}/persist`; const url = `${this.apiBase}/persist`;

View File

@ -7,6 +7,7 @@ import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort'; import { MatSort } from '@angular/material/sort';
import { ActivatedRoute, Params, Router } from '@angular/router'; import { ActivatedRoute, Params, Router } from '@angular/router';
import { DescriptionStatus } from '@app/core/common/enum/description-status'; import { DescriptionStatus } from '@app/core/common/enum/description-status';
import { DmpStatus } from '@app/core/common/enum/dmp-status';
import { IsActive } from '@app/core/common/enum/is-active.enum'; import { IsActive } from '@app/core/common/enum/is-active.enum';
import { RecentActivityOrder } from '@app/core/common/enum/recent-activity-order'; import { RecentActivityOrder } from '@app/core/common/enum/recent-activity-order';
import { DataTableRequest } from '@app/core/model/data-table/data-table-request'; import { DataTableRequest } from '@app/core/model/data-table/data-table-request';
@ -106,6 +107,9 @@ export class DescriptionListingComponent extends BaseComponent implements OnInit
this.dmpId = queryParams['dmpId']; this.dmpId = queryParams['dmpId'];
this.status = queryParams['status']; this.status = queryParams['status'];
this.lookup.dmpSubQuery = new DmpLookup();
this.lookup.dmpSubQuery.statuses = [DmpStatus.Draft];
this.lookup.page = { size: this.pageSize, offset: 0 }; this.lookup.page = { size: this.pageSize, offset: 0 };
this.lookup.order = { items: ['-' + nameof<Description>(x => x.updatedAt)] }; this.lookup.order = { items: ['-' + nameof<Description>(x => x.updatedAt)] };
this.lookup.metadata = { countAll: true }; this.lookup.metadata = { countAll: true };

View File

@ -17,15 +17,15 @@
<span>.</span> <span>.</span>
<span class="col">{{ 'DMP-LISTING.GRANT' | translate }}: {{referenceService.getReferencesForTypesFirstSafe(dmp?.dmpReferences, [referenceTypeEnum.Grants])?.reference?.label}}</span> <span class="col">{{ 'DMP-LISTING.GRANT' | translate }}: {{referenceService.getReferencesForTypesFirstSafe(dmp?.dmpReferences, [referenceTypeEnum.Grants])?.reference?.label}}</span>
</div> </div>
<div class="col-auto dmp-dataset-descriptions-title">{{'DMP-LISTING.CONTAINED-DESCRIPTIONS' | translate}}: ({{ dmp.descriptions.length }}) <div class="col-auto dmp-dataset-descriptions-title">{{'DMP-LISTING.CONTAINED-DESCRIPTIONS' | translate}}: ({{ dmp.descriptions?.length }})
</div> </div>
<div *ngFor="let description of dmp.descriptions; let i = index; let last = last" [ngClass]="{'pb-3': i === dmp.descriptions.length - 1}"> <div *ngFor="let description of dmp.descriptions; let i = index; let last = last" [ngClass]="{'pb-3': i === dmp.descriptions?.length - 1}">
<div *ngIf="i < 3"> <div *ngIf="i < 3">
<div class="col-auto dmp-dataset-descriptions-name" *ngIf="!last && i !== 2">{{description.label}},</div> <div class="col-auto dmp-dataset-descriptions-name" *ngIf="!last && i !== 2">{{description.label}},</div>
<div class="col-auto dmp-dataset-descriptions-name" *ngIf="last || i == 2">{{description.label}}</div> <div class="col-auto dmp-dataset-descriptions-name" *ngIf="last || i == 2">{{description.label}}</div>
</div> </div>
</div> </div>
<a class="d-flex justify-content-center pb-3 show-more" *ngIf="dmp.descriptions.length > 3" [routerLink]="isPublic ? ['/explore-plans/publicOverview/' + dmp.id] : ['/plans/overview/' + dmp.id]"><u>{{'GENERAL.ACTIONS.SHOW-MORE' | translate}}</u></a> <a class="d-flex justify-content-center pb-3 show-more" *ngIf="dmp.descriptions?.length > 3" [routerLink]="isPublic ? ['/explore-plans/publicOverview/' + dmp.id] : ['/plans/overview/' + dmp.id]"><u>{{'GENERAL.ACTIONS.SHOW-MORE' | translate}}</u></a>
</a> </a>
<div class="dmp-card-actions"> <div class="dmp-card-actions">
<a class="col-auto border-right pointer" [matMenuTriggerFor]="exportMenu"><span class="material-icons icon-align pr-2">open_in_new</span>{{'DMP-LISTING.ACTIONS.EXPORT' | translate}}</a> <a class="col-auto border-right pointer" [matMenuTriggerFor]="exportMenu"><span class="material-icons icon-align pr-2">open_in_new</span>{{'DMP-LISTING.ACTIONS.EXPORT' | translate}}</a>

View File

@ -1,42 +1,29 @@
import { Location } from '@angular/common'; import { Location } from '@angular/common';
import { HttpClient } from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { UntypedFormGroup } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog'; import { MatDialog } from '@angular/material/dialog';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { DmpBlueprintSectionFieldCategory } from '@app/core/common/enum/dmp-blueprint-section-field-category'; import { DmpAccessType } from '@app/core/common/enum/dmp-access-type';
import { DmpBlueprintSystemFieldType } from '@app/core/common/enum/dmp-blueprint-system-field-type'; import { DmpUserRole } from '@app/core/common/enum/dmp-user-role';
import { Role } from '@app/core/common/enum/role'; import { ReferenceType } from '@app/core/common/enum/reference-type';
import { DescriptionTemplatesInSection, DmpBlueprint, DmpBlueprintDefinition, DmpBlueprintDefinitionSection, FieldInSection } from '@app/core/model/dmp-blueprint/dmp-blueprint'; import { DescriptionTemplatesInSection, DmpBlueprint, DmpBlueprintDefinition, DmpBlueprintDefinitionSection, FieldInSection } from '@app/core/model/dmp-blueprint/dmp-blueprint';
import { Dmp, DmpModel } from '@app/core/model/dmp/dmp'; import { Dmp } from '@app/core/model/dmp/dmp';
import { DmpBlueprintService } from '@app/core/services/dmp/dmp-blueprint.service'; import { DmpBlueprintService } from '@app/core/services/dmp/dmp-blueprint.service';
import { DmpService } from '@app/core/services/dmp/dmp.service'; import { DmpService } from '@app/core/services/dmp/dmp.service';
import { LockService } from '@app/core/services/lock/lock.service'; import { LockService } from '@app/core/services/lock/lock.service';
import { MatomoService } from '@app/core/services/matomo/matomo-service'; import { MatomoService } from '@app/core/services/matomo/matomo-service';
import { SnackBarNotificationLevel, UiNotificationService } from '@app/core/services/notification/ui-notification-service'; import { SnackBarNotificationLevel, UiNotificationService } from '@app/core/services/notification/ui-notification-service';
import { ReferenceService } from '@app/core/services/reference/reference.service';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service'; import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
import { FileUtils } from '@app/core/services/utilities/file-utils.service'; import { FileUtils } from '@app/core/services/utilities/file-utils.service';
import { isNullOrUndefined } from '@app/utilities/enhancers/utils';
import { BaseComponent } from '@common/base/base.component'; import { BaseComponent } from '@common/base/base.component';
import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component'; import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
import { Guid } from '@common/types/guid'; import { Guid } from '@common/types/guid';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import * as FileSaver from 'file-saver';
import { map, takeUntil } from 'rxjs/operators'; import { map, takeUntil } from 'rxjs/operators';
import { nameof } from 'ts-simple-nameof'; import { nameof } from 'ts-simple-nameof';
import { DmpStatus } from '../../../../core/common/enum/dmp-status'; import { DmpStatus } from '../../../../core/common/enum/dmp-status';
import { AuthService } from '../../../../core/services/auth/auth.service'; import { AuthService } from '../../../../core/services/auth/auth.service';
import { CloneDialogComponent } from '../../clone/clone-dialog/clone-dialog.component';
import { DmpEditorModel } from '../../editor/dmp-editor.model';
import { ExtraPropertiesFormModel } from '../../editor/general-tab/extra-properties-form.model';
import { FunderFormModel } from '../../editor/grant-tab/funder-form-model';
import { GrantTabModel } from '../../editor/grant-tab/grant-tab-model';
import { ProjectFormModel } from '../../editor/grant-tab/project-form-model';
import { DmpInvitationDialogComponent } from '../../invitation/dmp-invitation-dialog.component';
import { DmpUserRole } from '@app/core/common/enum/dmp-user-role';
import { DmpAccessType } from '@app/core/common/enum/dmp-access-type';
import { ReferenceType } from '@app/core/common/enum/reference-type';
import { ReferenceService } from '@app/core/services/reference/reference.service';
@Component({ @Component({
selector: 'app-dmp-listing-item-component', selector: 'app-dmp-listing-item-component',

View File

@ -12,24 +12,16 @@
<p class="dmp-label ml-3 mb-0">{{ dmp.label }}</p> <p class="dmp-label ml-3 mb-0">{{ dmp.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="isUserDMPRelated()" class="d-flex"> <div *ngIf="isUserDmpRelated()" class="d-flex">
<p class="ml-0 mb-0 label2-txt"> <p class="ml-0 mb-0 label2-txt">
{{ roleDisplayFromList(dmp.users) }}</p> {{ enumUtils.toDmpUserRolesString(dmpService.getCurrentUserRolesInDmp(dmp?.dmpUsers)) }}
</div> </div>
<span *ngIf="isUserDMPRelated() && (dmp.isPublic || lockStatus)" class="ml-2 mr-2">.</span> <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"> <div *ngIf="dmp.isPublic" 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}}
</div> </div>
<span *ngIf="dmp.isPublic && lockStatus" class="ml-2 mr-2">.</span> <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"> <div *ngIf="lockStatus" class="d-flex flex-row">
<mat-icon class="status-icon">lock_outline</mat-icon> <mat-icon class="status-icon">lock_outline</mat-icon>
{{'DMP-OVERVIEW.LOCKED' | translate}} {{'DMP-OVERVIEW.LOCKED' | translate}}
@ -139,24 +131,6 @@
</div> </div>
</div> </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 class="frame mb-3 pt-4 pl-3 pr-5 pb-1">
<div *ngIf="isDraftDmp(dmp) && isUserOwner && !lockStatus"> <div *ngIf="isDraftDmp(dmp) && isUserOwner && !lockStatus">
<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)">
@ -170,7 +144,7 @@
</div> </div>
</div> </div>
<app-dmp-deposit-dropdown *ngIf="(hasDoi(dmp) || moreDeposit()) && isFinalizedDmp(dmp) && !this.isPublicView && isUserOwner" [inputRepos]="inputRepos" [dmp]="dmp" (outputReposEmitter)="afterDeposit($event)"></app-dmp-deposit-dropdown> <app-dmp-deposit-dropdown *ngIf="(hasDoi(dmp) || moreDeposit()) && isFinalizedDmp(dmp) && !this.isPublicView && isUserOwner" [inputRepos]="inputRepos" [dmp]="dmp" (outputReposEmitter)="afterDeposit($event)"></app-dmp-deposit-dropdown>
<div *ngIf="isFinalizedDmp(dmp) && hasDoi(dmp) && !isPublishedDMP(dmp) && isUserOwner" (click)="reverse()" class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center"> <div *ngIf="isFinalizedDmp(dmp) && hasDoi(dmp) && !isPublishedDMP(dmp) && isUserOwner" (click)="reverseFinalization()" 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">unarchive</mat-icon> <mat-icon class="mat-mini-fab-icon">unarchive</mat-icon>
</button> </button>
@ -190,12 +164,6 @@
<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" 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"> <mat-menu #exportMenu="matMenu" xPosition="before">
<button mat-menu-item (click)="downloadPDF(dmp.id)"> <button mat-menu-item (click)="downloadPDF(dmp.id)">
<i class="fa fa-file-pdf-o pr-2"></i> <i class="fa fa-file-pdf-o pr-2"></i>
@ -229,7 +197,7 @@
<p class="authors-label">{{ user.name }} <p class="authors-label">{{ user.name }}
<span *ngIf="isUserAuthor(user.id)">({{ 'DMP-OVERVIEW.YOU' | translate }})</span> <span *ngIf="isUserAuthor(user.id)">({{ 'DMP-OVERVIEW.YOU' | translate }})</span>
</p> </p>
<p class="authors-role">{{ roleDisplay(user) }}</p> <p class="authors-role">{{ enumUtils.toDmpUserRoleString(dmpUser.role) }}</p>
</div> </div>
</div> </div>
<button *ngIf="isUserOwner && !dmp.status && user.role" (click)="removeUserFromDmp(user)" class="remove-btn">{{ 'GENERAL.CONFIRMATION-DIALOG.ACTIONS.REMOVE' | translate}}</button> <button *ngIf="isUserOwner && !dmp.status && user.role" (click)="removeUserFromDmp(user)" class="remove-btn">{{ 'GENERAL.CONFIRMATION-DIALOG.ACTIONS.REMOVE' | translate}}</button>
@ -247,207 +215,3 @@
</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>
-->