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

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

This commit is contained in:
gpapavgeri 2020-08-06 13:31:03 +03:00
parent 8fde8a684c 9708a0c82d
commit 99a89ad7d5
3 changed files with 75 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
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" 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>

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

@ -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;

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

@ -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;