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

259 lines
14 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-OVERVIEW.ACTIONS.BACK' | translate}}</p>
</a>
<div class="row">
<div class="col-12 col-lg-8 pl-2">
<div class="row">
<div class="col-auto"><span class="dmp-logo">{{ 'DMP-OVERVIEW.TITLE' | translate }}</span></div>
<div class="col-auto d-flex"><span class="dmp-label">{{ dmp.label }}</span></div>
</div>
<div class="row align-items-center mt-3 mb-4 label-txt">
<div *ngIf="isUserDmpRelated()" class="col-auto d-flex">
<p class="ml-0 mb-0 label2-txt">{{ enumUtils.toDmpUserRolesString(dmpService.getCurrentUserRolesInDmp(dmp?.dmpUsers)) }}
</div>
<div *ngIf="isUserDmpRelated() && (isPublishedDmp() || isLocked)" class="col-auto"><span>.</span></div>
<div *ngIf="isPublishedDmp()" class="col-auto d-flex flex-row">
<mat-icon class="status-icon">public</mat-icon>
{{'DMP-OVERVIEW.PUBLIC' | translate}}
</div>
<div *ngIf="isPublishedDmp() && isLocked" class="col-auto"><span>.</span></div>
<div *ngIf="isLocked" class="col-auto d-flex flex-row">
<mat-icon class="status-icon">lock_outline</mat-icon>
{{'DMP-OVERVIEW.LOCKED' | translate}}
</div>
<div class="col-auto">
<mat-form-field appearance="outline" subscriptSizing="dynamic" class="dense-3 versions-select">
<mat-select placeholder="{{'DMP-OVERVIEW.VERSION' | translate}} {{dmp.version}}" [(ngModel)]="version" (ngModelChange)="versionChanged(version.id)">
<mat-option *ngFor="let version of pastVersions" [value]="version">
{{'DMP-OVERVIEW.VERSION' | translate}} {{version.version}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="col-auto d-flex">{{'DMP-OVERVIEW.EDITED' | translate}} :
{{dmp.updatedAt | dateTimeCultureFormatter: "d MMMM y"}}
</div>
<div class="col-auto d-flex">
<div *ngIf="dmp.status== dmpStatusEnum.Finalized" class="d-flex flex-row uppercase">
<mat-icon class="status-icon">check</mat-icon>
{{'DMP-OVERVIEW.FINALISED' | translate}}
</div>
</div>
</div>
<div class="row" *ngIf="(canEditDmp() && !isLocked) || canCloneDmp() || (canDeleteDmp() && !isLocked)">
<!-- <button *ngIf="isDraftDmp(dmp) && isDmpOwner(dmp) && !isLocked" (click)="editClicked(dmp)" mat-mini-fab class="mr-3 d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.EDIT' | translate}}" matTooltipPosition="above"> -->
<div *ngIf="canEditDmp() && !isLocked" class="col-auto pr-0">
<button (click)="editClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.EDIT' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-mini-fab-icon">create</mat-icon>
</button>
</div>
<div *ngIf="canCloneDmp()" class="col-auto pr-0">
<button (click)="cloneClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.CLONE' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
</button>
</div>
<div *ngIf="canDeleteDmp() && !isLocked" class="col-auto pr-0">
<button (click)="deleteClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.DELETE' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-mini-fab-icon">delete</mat-icon>
</button>
</div>
</div>
<ng-container *ngIf="referenceService.hasRerefenceOfTypes(dmp?.dmpReferences, [this.referenceTypeService.getGrantReferenceType()])">
<div class="row header"><div class="col-auto">{{'DMP-OVERVIEW.GRANT' | translate}}</div></div>
<div class="row dmp-label"><div class="col-auto">{{referenceService.getReferencesForTypesFirstSafe(dmp?.dmpReferences, [this.referenceTypeService.getGrantReferenceType()])?.reference?.label}}</div></div>
</ng-container>
<div class="row header"><div class="col-auto">{{'DESCRIPTION-OVERVIEW.RESEARCHERS' | translate}}</div></div>
<div class="row">
<div class="col-12">
<ng-container *ngFor="let dmpReference of researchers let last = last">
<ng-container *ngIf="isOrcid(dmpReference.reference)">
<div class="d-inline-block">
<a href="{{ getOrcidPathForResearcher(dmpReference.reference?.reference) }}" target="blank" class="researcher">
<span class="id-btn">&nbsp;</span>
<span *ngIf="!last">{{ dmpReference.reference?.label }},</span><span>&nbsp;</span>
<span *ngIf="last">{{ dmpReference.reference?.label }}</span>
</a>
</div>
</ng-container>
<ng-container *ngIf="!isOrcid(dmpReference.reference)" class="col-auto pr-0">
<div class="d-inline-block">
<span *ngIf="!last">{{ dmpReference.reference?.label }},</span><span>&nbsp;</span>
<span *ngIf="last">{{ dmpReference.reference?.label }}</span>
</div>
</ng-container>
</ng-container>
</div>
<div *ngIf="!researchers || researchers.length === 0" class="col-12"><span class="material-icons">horizontal_rule</span></div>
</div>
<div class="row header"><div class="col-12">{{'DMP-OVERVIEW.DESCRIPTION' | translate}}</div></div>
<div class="row" *ngIf="dmp.description">
<div class="col-12">
<p class="desc-txt" [innerHTML]="dmp.description"></p>
</div>
</div>
<div class="row" *ngIf="!dmp.description">
<div class="col-12">
<span class="material-icons">horizontal_rule</span>
</div>
</div>
<div class="row header"><div class="col-12">{{'DMP-OVERVIEW.DESCRIPTIONS' | translate}}</div></div>
<div class="row mb-4">
<ng-container *ngFor="let description of dmp.descriptions">
<div class="col-12 col-lg-7 mt-1">
<a class="w-100 description" [routerLink]="isPublicView ? ['/descriptions/overview/public/' + description.id] : ['/descriptions/overview/' + description.id]" target="_blank">
<button class="w-100" [ngClass]="{'dmp-btn': description.status === descriptionStatusEnum.Draft, 'dmp-finalized-btn': description.status === descriptionStatusEnum.Finalized}">
<div matTooltip="{{ description.label }}" class="d-flex align-items-center justify-content-between">
<div class="description-btn-label">{{ description.label }}</div>
<mat-icon>launch</mat-icon>
</div>
</button>
</a>
</div>
</ng-container>
<div class="col-12" *ngIf="!dmp.descriptions || dmp.descriptions.length === 0">
<span class="material-icons">horizontal_rule</span>
</div>
</div>
<!-- <div class="row mt-2 add-description-txt" *ngIf="!isLocked">
<a class="add-description-btn" *ngIf="canEditDmp()" [routerLink]="['/plans/edit/' + dmp.id]" target="_blank">
<mat-icon>add</mat-icon>
{{'DMP-OVERVIEW.ACTIONS.ADD-DESCRIPTION' | translate}}
</a>
</div> -->
</div>
<div class="col-12 col-lg-4">
<ng-container *ngIf="!hasDoi(dmp)">
<div class="row mb-3">
<div class="col-auto"><span>{{'DMP-OVERVIEW.DOI-PROVIDED' | translate}}: </span></div>
<ng-container *ngIf="selectedModel">
<div class="col">
<mat-select class="select-repo" [placeholder]="selectedModel.repositoryId">
<mat-option *ngFor="let entityDoi of dmp.entityDois" (click)="selectDoi(entityDoi)">
{{entityDoi.repositoryId}}
</mat-option>
</mat-select>
</div>
</ng-container>
</div>
<div class="row align-items-center">
<div class="col-12">
<ng-container *ngIf="dmp.entityDois && selectedModel">
<div class="container">
<div class="row doi-panel mb-3 pt-4 pb-3">
<div class="col d-flex align-items-center">
<span class="text-truncate">{{selectedModel.doi}}</span>
</div>
<div class="col-auto d-flex">
<button (click)="copyDoi(selectedModel.doi)" mat-mini-fab class="mr-2 d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.COPY' | translate}}" matTooltipPosition="above">
<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
</button>
<button *ngIf="depositRepos?.length > 0" mat-mini-fab class="mr-2 d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.VISIT-WEBSITE' | translate}}" matTooltipPosition="above">
<a [href]="createDoiLink(selectedModel)" class="doi-link" target="_blank">
<mat-icon class="mat-mini-fab-icon">launch</mat-icon>
</a>
</button>
</div>
</div>
</div>
</ng-container>
</div>
</div>
</ng-container>
<ng-container *ngIf="isAuthenticated()">
<div class="row">
<div class="col-12">
<div class="frame mb-3 pt-4 pl-4 pr-5 pb-3">
<div class="row">
<ng-container *ngIf="isDraftDmp() && canFinalizeDmp() && !isLocked">
<div class="col-12 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-OVERVIEW.ACTIONS.FINALIZE' | translate }}</p>
</div>
<div class="col-12 d-flex align-items-center">
<hr class="hr-line">
</div>
</ng-container>
<app-dmp-deposit-dropdown *ngIf="(hasDoi(dmp) || moreDeposit()) && isFinalizedDmp(dmp) && !this.isPublicView && canDepositDmp(dmp) && inputRepos.length > 0" [inputRepos]="inputRepos" [dmp]="dmp" (outputReposEmitter)="afterDeposit($event)"></app-dmp-deposit-dropdown>
<ng-container *ngIf="isFinalizedDmp(dmp) && hasDoi(dmp) && !isPublishedDmp(dmp) && canFinalizeDmp(dmp)" (click)="reverseFinalization()">
<div class="col-12 mb-1 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-OVERVIEW.ACTIONS.REVERSE' | translate }}</p>
</div>
</ng-container>
<ng-container *ngIf="canExportDmp() && fileTransformerService.availableFormats.length > 0">
<div class="col-12 mb-1 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-OVERVIEW.ACTIONS.EXPORT' | translate }}</p>
</div>
</ng-container>
<ng-container *ngIf="canCreateNewVersion()">
<div class="col-12 d-flex align-items-center" (click)="newVersionClicked()">
<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-OVERVIEW.ACTIONS.NEW-VERSION' | translate }}</p>
</div>
</ng-container>
<mat-menu #exportMenu="matMenu" xPosition="before">
<button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormats' (click)="fileTransformerService.exportDmp(dmp.id, fileTransformer.repositoryId, fileTransformer.format)">
<i class="fa pr-2" [ngClass]="fileTransformer.icon ? fileTransformer.icon : 'fa-file-o'"></i>
<span>{{'GENERAL.FILE-TRANSFORMER.' + fileTransformer?.format?.toUpperCase() | translate}}</span>
</button>
</mat-menu>
</div>
</div>
</div>
</div>
</ng-container>
<div class="row">
<div class="col-12">
<div class="frame mb-3 pt-4 pl-4 pr-5 pb-3">
<div class="row">
<div class="col-12">
<p class="header">{{ 'DMP-OVERVIEW.DMP-AUTHORS' | translate }}</p>
</div>
<div class="col-12">
<div *ngFor="let dmpUser of dmp.dmpUsers" class="row authors">
<div class="col-12 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">{{ dmpUser.user?.name }}
<span *ngIf="isUserAuthor(dmpUser.user?.id)">
({{ 'DMP-OVERVIEW.YOU' | translate }})</span>
</p>
<p class="authors-role">{{ enumUtils.toDmpUserRoleString(dmpUser.role) }}</p>
</div>
</div>
<div *ngIf="canAssignDmpUsers(dmp) && dmp.status === dmpStatusEnum.Draft && dmpUser.role != dmpUserRoleEnum.Owner" class="col-12">
<button (click)="removeUserFromDmp(dmpUser)" class="remove-btn">{{ 'DMP-OVERVIEW.ACTIONS.REMOVE-AUTHOR' | translate}}</button>
</div>
</div>
</div>
<!-- <div *ngIf="canInviteDmpUsers()" class="col-12 d-flex align-items-center justify-content-center"> -->
<div *ngIf="canInviteDmpUsers()" class="col-12 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-OVERVIEW.ACTIONS.INVITE-SHORT' | translate}}
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>