MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Merge branch 'ui-redesign' of https://gitlab.eudat.eu/dmp/OpenAIRE-EUDAT-DMP-service-pilot.git into ui-redesign

This commit is contained in:
George Kalampokis 2020-09-25 12:51:47 +03:00
parent 3c9c9852cf 794ef0142a
commit 5521e4f41b
22 changed files with 330 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
Jenkinsfile vendored Normal file
View File

@ -0,0 +1,66 @@
def pipelineContext = [:]
pipeline {
agent any
options {
skipDefaultCheckout(true)
}
stages {
stage('Checkout') {
steps {
checkout scm
}
}
stage('Build API') {
steps {
script {
pipelineContext.apiImage = docker.build("open-dmp-api:${env.BUILD_ID}", "-f dmp-backend/Dockerfile.CI dmp-backend/")
}
}
}
stage('Build WebApp') {
steps {
script {
pipelineContext.webappImage = docker.build("open-dmp-webapp:${env.BUILD_ID}", "-f dmp-frontend/Dockerfile.CI dmp-frontend/")
}
}
}
//stage('SonarQube analysis') {
// steps {
// script {
// def scannerHome = tool 'SonarQube Scanner 4.3';
// withSonarQubeEnv('SonarQube') { // If you have configured more than one global server connection, you can specify its name
// sh "${scannerHome}/bin/sonar-scanner"
// }
// }
// }
//}
//// waiting for sonar results based into the configured web hook in Sonar server which push the status back to jenkins
//stage('SonarQube scan result check') {
// steps {
// timeout(time: 2, unit: 'MINUTES') {
// retry(3) {
// script {
// def qg = waitForQualityGate()
// if (qg.status != 'OK') {
// error "Pipeline aborted due to quality gate failure: ${qg.status}"
// }
// }
// }
// }
// }
//}
stage('Pushing to Docker Registry') {
steps {
script {
docker.withRegistry('http://drepo.local.cite.gr', 'b2c651c1-9a3b-4a98-a6da-e1dd7a20f512') {
pipelineContext.apiImage.push()
pipelineContext.webappImage.push()
}
}
}
}
}
}

15
dmp-backend/Dockerfile.CI Normal file
View File

@ -0,0 +1,15 @@
FROM maven:3-jdk-8-alpine AS MAVEN_BUILD
COPY pom.xml /build/
COPY data /build/data/
COPY elastic /build/elastic/
COPY queryable /build/queryable/
COPY web /build/web/
WORKDIR /build/
RUN mvn package
FROM openjdk:8-jre-alpine
WORKDIR /app
COPY --from=MAVEN_BUILD /build/web/target/web-1.0-SNAPSHOT.jar /app/app.jar
ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom" ,"-Dspring.profiles.active=${PROF}","-jar","/app.jar"]

31
dmp-frontend/Dockerfile.CI Normal file
View File

