Adds new dataset editor (1st commit)
This commit is contained in:
apapachristou
parent
84047fc035
commit
16390853d6
|
|
@ -2,7 +2,7 @@
|
|||
<div class="container-fluid">
|
||||
<form *ngIf="formGroup" [formGroup]="formGroup" (ngSubmit)="formSubmit()">
|
||||
<!-- 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="col">
|
||||
<div class="row">
|
||||
|
|
@ -28,11 +28,11 @@
|
|||
</div>
|
||||
</div>
|
||||
<!-- Dataset 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 *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">
|
||||
<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">
|
||||
|
|
@ -45,6 +45,9 @@
|
|||
</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="col-auto d-flex align-items-center p-0">
|
||||
<button *ngIf="isDirty()" type="button" mat-raised-button class="dataset-discard-btn" (click)="discardChanges()">
|
||||
|
|
@ -63,13 +66,18 @@
|
|||
</div>
|
||||
</div>
|
||||
<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-options">
|
||||
<ol class="stepper-list">
|
||||
<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.DATASET-INFO' | translate}}</li>
|
||||
<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}} (1)</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}">
|
||||
<div>{{'DMP-EDITOR.STEPPER.DATASET' | translate}}</div>
|
||||
<ul class="dataset-list">
|
||||
|
|
@ -83,16 +91,23 @@
|
|||
<span class="material-icons">chevron_left</span>
|
||||
<div>{{'DMP-EDITOR.STEPPER.PREVIOUS' | translate}}</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>
|
||||
<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto form">
|
||||
<main-info [hidden]="this.step !== 0" [formGroup]="formGroup" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></main-info>
|
||||
<funding-info [hidden]="this.step !== 1" [formGroup]="formGroup" [grantformGroup]="formGroup.get('grant')" [projectFormGroup]="formGroup.get('project')" [funderFormGroup]="formGroup.get('funder')" [isFinalized]="isFinalized || lockStatus" [isNew]="isNew" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></funding-info>
|
||||
<dataset-info [hidden]="this.step !== 2" [formGroup]="formGroup" [dmp]="dmp" [isPublic]="isPublic" [isFinalized]="isFinalized || lockStatus" [isUserOwner]="isUserOwner" (onFormChanged)="formChanged()"></dataset-info>
|
||||
<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>
|
||||
|
||||
<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">
|
||||
<dataset-editor-details [formGroup]="dataset" [dmpId]="formGroup.get('id').value" (formChanged)="datasetFormChanged($event)"></dataset-editor-details>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -376,13 +376,13 @@ a:hover {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
::ng-deep .mat-tab-labels {
|
||||
justify-content: space-between;
|
||||
}
|
||||
// ::ng-deep .mat-tab-labels {
|
||||
// justify-content: space-between;
|
||||
// }
|
||||
|
||||
::ng-deep .mat-tab-label-content {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
// ::ng-deep .mat-tab-label-content {
|
||||
// text-transform: uppercase;
|
||||
// }
|
||||
|
||||
::ng-deep .mat-ink-bar {
|
||||
background-color: #00b29f !important;
|
||||
|
|
|
|||
|
|
@ -42,6 +42,9 @@ import { Guid } from '@common/types/guid';
|
|||
import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
|
||||
import { ExtraPropertiesFormModel } from './general-tab/extra-properties-form.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({
|
||||
selector: 'app-dmp-editor-component',
|
||||
|
|
@ -57,25 +60,29 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
|
|||
isNew = true;
|
||||
isPublic = false;
|
||||
isFinalized = false;
|
||||
hasChanges = false;
|
||||
isNewDataset = false;
|
||||
isUserOwner: boolean = true;
|
||||
|
||||
dmp: DmpEditorModel;
|
||||
formGroup: FormGroup = null;
|
||||
formGroupRawValue: any;
|
||||
hasChanges = false;
|
||||
|
||||
selectedTab = 0;
|
||||
datasetId: string = null;
|
||||
datasets = new FormArray([]);
|
||||
createNewVersion;
|
||||
|
||||
associatedUsers: Array<UserModel>;
|
||||
people: Array<UserInfoListingModel>;
|
||||
filteredOptions: DmpProfileListing[];
|
||||
selectedDmpProfileDefinition: DmpProfileDefinition;
|
||||
|
||||
DynamicDmpFieldResolverComponent: any;
|
||||
isUserOwner: boolean = true;
|
||||
lock: LockModel;
|
||||
lockStatus: Boolean;
|
||||
datasets: FormArray;
|
||||
datasetId: string = null;
|
||||
stepsBeforeDatasets: number = 3;
|
||||
|
||||
selectedTab = 0;
|
||||
step: number = 0;
|
||||
stepsBeforeDatasets: number = 3;
|
||||
maxStep: number = 3;
|
||||
|
||||
constructor(
|
||||
|
|
@ -96,6 +103,11 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
|
|||
}
|
||||
|
||||
ngOnInit() {
|
||||
if (this.router.url.toString().localeCompare('/new/dataset') === 0) {
|
||||
this.isNewDataset = true;
|
||||
this.stepsBeforeDatasets = 2;
|
||||
this.maxStep = 2;
|
||||
};
|
||||
this.route.params
|
||||
.pipe(takeUntil(this._destroyed))
|
||||
.subscribe((params: Params) => {
|
||||
|
|
@ -146,10 +158,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
|
|||
this.dmp.extraProperties = new ExtraPropertiesFormModel();
|
||||
this.dmp.fromModel(data);
|
||||
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.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.formGroup = this.dmp.buildForm();
|
||||
|
||||
this.datasets = new FormArray([]);
|
||||
this.formGroup.get('datasets')['controls'].forEach(element => {
|
||||
this.datasets.push(element);
|
||||
});
|
||||
|
||||
// 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.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 {
|
||||
this.dmp = new DmpEditorModel();
|
||||
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.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.maxStep = this.formGroup.get('datasets') ? this.maxStep + this.formGroup.get('datasets').value.length - 1 : this.maxStep;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue