Merge remote-tracking branch 'origin/ui-redesign' into ui-redesign

This commit is contained in:
George Kalampokis 2020-09-16 18:37:40 +03:00
commit 61d8661309
22 changed files with 1282 additions and 298 deletions

View File

@ -1,4 +1,75 @@
<div class="container-fluid"> <form class="dataset-editor" *ngIf="formGroup" [formGroup]="formGroup">
<div class="col-12 intro">
{{'DATASET-EDITOR.TITLE.INTRO' | translate}}
</div>
<div class="col-12 card">
<!-- Title Field -->
<div class="row">
<div class="col-12">
<div class="heading">1.1 {{'DATASET-EDITOR.FIELDS.TITLE' | translate}}*</div>
<span class="hint">{{'DATASET-EDITOR.HINT.TITLE' | translate}}</span>
<a class="dmp-link dmp-tour-{{ formGroup.get('id').value + 1 }}" (click)="restartTour(formGroup.get('id').value + 1)">{{'DATASET-EDITOR.FIELDS.DMP' | translate}}</a>
<span class="hint">{{'DATASET-EDITOR.HINT.TITLE-REST' | translate}}</span>
<div class="title-form">
<mat-form-field>
<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.TITLE' | translate}}" type="text" name="label" formControlName="label" required>
<mat-error *ngIf="formGroup.get('label').hasError('backendError')"> {{formGroup.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
</div>
<!-- Description field -->
<div class="row">
<div class="col-12">
<div class="heading">1.2 {{'DATASET-EDITOR.FIELDS.DESCRIPTION' | translate}}</div>
<span class="hint">{{'DATASET-EDITOR.HINT.TITLE' | translate}}</span>
<a class="dmp-link dmp-tour-{{ formGroup.get('id').value + 2 }}" (click)="restartTour(formGroup.get('id').value + 2)">{{'DATASET-EDITOR.FIELDS.DMP' | translate}}</a>
<span class="hint">{{'DATASET-EDITOR.HINT.TITLE-REST' | translate}}</span>
<div class="description-form">
<mat-form-field>
<textarea rows="3" matInput class="description-area" placeholder="{{'DMP-EDITOR.PLACEHOLDER.DESCRIPTION' | translate}}" formControlName="description"></textarea>
<mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{formGroup.get('description').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
</div>
<!-- Uri field -->
<div class="row">
<div class="col-12">
<div class="heading">1.3 {{'DATASET-EDITOR.FIELDS.EXTERNAL-LINK' | translate}}</div>
<span class="hint">{{'DATASET-EDITOR.HINT.TITLE' | translate}}</span><a class="dmp-link" target="_blank" [routerLink]="['/overview/' + dmpId]">{{'DATASET-EDITOR.FIELDS.DMP' | translate}}</a><span class="hint">{{'DATASET-EDITOR.HINT.TITLE-REST' | translate}}</span>
<div class="uri-form">
<mat-form-field>
<input matInput placeholder="{{'DATASET-EDITOR.PLACEHOLDER.EXTERNAL-LINK' | translate}}" type="text" name="uri" formControlName="uri">
<mat-error *ngIf="formGroup.get('uri').hasError('backendError')">{{formGroup.get('uri').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('uri').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
</div>
<!-- External Fields -->
<app-dataset-external-references-editor-component (formChanged)="onFormChanged($event)" [formGroup]="formGroup" [viewOnly]="viewOnly"></app-dataset-external-references-editor-component>
<!-- Template Field -->
<div class="heading">1.5 {{'DATASET-EDITOR.FIELDS.PROFILE' | translate}}*</div>
<div class="profile-form">
<mat-form-field>
<mat-select placeholder="{{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}" [required]="true" [compareWith]="compareWith" [formControl]="formGroup.get('profile')">
<mat-option *ngFor="let profile of availableProfiles" [value]="profile">
{{profile.label}}
</mat-option>
</mat-select>
<mat-error *ngIf="formGroup.get('profile').hasError('backendError')">{{formGroup.get('profile').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
</div>
</form>
<!-- <div class="container-fluid">
<div class="row dataset-editor" [formGroup]="formGroup"> <div class="row dataset-editor" [formGroup]="formGroup">
<div class="col-12"> <div class="col-12">
<div class="row"> <div class="row">
@ -24,4 +95,4 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->

View File

@ -1 +1,117 @@
.dataset-editor {} .dataset-editor {
.intro {
text-align: left;
font-weight: 400;
letter-spacing: 0px;
color: #212121;
opacity: 1;
margin: 3rem 0rem 3rem 0rem;
}
.heading {
text-align: left;
font-weight: 700;
font-size: 18px;
letter-spacing: 0px;
color: #212121;
opacity: 0.81;
margin-top: 1.625rem;
margin-bottom: 0.625rem;
}
.hint {
text-align: left;
font-weight: 400;
font-size: 16px;
letter-spacing: 0px;
color: #212121;
opacity: 0.81;
margin-bottom: 2.125rem;
}
.title-form,
.description-form,
.profile-form {
text-align: left;
font-weight: 400;
font-size: 16px;
letter-spacing: 0.15px;
color: #7d7d7d;
opacity: 1;
margin-bottom: 1rem;
}
// textarea::placeholder {
// font-style: oblique;
// }
.input-btn {
border: none;
color: #aaaaaa;
background-color: #ffffff00;
cursor: pointer;
}
.input-btn :hover {
color: #00b29f !important;
}
.dmp-link {
color: #3fafac;
font-weight: 400;
font-size: 16px;
cursor: pointer;
}
.dmp-link:hover {
text-decoration: underline;
}
}
::ng-deep .title-form .mat-form-field-appearance-outline .mat-form-field-outline {
background: #fafafa !important;
}
::ng-deep .description-form .mat-form-field-appearance-outline .mat-form-field-outline {
background: #fafafa !important;
}
::ng-deep .uri-form .mat-form-field-appearance-outline .mat-form-field-outline {
background: #fafafa !important;
}
::ng-deep .tags-form .mat-form-field-appearance-outline .mat-form-field-outline {
background: #fafafa !important;
}
::ng-deep .profile-form .mat-form-field-appearance-outline .mat-form-field-outline {
background: #fafafa !important;
}
::ng-deep .title-form .mat-form-field-appearance-outline .mat-form-field-infix {
font-size: 1rem;
padding: 0.6em 0 1em 0 !important;
}
::ng-deep .description-form .mat-form-field-appearance-outline .mat-form-field-infix {
// font-size: 1rem;
padding: 0.6em 0 1em 0 !important;
}
::ng-deep .uri-form .mat-form-field-appearance-outline .mat-form-field-infix {
font-size: 1rem;
padding: 0.6em 0 1em 0 !important;
}
::ng-deep .tags-form .mat-form-field-appearance-outline .mat-form-field-infix {
font-size: 1rem;
padding: 0.6em 0 1em 0 !important;
}
::ng-deep .profile-form .mat-form-field-appearance-outline .mat-form-field-infix {
font-size: 1rem;
padding: 0.6em 0 1em 0 !important;
}

View File

@ -1,7 +1,11 @@
import { Component, Input } from '@angular/core'; import { Component, Input, Output, EventEmitter } from '@angular/core';
import { FormGroup } from '@angular/forms'; import { FormGroup } from '@angular/forms';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { BaseComponent } from '@common/base/base.component'; import { BaseComponent } from '@common/base/base.component';
import { GuidedTourService } from '@app/library/guided-tour/guided-tour.service';
import { GuidedTour, Orientation } from '@app/library/guided-tour/guided-tour.constants';
import { TranslateService } from '@ngx-translate/core';
import { DatasetProfileModel } from '@app/core/model/dataset/dataset-profile';
@Component({ @Component({
selector: 'app-dataset-editor-component', selector: 'app-dataset-editor-component',
@ -11,14 +15,63 @@ import { BaseComponent } from '@common/base/base.component';
export class DatasetEditorComponent extends BaseComponent { export class DatasetEditorComponent extends BaseComponent {
@Input() formGroup: FormGroup = null; @Input() formGroup: FormGroup = null;
@Input() availableProfiles: DatasetProfileModel[];
@Input() dmpId: string;
@Output() formChanged: EventEmitter<any> = new EventEmitter();
showUri: boolean = false; showUri: boolean = false;
dmpText: string;
viewOnly = false;
constructor( constructor(
private router: Router, private router: Router,
private guidedTourService: GuidedTourService,
private language: TranslateService
) { super(); } ) { super(); }
public dashboardTourDmp: GuidedTour = {
tourId: 'only-dmp-tour',
useOrb: true,
steps: [
{
title: this.dmpText,
content: 'Step 1',
orientation: Orientation.Bottom,
highlightPadding: 3,
isStepUnique: true,
customTopOffset: 8
}
]
};
getDmpText(): string {
return this.language.instant('DMP-LISTING.TEXT-INFO') + '\n\n' +
this.language.instant('DMP-LISTING.TEXT-INFO-QUESTION') + ' ' +
this.language.instant('DMP-LISTING.LINK-ZENODO') + ' ' +
this.language.instant('DMP-LISTING.GET-IDEA');
}
setDashboardTourDmp(label: string): void {
this.dashboardTourDmp.steps[0].title = this.getDmpText();
this.dashboardTourDmp.steps[0].selector = '.dmp-tour-' + label;
}
public restartTour(label: string): void {
this.setDashboardTourDmp(label);
// console.log(this.dashboardTourDmp.steps[0].selector);
this.guidedTourService.startTour(this.dashboardTourDmp);
}
public cancel(): void { public cancel(): void {
this.router.navigate(['/datasets']); this.router.navigate(['/datasets']);
} }
public compareWith(object1: any, object2: any) {
return object1 && object2 && object1.id === object2.id;
}
onFormChanged(event) {
this.formChanged.emit(event);
}
} }

View File

@ -1,4 +1,88 @@
<div class="main-content"> <div class="main-content">
<div class="container-fluid dataset-wizard">
<form *ngIf="formGroup" [formGroup]="formGroup">
<!-- <form *ngIf="formGroup" [formGroup]="formGroup" (ngSubmit)="formSubmit()"> -->
<!-- Dataset Header -->
<div class="fixed-editor-header">
<div class="card dataset-editor-header">
<div class="col">
<div class="row">
<div class="col info">
<div class="dataset-title">{{'DMP-EDITOR.TITLE.ADD-DATASET' | translate}}</div>
<div class="dataset-subtitle">{{ formGroup.get('label').value }} <span *ngIf="isDirty()" class="dataset-changes">({{'DMP-EDITOR.CHANGES' | translate}})</span></div>
<div class="d-flex flex-direction-row dmp-info">
<div class="col-auto dataset-to-dmp">{{'DATASET-LISTING.TOOLTIP.TO-DMP' | translate}}</div>
<div class="col-auto dmp-title p-0">:&nbsp;{{ formGroup.get('dmp').value.label }}</div>
<div class="col-auto d-flex align-items-center">
<a [routerLink]="['/overview/' + formGroup.get('dmp').value.id]" target="_blank" class="pointer open-in-new-icon">
<mat-icon class="size-18">open_in_new</mat-icon>
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-auto d-flex align-items-center p-0">
<button *ngIf="isDirty()" type="button" mat-raised-button class="dataset-discard-btn" (click)="discardChanges()">
{{'DMP-EDITOR.ACTIONS.DISCARD' | translate}}
</button>
</div>
<div class="col-auto d-flex align-items-center">
<button *ngIf="!lockStatus" mat-raised-button class="dataset-save-btn mr-2" type="submit">{{ 'DATASET-WIZARD.ACTIONS.SAVE' | translate }}</button>
<button *ngIf="!lockStatus" mat-raised-button class="dataset-save-btn mr-2" type="submit">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-ADD' | translate }}</button>
<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>
<div class="row editor-content">
<div class="col-auto dataset-stepper">
<div class="stepper-back d-flex flex-direction-row">
<div class="d-flex align-items-center pr-2 back-to-dmp" (click)="backToDmp(formGroup.get('dmp').value.id)">
<mat-icon class="back-icon pointer">chevron_left</mat-icon>
<span class="pointer">{{'DATASET-WIZARD.ACTIONS.BACK-TO' | translate}}</span>
</div>
<div class="col-auto dmp-label ml-3">{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}</div>
</div>
<div class="stepper-title">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</div>
<div class="stepper-options">
<div class="col stepper-list">
<div (click)="changeStep(0)" class="main-info" [ngClass]="{'active': this.step === 0}">0. {{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (5)</div>
<div class="row toc-pane-container" #boundary (click)="changeStep(1)">
<div #spacer></div>
<table-of-contents class="toc-pane-container" [boundary]="boundary" [spacer]="spacer" [isActive]="step !== 0" stickyThing (stepFound)="onStepFound($event)"></table-of-contents>
</div>
</div>
</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 < 1" mat-raised-button type="button" class="col-auto stepper-btn dataset-next ml-auto" (click)="nextStep()">
<span class="material-icons">chevron_right</span>
<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
</div>
<div *ngIf="this.step === 1" mat-raised-button type="button" class="col-auto add-dataset-option ml-auto">
<a class="add-dataset-btn stepper-btn" (click)="addDataset()" target="_blank">
<mat-icon>add</mat-icon>{{'DMP-LISTING.ACTIONS.ADD-DATASET-SHORT' | translate}}
</a>
</div>
</div>
</div>
<div class="col-auto form">
<app-dataset-description-form [hidden]="this.step === 0" *ngIf="formGroup && datasetWizardModel && datasetWizardModel.datasetProfileDefinition" [form]="this.formGroup.get('datasetProfileDefinition')" [visibilityRules]="datasetWizardModel.datasetProfileDefinition.rules" [datasetProfileId]="formGroup.get('profile').value" [linkToScroll]="linkToScroll"></app-dataset-description-form>
<app-dataset-editor-component [hidden]="this.step !== 0" [formGroup]="formGroup" [dmpId]="formGroup.get('dmp').value.id" [availableProfiles]="formGroup.get('dmp').value.profiles"></app-dataset-editor-component>
</div>
</div>
</form>
</div>
</div>
<!-- <div class="main-content">
<div class="container-fluid"> <div class="container-fluid">
<div class="card dataset-wizard"> <div class="card dataset-wizard">
<div class="row card-header card-header-plain d-flex"> <div class="row card-header card-header-plain d-flex">
@ -65,7 +149,6 @@
</mat-form-field> </mat-form-field>
<mat-form-field class="col-md-6"> <mat-form-field class="col-md-6">
<mat-select placeholder=" {{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}" [required]="true" formControlName="profile"> <mat-select placeholder=" {{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}" [required]="true" formControlName="profile">
<!-- <mat-option *ngFor="let profile of availableProfiles" [value]="profile.id"> -->
<mat-option *ngFor="let profile of availableProfiles" [value]="profile"> <mat-option *ngFor="let profile of availableProfiles" [value]="profile">
{{profile.label}} {{profile.label}}
</mat-option> </mat-option>
@ -123,4 +206,4 @@
</form> </form>
</div> </div>
</div> </div>
</div> </div> -->

View File

@ -1,155 +1,513 @@
@media (max-width: 768px) { .main-content {
.main-content { height: 100vh !important;
padding: 30px 0px;
}
::ng-deep .mat-expansion-panel-header {
min-height: 48px;
height: auto !important;
}
::ng-deep .mat-expansion-panel-body {
padding: 0 0px 16px !important;
}
::ng-deep .mat-vertical-content {
padding: 0 14px 24px 14px !important;
}
} }
.dataset-wizard { .dataset-wizard {
.toc-pane-container { .toc-pane-container {
&.is-sticky~.nav-spacer { &.is-sticky ~ .nav-spacer {
height: 500px; // the container size } height: 500px; // the container size }
// height: calc(100vh - 100px); // the container size } // height: calc(100vh - 100px); // the container size }
} }
} }
.step-container { .step-container {
margin-top: 1em; margin-top: 1em;
} }
.external-item-card { .external-item-card {
margin-top: 1em; margin-top: 1em;
} }
.external-item-action-row, .external-item-action-row,
.description-action-row { .description-action-row {
margin-top: 1em; margin-top: 1em;
} }
.deleteButton, .deleteButton,
.reverseButton { .reverseButton {
margin-top: 15px; margin-top: 15px;
margin-bottom: 15px; margin-bottom: 15px;
margin-right: 15px; margin-right: 15px;
text-transform: uppercase; text-transform: uppercase;
} }
.cancelButton { .cancelButton {
margin-top: 15px; margin-top: 15px;
margin-bottom: 15px; margin-bottom: 15px;
margin-right: 15px; margin-right: 15px;
text-transform: uppercase; text-transform: uppercase;
} }
.saveButton { .saveButton {
margin-top: 15px; margin-top: 15px;
margin-bottom: 15px; margin-bottom: 15px;
margin-right: 15px; margin-right: 15px;
text-transform: uppercase; text-transform: uppercase;
} }
.saveAndFinalizeButton { .saveAndFinalizeButton {
margin-top: 15px; margin-top: 15px;
margin-bottom: 15px; margin-bottom: 15px;
margin-right: 15px; margin-right: 15px;
} }
.finalizeButton { .finalizeButton {
margin-top: 15px; margin-top: 15px;
margin-bottom: 15px; margin-bottom: 15px;
margin-right: 15px; margin-right: 15px;
text-transform: uppercase; text-transform: uppercase;
} }
.export-btn { .export-btn {
padding-right: 6px; padding-right: 6px;
} }
.downloadPDF { .downloadPDF {
margin-top: 15px; margin-top: 15px;
margin-bottom: 15px; margin-bottom: 15px;
margin-right: 15px; margin-right: 15px;
} }
.downloadXML { .downloadXML {
margin-top: 15px; margin-top: 15px;
margin-bottom: 15px; margin-bottom: 15px;
margin-right: 15px; margin-right: 15px;
} }
.downloadDOCX { .downloadDOCX {
margin-top: 15px; margin-top: 15px;
margin-bottom: 15px; margin-bottom: 15px;
margin-right: 15px; margin-right: 15px;
} }
.updateDatasetProfile { .updateDatasetProfile {
margin-top: 15px; margin-top: 15px;
margin-bottom: 15px; margin-bottom: 15px;
margin-right: 15px; margin-right: 15px;
} }
.actions { .actions {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
// .actions > button { // .actions > button {
// background-color: #0070c0; // background-color: #0070c0;
// color: #ffffff; // color: #ffffff;
// text-transform: uppercase; // text-transform: uppercase;
// } // }
.more-horiz { .more-horiz {
font-size: 28px; font-size: 28px;
color: #aaaaaa; color: #aaaaaa;
} }
.more-icon :hover { .more-icon :hover {
color: #00b29f; color: #00b29f;
} }
.new-dataset { .new-dataset {
height: 3.5em; height: 3.5em;
} }
.fixed-editor-header {
// position: fixed;
// width: calc(100% - 310px);
z-index: 3;
background-color: whitesmoke;
}
.dataset-editor-header {
height: 113px;
background: var(--unnamed-color-129d99) 0% 0% no-repeat padding-box;
background: #f7dd72 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #00000029;
padding: 0.6rem;
margin: 30px 0px 0px 0px;
border-radius: 4px;
opacity: 1;
.info {
flex: 2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.dataset-title {
text-align: left;
letter-spacing: 0px;
color: #212121;
opacity: 0.9;
font-size: 14px;
font-weight: 400;
}
.subtitle {
text-align: left;
color: #ffffff;
font-weight: 700;
font-size: 16px;
opacity: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dataset-subtitle {
text-align: left;
letter-spacing: 0px;
color: #212121;
font-weight: 700;
font-size: 16px;
opacity: 0.9;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.discard-btn {
background: transparent;
border: 1px solid #ffffff;
color: white;
border-radius: 30px;
opacity: 1;
width: 110px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.save-btn {
background: #ffffff 0% 0% no-repeat padding-box;
border-radius: 30px;
opacity: 1;
width: auto;
min-width: 110px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
color: #129d99;
cursor: pointer;
}
.dataset-discard-btn {
border: 1px solid #212121;
border-radius: 30px;
opacity: 1;
background-color: transparent;
font-weight: 700;
width: 110px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.dataset-save-btn {
background: #ffffff 0% 0% no-repeat padding-box;
border-radius: 30px;
opacity: 1;
width: auto;
min-width: 110px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.dataset-to-dmp {
display: flex;
align-items: center;
padding: 0;
text-align: left;
font-size: 1rem;
font-weight: 700;
color: #129d99;
line-height: 25px;
}
.dmp-info {
padding-top: 0.75rem;
}
.dmp-label {
width: 67px;
height: 37px;
background: #129d99 0% 0% no-repeat padding-box;
color: white;
border-radius: 4px;
opacity: 1;
display: flex;
align-items: center;
justify-content: center;
}
.dmp-title {
text-align: left;
font-weight: 700;
font-family: "Roboto", sans-serif;
font-size: 1rem;
color: #212121;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 25px;
}
.open-in-new-icon {
color: #434343;
opacity: 0.75;
}
.open-in-new-icon:hover {
color: #129d99;
}
.dataset-stepper {
position: fixed;
// height: 100%;
display: flex;
flex-direction: column;
height: calc(100vh - 246px);
}
.stepper-options {
height: calc(100vh - 520px);
overflow-y: auto;
.main-info {
padding-left: .2rem;
color: #21212194;
font-weight: 400;
cursor: pointer;
}
.main-info:hover {
background-color: #ececec;
border-radius: 6px;
}
}
.stepper-back {
margin-top: 3.125rem;
padding-left: 0.5rem;
font-size: 0.875rem;
letter-spacing: 0px;
color: #848484;
opacity: 1;
}
.stepper-title {
text-align: left;
font-weight: 300;
font-size: 20px;
letter-spacing: 0px;
color: #212121;
opacity: 0.6;
margin: 2.875rem 0rem 2.25rem 0rem;
padding-left: 1rem;
}
.stepper-list {
.toc-pane-container {
span {
text-align: left;
font-weight: 400;
letter-spacing: 0px;
color: #212121;
padding: 0.3rem 0.1rem;
opacity: 0.6;
cursor: pointer;
max-width: 290px;
}
}
}
.stepper-list span:hover {
background-color: #ececec;
border-radius: 6px;
}
.stepper-list .active {
color: #212121;
font-weight: 700;
opacity: 1;
}
.stepper-list .active-dataset {
color: #212121;
font-weight: 700;
opacity: 1;
.label {
width: 100%;
height: 27px;
line-height: 27px;
background-color: #f7dd72;
color: #5d5d5d;
border-radius: 4px;
font-weight: 400;
font-size: 14px;
justify-content: left;
display: flex;
align-items: center;
padding-left: 0.625rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
}
.back-to-dmp:hover {
background: #ececec;
border-radius: 6px;
}
.back-icon {
display: inline-flex;
vertical-align: middle;
}
.editor-content {
.form {
// position: relative;
// left: 362px;
// width: calc(100% - 366px);
position: relative;
left: 362px;
width: calc(100% - 366px);
overflow-y: auto;
height: calc(100vh - 218px);
}
}
form {
height: calc(100vh - 124px);
}
.stepper-actions {
display: flex;
padding-left: 1rem;
margin-top: auto;
margin-bottom: 0.5rem;
// margin-top: 5rem;
// flex-grow: 8;
}
.stepper-btn {
border-radius: 30px;
opacity: 1;
width: 154px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
}
.previous {
color: #212121;
background: #f5f5f5 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #1e202029;
border: 2px solid #212121;
font-weight: 500;
cursor: pointer;
}
.add-dataset-btn {
color: #212121;
background: #f7dd72 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #1e202029;
font-weight: 500;
cursor: pointer;
}
.next {
background: #129d99 0% 0% no-repeat padding-box;
color: white;
box-shadow: 0px 3px 6px #1e202029;
font-weight: 400;
cursor: pointer;
}
.dataset-next {
background: #f7dd72 0% 0% no-repeat padding-box;
color: #212121;
box-shadow: 0px 3px 6px #1e202029;
font-weight: 700;
cursor: pointer;
}
.previous-disabled,
.add-dataset-btn-disabled {
border: 1px solid #b5b5b5;
color: #b5b5b5 !important;
cursor: auto !important;
}
.next-disabled {
background: #cbcbcb 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #1e202029;
color: white;
cursor: auto !important;
}
}
mat-icon.size-18 {
width: 18px;
height: 18px;
line-height: 18px;
font-size: 18px;
} }
.menu-item { .menu-item {
width: 248px; width: 248px;
}
::ng-deep .mat-tab-labels {
justify-content: space-between;
}
::ng-deep .mat-tab-label-content {
text-transform: uppercase;
}
::ng-deep .mat-ink-bar {
background-color: #00b29f !important;
// background-color: #0070c0 !important;
} }
.toc-pane-container { .toc-pane-container {
&.is-sticky~.nav-spacer { &.is-sticky ~ .nav-spacer {
height: 500px; // the container size } height: 500px; // the container size }
// height: calc(100vh - 100px); // the container size } // height: calc(100vh - 100px); // the container size }
} }
} }
.is-sticky { .is-sticky {
margin-top: 70px !important; margin-top: 70px !important;
} }
// ::ng-deep .mat-tab-labels {
// justify-content: space-between;
// }
// ::ng-deep .mat-tab-label-content {
// text-transform: uppercase;
// }
// ::ng-deep .mat-ink-bar {
// background-color: #00b29f !important;
// // background-color: #0070c0 !important;
// }
// @media (max-width: 768px) {
// .main-content {
// padding: 30px 0px;
// }
// ::ng-deep .mat-expansion-panel-header {
// min-height: 48px;
// height: auto !important;
// }
// ::ng-deep .mat-expansion-panel-body {
// padding: 0 0px 16px !important;
// }
// ::ng-deep .mat-vertical-content {
// padding: 0 14px 24px 14px !important;
// }
// }

View File

@ -72,6 +72,10 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
lock: LockModel; lock: LockModel;
lockStatus: Boolean; lockStatus: Boolean;
step: number = 0;
stepOffset: number = 1;
maxStep: number = 1;
constructor( constructor(
private datasetWizardService: DatasetWizardService, private datasetWizardService: DatasetWizardService,
private route: ActivatedRoute, private route: ActivatedRoute,
@ -128,40 +132,40 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
.subscribe(data => { .subscribe(data => {
this.lockService.checkLockStatus(data.id).pipe(takeUntil(this._destroyed)).subscribe(lockStatus => { this.lockService.checkLockStatus(data.id).pipe(takeUntil(this._destroyed)).subscribe(lockStatus => {
this.lockStatus = lockStatus; this.lockStatus = lockStatus;
this.datasetWizardModel = new DatasetWizardEditorModel().fromModel(data); this.datasetWizardModel = new DatasetWizardEditorModel().fromModel(data);
this.needsUpdate(); this.needsUpdate();
this.breadCrumbs = observableOf([ this.breadCrumbs = observableOf([
{ {
parentComponentName: null, parentComponentName: null,
label: this.datasetWizardModel.label, label: this.datasetWizardModel.label,
url: '/datasets/edit/' + this.datasetWizardModel.id, url: '/datasets/edit/' + this.datasetWizardModel.id,
notFoundResolver: [ notFoundResolver: [
{ {
parentComponentName: null, parentComponentName: null,
label: this.language.instant('NAV-BAR.MY-DATASET-DESCRIPTIONS').toUpperCase(), label: this.language.instant('NAV-BAR.MY-DATASET-DESCRIPTIONS').toUpperCase(),
url: '/datasets' url: '/datasets'
}, },
] ]
}]); }]);
this.formGroup = this.datasetWizardModel.buildForm(); this.formGroup = this.datasetWizardModel.buildForm();
this.editMode = this.datasetWizardModel.status === DatasetStatus.Draft; this.editMode = this.datasetWizardModel.status === DatasetStatus.Draft;
if (this.datasetWizardModel.status === DatasetStatus.Finalized || lockStatus) { if (this.datasetWizardModel.status === DatasetStatus.Finalized || lockStatus) {
this.formGroup.disable(); this.formGroup.disable();
this.viewOnly = true; this.viewOnly = true;
} }
if (!lockStatus && !isNullOrUndefined(this.authService.current())) { if (!lockStatus && !isNullOrUndefined(this.authService.current())) {
this.lock = new LockModel(data.id, this.authService.current()); this.lock = new LockModel(data.id, this.authService.current());
this.lockService.createOrUpdate(this.lock).pipe(takeUntil(this._destroyed)).subscribe(async result => { this.lockService.createOrUpdate(this.lock).pipe(takeUntil(this._destroyed)).subscribe(async result => {
this.lock.id = Guid.parse(result); this.lock.id = Guid.parse(result);
interval(this.configurationService.lockInterval).pipe(takeUntil(this._destroyed)).subscribe(() => this.pumpLock()); interval(this.configurationService.lockInterval).pipe(takeUntil(this._destroyed)).subscribe(() => this.pumpLock());
}); });
} }
// if (this.viewOnly) { this.formGroup.disable(); } // For future use, to make Dataset edit like DMP. // if (this.viewOnly) { this.formGroup.disable(); } // For future use, to make Dataset edit like DMP.
this.loadDatasetProfiles(); this.loadDatasetProfiles();
this.registerFormListeners(); this.registerFormListeners();
// this.availableProfiles = this.datasetWizardModel.dmp.profiles; // this.availableProfiles = this.datasetWizardModel.dmp.profiles;
}) })
}, },
error => { error => {
switch (error.status) { switch (error.status) {
@ -220,54 +224,54 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
.subscribe(data => { .subscribe(data => {
this.lockService.checkLockStatus(data.id).pipe(takeUntil(this._destroyed)).subscribe(lockStatus => { this.lockService.checkLockStatus(data.id).pipe(takeUntil(this._destroyed)).subscribe(lockStatus => {
this.lockStatus = lockStatus; this.lockStatus = lockStatus;
this.datasetWizardModel = new DatasetWizardEditorModel().fromModel(data); this.datasetWizardModel = new DatasetWizardEditorModel().fromModel(data);
this.formGroup = this.datasetWizardModel.buildForm(); this.formGroup = this.datasetWizardModel.buildForm();
this.formGroup.get('id').setValue(null); this.formGroup.get('id').setValue(null);
this.dmpService.getSingle(newDmpId).pipe(map(data => data as DmpModel)) this.dmpService.getSingle(newDmpId).pipe(map(data => data as DmpModel))
.pipe(takeUntil(this._destroyed)) .pipe(takeUntil(this._destroyed))
.subscribe(data => { .subscribe(data => {
setTimeout(() => { setTimeout(() => {
this.datasetWizardModel.dmp = data; this.datasetWizardModel.dmp = data;
this.formGroup.get('dmp').setValue(this.datasetWizardModel.dmp); this.formGroup.get('dmp').setValue(this.datasetWizardModel.dmp);
this.loadDatasetProfiles(); this.loadDatasetProfiles();
this.breadCrumbs = observableOf([ this.breadCrumbs = observableOf([
{ {
parentComponentName: null, parentComponentName: null,
label: this.language.instant('NAV-BAR.MY-DATASET-DESCRIPTIONS'), label: this.language.instant('NAV-BAR.MY-DATASET-DESCRIPTIONS'),
url: '/datasets', url: '/datasets',
notFoundResolver: [ notFoundResolver: [
// { // {
// parentComponentName: null, // parentComponentName: null,
// label: this.datasetWizardModel.dmp.grant.label, // label: this.datasetWizardModel.dmp.grant.label,
// url: '/grants/edit/' + this.datasetWizardModel.dmp.grant.id // url: '/grants/edit/' + this.datasetWizardModel.dmp.grant.id
// }, // },
{ {
parentComponentName: null, parentComponentName: null,
label: this.datasetWizardModel.dmp.label, label: this.datasetWizardModel.dmp.label,
url: '/plans/edit/' + this.datasetWizardModel.dmp.id, url: '/plans/edit/' + this.datasetWizardModel.dmp.id,
} }
] ]
}]); }]);
});
}); });
}); this.editMode = this.datasetWizardModel.status === DatasetStatus.Draft;
this.editMode = this.datasetWizardModel.status === DatasetStatus.Draft; if (this.datasetWizardModel.status === DatasetStatus.Finalized || lockStatus) {
if (this.datasetWizardModel.status === DatasetStatus.Finalized || lockStatus) { this.formGroup.disable();
this.formGroup.disable(); this.viewOnly = true;
this.viewOnly = true; }
} if (!lockStatus && !isNullOrUndefined(this.authService.current())) {
if (!lockStatus && !isNullOrUndefined(this.authService.current())) { this.lock = new LockModel(data.id, this.authService.current());
this.lock = new LockModel(data.id, this.authService.current());
this.lockService.createOrUpdate(this.lock).pipe(takeUntil(this._destroyed)).subscribe(async result => { this.lockService.createOrUpdate(this.lock).pipe(takeUntil(this._destroyed)).subscribe(async result => {
this.lock.id = Guid.parse(result); this.lock.id = Guid.parse(result);
interval(this.configurationService.lockInterval).pipe(takeUntil(this._destroyed)).subscribe(() => this.pumpLock()); interval(this.configurationService.lockInterval).pipe(takeUntil(this._destroyed)).subscribe(() => this.pumpLock());
}); });
} }
// if (this.viewOnly) { this.formGroup.disable(); } // For future use, to make Dataset edit like DMP. // if (this.viewOnly) { this.formGroup.disable(); } // For future use, to make Dataset edit like DMP.
this.loadDatasetProfiles(); this.loadDatasetProfiles();
// this.availableProfiles = data.dmp.profiles; // this.availableProfiles = data.dmp.profiles;
}) })
}); });
} else if (this.publicId != null) { // For Finalized -> Public Datasets } else if (this.publicId != null) { // For Finalized -> Public Datasets
this.isNew = false; this.isNew = false;
@ -766,12 +770,40 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
private pumpLock() { private pumpLock() {
this.lock.touchedAt = new Date(); this.lock.touchedAt = new Date();
this.lockService.createOrUpdate(this.lock).pipe(takeUntil(this._destroyed)).subscribe( async result => { this.lockService.createOrUpdate(this.lock).pipe(takeUntil(this._destroyed)).subscribe(async result => {
if (!isNullOrUndefined(result)) { if (!isNullOrUndefined(result)) {
this.lock.id = Guid.parse(result); this.lock.id = Guid.parse(result);
} else { } else {
this.location.back(); this.location.back();
} }
}); });
}
public changeStep(index: number, dataset?: FormControl) {
this.step = index;
}
public nextStep() {
this.step = this.step < this.maxStep ? this.step + 1 : this.step;
}
public previousStep() {
this.step = this.step !== 0 ? this.step - 1 : this.step;
}
isDirty() {
}
discardChanges() {
}
addDataset() {
}
backToDmp(id: string) {
this.router.navigate(['/plans', 'edit', id]);
} }
} }

View File

@ -26,6 +26,8 @@ import { DatasetCopyDialogModule } from './dataset-wizard/dataset-copy-dialogue/
import { DatasetOverviewModule } from './overview/dataset-overview.module'; import { DatasetOverviewModule } from './overview/dataset-overview.module';
import { DatasetCriteriaDialogComponent } from './listing/criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component'; import { DatasetCriteriaDialogComponent } from './listing/criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component';
import { DmpEditorComponent } from '../dmp/editor/dmp-editor.component'; import { DmpEditorComponent } from '../dmp/editor/dmp-editor.component';
import { DatasetEditorDetailsComponent } from '../dmp/editor/dataset-editor-details/dataset-editor-details.component';
import { DatasetEditorDetailsModule } from '../dmp/editor/dataset-editor-details/dataset-editor-details.module';
@NgModule({ @NgModule({
imports: [ imports: [
@ -42,7 +44,7 @@ import { DmpEditorComponent } from '../dmp/editor/dmp-editor.component';
DatasetRoutingModule, DatasetRoutingModule,
FormValidationErrorsDialogModule, FormValidationErrorsDialogModule,
DatasetCopyDialogModule, DatasetCopyDialogModule,
DatasetOverviewModule, DatasetOverviewModule
], ],
declarations: [ declarations: [
DatasetListingComponent, DatasetListingComponent,

View File

@ -64,36 +64,47 @@
<ol class="stepper-list"> <ol class="stepper-list">
<li (click)="changeStep(0)" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (4)</li> <li (click)="changeStep(0)" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (4)</li>
<li (click)="changeStep(1)" [ngClass]="{'active': this.step === 1}">{{'DMP-EDITOR.STEPPER.FUNDING-INFO' | translate}} (3)</li> <li (click)="changeStep(1)" [ngClass]="{'active': this.step === 1}">{{'DMP-EDITOR.STEPPER.FUNDING-INFO' | translate}} (3)</li>
<li (click)="changeStep(2)" [ngClass]="{'active': this.step === 2}">{{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}}</li> <li (click)="changeStep(2)" [ngClass]="{'active': this.step === 2}">{{'DMP-EDITOR.STEPPER.LICENSE-INFO' | translate}} (6)</li>
<li *ngFor="let dataset of datasets.controls; let i = index" #selectedItems (click)="changeStep(i + stepsBeforeDatasets, dataset)" [ngClass]="{'active-dataset': this.step === i + stepsBeforeDatasets}"> <li (click)="changeStep(3)" [ngClass]="{'active': this.step === 3}">{{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}}</li>
<li *ngFor="let dataset of datasets.controls; let i = index" #selectedItems (click)="editDataset(dataset.get('id').value)" [ngClass]="{'active-dataset': this.step === i + stepsBeforeDatasets}">
<div class="dataset-tag">{{'DMP-EDITOR.STEPPER.DATASET' | translate}}</div> <div class="dataset-tag">{{'DMP-EDITOR.STEPPER.DATASET' | translate}}</div>
<span class="d-flex"> <span class="d-flex">
<div *ngIf="dataset.value.status === 1" class="finalized-label" ><mat-icon class="status-icon check-icon">check</mat-icon>{{'TYPES.DATASET-STATUS.FINALISED' | translate}}</div> <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>
<div *ngIf="dataset.value.status === 1" class="finalized-label">
<mat-icon class="status-icon check-icon">check</mat-icon>{{'TYPES.DATASET-STATUS.FINALISED' | translate}}
</div>
<!-- <mat-checkbox class="col-auto pl-0 pt-1" checked="true" [value]="dataset.value.id" color="accent" (change)="selectionChanged($event, dataset)"> <!-- <mat-checkbox class="col-auto pl-0 pt-1" checked="true" [value]="dataset.value.id" color="accent" (change)="selectionChanged($event, dataset)">
Include in clone Include in clone
</mat-checkbox> --> </mat-checkbox> -->
</span> </span>
<ul class="dataset-list"> <!-- <ul class="dataset-list">
<li [ngClass]="{'active': this.step === i + stepsBeforeDatasets}">{{ dataset.get('label').value }} (8)</li> <li [ngClass]="{'active': this.step === i + stepsBeforeDatasets}">{{ dataset.get('label').value }} (8)</li>
</ul> </ul> -->
</li> </li>
</ol> </ol>
</div> </div>
<div class="stepper-actions"> <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()"> <div *ngIf="this.step < 3" 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> <span class="material-icons">chevron_left</span>
<div>{{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}}</div> <div>{{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}}</div>
</div> </div>
<div 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()"> <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> <span class="material-icons">chevron_right</span>
<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div> <div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
</div> </div>
<div *ngIf="this.step >= 3 && hasProfile()" mat-raised-button type="button" class="col-auto add-dataset-option ml-auto">
<a class="add-dataset-btn stepper-btn" (click)="addDataset()" target="_blank">
<mat-icon>add</mat-icon>{{'DMP-LISTING.ACTIONS.ADD-DATASET-SHORT' | translate}}
</a>
</div>
</div> </div>
</div> </div>
<div class="col-auto form"> <div class="col-auto form">
<main-info [hidden]="this.step !== 0" [formGroup]="formGroup" [isUserOwner]="isUserOwner" [isNewVersion]="isNewVersion" [isClone]="isClone" (onFormChanged)="formChanged()"></main-info> <main-info [hidden]="this.step !== 0" [formGroup]="formGroup" [isUserOwner]="isUserOwner" [isNewVersion]="isNewVersion" [isClone]="isClone" (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" [isNewVersion]="isNewVersion" [isClone]="isClone" [isNew]="isNew" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></funding-info> <funding-info [hidden]="this.step !== 1" [formGroup]="formGroup" [grantformGroup]="formGroup.get('grant')" [projectFormGroup]="formGroup.get('project')" [funderFormGroup]="formGroup.get('funder')" [isFinalized]="isFinalized" [isNewVersion]="isNewVersion" [isClone]="isClone" [isNew]="isNew" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></funding-info>
<dataset-info [hidden]="this.step !== 2" [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></dataset-info> <license-info [hidden]="this.step !== 2" [formGroup]="formGroup" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" (onFormChanged)="formChanged()"></license-info>
<dataset-info [hidden]="this.step !== 3" [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></dataset-info>
<div *ngFor="let dataset of datasets.controls; let i = index" [hidden]="this.step !== i + stepsBeforeDatasets"> <div *ngFor="let dataset of datasets.controls; let i = index" [hidden]="this.step !== i + stepsBeforeDatasets">
<dataset-editor-details [formGroup]="dataset" [dmpId]="formGroup.get('id').value" (formChanged)="formChanged($event)"></dataset-editor-details> <dataset-editor-details [formGroup]="dataset" [dmpId]="formGroup.get('id').value" (formChanged)="formChanged($event)"></dataset-editor-details>

View File

@ -26,6 +26,9 @@ import { DataTableRequest } from '@app/core/model/data-table/data-table-request'
import { DatasetCriteria } from '@app/core/query/dataset/dataset-criteria'; import { DatasetCriteria } from '@app/core/query/dataset/dataset-criteria';
import { DatasetService } from '@app/core/services/dataset/dataset.service'; import { DatasetService } from '@app/core/services/dataset/dataset.service';
import { DmpEditorModel } from '../editor/dmp-editor.model'; import { DmpEditorModel } from '../editor/dmp-editor.model';
import { DatasetWizardEditorModel } from '@app/ui/dataset/dataset-wizard/dataset-wizard-editor.model';
import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
import { MatDialog } from '@angular/material';
@Component({ @Component({
@ -45,6 +48,7 @@ export class DmpCloneComponent extends BaseComponent implements OnInit {
isPublic: false; isPublic: false;
parentDmpLabel: string; parentDmpLabel: string;
isNewVersion: boolean = false; isNewVersion: boolean = false;
isNewDataset: boolean = false;
isClone: boolean = true; isClone: boolean = true;
isNew: boolean = false; isNew: boolean = false;
isUserOwner: boolean = true; isUserOwner: boolean = true;
@ -64,7 +68,8 @@ export class DmpCloneComponent extends BaseComponent implements OnInit {
private dmpService: DmpService, private dmpService: DmpService,
private authentication: AuthService, private authentication: AuthService,
private uiNotificationService: UiNotificationService, private uiNotificationService: UiNotificationService,
private datasetService: DatasetService private datasetService: DatasetService,
private dialog: MatDialog
) { ) {
super(); super();
} }
@ -214,6 +219,24 @@ export class DmpCloneComponent extends BaseComponent implements OnInit {
} }
addDataset() {
if (!this.formGroup.get('datasets')) {
this.formGroup.addControl('datasets', new FormBuilder().array(new Array<FormControl>()));
}
this.formGroup.get('datasets')['controls'].push(new DatasetWizardEditorModel().buildForm());
this.datasets = this.formGroup.get('datasets') as FormArray;
this.step = this.stepsBeforeDatasets + this.formGroup.get('datasets')['controls'].length - 1;
this.maxStep = this.maxStep + this.formGroup.get('datasets')['controls'].length - 1;
}
editDataset(id: string) {
this.router.navigate(['/datasets', 'edit', id]);
}
hasProfile(): boolean {
return this.formGroup.get('profiles') && this.formGroup.get('profiles').value && this.formGroup.get('profiles').value.length > 0;
}
selectionChanged(event, dataset) { selectionChanged(event, dataset) {
var datasetIndex = this.formGroup.get('datasets').value.map(function (item) { return item.id; }).indexOf(dataset.value.id); var datasetIndex = this.formGroup.get('datasets').value.map(function (item) { return item.id; }).indexOf(dataset.value.id);
if (!event.checked) { if (!event.checked) {
@ -231,4 +254,39 @@ export class DmpCloneComponent extends BaseComponent implements OnInit {
}) })
} }
public removeDataset(datasetId: string, index: number) {
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
maxWidth: '300px',
restoreFocus: false,
data: {
message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'),
confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.DELETE'),
cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL'),
isDeleteConfirmation: true
}
});
dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
if (result) {
if (datasetId) {
this.datasetService.delete(datasetId)
.pipe(takeUntil(this._destroyed))
.subscribe(
complete => {
this.onDeleteCallbackSuccess();
},
error => this.onDeleteCallbackError(error)
);
}
this.formGroup.get('datasets')['controls'].splice(index, 1);
this.step = 0;
}
});
}
onDeleteCallbackSuccess(): void {
this.uiNotificationService.snackBarNotification(this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-DELETE'), SnackBarNotificationLevel.Success);
this.dmp.id != null ? this.router.navigate(['/plans', 'edit', this.dmp.id]) : this.router.navigate(['/plans']);
}
onDeleteCallbackError(error) {
this.uiNotificationService.snackBarNotification(error.error.message ? error.error.message : this.language.instant('GENERAL.SNACK-BAR.UNSUCCESSFUL-DELETE'), SnackBarNotificationLevel.Error);
}
} }

View File

@ -77,47 +77,51 @@
<li *ngIf="isNewDataset" (click)="changeStep(0)" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}}</li> <li *ngIf="isNewDataset" (click)="changeStep(0)" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}}</li>
<li *ngIf="!isNewDataset" (click)="changeStep(1)" [ngClass]="{'active': this.step === 1}">{{'DMP-EDITOR.STEPPER.FUNDING-INFO' | translate}} (3)</li> <li *ngIf="!isNewDataset" (click)="changeStep(1)" [ngClass]="{'active': this.step === 1}">{{'DMP-EDITOR.STEPPER.FUNDING-INFO' | translate}} (3)</li>
<li *ngIf="!isNewDataset" (click)="changeStep(2)" [ngClass]="{'active': this.step === 2}">{{'DMP-EDITOR.STEPPER.LICENSE-INFO' | translate}} (6)</li>
<li *ngIf="!isNewDataset" (click)="changeStep(3)" [ngClass]="{'active': this.step === 3}">{{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}}</li>
<li *ngIf="isNewDataset" (click)="changeStep(1)" [ngClass]="{'active': this.step === 1}">{{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}}</li> <li *ngIf="isNewDataset" (click)="changeStep(1)" [ngClass]="{'active': this.step === 1}">{{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}}</li>
<li *ngIf="!isNewDataset" (click)="changeStep(2)" [ngClass]="{'active': this.step === 2}">{{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}}</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)="isNewDataset ? changeStep(i + stepsBeforeDatasets, dataset) : editDataset(dataset.get('id').value)" class="active-dataset">
<li *ngIf="!isNewDataset" (click)="changeStep(3)" [ngClass]="{'active': this.step === 3}">{{'DMP-EDITOR.STEPPER.LICENSE-INFO' | translate}} (6)</li>
<li *ngFor="let dataset of datasets.controls; let i = index" (click)="changeStep(i + stepsBeforeDatasets, dataset)" [ngClass]="{'active-dataset': this.step === i + stepsBeforeDatasets}">
<div class="d-flex flex-direction-row"> <div class="d-flex flex-direction-row">
<div class="label">{{'DMP-EDITOR.STEPPER.DATASET' | translate}}</div> <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 && !isNewDataset" class="ml-auto remove-dataset" matTooltip="{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}" (click)="$event.stopPropagation(); removeDataset(dataset.get('id').value, i)">remove_circle_outline</mat-icon> <mat-icon *ngIf="dataset.get('status').value !== 1 && !isNewDataset" 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> </div>
<span *ngIf="dataset.get('status').value === 1" class="finalized-label"> <!-- <ul class="dataset-list">
<mat-icon class="status-icon check-icon">check</mat-icon>{{'TYPES.DATASET-STATUS.FINALISED' | translate}}
</span>
<ul class="dataset-list">
<li *ngIf="!isNewDataset" [ngClass]="{'active': this.step === i + stepsBeforeDatasets}">{{ dataset.get('label').value }} (5)</li> <li *ngIf="!isNewDataset" [ngClass]="{'active': this.step === i + stepsBeforeDatasets}">{{ dataset.get('label').value }} (5)</li>
<li *ngIf="isNewDataset" [ngClass]="{'active': this.step === i + stepsBeforeDatasets}">{{ dataset.get('label').value }}</li> <li *ngIf="isNewDataset" [ngClass]="{'active': this.step === i + stepsBeforeDatasets}">{{ dataset.get('label').value }}</li>
</ul> </ul> -->
</li> </li>
</ol> </ol>
<ul *ngIf="!isNewDataset && hasProfile() && !isFinalized" class="add-dataset-option"> <!-- <ul *ngIf="!isNewDataset && hasProfile() && !isFinalized" class="add-dataset-option">
<li> <li>
<a class="add-dataset-btn stepper-btn" (click)="addDataset()" target="_blank"> <a class="add-dataset-btn stepper-btn" (click)="addDataset()" target="_blank">
<mat-icon>add</mat-icon>{{'DMP-LISTING.ACTIONS.ADD-DATASET-SHORT' | translate}} <mat-icon>add</mat-icon>{{'DMP-LISTING.ACTIONS.ADD-DATASET-SHORT' | translate}}
</a> </a>
</li> </li>
</ul> </ul> -->
</div> </div>
<div class="stepper-actions"> <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()"> <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> <span class="material-icons">chevron_left</span>
<div>{{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}}</div> <div>{{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}}</div>
</div> </div>
<div *ngIf="!isNewDataset" 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()"> <div *ngIf="!isNewDataset && 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> <span class="material-icons">chevron_right</span>
<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div> <div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
</div> </div>
<div *ngIf="isNewDataset" mat-raised-button type="button" class="col-auto stepper-btn dataset-next ml-auto" [ngClass]="{ 'next-disabled': this.step === this.maxStep }" (click)="nextStep()"> <div *ngIf="isNewDataset && this.step < 3" mat-raised-button type="button" class="col-auto stepper-btn dataset-next ml-auto" [ngClass]="{ 'next-disabled': this.step === this.maxStep }" (click)="nextStep()">
<span class="material-icons">chevron_right</span> <span class="material-icons">chevron_right</span>
<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div> <div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
</div> </div>
<div *ngIf="!isNewDataset && this.step >= 3 && hasProfile() && !isFinalized" mat-raised-button type="button" class="col-auto add-dataset-option ml-auto">
<a class="add-dataset-btn stepper-btn" (click)="addDataset()" target="_blank">
<mat-icon>add</mat-icon>{{'DMP-LISTING.ACTIONS.ADD-DATASET-SHORT' | translate}}
</a>
</div>
</div> </div>
</div> </div>
<div class="col-auto form"> <div class="col-auto form">
@ -125,10 +129,10 @@
<funding-info *ngIf="!isNewDataset" [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> <funding-info *ngIf="!isNewDataset" [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>
<dataset-info *ngIf="!isNewDataset" [hidden]="this.step !== 2" [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized || lockStatus" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" [hasDmpId]="hasDmpId" (onFormChanged)="formChanged()"></dataset-info> <license-info *ngIf="!isNewDataset" [hidden]="this.step !== 2" [formGroup]="formGroup" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" (onFormChanged)="formChanged()"></license-info>
<dataset-info *ngIf="isNewDataset" [hidden]="this.step !== 1" [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized || lockStatus" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" [hasDmpId]="hasDmpId" (onFormChanged)="formChanged()"></dataset-info>
<license-info [hidden]="this.step !== 3" [formGroup]="formGroup" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" (onFormChanged)="formChanged()"></license-info> <dataset-info *ngIf="!isNewDataset" [hidden]="this.step !== 3" [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized || lockStatus" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" [hasDmpId]="hasDmpId" (onFormChanged)="formChanged()"></dataset-info>
<dataset-info *ngIf="isNewDataset" [hidden]="this.step !== 1" [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized || lockStatus" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" [hasDmpId]="hasDmpId" (onFormChanged)="formChanged()"></dataset-info>
<div *ngFor="let dataset of formGroup.get('datasets')['controls']; let i = index" [hidden]="this.step !== i + stepsBeforeDatasets"> <div *ngFor="let dataset of formGroup.get('datasets')['controls']; let i = index" [hidden]="this.step !== i + stepsBeforeDatasets">
<dataset-editor-details [formGroup]="dataset" [isNewDataset]="isNewDataset" [dmpId]="formGroup.get('id').value" [availableProfiles]="formGroup.get('profiles').value" (formChanged)="formChanged($event)"></dataset-editor-details> <dataset-editor-details [formGroup]="dataset" [isNewDataset]="isNewDataset" [dmpId]="formGroup.get('id').value" [availableProfiles]="formGroup.get('profiles').value" (formChanged)="formChanged($event)"></dataset-editor-details>

View File

@ -275,21 +275,39 @@ a:hover {
font-weight: 700; font-weight: 700;
opacity: 1; opacity: 1;
.label { .label {
width: 73px; width: 100%;
height: 27px; height: 27px;
line-height: 27px;
background-color: #f7dd72; background-color: #f7dd72;
color: #5d5d5d; color: #5d5d5d;
border-radius: 4px; border-radius: 4px;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
justify-content: center; justify-content: left;
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 0.625rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
} }
} }
mat-icon.size-16 {
width: 16px;
height: 16px;
line-height: 16px;
font-size: 16px;
margin-top: 0.4rem;
}
.remove-dataset {
color: #f16868;
}
.remove-dataset:hover { .remove-dataset:hover {
color: rgb(204, 0, 0); color: #f16868;
} }
.stepper-options { .stepper-options {
// flex-grow: 1; // flex-grow: 1;
@ -315,8 +333,7 @@ a:hover {
font-size: 14px; font-size: 14px;
} }
.previous, .previous {
.add-dataset-btn {
color: #212121; color: #212121;
background: #f5f5f5 0% 0% no-repeat padding-box; background: #f5f5f5 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #1e202029; box-shadow: 0px 3px 6px #1e202029;
@ -325,6 +342,14 @@ a:hover {
cursor: pointer; cursor: pointer;
} }
.add-dataset-btn {
color: #212121;
background: #f7dd72 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #1e202029;
font-weight: 500;
cursor: pointer;
}
.next { .next {
background: #129d99 0% 0% no-repeat padding-box; background: #129d99 0% 0% no-repeat padding-box;
color: white; color: white;
@ -355,10 +380,10 @@ a:hover {
cursor: auto !important; cursor: auto !important;
} }
.add-dataset-btn:hover { // .add-dataset-btn:hover {
color: #129d99 !important; // color: #129d99 !important;
border: 1px solid #129d99; // border: 1px solid #129d99;
} // }
.dataset-list { .dataset-list {
list-style-type: none; list-style-type: none;

View File

@ -747,6 +747,10 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
}); });
} }
editDataset(id: string) {
this.router.navigate(['/datasets', 'edit', id]);
}
saveAndFinalize() { saveAndFinalize() {
const dialogInputModel: DmpFinalizeDialogInput = { const dialogInputModel: DmpFinalizeDialogInput = {
dmpLabel: this.formGroup.get('label').value, dmpLabel: this.formGroup.get('label').value,

View File

@ -1,6 +1,9 @@
<form *ngIf="form" novalidate [formGroup]="form" class="col-12 form-container"> <div class="col-12 intro">
<app-form-progress-indication class="col-12" *ngIf="form" [formGroup]="form"></app-form-progress-indication> {{'DMP-EDITOR.DATASET-DESCRIPTION.INTRO' | translate}}
<div class="row"> </div>
<form *ngIf="form" novalidate [formGroup]="form" class="col-12 form-container">
<!-- <app-form-progress-indication class="col-12" *ngIf="form" [formGroup]="form"></app-form-progress-indication> -->
<div class="row card">
<div class="dynamic-form-editor col-md-12"> <div class="dynamic-form-editor col-md-12">
<div id="form-container"> <div id="form-container">
<mat-vertical-stepper #stepper [linear]="false"> <mat-vertical-stepper #stepper [linear]="false">

View File

@ -9,12 +9,23 @@
.form-container { .form-container {
} }
.intro {
text-align: left;
font-weight: 400;
letter-spacing: 0px;
color: #212121;
opacity: 1;
margin: 3rem 0rem 3rem 0rem;
}
.dynamic-form-editor { .dynamic-form-editor {
mat-vertical-stepper { mat-vertical-stepper {
background-color: #ffffff; background-color: #ffffff;
} }
} }
.mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done, .mat-step-header .mat-step-icon-state-edit { .mat-step-header .mat-step-icon-selected,
background-color: #129D99 !important; .mat-step-header .mat-step-icon-state-done,
.mat-step-header .mat-step-icon-state-edit {
background-color: #129d99 !important;
} }

View File

@ -1,10 +1,12 @@
<div *ngIf="links?.length" class="docs-toc-container"> <div *ngIf="links?.length" class="docs-toc-container">
<div class="docs-toc-heading">Contents</div> <!-- <div class="docs-toc-heading">Contents</div> -->
<!-- <nav> --> <!-- <nav> -->
<!-- <a [href]="_rootUrl + '#' + link.id" --> <!-- <a [href]="_rootUrl + '#' + link.id" -->
<div class="scroll-container"> <div class="scroll-container">
<span *ngFor="let link of links; let i = index" (click)="goToStep(link)" class="docs-level-{{link.type}} docs-link" [class.docs-active]="link.active"> <span *ngFor="let link of links; let i = index" (click)="toggle(link); goToStep(link)" class="docs-level-{{link.type}} docs-link mt-0" [class.docs-active]="link.active">
{{link.name}} <span *ngIf="link.show && link.type !== 'span'" class="link-name"><span [class.selected]="link.selected && isActive">{{link.name}}</span></span>
<span *ngIf="link.show && link.type === 'span'" class="link-name"><span [class.selected]="(link.selected && isActive)">{{this.getIndex(link) + 1}}. {{link.name}}</span></span>
<!-- {{link.name}} -->
</span> </span>
<!-- </nav> --> <!-- </nav> -->
</div> </div>

View File

@ -1,50 +1,70 @@
.docs-toc-container { .docs-toc-container {
width: 100%; width: 100%;
padding: 5px 0 10px 10px; padding: 5px 0 10px 0px;
cursor: pointer; cursor: pointer;
border-left: solid 4px #0c7489; // border-left: solid 4px #0c7489;
.scroll-container { .scroll-container {
overflow-y: auto; overflow-y: auto;
// calc(100vh - 250px) // calc(100vh - 250px)
height: calc(100vh - 250px); // height: calc(100vh - 250px);
} }
.docs-link { .docs-link {
color: rgba(0, 0, 0, 0.54); color: rgba(0, 0, 0, 0.54);
// color: mat-color($app-blue-theme-foreground, secondary-text); // color: mat-color($app-blue-theme-foreground, secondary-text);
transition: color 100ms; transition: color 100ms;
&:hover, &:hover,
&.docs-active { &.docs-active {
color: #0c7489; .link-name {
// color: mat-color($primary, if($is-dark-theme, 200, default)); background-color: #ececec;
} border-radius: 6px;
} // color: #0c7489;
}
// color: mat-color($primary, if($is-dark-theme, 200, default));
}
}
} }
.docs-toc-heading { .docs-toc-heading {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 13px; font-size: 13px;
font-weight: bold; font-weight: bold;
} }
span { span {
line-height: 16px; line-height: 16px;
margin: 8px 0 0; margin: 6px 0 0;
position: relative; position: relative;
text-decoration: none; text-decoration: none;
display: block; display: block;
text-overflow: ellipsis !important; overflow: hidden;
overflow: hidden; color: #21212194;
color: rgba(0, 0, 0, 0.54); font-weight: 400;
max-width: 290px;
min-width: 290px;
padding: 0rem .4rem;
span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
width: 100%;
}
}
.selected {
color: #212121 !important;
font-weight: 700 !important;
opacity: 1 !important;
} }
.docs-level-mat-expansion-panel { .docs-level-mat-expansion-panel {
margin-left: 12px; margin-left: 12px;
} }
.docs-level-h5 { .docs-level-h5 {
margin-left: 24px; margin-left: 24px;
} }

View File

@ -1,8 +1,9 @@
import { DOCUMENT } from '@angular/common'; import { DOCUMENT } from '@angular/common';
import { Component, EventEmitter, Inject, OnInit, Output } from '@angular/core'; import { Component, EventEmitter, Inject, OnInit, Output, Input } from '@angular/core';
import { BaseComponent } from '@common/base/base.component'; import { BaseComponent } from '@common/base/base.component';
import { interval, Subject, Subscription } from 'rxjs'; import { interval, Subject, Subscription } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators'; import { distinctUntilChanged } from 'rxjs/operators';
import { type } from 'os';
interface Link { interface Link {
/* id of the section*/ /* id of the section*/
@ -17,6 +18,8 @@ interface Link {
top: number; top: number;
page: number; page: number;
section: number; section: number;
show: boolean;
selected: boolean;
} }
@Component({ @Component({
@ -33,6 +36,9 @@ export class TableOfContents extends BaseComponent implements OnInit {
subscription: Subscription; subscription: Subscription;
linksSubject: Subject<HTMLElement[]> = new Subject<HTMLElement[]>(); linksSubject: Subject<HTMLElement[]> = new Subject<HTMLElement[]>();
@Input() isActive: boolean;
show: boolean = false;
constructor( constructor(
@Inject(DOCUMENT) private _document: Document) { @Inject(DOCUMENT) private _document: Document) {
super(); super();
@ -55,6 +61,7 @@ export class TableOfContents extends BaseComponent implements OnInit {
if (headers.length) { if (headers.length) {
let page; let page;
let section; let section;
let show
for (const header of headers) { for (const header of headers) {
let name; let name;
let id; let id;
@ -63,15 +70,18 @@ export class TableOfContents extends BaseComponent implements OnInit {
id = header.id; id = header.id;
page = header.id.split('_')[1]; page = header.id.split('_')[1];
section = undefined; section = undefined;
show = true;
} else if (header.classList.contains('toc-section-header')) { } else if (header.classList.contains('toc-section-header')) {
name = header.childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].nodeValue.trim().replace(/^link/, ''); name = header.childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].nodeValue.trim().replace(/^link/, '');
id = header.id; id = header.id;
page = header.id.split('.')[1]; page = header.id.split('.')[1];
section = header.id; section = header.id;
show = false;
} else if (header.classList.contains('toc-copositeField-header')) { } else if (header.classList.contains('toc-copositeField-header')) {
name = (header.childNodes[0]).nodeValue.trim().replace(/^link/, ''); name = (header.childNodes[0]).nodeValue.trim().replace(/^link/, '');
id = header.id; id = header.id;
// id = header.parentElement.parentElement.parentElement.id; // id = header.parentElement.parentElement.parentElement.id;
show = false;
} }
const { top } = header.getBoundingClientRect(); const { top } = header.getBoundingClientRect();
links.push({ links.push({
@ -81,11 +91,15 @@ export class TableOfContents extends BaseComponent implements OnInit {
top: top, top: top,
active: false, active: false,
page: page, page: page,
section: section section: section,
show: show,
selected: false
}); });
} }
} }
this.links = links; this.links = links;
// Initialize selected for button next on dataset wizard component editor
this.links[0].selected = true;
}) })
} }
@ -107,6 +121,27 @@ export class TableOfContents extends BaseComponent implements OnInit {
}, 500); }, 500);
} }
toggle(headerLink: Link) {
const page = +headerLink.id.split("_", 2)[1];
let innerPage;
for (const link of this.links) {
link.selected = false;
if (link.type === 'mat-expansion-panel') {
innerPage = +link.name.split(" ",1)[0];
} else if (link.type === 'h5') {
innerPage = +link.name.split(".",1)[0];
}
if (page + 1 === innerPage && link.type !== 'span') {
link.show = !link.show;
}
}
headerLink.selected = true;
}
getIndex(link: Link): number {
return +link.id.split("_", 2)[1];
}
} }
export interface LinkToScroll { export interface LinkToScroll {

View File

@ -485,10 +485,12 @@
"ACTIONS": { "ACTIONS": {
"NEXT": "Weiter", "NEXT": "Weiter",
"BACK": "Zurück", "BACK": "Zurück",
"BACK-TO": "Back to",
"DELETE": "Löschen", "DELETE": "Löschen",
"GO-TO-GRANT": "Gehe zu Datansatzbeschreibung Förderung", "GO-TO-GRANT": "Gehe zu Datansatzbeschreibung Förderung",
"GO-TO-DMP": "Gehe zu Datensatzbeschreibung DMP", "GO-TO-DMP": "Gehe zu Datensatzbeschreibung DMP",
"SAVE": "Speichern", "SAVE": "Speichern",
"SAVE-AND-ADD": "Save & Add New",
"SAVE-AND-FINALISE": "Speichern und Fertigstellen", "SAVE-AND-FINALISE": "Speichern und Fertigstellen",
"FINALIZE": "Fertigstellen", "FINALIZE": "Fertigstellen",
"REVERSE": "Fertigstellung rückgängig machen", "REVERSE": "Fertigstellung rückgängig machen",
@ -694,7 +696,7 @@
"NEW": "Neuer Datenmanagementplan", "NEW": "Neuer Datenmanagementplan",
"EDIT": "Bearbeiten", "EDIT": "Bearbeiten",
"SUBTITLE": "DOI", "SUBTITLE": "DOI",
"ADD-DATASET": "Adding dataset to ", "ADD-DATASET": "Adding dataset",
"EDIT-DATASET": "Editing Dataset", "EDIT-DATASET": "Editing Dataset",
"CLONE-DMP": "Clone", "CLONE-DMP": "Clone",
"CREATE-DATASET": "Creating Dataset Description" "CREATE-DATASET": "Creating Dataset Description"
@ -739,6 +741,49 @@
"TITLE": "Verfügbare Datensatzvorlagen", "TITLE": "Verfügbare Datensatzvorlagen",
"TEXT": "Datensatzprofile ausgewählt: ", "TEXT": "Datensatzprofile ausgewählt: ",
"OK": "OK" "OK": "OK"
},
"VISIBILITY": {
"PUBLIC": "Public",
"RESTRICTED": "Restricted"
},
"STEPPER": {
"USER-GUIDE": "Guide steps",
"MAIN-INFO": "Main info",
"FUNDING-INFO": "Funding info",
"DATASET-SELECTION": "Dataset selection",
"DATASET-INFO": "Dataset info",
"LICENSE-INFO": "License info",
"DATASET": "Dataset",
"PREVIOUS": "Previous",
"NEXT": "Next"
},
"MAIN-INFO": {
"INTRO": "A DMP in Argos consists of key information about research, such as purpose, objectives and researchers involved, but also about documentation of research datasets, namely dataset descriptions, that highlight the steps followed and the means used across data management activities.",
"HINT": "A brief description of what the DMP is about, its scope and objectives.",
"TYPING": "Type more letters of the name so its more possible to find the correct one."
},
"FUNDING-INFO": {
"INTRO": "A Data Management Plan (DMP) consist of your Data Management Plans closer to where they are generated, analysed and stored. argos is an open, extensible, collaborative tool supporting Open and FAIR Data Management Plans.",
"FIND": "Couldn't find the correct one?"
},
"DATASET-INFO": {
"INTRO": "A DMP in Argos consists of key information about research, such as purpose, objectives and researchers involved, but also about documentation of research datasets, namely dataset descriptions, that highlight the steps followed and the means used across data management activities.",
"SECOND-INTRO": "Datasets are documented following pre-defined templates which set the content of dataset descriptions. In Argos, a DMP can contain as many dataset descriptions as the datasets it documents.",
"FIND": "Couldn't find a suitable one?"
},
"LICENSE-INFO": {
"INTRO": "Each DMP can contain specific license informatation over how much open and available it is, that way you can determine who can see your dataset and for how long that data will be private",
"HINT": "A brief description of what license the DMP is using, its type and when it will open.",
"TYPING": "Type more letters of the name so its more possible to find the correct one."
},
"DATASET-DESCRIPTION": {
"INTRO": "Ιn general terms, your research data should be 'fair', that is findable, accessible, interoperable and re-usable. these principles precede implementation choices and do not necessarily suggest any specific technology, standard, or implementation-solution. this template is not intended as a strict technical implementation of the fair principles, it is rather inspired by fair as a general concept."
},
"CHANGES": "unsaved changes",
"CLONE-DIALOG": {
"CLONE": "Clone",
"SAVE": "Save",
"CANCEL": "Cancel"
} }
}, },
"DMP-PROFILE-LISTING": { "DMP-PROFILE-LISTING": {

View File

@ -524,10 +524,12 @@
"ACTIONS": { "ACTIONS": {
"NEXT": "Next", "NEXT": "Next",
"BACK": "Back", "BACK": "Back",
"BACK-TO": "Back to",
"DELETE": "Delete", "DELETE": "Delete",
"GO-TO-GRANT": "Go to Dataset Description's Grant", "GO-TO-GRANT": "Go to Dataset Description's Grant",
"GO-TO-DMP": "Go to Dataset Description's DMP", "GO-TO-DMP": "Go to Dataset Description's DMP",
"SAVE": "Save", "SAVE": "Save",
"SAVE-AND-ADD": "Save & Add New",
"SAVE-AND-FINALISE": "Save and Finalize", "SAVE-AND-FINALISE": "Save and Finalize",
"FINALIZE": "Finalize", "FINALIZE": "Finalize",
"REVERSE": "Undo Finalization", "REVERSE": "Undo Finalization",
@ -646,6 +648,7 @@
"TEMPLATES-INVOLVED": "Dataset Description Template", "TEMPLATES-INVOLVED": "Dataset Description Template",
"VERSION": "DMP Version", "VERSION": "DMP Version",
"PART-OF": "Part of", "PART-OF": "Part of",
"TO-DMP": "To DMP",
"DMP-FOR": "DMP for" "DMP-FOR": "DMP for"
}, },
"EMPTY-LIST": "Nothing here yet." "EMPTY-LIST": "Nothing here yet."
@ -763,7 +766,7 @@
"NEW": "New Data Management Plan", "NEW": "New Data Management Plan",
"EDIT": "Edit", "EDIT": "Edit",
"EDIT-DMP": "Editing DMP", "EDIT-DMP": "Editing DMP",
"ADD-DATASET": "Adding dataset to ", "ADD-DATASET": "Adding dataset",
"EDIT-DATASET": "Editing Dataset", "EDIT-DATASET": "Editing Dataset",
"CLONE-DMP": "Clone", "CLONE-DMP": "Clone",
"NEW-VERSION": "New Version", "NEW-VERSION": "New Version",
@ -864,6 +867,9 @@
"HINT": "A brief description of what license the DMP is using, its type and when it will open.", "HINT": "A brief description of what license the DMP is using, its type and when it will open.",
"TYPING": "Type more letters of the name so its more possible to find the correct one." "TYPING": "Type more letters of the name so its more possible to find the correct one."
}, },
"DATASET-DESCRIPTION": {
"INTRO": "Ιn general terms, your research data should be 'fair', that is findable, accessible, interoperable and re-usable. these principles precede implementation choices and do not necessarily suggest any specific technology, standard, or implementation-solution. this template is not intended as a strict technical implementation of the fair principles, it is rather inspired by fair as a general concept."
},
"CHANGES": "unsaved changes", "CHANGES": "unsaved changes",
"CLONE-DIALOG": { "CLONE-DIALOG": {
"CLONE": "Clone", "CLONE": "Clone",

View File

@ -525,10 +525,12 @@
"ACTIONS": { "ACTIONS": {
"NEXT": "Siguiente", "NEXT": "Siguiente",
"BACK": "Volver", "BACK": "Volver",
"BACK-TO": "Back to",
"DELETE": "Borrar", "DELETE": "Borrar",
"GO-TO-GRANT": "Ir a la subvención de la descripción del dataset", "GO-TO-GRANT": "Ir a la subvención de la descripción del dataset",
"GO-TO-DMP": "Ir al PGD de la descripción del dataset", "GO-TO-DMP": "Ir al PGD de la descripción del dataset",
"SAVE": "Grabar", "SAVE": "Grabar",
"SAVE-AND-ADD": "Save & Add New",
"SAVE-AND-FINALISE": "Grabar y finalizar", "SAVE-AND-FINALISE": "Grabar y finalizar",
"FINALIZE": "Finalizar", "FINALIZE": "Finalizar",
"REVERSE": "Deshacer la finalización", "REVERSE": "Deshacer la finalización",
@ -764,7 +766,7 @@
"NEW": "Nuevo Plan de Gestión de Datos", "NEW": "Nuevo Plan de Gestión de Datos",
"EDIT": "Editar", "EDIT": "Editar",
"EDIT-DMP": "Editando PGD", "EDIT-DMP": "Editando PGD",
"ADD-DATASET": "Adding dataset to ", "ADD-DATASET": "Adding dataset",
"EDIT-DATASET": "Editing Dataset", "EDIT-DATASET": "Editing Dataset",
"CLONE-DMP": "Clone", "CLONE-DMP": "Clone",
"CREATE-DATASET": "Creating Dataset Description", "CREATE-DATASET": "Creating Dataset Description",
@ -855,7 +857,20 @@
"SECOND-INTRO": "Los datasets se documentan siguiendo plantillas predefinadas con el contenido de la descripción de los datasets. En Argos un PGD puede incluir tantas descripciones de datasets como datasets se documenten.", "SECOND-INTRO": "Los datasets se documentan siguiendo plantillas predefinadas con el contenido de la descripción de los datasets. En Argos un PGD puede incluir tantas descripciones de datasets como datasets se documenten.",
"FIND": "¿No se encontró el correcto?" "FIND": "¿No se encontró el correcto?"
}, },
"CHANGES": "Cambios sin guardar" "LICENSE-INFO": {
"INTRO": "Each DMP can contain specific license informatation over how much open and available it is, that way you can determine who can see your dataset and for how long that data will be private",
"HINT": "A brief description of what license the DMP is using, its type and when it will open.",
"TYPING": "Type more letters of the name so its more possible to find the correct one."
},
"DATASET-DESCRIPTION": {
"INTRO": "Ιn general terms, your research data should be 'fair', that is findable, accessible, interoperable and re-usable. these principles precede implementation choices and do not necessarily suggest any specific technology, standard, or implementation-solution. this template is not intended as a strict technical implementation of the fair principles, it is rather inspired by fair as a general concept."
},
"CHANGES": "unsaved changes",
"CLONE-DIALOG": {
"CLONE": "Clone",
"SAVE": "Save",
"CANCEL": "Cancel"
}
}, },
"DMP-PROFILE-LISTING": { "DMP-PROFILE-LISTING": {
"TITLE": "Plantilla del PGD", "TITLE": "Plantilla del PGD",

View File

@ -522,10 +522,12 @@
"ACTIONS": { "ACTIONS": {
"NEXT": "Επόμενο", "NEXT": "Επόμενο",
"BACK": "Πίσω", "BACK": "Πίσω",
"BACK-TO": "Back to",
"DELETE": "Διαγραφή", "DELETE": "Διαγραφή",
"GO-TO-GRANT": "Μετάβαση σε Περιγραφή Συνόλου Δεδομένων της Επιχορήγησης", "GO-TO-GRANT": "Μετάβαση σε Περιγραφή Συνόλου Δεδομένων της Επιχορήγησης",
"GO-TO-DMP": "Μετάβαση σε Περιγραφή Συνόλου Δεδομένων του Σχεδίου Διαχείρισης Δεδομένων", "GO-TO-DMP": "Μετάβαση σε Περιγραφή Συνόλου Δεδομένων του Σχεδίου Διαχείρισης Δεδομένων",
"SAVE": "Save", "SAVE": "Save",
"SAVE-AND-ADD": "Save & Add New",
"SAVE-AND-FINALISE": "Αποθήκευση και Οριστικοποίηση", "SAVE-AND-FINALISE": "Αποθήκευση και Οριστικοποίηση",
"FINALIZE": "Οριστικοποίηση", "FINALIZE": "Οριστικοποίηση",
"REVERSE": "Αναίρεση Οριστικοποίησης", "REVERSE": "Αναίρεση Οριστικοποίησης",
@ -759,7 +761,7 @@
"NEW": "Νέα Σχέδιο Διαχείρισης Δεδομένων", "NEW": "Νέα Σχέδιο Διαχείρισης Δεδομένων",
"EDIT": "Επεξεργασία", "EDIT": "Επεξεργασία",
"EDIT-DMP": "Editing DMP", "EDIT-DMP": "Editing DMP",
"ADD-DATASET": "Adding dataset to ", "ADD-DATASET": "Adding dataset",
"EDIT-DATASET": "Editing Dataset", "EDIT-DATASET": "Editing Dataset",
"CLONE-DMP": "Clone", "CLONE-DMP": "Clone",
"SUBTITLE": "Μονοσήμαντο Αναγνωριστικό Ψηφιακού Αντικειμένου (DOI)" "SUBTITLE": "Μονοσήμαντο Αναγνωριστικό Ψηφιακού Αντικειμένου (DOI)"
@ -848,7 +850,20 @@
"SECOND-INTRO": "Datasets are documented following pre-defined templates which set the content of dataset descriptions. In Argos, a DMP can contain as many dataset descriptions as the datasets it documents.", "SECOND-INTRO": "Datasets are documented following pre-defined templates which set the content of dataset descriptions. In Argos, a DMP can contain as many dataset descriptions as the datasets it documents.",
"FIND": "Couldn't find a suitable one?" "FIND": "Couldn't find a suitable one?"
}, },
"CHANGES": "unsaved changes" "LICENSE-INFO": {
"INTRO": "Each DMP can contain specific license informatation over how much open and available it is, that way you can determine who can see your dataset and for how long that data will be private",
"HINT": "A brief description of what license the DMP is using, its type and when it will open.",
"TYPING": "Type more letters of the name so its more possible to find the correct one."
},
"DATASET-DESCRIPTION": {
"INTRO": "Ιn general terms, your research data should be 'fair', that is findable, accessible, interoperable and re-usable. these principles precede implementation choices and do not necessarily suggest any specific technology, standard, or implementation-solution. this template is not intended as a strict technical implementation of the fair principles, it is rather inspired by fair as a general concept."
},
"CHANGES": "unsaved changes",
"CLONE-DIALOG": {
"CLONE": "Clone",
"SAVE": "Save",
"CANCEL": "Cancel"
}
}, },
"DMP-PROFILE-LISTING": { "DMP-PROFILE-LISTING": {
"TITLE": "Templates Σχεδίων Διαχείρισης Δεδομένων", "TITLE": "Templates Σχεδίων Διαχείρισης Δεδομένων",

View File

@ -520,10 +520,12 @@
"ACTIONS": { "ACTIONS": {
"NEXT": "Sonraki", "NEXT": "Sonraki",
"BACK": "Geri", "BACK": "Geri",
"BACK-TO": "Back to",
"DELETE": "Sil", "DELETE": "Sil",
"GO-TO-GRANT": "Veri seti Tanımının Hibesine Git", "GO-TO-GRANT": "Veri seti Tanımının Hibesine Git",
"GO-TO-DMP": "Veri seti Tanımı VYP'na Git", "GO-TO-DMP": "Veri seti Tanımı VYP'na Git",
"SAVE": "Kaydet", "SAVE": "Kaydet",
"SAVE-AND-ADD": "Save & Add New",
"SAVE-AND-FINALISE": "Kaydet ve Bitir", "SAVE-AND-FINALISE": "Kaydet ve Bitir",
"FINALIZE": "Tamamla", "FINALIZE": "Tamamla",
"REVERSE": "Tamamlamayı Geri Al", "REVERSE": "Tamamlamayı Geri Al",
@ -753,7 +755,7 @@
"NEW": "Yeni Veri Yönetim Planı", "NEW": "Yeni Veri Yönetim Planı",
"EDIT": "Düzenle", "EDIT": "Düzenle",
"EDIT-DMP": " VYP'yi düzenleme", "EDIT-DMP": " VYP'yi düzenleme",
"ADD-DATASET": "Adding dataset to ", "ADD-DATASET": "Adding dataset",
"CLONE-DMP": "Clone", "CLONE-DMP": "Clone",
"SUBTITLE": "DOI" "SUBTITLE": "DOI"
}, },
@ -841,7 +843,20 @@
"SECOND-INTRO": "Veri setleri, veri seti açıklamalarının içeriğini belirleyen önceden tanımlanmış şablonları takiben belgelenir. Argos'ta bir VYP, belgelediği veri setleri kadar çok veri seti açıklaması içerebilir.", "SECOND-INTRO": "Veri setleri, veri seti açıklamalarının içeriğini belirleyen önceden tanımlanmış şablonları takiben belgelenir. Argos'ta bir VYP, belgelediği veri setleri kadar çok veri seti açıklaması içerebilir.",
"FIND": "Uygun bir tane bulamadınız mı?" "FIND": "Uygun bir tane bulamadınız mı?"
}, },
"CHANGES": "Kaydedilmemiş Değişiklikler" "LICENSE-INFO": {
"INTRO": "Each DMP can contain specific license informatation over how much open and available it is, that way you can determine who can see your dataset and for how long that data will be private",
"HINT": "A brief description of what license the DMP is using, its type and when it will open.",
"TYPING": "Type more letters of the name so its more possible to find the correct one."
},
"DATASET-DESCRIPTION": {
"INTRO": "Ιn general terms, your research data should be 'fair', that is findable, accessible, interoperable and re-usable. these principles precede implementation choices and do not necessarily suggest any specific technology, standard, or implementation-solution. this template is not intended as a strict technical implementation of the fair principles, it is rather inspired by fair as a general concept."
},
"CHANGES": "unsaved changes",
"CLONE-DIALOG": {
"CLONE": "Clone",
"SAVE": "Save",
"CANCEL": "Cancel"
}
}, },
"DMP-PROFILE-LISTING": { "DMP-PROFILE-LISTING": {
"TITLE": "VYP Şablonları", "TITLE": "VYP Şablonları",