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

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

This commit is contained in:
George Kalampokis 2022-04-01 18:13:50 +03:00
parent a9199ab8f0
commit ae7988aa13
7 changed files with 27 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -179,7 +179,6 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer;
} }
.save-btn { .save-btn {
@ -194,7 +193,6 @@
align-items: center; align-items: center;
font-weight: 700; font-weight: 700;
color: #129d99; color: #129d99;
cursor: pointer;
} }
.dataset-discard-btn { .dataset-discard-btn {
@ -208,7 +206,6 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer;
} }
.dataset-save-btn { .dataset-save-btn {
@ -221,7 +218,6 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer;
} }
.dataset-to-dmp { .dataset-to-dmp {

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

@ -943,6 +943,7 @@ export class DatasetWizardComponent extends CheckDeactivateBaseComponent impleme
} }
this.uiNotificationService.snackBarNotification(feedbackMessage, SnackBarNotificationLevel.Warning); this.uiNotificationService.snackBarNotification(feedbackMessage, SnackBarNotificationLevel.Warning);
this.setErrorModel(error.error); this.setErrorModel(error.error);
this.saving = false;
} }
public setErrorModel(validationErrorModel: ValidationErrorModel) { public setErrorModel(validationErrorModel: ValidationErrorModel) {

16
dmp-frontend/src/app/ui/dmp/editor/dmp-editor.component.html
View File

@ -11,14 +11,14 @@
<div class="subtitle">{{ formGroup.get('label').value }} <span *ngIf="isDirty()" class="changes">({{'DMP-EDITOR.CHANGES' | translate}})</span></div> <div class="subtitle">{{ formGroup.get('label').value }} <span *ngIf="isDirty()" class="changes">({{'DMP-EDITOR.CHANGES' | translate}})</span></div>
</div> </div>
<div class="ml-auto d-flex flex-row"> <div class="ml-auto d-flex flex-row">
<button *ngIf="isDirty()" type="button" mat-raised-button class="discard-btn mr-3" (click)="discardChanges()"> <button [disabled]="saving" *ngIf="isDirty()" type="button" mat-raised-button class="discard-btn mr-3" (click)="discardChanges()">
{{'DMP-EDITOR.ACTIONS.DISCARD' | translate}} {{'DMP-EDITOR.ACTIONS.DISCARD' | translate}}
</button> </button>
<div *ngIf="isNew" mat-raised-button type="button" (click)="save()" class="save-btn"> <button [disabled]="saving" *ngIf="isNew" mat-raised-button type="button" (click)="save()" class="save-btn">
<div>{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}</div> {{'DMP-EDITOR.ACTIONS.SAVE' | translate}}
</div> </button>
<div *ngIf="!isNew && formGroup.enabled && !lockStatus"> <div *ngIf="!isNew && formGroup.enabled && !lockStatus">
<button *ngIf="!isFinalized" mat-raised-button (click)="formSubmit()" class="save-btn"> <button [disabled]="saving" *ngIf="!isFinalized" mat-raised-button (click)="formSubmit()" class="save-btn">
{{'DMP-EDITOR.ACTIONS.SAVE' | translate}} {{'DMP-EDITOR.ACTIONS.SAVE' | translate}}
</button> </button>
</div> </div>
@ -73,10 +73,10 @@
<div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div> <div>{{'DMP-EDITOR.STEPPER.NEXT' | translate}}</div>
</div> </div>
<!-- <div *ngIf="this.step >= 3 && hasProfile() && !isFinalized" mat-raised-button type="button" class="col-auto stepper-btn add-dataset-btn ml-auto" (click)="addDataset()" target="_blank"> --> <!-- <div *ngIf="this.step >= 3 && hasProfile() && !isFinalized" mat-raised-button type="button" class="col-auto stepper-btn add-dataset-btn ml-auto" (click)="addDataset()" target="_blank"> -->
<div *ngIf="this.step >= 3 && !isFinalized" mat-raised-button type="button" class="col-auto stepper-btn add-dataset-btn ml-auto" (click)="addDataset()" target="_blank"> <button [disabled]="saving" *ngIf="this.step >= 3 && !isFinalized" mat-raised-button type="button" class="col-auto stepper-btn add-dataset-btn ml-auto" (click)="addDataset()" target="_blank">
<!-- <mat-icon>add</mat-icon> --> <!-- <mat-icon>add</mat-icon> -->
<div>{{'DMP-EDITOR.ACTIONS.SAVE' | translate}} & {{'DMP-LISTING.ACTIONS.ADD-DATASET-SHORT' | translate}}</div> {{'DMP-EDITOR.ACTIONS.SAVE' | translate}} & {{'DMP-LISTING.ACTIONS.ADD-DATASET-SHORT' | 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 && !formGroup.disabled && !lockStatus" [formGroup]="formGroup" [isDmpEditor]="true"></app-form-progress-indication> <app-form-progress-indication class="col-12" *ngIf="formGroup && !formGroup.disabled && !lockStatus" [formGroup]="formGroup" [isDmpEditor]="true"></app-form-progress-indication>

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

@ -155,7 +155,6 @@ a:hover {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer;
} }
.save-btn { .save-btn {
@ -169,7 +168,6 @@ a:hover {
align-items: center; align-items: center;
font-weight: 700; font-weight: 700;
color: #129d99; color: #129d99;
cursor: pointer;
} }
.dataset-discard-btn { .dataset-discard-btn {
@ -346,11 +344,14 @@ mat-icon.size-16 {
} }
.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; white-space: normal;
word-wrap: break-word;
line-height: normal;
text-align: left;
font-size: 13.8px;
} }
.add-dataset-action { .add-dataset-action {

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

@ -61,6 +61,7 @@ export class DmpEditorComponent extends CheckDeactivateBaseComponent implements
editMode = true; editMode = true;
// editMode = false; // editMode = false;
saving = false;
breadCrumbs: Observable<BreadcrumbItem[]>; breadCrumbs: Observable<BreadcrumbItem[]>;
isNew = true; isNew = true;
@ -416,6 +417,7 @@ export class DmpEditorComponent extends CheckDeactivateBaseComponent implements
// } // }
formSubmit(addNew?: boolean, showAddDatasetDialog?: boolean): void { formSubmit(addNew?: boolean, showAddDatasetDialog?: boolean): void {
this.saving = true;
this.formService.touchAllFormFields(this.formGroup); this.formService.touchAllFormFields(this.formGroup);
// if (this.isNewDataset) { // if (this.isNewDataset) {
// if (!this.isDatasetFormValid) { // if (!this.isDatasetFormValid) {
@ -440,6 +442,7 @@ export class DmpEditorComponent extends CheckDeactivateBaseComponent implements
const errmess = this._buildDMPDescriptionErrorMessages(); const errmess = this._buildDMPDescriptionErrorMessages();
this.showValidationErrorsDialog(undefined, errmess); this.showValidationErrorsDialog(undefined, errmess);
this.hintErrors = true; this.hintErrors = true;
this.saving = false;
return; return;
} }
this.onSubmit(addNew, showAddDatasetDialog); this.onSubmit(addNew, showAddDatasetDialog);
@ -554,7 +557,8 @@ export class DmpEditorComponent extends CheckDeactivateBaseComponent implements
setTimeout(() => { this.formGroup = null; }); setTimeout(() => { this.formGroup = null; });
setTimeout(() => { this.formGroup = dmpEditorModel.buildForm(); }); setTimeout(() => { this.formGroup = dmpEditorModel.buildForm(); });
setTimeout(() => { document.getElementById('editor-form').scrollTop = this.scrollTop; }); setTimeout(() => { document.getElementById('editor-form').scrollTop = this.scrollTop; });
this.saving = false;
this.isNew = false;
} else { } else {
this.router.navigate(['/reload']).then(() => { this.router.navigate(['/plans']); }); this.router.navigate(['/reload']).then(() => { this.router.navigate(['/plans']); });
} }
@ -570,12 +574,14 @@ export class DmpEditorComponent extends CheckDeactivateBaseComponent implements
onCallbackError(error: any) { onCallbackError(error: any) {
this.uiNotificationService.snackBarNotification(error.error.message, SnackBarNotificationLevel.Error); this.uiNotificationService.snackBarNotification(error.error.message, SnackBarNotificationLevel.Error);
this.setErrorModel(error.error); this.setErrorModel(error.error);
this.saving = false;
//this.validateAllFormFields(this.formGroup); //this.validateAllFormFields(this.formGroup);
} }
onCallbackSuccessAddNew(dmp?: DmpModel) { onCallbackSuccessAddNew(dmp?: DmpModel) {
// this.editDataset(dmp.id, true, this.isNew && !this.formGroup.get('datasets').value.length); // this.editDataset(dmp.id, true, this.isNew && !this.formGroup.get('datasets').value.length);
this.editDataset(dmp.id, true, false); this.editDataset(dmp.id, true, false);
this.saving = false;
} }
public setErrorModel(validationErrorModel: ValidationErrorModel) { public setErrorModel(validationErrorModel: ValidationErrorModel) {
@ -883,12 +889,13 @@ export class DmpEditorComponent extends CheckDeactivateBaseComponent implements
addDataset() { addDataset() {
this.saving = true;
if(!this._isDMPDescriptionValid()){ if(!this._isDMPDescriptionValid()){
const errmess = this._buildDMPDescriptionErrorMessages(); const errmess = this._buildDMPDescriptionErrorMessages();
this.showValidationErrorsDialog(undefined, errmess); this.showValidationErrorsDialog(undefined, errmess);
this.hintErrors = true; this.hintErrors = true;
this.saving = false;
return; return;
} }

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

@ -14,7 +14,7 @@
<app-dmp-wizard-dataset-listing-component [formGroup]="formGroup" [dmpId]="formGroup.get('id').value" *ngIf="formGroup"></app-dmp-wizard-dataset-listing-component> <app-dmp-wizard-dataset-listing-component [formGroup]="formGroup" [dmpId]="formGroup.get('id').value" *ngIf="formGroup"></app-dmp-wizard-dataset-listing-component>
<div class="navigation-buttons-container"> <div class="navigation-buttons-container">
<button matStepperPrevious mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.BACK' | translate}}</button> <button matStepperPrevious mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.BACK' | translate}}</button>
<button style="float:right;" matStepperNext mat-raised-button (click)='submit()' color="primary">{{'DMP-WIZARD.ACTIONS.SAVE' | translate}}</button> <button [disabled]="saving" style="float:right;" matStepperNext mat-raised-button (click)='submit()' color="primary">{{'DMP-WIZARD.ACTIONS.SAVE' | translate}}</button>
</div> </div>
</mat-step> </mat-step>
</mat-horizontal-stepper> </mat-horizontal-stepper>

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

@ -31,6 +31,7 @@ export class DmpWizardComponent extends BaseComponent implements OnInit, IBreadC
dmp: DmpWizardEditorModel; dmp: DmpWizardEditorModel;
formGroup: FormGroup; formGroup: FormGroup;
isClone: boolean; isClone: boolean;
saving = false;
constructor( constructor(
private dmpService: DmpService, private dmpService: DmpService,
@ -76,6 +77,7 @@ export class DmpWizardComponent extends BaseComponent implements OnInit, IBreadC
submit() { submit() {
this.saving = true;
if (this.isClone) { if (this.isClone) {
this.dmpService.clone(this.formGroup.getRawValue(), this.itemId) this.dmpService.clone(this.formGroup.getRawValue(), this.itemId)
.pipe(takeUntil(this._destroyed)) .pipe(takeUntil(this._destroyed))
@ -100,6 +102,7 @@ export class DmpWizardComponent extends BaseComponent implements OnInit, IBreadC
onCallbackError(error: any) { onCallbackError(error: any) {
this.setErrorModel(error.error); this.setErrorModel(error.error);
this.saving = false;
//this.validateAllFormFields(this.formGroup); //this.validateAllFormFields(this.formGroup);
} }