@ -0,0 +1,31 @@
# stage1 as builder
FROM node:12-alpine as builder
# copy the package.json to install dependencies
COPY package.json ./
# Install the dependencies and make the folder
RUN npm install && mkdir /src && mv ./node_modules ./src
WORKDIR /src
COPY . .
# Build the project and copy the files
RUN npm run ng build -- --deploy-url=/ --prod
FROM nginx:alpine
#!/bin/sh
COPY nginx.conf.CI /etc/nginx/nginx.conf
## Remove default nginx index page
RUN rm -rf /usr/share/nginx/html/*
# Copy from the stahg 1
COPY --from=builder /src/dist /usr/share/nginx/html
EXPOSE 8080
ENTRYPOINT ["nginx", "-g", "daemon off;"]

28
dmp-frontend/nginx.conf.CI Normal file
View File

@ -0,0 +1,28 @@
server {
listen 8080;
sendfile on;
default_type application/octet-stream;
gzip on;
gzip_http_version 1.1;
gzip_disable "MSIE [1-6]\.";
gzip_min_length 1100;
gzip_vary on;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_comp_level 9;
root /usr/share/nginx/html;
location / {
try_files $uri $uri/ /index.html =404;
add_header Cache-Control "no-store, no-cache, must-revalidate";
}
}

7
dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.html
View File

@ -65,13 +65,12 @@
<span class="material-icons">chevron_right</span>
<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
</div>
<div *ngIf="this.step === this.maxStep && isNew" mat-raised-button type="button" class="col-auto stepper-btn dataset-next next-disabled ml-auto">
<div *ngIf="!formGroup.get('profile').value" mat-raised-button type="button" class="col-auto stepper-btn dataset-next next-disabled ml-auto">
<span class="material-icons">chevron_right</span>
<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
</div>
<div *ngIf="this.step === 1 && !isNew" mat-raised-button type="button" class="col-auto stepper-btn add-dataset-btn ml-auto" (click)="addDataset(formGroup.get('dmp').value.id)" target="_blank">
<mat-icon>add</mat-icon>
<div>{{'DMP-LISTING.ACTIONS.ADD-DATASET-SHORT' | translate}}</div>
<div *ngIf="this.step === this.maxStep && !lockStatus && formGroup.get('profile').value" mat-raised-button type="button" class="col-auto stepper-btn add-dataset-btn ml-auto">
<div (click)="save(saveAnd.addNew)">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-ADD' | translate }}</div>
</div>
</div>
</div>

2
dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.html
View File

@ -102,7 +102,7 @@
<div class="col-auto form">
<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>
<license-info [hidden]="this.step !== 2" [formGroup]="formGroup" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" (onFormChanged)="formChanged()"></license-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" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></dataset-info>
<div *ngFor="let dataset of datasets.controls; let i = index" [hidden]="this.step !== i + stepsBeforeDatasets">

1
dmp-frontend/src/app/ui/dmp/clone/dmp-clone.component.ts
View File

@ -48,7 +48,6 @@ export class DmpCloneComponent extends BaseComponent implements OnInit {
isPublic: false;
parentDmpLabel: string;
isNewVersion: boolean = false;
isNewDataset: boolean = false;
isClone: boolean = true;
isNew: boolean = false;
isUserOwner: boolean = true;

36
dmp-frontend/src/app/ui/dmp/dmp.routing.ts
View File

@ -80,24 +80,24 @@ const routes: Routes = [
title: 'GENERAL.TITLES.DMP-NEW'
}
},
{
path: 'new/dataset',
component: DmpEditorComponent,
canActivate: [AuthGuard],
data: {
breadcrumbs: 'new/dataset',
title: 'GENERAL.TITLES.DATASET-NEW'
}
},
{
path: 'new/dataset/:dmpId',
component: DmpEditorComponent,
canActivate: [AuthGuard],
data: {
breadcrumbs: 'new/dataset',
title: 'GENERAL.TITLES.DATASET-NEW'
}
},
// {
// path: 'new/dataset',
// component: DmpEditorComponent,
// canActivate: [AuthGuard],
// data: {
// breadcrumbs: 'new/dataset',
// title: 'GENERAL.TITLES.DATASET-NEW'
// }
// },
// {
// path: 'new/dataset/:dmpId',
// component: DmpEditorComponent,
// canActivate: [AuthGuard],
// data: {
// breadcrumbs: 'new/dataset',
// title: 'GENERAL.TITLES.DATASET-NEW'
// }
// },
{
path: 'new_version/:id',
// component: DmpWizardComponent,

35
dmp-frontend/src/app/ui/dmp/editor/dataset-editor-details/dataset-editor-details.component.ts
View File

@ -67,7 +67,6 @@ export class DatasetEditorDetailsComponent extends BaseComponent implements OnIn
@Input() formGroup: FormGroup;
@Input() dmpId: string;
@Input() datasetId: string;
@Input() isNewDataset: boolean;
@Input() availableProfiles: DatasetProfileModel[];
@Output() formChanged: EventEmitter<any> = new EventEmitter();
readonly separatorKeysCodes: number[] = [ENTER, COMMA];
@ -103,9 +102,9 @@ export class DatasetEditorDetailsComponent extends BaseComponent implements OnIn
this.datasetWizardModel = new DatasetWizardEditorModel();
this.registerFormListeners();
if (this.isNewDataset) {
this.loadDatasetProfiles();
}
// if (this.isNewDataset) {
// this.loadDatasetProfiles();
// }
this.profilesAutoCompleteConfiguration = {
filterFn: this.filterProfiles.bind(this),
@ -198,20 +197,20 @@ export class DatasetEditorDetailsComponent extends BaseComponent implements OnIn
}
registerFormListeners() {
this.formGroup.get('dmp').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => {
this.dmpValueChanged(x);
});
// this.formGroup.get('dmp').valueChanges
// .pipe(takeUntil(this._destroyed))
// .subscribe(x => {
// this.dmpValueChanged(x);
// });
// if (this.isNewDataset) {
this.formGroup.get('profile').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => {
if (!isNullOrUndefined(x)) {
this.datasetProfileValueChanged(x.id);
}
});
// this.formGroup.get('profile').valueChanges
// .pipe(takeUntil(this._destroyed))
// .subscribe(x => {
// if (!isNullOrUndefined(x)) {
// this.datasetProfileValueChanged(x.id);
// }
// });
// }
}
@ -239,12 +238,12 @@ export class DatasetEditorDetailsComponent extends BaseComponent implements OnIn
this.formGroup.valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(val => {
this.formChanged.emit(val);
// this.formChanged.emit(val);
});
}
onFormChanged(event) {
this.formChanged.emit(event);
// this.formChanged.emit(event);
}
getDefinition(profileId: string) {

10
dmp-frontend/src/app/ui/dmp/editor/dataset-info/dataset-info.component.html
View File

@ -12,7 +12,7 @@
<div><span class="material-icons-outlined align-bottom">info</span> {{'DMP-EDITOR.MAIN-INFO.TYPING' | translate}}</div>
</div>
<div class="profile-form">
<mat-form-field *ngIf="!isNewDataset">
<mat-form-field>
<app-multiple-auto-complete required='true' [formControl]="formGroup.get('profiles')" placeholder="{{'DMP-EDITOR.FIELDS.SELECT-TEMPLATE' | translate}}" [configuration]="profilesAutoCompleteConfiguration" (optionRemoved)="onRemoveTemplate($event)">
</app-multiple-auto-complete>
<mat-error *ngIf="formGroup.get('profiles').hasError('backendError')">
@ -23,14 +23,6 @@
<mat-icon class="icon-btn">view_list</mat-icon>
</button>
</mat-form-field>
<mat-form-field *ngIf="isNewDataset">
<mat-select placeholder=" {{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}" [required]="true" [formControl]="this.formGroup.get('datasets')['controls'][0].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-form-field>
</div>
<div class="col pl-0 pt-2 pb-3 d-flex">
<span class="not-found">{{'QUICKWIZARD.CREATE-ADD.CREATE.QUICKWIZARD_CREATE.SECOND-STEP.FIELDS.HELP' | translate}}</span>

35
dmp-frontend/src/app/ui/dmp/editor/dataset-info/dataset-info.component.ts
View File

@ -40,7 +40,6 @@ export class DatasetInfoComponent extends BaseComponent implements OnInit {
@Input() isPublic: boolean;
@Input() isFinalized: boolean;
@Input() isNewVersion: boolean;
@Input() isNewDataset: boolean;
@Input() isClone: boolean;
@Output() onFormChanged: EventEmitter<any> = new EventEmitter();
@ -99,23 +98,23 @@ export class DatasetInfoComponent extends BaseComponent implements OnInit {
subtitleFn: (item) => item['description']
};
}
if (this.formGroup.get('datasets')['controls'][0]) {
this.formGroup.get('datasets')['controls'][0].get('dmp').valueChanges.pipe(takeUntil(this._destroyed))
.subscribe(x => {
// this.registerFormListeners();
if (this.formGroup.get('datasets')['controls'][0].get('dmp').value) {
this.loadDatasetProfiles();
this.profilesAutoCompleteConfiguration = {
filterFn: this.filterProfiles.bind(this),
initialItems: (excludedItems: any[]) => this.filterProfiles('').pipe(map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))),
displayFn: (item) => item['label'],
titleFn: (item) => item['label'],
subtitleFn: (item) => item['description']
};
this.onFormChanged.emit();
}
});
}
// if (this.formGroup.get('datasets')['controls'][0]) {
// this.formGroup.get('datasets')['controls'][0].get('dmp').valueChanges.pipe(takeUntil(this._destroyed))
// .subscribe(x => {
// //this.registerFormListeners();
// if (this.formGroup.get('datasets')['controls'][0].get('dmp').value) {
// this.loadDatasetProfiles();
// this.profilesAutoCompleteConfiguration = {
// filterFn: this.filterProfiles.bind(this),
// initialItems: (excludedItems: any[]) => this.filterProfiles('').pipe(map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))),
// displayFn: (item) => item['label'],
// titleFn: (item) => item['label'],
// subtitleFn: (item) => item['description']
// };
// this.onFormChanged.emit();
// }
// });
// }
}
// Researchers

98
dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.html
View File

@ -2,7 +2,7 @@
<div class="container-fluid">
<form *ngIf="formGroup" [formGroup]="formGroup" (ngSubmit)="formSubmit()">
<!-- DMP Header -->
<div [hidden]="this.step >= stepsBeforeDatasets" *ngIf="!isNewDataset" class="fixed-editor-header">
<div [hidden]="this.step >= stepsBeforeDatasets" class="fixed-editor-header">
<div class="card editor-header">
<div class="col">
<div class="row">
@ -28,113 +28,57 @@
</div>
</div>
</div>
<!-- Dataset Header -->
<div *ngFor="let dataset of datasets.controls; let i = index" [hidden]="(this.step !== i + stepsBeforeDatasets) && !isNewDataset" class="fixed-editor-header">
<div class="card dataset-editor-header" [style.height]="isNewDataset ? 'auto' : '113px'">
<div class="col">
<div class="row">
<div class="col info" *ngIf="!isNewDataset">
<div class="dataset-title">{{'DMP-EDITOR.TITLE.EDIT-DATASET' | translate}}</div>
<div class="dataset-subtitle">{{ dataset.get('label').value }} <span *ngIf="isDirty()" class="dataset-changes">({{'DMP-EDITOR.CHANGES' | translate}})</span></div>
<div class="d-flex flex-direction-row pt-2">
<div class="col-auto dataset-part-of">{{'DATASET-LISTING.TOOLTIP.PART-OF' | translate}}
<div class="col-auto dmp-label ml-3">{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}</div>
</div>
<div class="col-auto dmp-title">{{ formGroup.get('label').value }}</div>
<div class="col d-flex align-items-center">
<a [routerLink]="['/overview/' + formGroup.get('id').value]" target="_blank" class="pointer"><span class="material-icons">open_in_new</span></a>
</div>
</div>
</div>
<div class="col info" *ngIf="isNewDataset">
<div *ngIf="!hasDmpId" class="dataset-title">{{'DMP-EDITOR.TITLE.CREATE-DATASET' | translate}}</div>
<div *ngIf="hasDmpId" class="dataset-title">{{'DMP-EDITOR.TITLE.ADD-DATASET' | translate}} {{formGroup.get('datasets')['controls'][0].get('dmp').value.label}}</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 && !isFinalized" mat-raised-button class="dataset-save-btn" type="submit">{{ 'DATASET-WIZARD.ACTIONS.SAVE' | translate }}</button>
<button *ngIf="lockStatus" mat-raised-button disabled class="dataset-save-btn cursor-default" type="button">{{ 'DMP-OVERVIEW.LOCKED' | translate}}</button>
<!-- <div *ngIf="!isNew && formGroup.enabled && !lockStatus">
<button *ngIf="!isFinalized" mat-raised-button type="submit" class="dataset-save-btn">{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}</button>
</div> -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row editor-content">
<div class="col-auto" [ngClass]="{'dmp-stepper': this.step < stepsBeforeDatasets || isNewDataset, 'dataset-stepper': this.step >= stepsBeforeDatasets && !isNewDataset}">
<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">
<ol class="stepper-list">
<li *ngIf="!isNewDataset" (click)="changeStep(0)" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (4)</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(2)" [ngClass]="{'active': this.step === 2}">{{'DMP-EDITOR.STEPPER.LICENSE-INFO' | translate}} (5)</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 (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(2)" [ngClass]="{'active': this.step === 2}">{{'DMP-EDITOR.STEPPER.LICENSE-INFO' | translate}} (5)</li>
<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" (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 *ngFor="let dataset of datasets.controls; let i = index" (click)="editDataset(dataset.get('id').value)" 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 && !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 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>
<!-- <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 }}</li>
</ul> -->
</li>
</ol>
<!-- <ul *ngIf="!isNewDataset && hasProfile() && !isFinalized" class="add-dataset-option">
<ul *ngIf="hasProfile() && !isNew && !isFinalized" class="add-dataset-option">
<li>
<a class="add-dataset-btn stepper-btn" (click)="addDataset()" target="_blank">
<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> -->
</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="!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()">
<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="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>
<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
</div>
<div *ngIf="!isNewDataset && this.step >= 3 && hasProfile() && !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-LISTING.ACTIONS.ADD-DATASET-SHORT' | translate}}</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>
<div class="col-auto form">
<main-info [hidden]="this.step !== 0" [formGroup]="formGroup" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" (onFormChanged)="formChanged()"></main-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>
<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 !== 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>
<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" [isNewDataset]="isNewDataset" [dmpId]="formGroup.get('id').value" [availableProfiles]="formGroup.get('profiles').value" (formChanged)="formChanged($event)"></dataset-editor-details>
<dataset-editor-details [formGroup]="dataset" [dmpId]="formGroup.get('id').value" [availableProfiles]="formGroup.get('profiles').value" (formChanged)="formChanged($event)"></dataset-editor-details>
</div>
</div>
</div>

6
dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.scss
View File

@ -351,6 +351,12 @@ mat-icon.size-16 {
cursor: pointer;
}
.add-dataset-action {
display: flex;
align-items: center;
cursor: pointer;
}
.next {
background: #129d99 0% 0% no-repeat padding-box;
color: white;

143
dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.ts
View File

@ -67,7 +67,6 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
isFinalized = false;
hasChanges = false;
isDiscarded = false;
isNewDataset = false;
hasDmpId = false;
isUserOwner: boolean = true;
@ -115,11 +114,11 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
}
ngOnInit() {
if (this.router.url.toString().includes('/new/dataset')) {
this.isNewDataset = true;
this.stepsBeforeDatasets = 2;
this.maxStep = 2;
};
// if (this.router.url.toString().includes('/new/dataset')) {
// this.isNewDataset = true;
// this.stepsBeforeDatasets = 2;
// this.maxStep = 2;
// };
this.route.params
.pipe(takeUntil(this._destroyed))
.subscribe((params: Params) => {
@ -222,6 +221,10 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
}
this.associatedUsers = data.associatedUsers;
this.people = data.users;
this.formGroup.valueChanges.pipe(takeUntil(this._destroyed))
.subscribe(x => {
this.formChanged();
});
})
});
} else if (publicId != null) {
@ -276,46 +279,57 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
// });
// }
// })
});
} else if (this.isNewDataset) {
this.dmp = new DmpEditorModel();
this.dmp.grant = new GrantTabModel();
this.dmp.project = new ProjectFormModel();
this.dmp.funder = new FunderFormModel();
this.dmp.extraProperties = new ExtraPropertiesFormModel();
this.dmp.extraProperties.visible = false;
this.dmp.extraProperties.contact = this.authService.current().id;
this.datasetWizardEditorModel = new DatasetWizardEditorModel();
if (dmpId) {
this.hasDmpId = true;
this.dmpService.getSingle(dmpId).pipe(map(data => data as DmpModel))
.pipe(takeUntil(this._destroyed))
.subscribe(data => {
setTimeout(() => {
this.dmpModel = data;
this.datasetWizardEditorModel.dmp = data;
this.dmp.datasets.push(this.datasetWizardEditorModel);
this.formGroup = this.dmp.buildForm();
this.formGroup.get('datasets')['controls'][0].get('dmp').disable();
this.datasets = this.formGroup.get('datasets') as FormArray;
this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
this.maxStep = this.formGroup.get('datasets') ? this.maxStep + this.formGroup.get('datasets').value.length - 1 : this.maxStep;
// this.loadDatasetProfiles();
// this.registerFormListeners();
this.formGroup.valueChanges.pipe(takeUntil(this._destroyed))
.subscribe(x => {
this.formChanged();
});
});
});
}
// else if (this.isNewDataset) {
// this.dmp = new DmpEditorModel();
// this.dmp.grant = new GrantTabModel();
// this.dmp.project = new ProjectFormModel();
// this.dmp.funder = new FunderFormModel();
// this.dmp.extraProperties = new ExtraPropertiesFormModel();
// this.dmp.extraProperties.visible = false;
// this.dmp.extraProperties.contact = this.authService.current().id;
// this.datasetWizardEditorModel = new DatasetWizardEditorModel();
} else {
this.dmp.datasets.push(this.datasetWizardEditorModel);
this.formGroup = this.dmp.buildForm();
this.datasets = this.formGroup.get('datasets') as FormArray;
this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
this.maxStep = this.formGroup.get('datasets') ? this.maxStep + this.formGroup.get('datasets').value.length - 1 : this.maxStep;
}
// if (dmpId) {
// this.hasDmpId = true;
// this.dmpService.getSingle(dmpId).pipe(map(data => data as DmpModel))
// .pipe(takeUntil(this._destroyed))
// .subscribe(data => {
// setTimeout(() => {
// this.dmpModel = data;
// this.datasetWizardEditorModel.dmp = data;
// this.dmp.datasets.push(this.datasetWizardEditorModel);
// this.formGroup = this.dmp.buildForm();
// this.formGroup.get('datasets')['controls'][0].get('dmp').disable();
// this.datasets = this.formGroup.get('datasets') as FormArray;
// this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
// this.maxStep = this.formGroup.get('datasets') ? this.maxStep + this.formGroup.get('datasets').value.length - 1 : this.maxStep;
// // this.loadDatasetProfiles();
// // this.registerFormListeners();
// });
// });
this.registerFormEventsForNewItem();
} else {
// } else {
// this.dmp.datasets.push(this.datasetWizardEditorModel);
// this.formGroup = this.dmp.buildForm();
// this.datasets = this.formGroup.get('datasets') as FormArray;
// this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
// this.maxStep = this.formGroup.get('datasets') ? this.maxStep + this.formGroup.get('datasets').value.length - 1 : this.maxStep;
// this.formGroup.valueChanges.pipe(takeUntil(this._destroyed))
// .subscribe(x => {
// console.log(x);
// this.formChanged();
// });
// }
// this.registerFormEventsForNewItem();
// }
else {
this.dmp = new DmpEditorModel();
this.dmp.grant = new GrantTabModel();
this.dmp.project = new ProjectFormModel();
@ -345,6 +359,10 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
]);
})
}
this.formGroup.valueChanges.pipe(takeUntil(this._destroyed))
.subscribe(x => {
this.formChanged();
});
}
});
@ -424,20 +442,20 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
formSubmit(addNew?: boolean, showAddDatasetDialog?: boolean): void {
this.formService.touchAllFormFields(this.formGroup);
if (this.isNewDataset) {
if (!this.isDatasetFormValid) {
this.showValidationErrorsDialog();
return;
}
this.onDatasetSubmit();
}
else {
// if (this.isNewDataset) {
// if (!this.isDatasetFormValid) {
// this.showValidationErrorsDialog();
// return;
// }
// this.onDatasetSubmit();
// }
// else {
if (!this.isFormValid()) {
this.showValidationErrorsDialog();
return;
}
this.onSubmit(addNew, showAddDatasetDialog);
}
// }
}
public isFormValid() {
@ -823,22 +841,13 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
public discardChanges() {
this.isDiscarded = true;
this.hasChanges = false;
if (this.isNewDataset && !this.hasDmpId) {
this.formGroup.get('datasets')['controls'].forEach(element => {
element.removeControl('datasetProfileDefinition');
});
this.formGroup.reset();
} else if (this.hasDmpId) {
Object.keys(this.formGroup.get('datasets')['controls'][0].controls).forEach((key: string) => {
if (key === 'datasetProfileDefinition') {
this.formGroup.get('datasets')['controls'][0].removeControl(key);
}
if (key !== 'dmp' && key !== 'datasetProfileDefinition') {
this.formGroup.get('datasets')['controls'][0].get(key).reset();
}
});
} else {
if (!this.isNew) {
this.formGroup.patchValue(JSON.parse(JSON.stringify(this.formGroupRawValue)));
} else {
this.formGroup.reset();
this.formGroup.get('extraProperties').get('visible').setValue(false);
this.formGroup.get('extraProperties').get('contact').setValue(this.authService.current().id);
this.formGroup.get('associatedUsers').setValue([]);
}
this.isDiscarded = false;
}

2
dmp-frontend/src/app/ui/dmp/editor/funding-info/funding-info.component.ts
View File

@ -81,7 +81,7 @@ export class FundingInfoComponent extends BaseComponent implements OnInit {
this.formGroup.valueChanges.pipe(takeUntil(this._destroyed))
.subscribe(x => {
this.configureAutoCompletes();
this.onFormChanged.emit();
// this.onFormChanged.emit();
});
}

12
dmp-frontend/src/app/ui/dmp/editor/license-info/license-info.component.html
View File

@ -9,7 +9,7 @@
<div class="heading">4.1 {{'DMP-EDITOR.FIELDS.LANGUAGE' | translate}}</div>
<!-- <div class="hint">{{'DMP-EDITOR.LICENSE-INFO.HINT' | translate}}</div> -->
<div class="title-form">
<mat-form-field *ngIf="!isNewDataset">
<mat-form-field>
<mat-select [formControl]="formGroup.get('extraProperties').get('language')" placeholder="{{'DMP-EDITOR.FIELDS.LANGUAGE' | translate}}">
<mat-option *ngFor="let lang of getLanguageInfos()" [value]="lang.code">
{{ lang.name }}
@ -24,7 +24,7 @@
</div>
</div>
<!-- Description field -->
<div class="row" *ngIf="!isNewDataset">
<div class="row">
<div class="col-12">
<div class="heading">4.2 {{'DMP-EDITOR.FIELDS.LICENSE' | translate}}</div>
<div class="hint">{{'DMP-EDITOR.LICENSE-INFO.HINT' | translate}}</div>
@ -41,7 +41,7 @@
</div>
</div>
<!-- Researchers field-->
<div class="row" *ngIf="!isNewDataset">
<div class="row">
<div class="col-12">
<div class="heading">4.3 {{'DMP-EDITOR.FIELDS.VISIBILITY' | translate}}</div>
<!-- <div class="hint">{{'DMP-EDITOR.LICENSE-INFO.HINT' | translate}}</div> -->
@ -61,7 +61,7 @@
</div>
</div>
<!-- Organizations Field -->
<div class="row" *ngIf="!isNewDataset && formGroup.get('extraProperties').get('visible').value">
<div class="row" *ngIf="formGroup.get('extraProperties').get('visible').value">
<div class="col-12">
<div class="heading">4.4 {{'DMP-EDITOR.FIELDS.PUBLICATION' | translate}}</div>
<!-- <div class="hint">{{'DMP-EDITOR.LICENSE-INFO.HINT' | translate}}</div> -->
@ -78,7 +78,7 @@
</div>
</div>
</div>
<div class="row" *ngIf="!isNewDataset">
<div class="row">
<div class="col-12">
<div class="heading">4.5 {{'DMP-EDITOR.FIELDS.CONTACT' | translate}}</div>
<!-- <div class="hint">{{'DMP-EDITOR.LICENSE-INFO.HINT' | translate}}</div> -->
@ -97,7 +97,7 @@
</div>
</div>
</div>
<!-- <div class="row" *ngIf="!isNewDataset">
<!-- <div class="row">
<div class="col-12">
<div class="heading">4.6 {{'DMP-EDITOR.FIELDS.COST' | translate}}</div>
<div class="hint">{{'DMP-EDITOR.LICENSE-INFO.HINT' | translate}}</div>

3
dmp-frontend/src/app/ui/dmp/editor/license-info/license-info.component.ts
View File

@ -30,7 +30,6 @@ export class LicenseInfoComponent extends BaseComponent implements OnInit {
@Input() formGroup: FormGroup = null;
// @Input() datasetFormGroup: FormGroup;
@Input() isNewVersion: boolean;
@Input() isNewDataset: boolean;
@Input() isUserOwner: boolean;
@Input() isClone: boolean;
@Output() onFormChanged: EventEmitter<any> = new EventEmitter();
@ -74,7 +73,7 @@ export class LicenseInfoComponent extends BaseComponent implements OnInit {
this.formGroup.valueChanges.pipe(takeUntil(this._destroyed))
.subscribe(x => {
this.onFormChanged.emit();
// this.onFormChanged.emit();
});
}

13
dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.html
View File

@ -9,23 +9,18 @@
<div class="heading">1.1 {{'DMP-EDITOR.FIELDS.NAME' | translate}}*</div>
<!-- <div class="hint">{{'DMP-EDITOR.MAIN-INFO.HINT' | translate}}</div> -->
<div class="title-form">
<mat-form-field *ngIf="!isNewDataset">
<mat-form-field>
<input matInput placeholder="{{'DMP-EDITOR.FIELDS.NAME' | 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>
<mat-form-field *ngIf="isNewDataset">
<app-single-auto-complete [required]="true" [formControl]="this.formGroup.get('datasets')['controls'][0].get('dmp')" placeholder="{{'DATASET-EDITOR.FIELDS.SELECT-DMP' | translate}}" [configuration]="dmpAutoCompleteConfiguration"></app-single-auto-complete>
<!-- <app-single-auto-complete [required]="true" [formControl]="formGroup" placeholder="{{'DATASET-EDITOR.FIELDS.SELECT-DMP' | translate}}" [configuration]="dmpAutoCompleteConfiguration">
</app-single-auto-complete> -->
</mat-form-field>
</div>
</div>
</div>
<!-- Description field -->
<div class="row" *ngIf="!isNewDataset">
<div class="row">
<div class="col-12">
<div class="heading">1.2 {{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}</div>
<!-- <div class="hint">{{'DMP-EDITOR.MAIN-INFO.HINT' | translate}}</div> -->
@ -37,7 +32,7 @@
</div>
</div>
<!-- Researchers field-->
<div class="row" *ngIf="!isNewDataset">
<div class="row">
<div class="col-12">
<div class="heading">1.3 {{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}</div>
<div class="hint">
@ -62,7 +57,7 @@
</div>
</div>
<!-- Organizations Field -->
<div class="row" *ngIf="!isNewDataset">
<div class="row">
<div class="col-12">
<div class="heading">1.4 {{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}</div>
<div class="hint">

1
dmp-frontend/src/app/ui/dmp/editor/main-info/main-info.component.ts
View File

@ -29,7 +29,6 @@ export class MainInfoComponent extends BaseComponent implements OnInit {
@Input() formGroup: FormGroup = null;
// @Input() datasetFormGroup: FormGroup;
@Input() isNewVersion: boolean;
@Input() isNewDataset: boolean;
@Input() isUserOwner: boolean;
@Input() isClone: boolean;
@Output() onFormChanged: EventEmitter<any> = new EventEmitter();

14
dmp-frontend/src/app/ui/misc/dataset-description-form/dataset-description.component.ts
View File

@ -30,13 +30,13 @@ export class DatasetDescriptionComponent extends BaseComponent implements OnInit
ngOnInit() {
this.visibilityRulesService.buildVisibilityRules(this.visibilityRules, this.form);
if (this.form) {
this.form.valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(val => {
this.formChanged.emit(val);
});
}
// if (this.form) {
// this.form.valueChanges
// .pipe(takeUntil(this._destroyed))
// .subscribe(val => {
// this.formChanged.emit(val);
// });
// }
}
ngOnChanges(changes: SimpleChanges) {

10
dmp-frontend/src/app/ui/misc/dataset-description-form/tableOfContentsMaterial/table-of-contents.ts
View File

@ -4,6 +4,7 @@ import { BaseComponent } from '@common/base/base.component';
import { interval, Subject, Subscription } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';
import { type } from 'os';
import { SimpleChanges } from '@angular/core';
interface Link {
/* id of the section*/
@ -104,6 +105,15 @@ export class TableOfContents extends BaseComponent implements OnInit {
})
}
ngOnChanges(changes: SimpleChanges) {
if (!this.isActive && this.links && this.links.length > 0) {
this.links.forEach(link => {
link.selected = false;
})
this.links[0].selected = true;
}
}
goToStep(link: Link) {
// this.selectedLinkId = link.id;
this.stepFound.emit({

1
dmp-frontend/tsconfig.json
View File

@ -10,6 +10,7 @@
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"skipLibCheck": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"