Merge branch 'ui-redesign' of gitlab.eudat.eu:dmp/OpenAIRE-EUDAT-DMP-service-pilot into ui-redesign
This commit is contained in:
commit
99a89ad7d5
|
@ -2,7 +2,7 @@
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<form *ngIf="formGroup" [formGroup]="formGroup" (ngSubmit)="formSubmit()">
|
<form *ngIf="formGroup" [formGroup]="formGroup" (ngSubmit)="formSubmit()">
|
||||||
<!-- DMP Header -->
|
<!-- DMP Header -->
|
||||||
<div [hidden]="this.step >= stepsBeforeDatasets" class="fixed-editor-header">
|
<div [hidden]="this.step >= stepsBeforeDatasets" *ngIf="!isNewDataset" class="fixed-editor-header">
|
||||||
<div class="card editor-header">
|
<div class="card editor-header">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
@ -28,11 +28,11 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Dataset Header -->
|
<!-- Dataset Header -->
|
||||||
<div *ngFor="let dataset of datasets.controls; let i = index" [hidden]="this.step !== i + stepsBeforeDatasets" class="fixed-editor-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">
|
<div class="card dataset-editor-header" [style.height]="isNewDataset ? 'auto' : '113px'">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col info">
|
<div class="col info" *ngIf="!isNewDataset">
|
||||||
<div class="dataset-title">{{'DMP-EDITOR.TITLE.EDIT-DATASET' | translate}}</div>
|
<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="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="d-flex flex-direction-row pt-2">
|
||||||
|
@ -45,6 +45,9 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col info" *ngIf="isNewDataset">
|
||||||
|
<div class="dataset-title">{{'DMP-EDITOR.TITLE.CREATE-DATASET' | translate}}</div>
|
||||||
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-auto d-flex align-items-center p-0">
|
<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()">
|
<button *ngIf="isDirty()" type="button" mat-raised-button class="dataset-discard-btn" (click)="discardChanges()">
|
||||||
|
@ -63,13 +66,18 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row editor-content">
|
<div class="row editor-content">
|
||||||
<div class="col-auto" [ngClass]="{'dmp-stepper': this.step < stepsBeforeDatasets, 'dataset-stepper': this.step >= stepsBeforeDatasets}">
|
<div class="col-auto" [ngClass]="{'dmp-stepper': this.step < stepsBeforeDatasets || isNewDataset, 'dataset-stepper': this.step >= stepsBeforeDatasets && !isNewDataset}">
|
||||||
<div class="stepper-title">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</div>
|
<div class="stepper-title">{{'DMP-EDITOR.STEPPER.USER-GUIDE' | translate}}</div>
|
||||||
<div class="stepper-options">
|
<div class="stepper-options">
|
||||||
<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 *ngIf="!isNewDataset" (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 *ngIf="isNewDataset" (click)="changeStep(0)" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (1)</li>
|
||||||
<li (click)="changeStep(2)" [ngClass]="{'active': this.step === 2}">{{'DMP-EDITOR.STEPPER.DATASET-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.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)="changeStep(i + stepsBeforeDatasets, dataset)" [ngClass]="{'active-dataset': this.step === i + stepsBeforeDatasets}">
|
||||||
<div>{{'DMP-EDITOR.STEPPER.DATASET' | translate}}</div>
|
<div>{{'DMP-EDITOR.STEPPER.DATASET' | translate}}</div>
|
||||||
<ul class="dataset-list">
|
<ul class="dataset-list">
|
||||||
|
@ -83,16 +91,23 @@
|
||||||
<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="!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()">
|
||||||
|
<span class="material-icons">chevron_right</span>
|
||||||
|
<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</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()">
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto form">
|
<div class="col-auto form">
|
||||||
<main-info [hidden]="this.step !== 0" [formGroup]="formGroup" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></main-info>
|
<main-info [hidden]="this.step !== 0" [formGroup]="formGroup" [isUserOwner]="isUserOwner" [isNewDataset]="isNewDataset" (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>
|
|
||||||
<dataset-info [hidden]="this.step !== 2" [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized || lockStatus" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></dataset-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" (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" (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)="datasetFormChanged($event)"></dataset-editor-details>
|
<dataset-editor-details [formGroup]="dataset" [dmpId]="formGroup.get('id').value" (formChanged)="datasetFormChanged($event)"></dataset-editor-details>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -376,13 +376,13 @@ a:hover {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .mat-tab-labels {
|
// ::ng-deep .mat-tab-labels {
|
||||||
justify-content: space-between;
|
// justify-content: space-between;
|
||||||
}
|
// }
|
||||||
|
|
||||||
::ng-deep .mat-tab-label-content {
|
// ::ng-deep .mat-tab-label-content {
|
||||||
text-transform: uppercase;
|
// text-transform: uppercase;
|
||||||
}
|
// }
|
||||||
|
|
||||||
::ng-deep .mat-ink-bar {
|
::ng-deep .mat-ink-bar {
|
||||||
background-color: #00b29f !important;
|
background-color: #00b29f !important;
|
||||||
|
|
|
@ -42,6 +42,9 @@ import { Guid } from '@common/types/guid';
|
||||||
import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
|
import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
|
||||||
import { ExtraPropertiesFormModel } from './general-tab/extra-properties-form.model';
|
import { ExtraPropertiesFormModel } from './general-tab/extra-properties-form.model';
|
||||||
import { DatasetWizardEditorModel } from '@app/ui/dataset/dataset-wizard/dataset-wizard-editor.model';
|
import { DatasetWizardEditorModel } from '@app/ui/dataset/dataset-wizard/dataset-wizard-editor.model';
|
||||||
|
import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
|
||||||
|
import { DmpListingModel } from '@app/core/model/dmp/dmp-listing';
|
||||||
|
import { DmpCriteria } from '@app/core/query/dmp/dmp-criteria';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-dmp-editor-component',
|
selector: 'app-dmp-editor-component',
|
||||||
|
@ -57,25 +60,29 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
|
||||||
isNew = true;
|
isNew = true;
|
||||||
isPublic = false;
|
isPublic = false;
|
||||||
isFinalized = false;
|
isFinalized = false;
|
||||||
|
hasChanges = false;
|
||||||
|
isNewDataset = false;
|
||||||
|
isUserOwner: boolean = true;
|
||||||
|
|
||||||
dmp: DmpEditorModel;
|
dmp: DmpEditorModel;
|
||||||
formGroup: FormGroup = null;
|
formGroup: FormGroup = null;
|
||||||
formGroupRawValue: any;
|
formGroupRawValue: any;
|
||||||
hasChanges = false;
|
datasetId: string = null;
|
||||||
|
datasets = new FormArray([]);
|
||||||
selectedTab = 0;
|
|
||||||
createNewVersion;
|
createNewVersion;
|
||||||
|
|
||||||
associatedUsers: Array<UserModel>;
|
associatedUsers: Array<UserModel>;
|
||||||
people: Array<UserInfoListingModel>;
|
people: Array<UserInfoListingModel>;
|
||||||
filteredOptions: DmpProfileListing[];
|
filteredOptions: DmpProfileListing[];
|
||||||
selectedDmpProfileDefinition: DmpProfileDefinition;
|
selectedDmpProfileDefinition: DmpProfileDefinition;
|
||||||
|
|
||||||
DynamicDmpFieldResolverComponent: any;
|
DynamicDmpFieldResolverComponent: any;
|
||||||
isUserOwner: boolean = true;
|
|
||||||
lock: LockModel;
|
lock: LockModel;
|
||||||
lockStatus: Boolean;
|
lockStatus: Boolean;
|
||||||
datasets: FormArray;
|
|
||||||
datasetId: string = null;
|
selectedTab = 0;
|
||||||
stepsBeforeDatasets: number = 3;
|
|
||||||
step: number = 0;
|
step: number = 0;
|
||||||
|
stepsBeforeDatasets: number = 3;
|
||||||
maxStep: number = 3;
|
maxStep: number = 3;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
|
@ -96,6 +103,11 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
|
if (this.router.url.toString().localeCompare('/new/dataset') === 0) {
|
||||||
|
this.isNewDataset = true;
|
||||||
|
this.stepsBeforeDatasets = 2;
|
||||||
|
this.maxStep = 2;
|
||||||
|
};
|
||||||
this.route.params
|
this.route.params
|
||||||
.pipe(takeUntil(this._destroyed))
|
.pipe(takeUntil(this._destroyed))
|
||||||
.subscribe((params: Params) => {
|
.subscribe((params: Params) => {
|
||||||
|
@ -146,10 +158,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
|
||||||
this.dmp.extraProperties = new ExtraPropertiesFormModel();
|
this.dmp.extraProperties = new ExtraPropertiesFormModel();
|
||||||
this.dmp.fromModel(data);
|
this.dmp.fromModel(data);
|
||||||
this.formGroup = this.dmp.buildForm();
|
this.formGroup = this.dmp.buildForm();
|
||||||
this.datasets = new FormArray([]);
|
|
||||||
// this.formGroup.get('datasets')['controls'].forEach(element => {
|
|
||||||
// this.datasets.push(element);
|
|
||||||
// });
|
|
||||||
this.datasets = this.formGroup.get('datasets') as FormArray;
|
this.datasets = this.formGroup.get('datasets') as FormArray;
|
||||||
this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
|
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.maxStep = this.formGroup.get('datasets') ? this.maxStep + this.formGroup.get('datasets').value.length - 1 : this.maxStep;
|
||||||
|
@ -216,11 +225,10 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
|
||||||
this.dmp.fromModel(data);
|
this.dmp.fromModel(data);
|
||||||
this.formGroup = this.dmp.buildForm();
|
this.formGroup = this.dmp.buildForm();
|
||||||
|
|
||||||
this.datasets = new FormArray([]);
|
// this.formGroup.get('datasets')['controls'].forEach(element => {
|
||||||
this.formGroup.get('datasets')['controls'].forEach(element => {
|
// this.datasets.push(element);
|
||||||
this.datasets.push(element);
|
// });
|
||||||
});
|
this.datasets = this.formGroup.get('datasets') as FormArray;
|
||||||
|
|
||||||
this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
|
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.maxStep = this.formGroup.get('datasets') ? this.maxStep + this.formGroup.get('datasets').value.length - 1 : this.maxStep;
|
||||||
|
|
||||||
|
@ -251,6 +259,24 @@ 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;
|
||||||
|
const datasetWizardEditorModel = new DatasetWizardEditorModel();
|
||||||
|
this.dmp.datasets.push(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.registerFormEventsForNewItem();
|
||||||
} else {
|
} else {
|
||||||
this.dmp = new DmpEditorModel();
|
this.dmp = new DmpEditorModel();
|
||||||
this.dmp.grant = new GrantTabModel();
|
this.dmp.grant = new GrantTabModel();
|
||||||
|
@ -261,11 +287,6 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
|
||||||
this.dmp.extraProperties.contact = this.authService.current().id;
|
this.dmp.extraProperties.contact = this.authService.current().id;
|
||||||
this.formGroup = this.dmp.buildForm();
|
this.formGroup = this.dmp.buildForm();
|
||||||
|
|
||||||
this.datasets = new FormArray([]);
|
|
||||||
this.formGroup.get('datasets')['controls'].forEach(element => {
|
|
||||||
this.datasets.push(element);
|
|
||||||
});
|
|
||||||
|
|
||||||
this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
|
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.maxStep = this.formGroup.get('datasets') ? this.maxStep + this.formGroup.get('datasets').value.length - 1 : this.maxStep;
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue