Adds dialog to specify transition from dmp editor to dataset editor

This commit is contained in:
apapachristou 2020-10-05 11:34:08 +03:00
parent 886342e716
commit 34111fc6a9
7 changed files with 145 additions and 3 deletions

View File

@ -0,0 +1,24 @@
<div class="form-container">
<div mat-dialog-title class="row d-flex justify-content-end m-0" (click)="closeDialog()">
<mat-icon class="close-icon">close</mat-icon>
</div>
<div class="row d-flex pt-2 pb-2">
<div class="col">
<div mat-dialog-content class="row">
<div class="col-auto">
<span>{{'GENERAL.DMP-TO-DATASET-DIALOG.FROM-DMP' | translate}} </span>
<span class="color-green">{{'GENERAL.DMP-TO-DATASET-DIALOG.DMP' | translate}}</span>.
<span> {{'GENERAL.DMP-TO-DATASET-DIALOG.TO-DATASET' | translate}} </span>
<span class="color-yellow">{{'GENERAL.DMP-TO-DATASET-DIALOG.DATASET' | translate}} </span>
<span>{{'GENERAL.DMP-TO-DATASET-DIALOG.EDITOR' | translate}}.</span>
</div>
</div>
<div mat-mat-dialog-actions class="row mt-4 pl-3">
<div class="col-auto">
<button mat-raised-button type="button" class="start-btn" (click)="start()">{{'GENERAL.DMP-TO-DATASET-DIALOG.START' | translate}}</button>
</div>
</div>
</div>
<img class="col-auto ml-auto laptop-img" src="../../../assets/splash/assets/img/2_Sign_in/Png/Sign In - Copy.png" width="116" height="139">
</div>
</div>

View File

@ -0,0 +1,50 @@
.form-container {
}
.close-icon {
cursor: pointer;
}
.title {
font-size: 2.375em;
font-weight: lighter;
color: #000000;
opacity: 0.8;
margin-bottom: 0.842em;
}
.content {
width: 31em;
margin: 0px;
padding: 0px;
}
::ng-deep .mat-dialog-container {
border-radius: 8px;
}
.laptop-img {
padding-left: 0;
margin-top: 1.5rem;
}
.start-btn {
background: #129d99 0% 0% no-repeat padding-box;
border: 1px solid #129d99;
border-radius: 30px;
opacity: 1;
width: 101px;
height: 43px;
color: #ffffff;
font-weight: 500;
}
.color-green {
color: #129d99;
font-weight: 500;
}
.color-yellow {
color: #FCD431;
font-weight: 500;
}

View File

@ -0,0 +1,27 @@
import { Component, Inject, OnInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-to-dataset-dialog-component',
templateUrl: 'dmp-to-dataset-dialog.component.html',
styleUrls: ['./dmp-to-dataset-dialog.component.scss'],
})
export class DmpToDatasetDialogComponent implements OnInit {
constructor(
public dialogRef: MatDialogRef<DmpToDatasetDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
) { }
ngOnInit(): void {
}
start(): void {
this.dialogRef.close(true);
}
closeDialog(): void {
this.dialogRef.close();
}
}

View File

