226 lines
14 KiB
HTML
226 lines
14 KiB
HTML
<div class="main-content">
|
|
<div class="container-fluid">
|
|
<form *ngIf="formGroup" [formGroup]="formGroup" (ngSubmit)="formSubmit()">
|
|
<!-- DMP Header -->
|
|
<div [hidden]="this.step >= stepsBeforeDatasets" class="fixed-editor-header">
|
|
<div class="card editor-header">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col-auto info">
|
|
<div class="title">{{'DMP-EDITOR.TITLE.EDIT-DMP' | translate}}</div>
|
|
<div class="subtitle">{{ formGroup.get('label').value }} <span *ngIf="isDirty()" class="changes">({{'DMP-EDITOR.CHANGES' | translate}})</span></div>
|
|
</div>
|
|
<div class="ml-auto d-flex flex-row">
|
|
<button *ngIf="isDirty()" type="button" mat-raised-button class="discard-btn mr-3" (click)="discardChanges()">
|
|
{{'DMP-EDITOR.ACTIONS.DISCARD' | translate}}
|
|
</button>
|
|
<div *ngIf="isNew" mat-raised-button type="button" (click)="save()" class="save-btn">
|
|
<div>{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}</div>
|
|
</div>
|
|
<div *ngIf="!isNew && formGroup.enabled && !lockStatus">
|
|
<button *ngIf="!isFinalized" mat-raised-button type="submit" class="save-btn">
|
|
{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}
|
|
</button>
|
|
</div>
|
|
<button *ngIf="lockStatus" mat-raised-button disabled class="dataset-save-btn cursor-default" type="button">{{ 'DMP-OVERVIEW.LOCKED' | translate}}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row editor-content">
|
|
<div class="col-auto" [ngClass]="{'dmp-stepper': this.step < stepsBeforeDatasets, 'dataset-stepper': this.step >= stepsBeforeDatasets}">
|
|
<div class="stepper-title">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</div>
|
|
<div class="stepper-options" id="stepper-options">
|
|
<ol class="stepper-list">
|
|
<li (click)="changeStep(0)" *ngIf="!formGroup.get('extraProperties').get('visible').value && !mainInfoValid()" [ngClass]="{'active': this.step === 0, 'text-danger':hintErrors}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (1)</li>
|
|
<li (click)="changeStep(0)" *ngIf="!formGroup.get('extraProperties').get('visible').value && mainInfoValid()" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</li>
|
|
<li (click)="changeStep(0)" *ngIf="formGroup.get('extraProperties').get('visible').value && !mainInfoValid()" [ngClass]="{'active': this.step === 0, 'text-danger':hintErrors}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (2)</li>
|
|
<li (click)="changeStep(0)" *ngIf="formGroup.get('extraProperties').get('visible').value && mainInfoValid()" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</li>
|
|
|
|
<li (click)="changeStep(1)" *ngIf="!fundingInfoValid()" [ngClass]="{'active': this.step === 1, 'text-danger':hintErrors}">{{'DMP-EDITOR.STEPPER.FUNDING-INFO' | translate}} (2)</li>
|
|
<li (click)="changeStep(1)" *ngIf="fundingInfoValid()" [ngClass]="{'active': this.step === 1}">{{'DMP-EDITOR.STEPPER.FUNDING-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</li>
|
|
|
|
<li (click)="changeStep(2)" [ngClass]="{'active': this.step === 2}">{{'DMP-EDITOR.STEPPER.LICENSE-INFO' | translate}}</li>
|
|
|
|
<li (click)="changeStep(3)" *ngIf="!datasetInfoValid()" [ngClass]="{'active': this.step === 3, 'text-danger':hintErrors}">{{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}} (1)</li>
|
|
<li (click)="changeStep(3)" *ngIf="datasetInfoValid()" [ngClass]="{'active': this.step === 3}">{{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</li>
|
|
|
|
<!-- <li *ngFor="let dataset of datasets.controls; let i = index" (click)="changeStep(i + stepsBeforeDatasets, dataset)" [ngClass]="{'active-dataset': this.step === i + stepsBeforeDatasets}"> -->
|
|
<li *ngFor="let dataset of datasets.controls; let i = index" (click)="editDataset(dataset.get('id').value, false)" class="active-dataset">
|
|
<div class="d-flex flex-direction-row">
|
|
<div class="label" matTooltip="{{dataset.get('label').value}}">{{'DMP-EDITOR.STEPPER.DATASET' | translate}}: {{ dataset.get('label').value }}</div>
|
|
<mat-icon *ngIf="dataset.get('status').value !== 1" class="ml-2 mr-2 remove-dataset size-16" matTooltip="{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}" (click)="$event.stopPropagation(); removeDataset(dataset.get('id').value, i)">close</mat-icon>
|
|
<mat-icon *ngIf="dataset.get('status').value === 1" class="ml-2 mr-2 status-icon check-icon size-16" matTooltip="{{'TYPES.DATASET-STATUS.FINALISED' | translate}}">check</mat-icon>
|
|
</div>
|
|
</li>
|
|
</ol>
|
|
<ul *ngIf="hasProfile() && !isNew && !isFinalized" class="add-dataset-option">
|
|
<li>
|
|
<a class="add-dataset-action" [routerLink]="['/datasets/new/' + dmp.id]">
|
|
<mat-icon>add</mat-icon>{{'DMP-LISTING.ACTIONS.ADD-DATASET-SHORT' | translate}}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="stepper-actions">
|
|
<div mat-raised-button type="button" class="col-auto previous stepper-btn mr-2 ml-auto" [ngClass]="{'previous-disabled': this.step === 0}" (click)="previousStep()">
|
|
<span class="material-icons">chevron_left</span>
|
|
<div>{{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}}</div>
|
|
</div>
|
|
<div *ngIf="this.step < 3" mat-raised-button type="button" class="col-auto stepper-btn ml-auto" [ngClass]="{ 'next-disabled': this.step === this.maxStep, 'next': this.step < stepsBeforeDatasets, 'dataset-next': this.step >= stepsBeforeDatasets }" (click)="nextStep()">
|
|
<span class="material-icons">chevron_right</span>
|
|
<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
|
|
</div>
|
|
<!-- <div *ngIf="this.step >= 3 && hasProfile() && !isFinalized" mat-raised-button type="button" class="col-auto stepper-btn add-dataset-btn ml-auto" (click)="addDataset()" target="_blank"> -->
|
|
<div *ngIf="this.step >= 3 && !isFinalized" mat-raised-button type="button" class="col-auto stepper-btn add-dataset-btn ml-auto" (click)="addDataset()" target="_blank">
|
|
<!-- <mat-icon>add</mat-icon> -->
|
|
<div>{{'DMP-EDITOR.ACTIONS.SAVE' | translate}} & {{'DMP-LISTING.ACTIONS.ADD-DATASET-SHORT' | translate}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto pr-0">
|
|
<app-form-progress-indication class="col-12" *ngIf="formGroup && !formGroup.disabled && !lockStatus" [formGroup]="formGroup" [isDmpEditor]="true"></app-form-progress-indication>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto form" id="editor-form">
|
|
<main-info [hidden]="this.step !== 0" [formGroup]="formGroup" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></main-info>
|
|
<funding-info [hidden]="this.step !== 1" [formGroup]="formGroup" [grantformGroup]="formGroup.get('grant')" [projectFormGroup]="formGroup.get('project')" [funderFormGroup]="formGroup.get('funder')" [isFinalized]="isFinalized || lockStatus" [isNew]="isNew" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></funding-info>
|
|
<license-info [hidden]="this.step !== 2" [formGroup]="formGroup" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></license-info>
|
|
<dataset-info [hidden]="this.step !== 3" [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized || lockStatus" [isUserOwner]="isUserOwner" [hasDmpId]="hasDmpId" (onFormChanged)="formChanged()"></dataset-info>
|
|
|
|
<div *ngFor="let dataset of formGroup.get('datasets')['controls']; let i = index" [hidden]="this.step !== i + stepsBeforeDatasets">
|
|
<dataset-editor-details [formGroup]="dataset" [dmpId]="formGroup.get('id').value" [availableProfiles]="formGroup.get('profiles').value" (formChanged)="formChanged($event)"></dataset-editor-details>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="main-content">
|
|
<div class="container-fluid">
|
|
<div *ngIf="dmp" class="card">
|
|
<div class="card-header card-header-plain d-flex">
|
|
<div *ngIf="!isNew" class="card-desc d-flex flex-column justify-content-center">
|
|
<h4 class="card-title">{{ formGroup.get('label').value }}</h4>
|
|
</div>
|
|
<div *ngIf="isNew" class="card-desc new-dmp d-flex flex-column justify-content-center">
|
|
<h4 class="card-title">{{ 'DMP-EDITOR.TITLE.NEW' | translate }}</h4>
|
|
</div>
|
|
<div class="d-flex ml-auto p-2" *ngIf="!isNew">
|
|
<button *ngIf="!isFinalized && !lockStatus" 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">
|
|
<button mat-menu-item *ngIf="!isPublic && isUserOwner" (click)="newVersion(dmp.id, dmp.label)">
|
|
<mat-icon>queue</mat-icon>{{'DMP-LISTING.ACTIONS.NEW-VERSION' | translate}}
|
|
</button>
|
|
<button mat-menu-item *ngIf="!isPublic" (click)="viewVersions(dmp.groupId, dmp.label)">
|
|
<mat-icon>library_books</mat-icon>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}
|
|
</button>
|
|
<button mat-menu-item *ngIf="!isPublic" (click)="clone(dmp.id)" class="menu-item">
|
|
<mat-icon>add</mat-icon>{{ 'DMP-LISTING.ACTIONS.CLONE' | translate }}
|
|
</button>
|
|
<button mat-menu-item *ngIf="!isPublic && isUserOwner" (click)="delete()" class="menu-item">
|
|
<mat-icon>delete</mat-icon>{{ 'DMP-LISTING.ACTIONS.DELETE' | translate }}
|
|
</button>
|
|
</mat-menu>
|
|
|
|
<button mat-raised-button [matMenuTriggerFor]="exportMenu" color="primary" class="lightblue-btn export-btn ml-2">
|
|
{{ 'DMP-LISTING.ACTIONS.EXPORT' | translate }} <mat-icon>arrow_drop_down</mat-icon>
|
|
</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>
|
|
<form *ngIf="formGroup" (ngSubmit)="formSubmit()">
|
|
<div class="d-flex flex-column">
|
|
<mat-tab-group [(selectedIndex)]="selectedTab" class="mt-3">
|
|
<mat-tab>
|
|
<ng-template mat-tab-label>
|
|
<i class="material-icons-outlined mr-2">view_agenda</i>
|
|
{{ 'SIDE-BAR.GENERAL' | translate }}
|
|
</ng-template>
|
|
<app-general-tab [formGroup]="formGroup" [isUserOwner]="isUserOwner"></app-general-tab>
|
|
</mat-tab>
|
|
<mat-tab>
|
|
<ng-template mat-tab-label>
|
|
<mat-icon class="mr-2">work_outline</mat-icon>
|
|
{{ 'DMP-LISTING.COLUMNS.GRANT' | translate }}
|
|
</ng-template>
|
|
<app-grant-tab [grantformGroup]="formGroup.get('grant')" [projectFormGroup]="formGroup.get('project')" [funderFormGroup]="formGroup.get('funder')" [isFinalized]="isFinalized || lockStatus" [isNew]="isNew" [isUserOwner]="isUserOwner"></app-grant-tab>
|
|
</mat-tab>
|
|
<mat-tab *ngIf="!isNew">
|
|
<ng-template mat-tab-label>
|
|
<mat-icon class="mr-2">library_books</mat-icon>
|
|
{{ 'DMP-LISTING.COLUMNS.DATASETS' | translate }}
|
|
</ng-template>
|
|
<app-datasets-tab [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized || lockStatus"></app-datasets-tab>
|
|
</mat-tab>
|
|
<mat-tab *ngIf="!isNew">
|
|
<ng-template mat-tab-label>
|
|
<mat-icon class="mr-2">person</mat-icon>
|
|
{{ 'DMP-LISTING.COLUMNS.PEOPLE' | translate }}
|
|
</ng-template>
|
|
<app-people-tab [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized || lockStatus"></app-people-tab>
|
|
</mat-tab>
|
|
<mat-tab *ngIf="isNew" disabled>
|
|
<ng-template mat-tab-label></ng-template>
|
|
</mat-tab>
|
|
<mat-tab *ngIf="isNew" disabled>
|
|
<ng-template mat-tab-label></ng-template>
|
|
</mat-tab>
|
|
</mat-tab-group>
|
|
|
|
<div class="d-flex justify-content-end pt-2 pb-4 pl-2">
|
|
<mat-icon *ngIf="lockStatus || !isUserOwner" color="accent" class="align-self-center mr-1">info_outlined</mat-icon>
|
|
<div *ngIf="lockStatus" class="align-self-center mr-3">{{'DMP-EDITOR.ACTIONS.LOCK' | translate}}</div>
|
|
<div *ngIf="!isUserOwner" class="align-self-center mr-3">{{'DMP-EDITOR.ACTIONS.PERMISSION' | translate}}</div>
|
|
<div *ngIf="isNew || lockStatus || !isUserOwner">
|
|
<button mat-raised-button color="primary" (click)="cancel()" type="button" class="text-uppercase mr-2">
|
|
{{'DMP-EDITOR.ACTIONS.CANCEL' | translate}}
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<button *ngIf="isNew" mat-raised-button type="button" (click)="addDataset()" class="text-uppercase dark-theme mr-2" color="primary">
|
|
{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="!isNew" class="d-flex justify-content-end pt-2 pb-4 pl-2">
|
|
<button mat-raised-button color="primary" (click)="cancel(dmp.id)" type="button" class="text-uppercase mr-2">
|
|
{{'DMP-EDITOR.ACTIONS.CANCEL' | translate}}
|
|
</button>
|
|
|
|
<div *ngIf="formGroup.enabled && !lockStatus">
|
|
<button *ngIf="!isFinalized" mat-raised-button type="submit" class="text-uppercase dark-theme mr-2" color="primary">
|
|
{{'DMP-EDITOR.ACTIONS.SAVE-CHANGES' | translate}}
|
|
</button>
|
|
</div>
|
|
<div *ngIf="formGroup.enabled && !isFinalized && !lockStatus">
|
|
<button type="button" mat-raised-button color="primary" class="text-uppercase mr-2" (click)="saveAndFinalize()">{{'DMP-EDITOR.ACTIONS.FINALISE' | translate}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div> -->
|