Removes old dataset editor on click of edit dataset
This commit is contained in:
parent
9ffa1a5a54
commit
de10a986db
|
@ -269,7 +269,7 @@ export class DatasetOverviewComponent extends BaseComponent implements OnInit {
|
||||||
window.open(url.toString(), '_blank');
|
window.open(url.toString(), '_blank');
|
||||||
} else {
|
} else {
|
||||||
// let url = this.router.createUrlTree(['/datasets/edit/', dataset.id]);
|
// let url = this.router.createUrlTree(['/datasets/edit/', dataset.id]);
|
||||||
let url = this.router.createUrlTree(['/dmp/edit/', dataset.id]);
|
let url = this.router.createUrlTree(['/plans/edit/', dataset.dmp.id], { queryParams: { dataset: dataset.id } });
|
||||||
window.open(url.toString(), '_blank');
|
window.open(url.toString(), '_blank');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
<div class="main-content">
|
<div class="main-content">
|
||||||
<div *ngIf="dmp" 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 >= 3" class="fixed-editor-header">
|
<div [hidden]="this.step >= stepsBeforeDatasets" 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,7 +28,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Dataset Header -->
|
<!-- Dataset Header -->
|
||||||
<div *ngFor="let dataset of formGroup.get('datasets')['controls']; let i = index" [hidden]="this.step !== i + 3" class="fixed-editor-header">
|
<div *ngFor="let dataset of datasets.controls; let i = index" [hidden]="this.step !== i + stepsBeforeDatasets" class="fixed-editor-header">
|
||||||
<div class="card dataset-editor-header">
|
<div class="card dataset-editor-header">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
@ -63,17 +63,17 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row editor-content">
|
<div class="row editor-content">
|
||||||
<div class="col-auto stepper">
|
<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-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 (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.DATASET-INFO' | translate}}</li>
|
||||||
<li *ngFor="let dataset of formGroup.get('datasets')['controls']; let i = index" (click)="changeStep(i + 3)" [ngClass]="{'active-dataset': this.step === i + 3}">
|
<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">
|
||||||
<li [ngClass]="{'active': this.step === i + 3}">{{ 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>
|
||||||
|
@ -83,7 +83,7 @@
|
||||||
<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 < 3, 'dataset-next': this.step >= 3 }" (click)="nextStep()">
|
<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()">
|
||||||
<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>
|
||||||
|
@ -93,7 +93,7 @@
|
||||||
<main-info [hidden]="this.step !== 0" [formGroup]="formGroup" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></main-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>
|
<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>
|
<dataset-info [hidden]="this.step !== 2" [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized || lockStatus" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></dataset-info>
|
||||||
<div *ngFor="let dataset of formGroup.get('datasets')['controls']; let i = index" [hidden]="this.step !== i + 3">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -219,7 +219,7 @@ a:hover {
|
||||||
color: #000000;
|
color: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stepper {
|
.dataset-stepper {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
// height: 100%;
|
// height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -228,6 +228,15 @@ a:hover {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dmp-stepper {
|
||||||
|
position: fixed;
|
||||||
|
// height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: calc(100vh - 190px);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.stepper-title {
|
.stepper-title {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
|
|
|
@ -41,6 +41,7 @@ import { LockModel } from '@app/core/model/lock/lock.model';
|
||||||
import { Guid } from '@common/types/guid';
|
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';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-dmp-editor-component',
|
selector: 'app-dmp-editor-component',
|
||||||
|
@ -71,6 +72,9 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
|
||||||
isUserOwner: boolean = true;
|
isUserOwner: boolean = true;
|
||||||
lock: LockModel;
|
lock: LockModel;
|
||||||
lockStatus: Boolean;
|
lockStatus: Boolean;
|
||||||
|
datasets: FormArray;
|
||||||
|
datasetId: string = null;
|
||||||
|
stepsBeforeDatasets: number = 3;
|
||||||
step: number = 0;
|
step: number = 0;
|
||||||
maxStep: number = 3;
|
maxStep: number = 3;
|
||||||
|
|
||||||
|
@ -99,6 +103,8 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
|
||||||
const publicId = params['publicId'];
|
const publicId = params['publicId'];
|
||||||
const queryParams = this.route.snapshot.queryParams;
|
const queryParams = this.route.snapshot.queryParams;
|
||||||
const tabToNav = queryParams['tab'];
|
const tabToNav = queryParams['tab'];
|
||||||
|
this.datasetId = queryParams['dataset'];
|
||||||
|
// if (queryParams['step']) { this.step = queryParams['step']; }
|
||||||
|
|
||||||
const grantRequestItem: RequestItem<GrantCriteria> = new RequestItem();
|
const grantRequestItem: RequestItem<GrantCriteria> = new RequestItem();
|
||||||
grantRequestItem.criteria = new GrantCriteria();
|
grantRequestItem.criteria = new GrantCriteria();
|
||||||
|
@ -111,6 +117,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
|
||||||
// displayFn: (item) => item['label'],
|
// displayFn: (item) => item['label'],
|
||||||
// titleFn: (item) => item['label']
|
// titleFn: (item) => item['label']
|
||||||
// };
|
// };
|
||||||
|
|
||||||
switch (tabToNav) {
|
switch (tabToNav) {
|
||||||
case 'general':
|
case 'general':
|
||||||
this.selectedTab = 0;
|
this.selectedTab = 0;
|
||||||
|
@ -139,6 +146,11 @@ 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.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;
|
||||||
|
|
||||||
|
@ -148,6 +160,10 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
|
||||||
this.formGroup.disable();
|
this.formGroup.disable();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (this.datasetId) {
|
||||||
|
this.step = this.formGroup.get('datasets')['controls'].findIndex((dataset) => { return this.datasetId === dataset.get('id').value; }) + this.stepsBeforeDatasets;
|
||||||
|
}
|
||||||
|
|
||||||
//this.registerFormEventsForDmpProfile(this.dmp.definition);
|
//this.registerFormEventsForDmpProfile(this.dmp.definition);
|
||||||
if (!this.editMode || this.dmp.status === DmpStatus.Finalized || lockStatus) {
|
if (!this.editMode || this.dmp.status === DmpStatus.Finalized || lockStatus) {
|
||||||
this.isFinalized = true;
|
this.isFinalized = true;
|
||||||
|
@ -200,6 +216,11 @@ 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.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;
|
||||||
|
|
||||||
|
@ -240,6 +261,11 @@ 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;
|
||||||
|
|
||||||
|
@ -374,7 +400,8 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
|
||||||
if (showAddDatasetDialog) {
|
if (showAddDatasetDialog) {
|
||||||
this.addDatasetOpenDialog(complete);
|
this.addDatasetOpenDialog(complete);
|
||||||
}
|
}
|
||||||
else { this.onCallbackSuccess(complete) }
|
else if (this.step < this.stepsBeforeDatasets) { this.onCallbackSuccess(complete) }
|
||||||
|
else { this.onCallbackSuccess(complete, this.datasetId) }
|
||||||
},
|
},
|
||||||
error => {
|
error => {
|
||||||
this.formGroup.get('status').setValue(DmpStatus.Draft);
|
this.formGroup.get('status').setValue(DmpStatus.Draft);
|
||||||
|
@ -398,9 +425,13 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onCallbackSuccess(id?: String): void {
|
onCallbackSuccess(id?: String, datasetId?: string): void {
|
||||||
this.uiNotificationService.snackBarNotification(this.isNew ? this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-CREATION') : this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);
|
this.uiNotificationService.snackBarNotification(this.isNew ? this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-CREATION') : this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);
|
||||||
id != null ? this.router.navigate(['/reload']).then(() => { this.router.navigate(['/plans', 'edit', id]); }) : this.router.navigate(['/reload']).then(() => { this.router.navigate(['/plans']); });
|
if (id != null) {
|
||||||
|
datasetId ? this.router.navigate(['/reload']).then(() => { this.router.navigate(['/plans', 'edit', id], { queryParams: { dataset: datasetId } }); }) : this.router.navigate(['/reload']).then(() => { this.router.navigate(['/plans', 'edit', id]); })
|
||||||
|
} else {
|
||||||
|
this.router.navigate(['/reload']).then(() => { this.router.navigate(['/plans']); });
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onCallbackError(error: any) {
|
onCallbackError(error: any) {
|
||||||
|
@ -629,16 +660,23 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
|
||||||
this.lockService.createOrUpdate(this.lock).pipe(takeUntil(this._destroyed)).subscribe(async result => this.lock.id = Guid.parse(result));
|
this.lockService.createOrUpdate(this.lock).pipe(takeUntil(this._destroyed)).subscribe(async result => this.lock.id = Guid.parse(result));
|
||||||
}
|
}
|
||||||
|
|
||||||
public changeStep(index: number) {
|
public changeStep(index: number, dataset?: FormControl) {
|
||||||
this.step = index;
|
this.step = index;
|
||||||
|
if (dataset) { this.datasetId = dataset.get('id').value };
|
||||||
}
|
}
|
||||||
|
|
||||||
public nextStep() {
|
public nextStep() {
|
||||||
this.step = this.step < this.maxStep ? this.step + 1 : this.step;
|
this.step = this.step < this.maxStep ? this.step + 1 : this.step;
|
||||||
|
if (this.step >= this.stepsBeforeDatasets) {
|
||||||
|
this.datasetId = this.datasets.at(this.step - this.stepsBeforeDatasets).get('id').value;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
public previousStep() {
|
public previousStep() {
|
||||||
this.step = this.step !== 0 ? this.step - 1 : this.step;
|
this.step = this.step !== 0 ? this.step - 1 : this.step;
|
||||||
|
if (this.step >= this.stepsBeforeDatasets) {
|
||||||
|
this.datasetId = this.datasets.at(this.step - this.stepsBeforeDatasets).get('id').value;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
public isDirty(): boolean {
|
public isDirty(): boolean {
|
||||||
|
|
Loading…
Reference in New Issue