@ -45,6 +45,7 @@ import { DatasetDescriptionFormModule } from '../misc/dataset-description-form/d
import { LicenseInfoComponent } from './editor/license-info/license-info.component';
import { StartNewDatasetDialogComponent } from './start-new-dataset-dialogue/start-new-dataset-dialog.component';
import { NgxDropzoneModule } from 'ngx-dropzone';
import { DmpToDatasetDialogComponent } from './dmp-to-dataset/dmp-to-dataset-dialog.component';
@NgModule({
imports: [
@ -69,6 +70,7 @@ import { NgxDropzoneModule } from 'ngx-dropzone';
DmpEditorComponent,
DmpInvitationDialogComponent,
InvitationAcceptedComponent,
DmpToDatasetDialogComponent,
DmpWizardComponent,
DmpWizardEditorComponent,
DmpWizardDatasetListingComponent,
@ -98,6 +100,7 @@ import { NgxDropzoneModule } from 'ngx-dropzone';
],
entryComponents: [
DmpInvitationDialogComponent,
DmpToDatasetDialogComponent,
AddResearcherComponent,
AvailableProfilesComponent,
DmpFinalizeDialogComponent,

View File

@ -39,7 +39,7 @@
<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)="editDataset(dataset.get('id').value)" class="active-dataset">
<li *ngFor="let dataset of datasets.controls; let i = index" (click)="editDataset(dataset.get('id').value, false)" 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" 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>

View File

@ -50,6 +50,7 @@ import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-
import { CloneDialogComponent } from '../clone/clone-dialog/clone-dialog.component';
import { DatasetWizardModel } from '@app/core/model/dataset/dataset-wizard';
import { DatasetService } from '@app/core/services/dataset/dataset.service';
import { DmpToDatasetDialogComponent } from '../dmp-to-dataset/dmp-to-dataset-dialog.component';
@Component({
selector: 'app-dmp-editor-component',
@ -167,6 +168,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
this.dmp.extraProperties = new ExtraPropertiesFormModel();
this.dmp.fromModel(data);
this.formGroup = this.dmp.buildForm();
// console.log(this.formGroup);
this.datasets = this.formGroup.get('datasets') as FormArray;
@ -400,6 +402,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
// this.onDatasetSubmit();
// }
// else {
// console.log("update ", this.formGroup);
if (!this.isFormValid()) {
this.showValidationErrorsDialog();
return;
@ -479,6 +482,19 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
onCallbackSuccess(dmp?: DmpModel, 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);
// console.log(dmp)
// if (dmp) {
// let dmpEditorModel: DmpEditorModel;
// dmpEditorModel = new DmpEditorModel();
// dmpEditorModel.grant = new GrantTabModel();
// dmpEditorModel.project = new ProjectFormModel();
// dmpEditorModel.funder = new FunderFormModel();
// dmpEditorModel.extraProperties = new ExtraPropertiesFormModel();
// dmpEditorModel.fromModel(dmp);
// this.formGroup = dmpEditorModel.buildForm();
// } else {
// this.router.navigate(['/reload']).then(() => { this.router.navigate(['/plans']); });
// }
if (dmp.id != null) {
datasetId ? this.router.navigate(['/reload']).then(() => { this.router.navigate(['/plans', 'edit', dmp.id], { queryParams: { dataset: datasetId } }); }) : this.router.navigate(['/reload']).then(() => { this.router.navigate(['/plans', 'edit', dmp.id]); })
} else {
@ -495,6 +511,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
onCallbackSuccessAddNew(dmp?: DmpModel) {
// this.uiNotificationService.snackBarNotification(this.isNew ? this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-CREATION') : this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);
this.router.navigate(['/datasets', 'new', dmp.id]);
// this.editDataset(dmp.id, true);
}
public setErrorModel(validationErrorModel: ValidationErrorModel) {
@ -726,8 +743,21 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
});
}
editDataset(id: string) {
this.router.navigate(['/datasets', 'edit', id]);
editDataset(id: string, isNew: boolean) {
const dialogRef = this.dialog.open(DmpToDatasetDialogComponent, {
width: '500px',
autoFocus: false,
restoreFocus: false,
});
dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => {
if (result) {
if (isNew) {
this.router.navigate(['/datasets', 'new', id]);
} else {
this.router.navigate(['/datasets', 'edit', id]);
}
}
});
}
saveAndFinalize() {

View File

@ -91,6 +91,14 @@
"SUCCESS": "Invitation successfully sent",
"ERROR": "Invitation sent failed"
},
"DMP-TO-DATASET-DIALOG": {
"FROM-DMP": "You have successfully created your",
"DMP": "DMP",
"TO-DATASET": "You will be transferred to the",
"DATASET": "Dataset",
"EDITOR": "editor",
"START": "let's start"
},
"ACTIONS": {
"VIEW-ALL": "View All",
"SHOW-MORE": "Show more",