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

Make Dataset Editor more safe when saving and make save pop messages more consistent

This commit is contained in:
George Kalampokis 2022-04-01 17:20:37 +03:00
parent 5faa44c015
commit a9199ab8f0
3 changed files with 49 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.html
View File

@ -28,27 +28,27 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-auto d-flex align-items-center p-0" *ngIf="!viewOnly"> <div class="col-auto d-flex align-items-center p-0" *ngIf="!viewOnly">
<button *ngIf="isDirty()" type="button" mat-raised-button class="dataset-discard-btn" (click)="discardChanges()"> <button [disabled]="saving" *ngIf="isDirty()" type="button" mat-raised-button class="dataset-discard-btn" (click)="discardChanges()">
{{'DMP-EDITOR.ACTIONS.DISCARD' | translate}} {{'DMP-EDITOR.ACTIONS.DISCARD' | translate}}
</button> </button>
</div> </div>
<div class="col-auto d-flex align-items-center"> <div class="col-auto d-flex align-items-center">
<button *ngIf="!lockStatus && !viewOnly" mat-raised-button class="dataset-save-btn mr-2" type="button" (click)="save()"> <button [disabled]="saving" *ngIf="!lockStatus && !viewOnly" mat-raised-button class="dataset-save-btn mr-2" type="button" (click)="save()">
{{ 'DATASET-WIZARD.ACTIONS.SAVE' | translate }} {{ 'DATASET-WIZARD.ACTIONS.SAVE' | translate }}
<mat-icon (click)="$event.stopPropagation();" style="width: 14px;" [matMenuTriggerFor]="menu">expand_more</mat-icon> <mat-icon [disabled]="saving" (click)="$event.stopPropagation();" style="width: 14px;" [matMenuTriggerFor]="menu">expand_more</mat-icon>
</button> </button>
<mat-menu #menu="matMenu"> <mat-menu #menu="matMenu">
<button mat-menu-item (click)="save(saveAnd.close)" type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-CLOSE' | translate }}</button> <button [disabled]="saving" mat-menu-item (click)="save(saveAnd.close)" type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-CLOSE' | translate }}</button>
<button mat-menu-item (click)="save(saveAnd.addNew)" type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-ADD' | translate }}</button> <button [disabled]="saving" mat-menu-item (click)="save(saveAnd.addNew)" type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-ADD' | translate }}</button>
<button mat-menu-item (click)="save()" type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-CONTINUE' | translate }}</button> <button [disabled]="saving" mat-menu-item (click)="save()" type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-CONTINUE' | translate }}</button>
</mat-menu> </mat-menu>
<button *ngIf="!lockStatus && !viewOnly" mat-raised-button class="dataset-save-btn mr-2" type="button" (click)="saveFinalize()">{{ 'DATASET-WIZARD.ACTIONS.FINALIZE' | translate }}</button> <button [disabled]="saving" *ngIf="!lockStatus && !viewOnly" mat-raised-button class="dataset-save-btn mr-2" type="button" (click)="saveFinalize()">{{ 'DATASET-WIZARD.ACTIONS.FINALIZE' | translate }}</button>
<!-- <button *ngIf="!lockStatus && !viewOnly" mat-raised-button class="dataset-save-btn mr-2" (click)="save()" type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE' | translate }}</button> <!-- <button *ngIf="!lockStatus && !viewOnly" mat-raised-button class="dataset-save-btn mr-2" (click)="save()" type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE' | translate }}</button>
<button *ngIf="!lockStatus && !viewOnly" mat-raised-button class="dataset-save-btn mr-2" (click)="save(saveAnd.close)" type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-CLOSE' | translate }}</button> <button *ngIf="!lockStatus && !viewOnly" mat-raised-button class="dataset-save-btn mr-2" (click)="save(saveAnd.close)" type="button">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-CLOSE' | translate }}</button>
<button *ngIf="!lockStatus && !viewOnly" mat-raised-button class="dataset-save-btn mr-2" (click)="save(saveAnd.addNew)">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-ADD' | translate }}</button> --> <button *ngIf="!lockStatus && !viewOnly" mat-raised-button class="dataset-save-btn mr-2" (click)="save(saveAnd.addNew)">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-ADD' | translate }}</button> -->
<button *ngIf="lockStatus" mat-raised-button disabled class="dataset-save-btn cursor-default" type="button">{{ 'DMP-OVERVIEW.LOCKED' | translate}}</button> <button [disabled]="saving" *ngIf="lockStatus" mat-raised-button disabled class="dataset-save-btn cursor-default" type="button">{{ 'DMP-OVERVIEW.LOCKED' | translate}}</button>
<button *ngIf="hasReversableStatus() && !lockStatus" mat-raised-button class="dataset-save-btn mr-2" (click)="reverse()" type="button">{{ 'DATASET-WIZARD.ACTIONS.REVERSE' | translate }}</button> <button [disabled]="saving" *ngIf="hasReversableStatus() && !lockStatus" mat-raised-button class="dataset-save-btn mr-2" (click)="reverse()" type="button">{{ 'DATASET-WIZARD.ACTIONS.REVERSE' | translate }}</button>
<!-- <button *ngIf="!lockStatus" mat-raised-button class="dataset-save-btn mr-2" (click)="touchForm()" type="button">{{ 'DATASET-WIZARD.ACTIONS.VALIDATE' | translate }}</button> --> <!-- <button *ngIf="!lockStatus" mat-raised-button class="dataset-save-btn mr-2" (click)="touchForm()" type="button">{{ 'DATASET-WIZARD.ACTIONS.VALIDATE' | translate }}</button> -->
</div> </div>
</div> </div>
@ -89,9 +89,9 @@
<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 *ngIf="(step === maxStep) && !lockStatus && formGroup.get('profile').value && !viewOnly" mat-raised-button type="button" class="col-auto stepper-btn add-dataset-btn ml-auto"> <button [disabled]="saving" (click)="save(saveAnd.addNew)" *ngIf="(step === maxStep) && !lockStatus && formGroup.get('profile').value && !viewOnly" mat-raised-button type="button" class="col-auto stepper-btn add-dataset-btn ml-auto">
<div (click)="save(saveAnd.addNew)">{{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-ADD' | translate }}</div> {{ 'DATASET-WIZARD.ACTIONS.SAVE-AND-ADD' | translate }}
</div> </button>
</div> </div>
<div class="col-auto pr-0"> <div class="col-auto pr-0">
<app-form-progress-indication class="col-12" *ngIf="formGroup && !viewOnly" [formGroup]="formGroup" [isDatasetEditor]="true"></app-form-progress-indication> <app-form-progress-indication class="col-12" *ngIf="formGroup && !viewOnly" [formGroup]="formGroup" [isDatasetEditor]="true"></app-form-progress-indication>

8
dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.scss
View File

@ -427,11 +427,12 @@
} }
.add-dataset-btn { .add-dataset-btn {
color: #212121;
background: #f7dd72 0% 0% no-repeat padding-box; background: #f7dd72 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #1e202029; box-shadow: 0px 3px 6px #1e202029;
font-weight: 500; font-weight: 500;
cursor: pointer; word-wrap: break-word;
white-space: normal;
line-height: normal;
} }
.next { .next {
@ -450,8 +451,7 @@
cursor: pointer; cursor: pointer;
} }
.previous-disabled, .previous-disabled {
.add-dataset-btn-disabled {
border: 1px solid #b5b5b5; border: 1px solid #b5b5b5;
color: #b5b5b5 !important; color: #b5b5b5 !important;
cursor: auto !important; cursor: auto !important;

64
dmp-frontend/src/app/ui/dataset/dataset-wizard/dataset-wizard.component.ts
View File

@ -1,4 +1,4 @@
import {Component, OnInit, ViewChild} from '@angular/core'; import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {AbstractControl, FormArray, FormControl, FormGroup} from '@angular/forms'; import {AbstractControl, FormArray, FormControl, FormGroup} from '@angular/forms';
import {MatDialog} from '@angular/material/dialog'; import {MatDialog} from '@angular/material/dialog';
import {MatSnackBar} from '@angular/material/snack-bar'; import {MatSnackBar} from '@angular/material/snack-bar';
@ -72,6 +72,7 @@ export class DatasetWizardComponent extends CheckDeactivateBaseComponent impleme
hasChanges = false; hasChanges = false;
isDiscarded = false; isDiscarded = false;
formGroupRawValue: any; formGroupRawValue: any;
saving = false;
DatasetStatus = DatasetStatus; DatasetStatus = DatasetStatus;
dmpAutoCompleteConfiguration: SingleAutoCompleteConfiguration; dmpAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
@ -759,7 +760,7 @@ export class DatasetWizardComponent extends CheckDeactivateBaseComponent impleme
} }
save(saveType?: SaveType) { save(saveType?: SaveType) {
this.saving = true;
Object.keys(this.formGroup.controls).forEach(controlName => { Object.keys(this.formGroup.controls).forEach(controlName => {
if (controlName == 'datasetProfileDefinition') { if (controlName == 'datasetProfileDefinition') {
return; return;
@ -895,39 +896,40 @@ export class DatasetWizardComponent extends CheckDeactivateBaseComponent impleme
this.router.navigate(['/reload']).then(() => { this.router.navigate(['/reload']).then(() => {
this.router.navigate(['/plans', 'edit', this.formGroup.get('dmp').value.id]); this.router.navigate(['/plans', 'edit', this.formGroup.get('dmp').value.id]);
}); });
} else { } else if (saveType === SaveType.finalize) {
this.router.navigate(['/reload']).then(() => { this.router.navigate(['/reload']).then(() => {
this.router.navigate(['/datasets', 'edit', data.id]); this.router.navigate(['/datasets', 'edit', data.id]);
}); });
} else {
this.datasetWizardModel = new DatasetWizardEditorModel().fromModel(data);
this.editMode = this.datasetWizardModel.status === DatasetStatus.Draft;
// setTimeout(() => { this.formGroup = null; });
setTimeout(() => {
this.formGroup.get('id').patchValue(data.id);
this.formGroup.get('modified').patchValue(data.modified);
this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
this.hasChanges = false;
// this.formGroup = this.datasetWizardModel.buildForm();
// if (this.formGroup.get('datasetProfileDefinition')) {
// this.formGroup.removeControl('datasetProfileDefinition');
// this.getDefinition(data.profile.id);
// this.maxStep = 1;
// } else {
// this.getDefinition(data.profile.id);
// this.maxStep = 1;
// }
});
setTimeout(() => {
document.getElementById('dataset-editor-form').scrollTop = this.scrollTop;
document.getElementById('stepper-options').scrollTop = this.tocScrollTop;
}, 500);
this.saving = false;
this.isNew = false;
// this.router.navigate(['/reload']).then(() => { this.router.navigate(['/datasets', 'edit', data.id]); });
} }
// } else {
// this.datasetWizardModel = new DatasetWizardEditorModel().fromModel(data);
// this.editMode = this.datasetWizardModel.status === DatasetStatus.Draft;
// // setTimeout(() => { this.formGroup = null; });
// setTimeout(() => {
// this.formGroup.get('id').patchValue(data.id);
// this.formGroup.get('modified').patchValue(data.modified);
// this.formGroupRawValue = JSON.parse(JSON.stringify(this.formGroup.getRawValue()));
// this.hasChanges = false;
// // this.formGroup = this.datasetWizardModel.buildForm();
// // if (this.formGroup.get('datasetProfileDefinition')) {
// // this.formGroup.removeControl('datasetProfileDefinition');
// // this.getDefinition(data.profile.id);
// // this.maxStep = 1;
// // } else {
// // this.getDefinition(data.profile.id);
// // this.maxStep = 1;
// // }
// });
// setTimeout(() => {
// document.getElementById('dataset-editor-form').scrollTop = this.scrollTop;
// document.getElementById('stepper-options').scrollTop = this.tocScrollTop;
// }, 500);
// // this.router.navigate(['/reload']).then(() => { this.router.navigate(['/datasets', 'edit', data.id]); });
// }
} else { } else {
this.router.navigate(['/datasets']); this.router.navigate(['/datasets']);
} }