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

added save&close, save&continue, export and finalize buttons to dmp editor

This commit is contained in:
Sofia Papacharalampous 2024-06-19 16:29:18 +03:00
parent a2a7875be8
commit 9be1f1e087
5 changed files with 95 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,19 +10,55 @@
<div class="subtitle">{{ formGroup.get('label').value }} <span *ngIf="isDirty()" class="changes">({{'DMP-EDITOR.UNSAVED-CHANGES' | translate}})</span></div> <div class="subtitle">{{ formGroup.get('label').value }} <span *ngIf="isDirty()" class="changes">({{'DMP-EDITOR.UNSAVED-CHANGES' | translate}})</span></div>
</div> </div>
<div class="ml-auto d-flex flex-row"> <div class="ml-auto d-flex flex-row">
<div class="col-auto d-flex align-items-center">
<button [disabled]="saving" *ngIf="isDirty()" type="button" mat-raised-button class="discard-btn mr-3" (click)="discardChanges()"> <div *ngIf="formGroup.get('id').value" class="col-auto d-flex align-items-center">
<button [disabled]="isDirty()" [matTooltipDisabled]="!isDirty()" mat-raised-button class="dmp-export-btn" type="button" [matMenuTriggerFor]="exportMenu" (click)="$event.stopPropagation();" [matTooltip]="'DATASET-EDITOR.ACTIONS.DISABLED-EXPORT' | translate">
{{ 'DMP-EDITOR.ACTIONS.EXPORT' | translate }}
<mat-icon [disabled]="isDirty()" style="width: 14px;">expand_more</mat-icon>
</button>
<mat-menu #exportMenu="matMenu" xPosition="before">
<button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormatsFor(fileTransformerEntityTypeEnum.Dmp)' (click)="fileTransformerService.exportDmp(formGroup.get('id').value, fileTransformer.repositoryId, fileTransformer.format)">
<i class="fa pr-2" [ngClass]="fileTransformer.icon ? fileTransformer.icon : 'fa-file-o'"></i>
<span>{{'GENERAL.FILE-TRANSFORMER.' + fileTransformer?.format?.toUpperCase() | translate}}</span>
</button>
</mat-menu>
</div>
<mat-divider *ngIf="formGroup.get('id').value && canEdit && ((!isLockedByUser && canEdit) || isLockedByUser || (hasReversableStatus() && !isLockedByUser))" [vertical]="true" class="ml-2 mr-2"></mat-divider>
<div *ngIf="isDirty()" class="col-auto d-flex align-items-center">
<button [disabled]="saving" type="button" mat-raised-button class="discard-btn mr-3" (click)="discardChanges()">
{{'DMP-EDITOR.ACTIONS.DISCARD.DISCARD' | translate}} {{'DMP-EDITOR.ACTIONS.DISCARD.DISCARD' | translate}}
</button> </button>
<button [disabled]="saving" *ngIf="isNew" mat-raised-button type="button" (click)="formSubmit()" class="save-btn"> </div>
{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}
</button> <div class="col-auto d-flex align-items-center">
<div *ngIf="!isNew && formGroup.enabled && !lockStatus && canSave"> <!-- <ng-container *ngIf="formGroup.enabled && !lockStatus && canSave">
<button [disabled]="saving" *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> </ng-container> -->
<button *ngIf="lockStatus" mat-raised-button disabled class="description-save-btn cursor-default" type="button">{{ 'DMP-EDITOR.LOCKED' | translate}}</button> <button [disabled]="saving" *ngIf="isNew" mat-raised-button type="button" (click)="formSubmit()" class="save-btn">
{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}
</button>
<button [disabled]="saving" *ngIf="!isNew && formGroup.enabled && !lockStatus && canSave" mat-raised-button class="save-btn mr-2" type="button">
<span class="d-flex flex-row row">
<span (click)="!saving?formSubmit():null" class="col">{{ 'DMP-EDITOR.ACTIONS.SAVE' | translate }}</span>
<mat-divider [vertical]="true"></mat-divider>
<span *ngIf="!saving" class="align-items-center justify-content-center col d-flex" (click)="$event.stopPropagation();" [matMenuTriggerFor]="menu">
<mat-icon>expand_more</mat-icon>
</span>
<span *ngIf="saving" class="align-items-center justify-content-center col d-flex">
<mat-icon>expand_more</mat-icon>
</span>
</span>
</button>
<mat-menu #menu="matMenu">
<button [disabled]="saving" mat-menu-item (click)="saveAndClose()" type="button">{{ 'DMP-EDITOR.ACTIONS.SAVE-AND-CLOSE' | translate }}</button>
<button [disabled]="saving" mat-menu-item (click)="formSubmit()" type="button">{{ 'DMP-EDITOR.ACTIONS.SAVE-AND-CONTINUE' | translate }}</button>
</mat-menu>
</div>
<div *ngIf="formGroup.pristine && canFinalize" class="col-auto d-flex align-items-center">
<button [disabled]="saving" mat-raised-button class="save-btn mr-2" type="button" (click)="finalize()">{{ 'DMP-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
</div> </div>
</div> </div>
</div> </div>

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

@ -65,12 +65,12 @@
background: #ffffff 0% 0% no-repeat padding-box !important; background: #ffffff 0% 0% no-repeat padding-box !important;
border-radius: 30px; border-radius: 30px;
opacity: 1; opacity: 1;
width: 110px; width: auto;
min-width: 110px;
height: 40px; height: 40px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-weight: 700;
color: var(--primary-color); color: var(--primary-color);
} }

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

@ -53,6 +53,9 @@ import { DmpEditorModel, DmpFieldIndicator } from './dmp-editor.model';
import { DmpEditorEntityResolver } from './resolvers/dmp-editor-enitity.resolver'; import { DmpEditorEntityResolver } from './resolvers/dmp-editor-enitity.resolver';
import { DmpEditorService } from './dmp-editor.service'; import { DmpEditorService } from './dmp-editor.service';
import { RouterUtilsService } from '@app/core/services/router/router-utils.service'; import { RouterUtilsService } from '@app/core/services/router/router-utils.service';
import { FileTransformerService } from '@app/core/services/file-transformer/file-transformer.service';
import { FileTransformerEntityType } from '@app/core/common/enum/file-transformer-entity-type';
import { DmpFinalizeDialogComponent, DmpFinalizeDialogOutput } from '../dmp-finalize-dialog/dmp-finalize-dialog.component';
@Component({ @Component({
selector: 'app-dmp-editor', selector: 'app-dmp-editor',
@ -79,6 +82,7 @@ export class DmpEditorComponent extends BaseEditor<DmpEditorModel, Dmp> implemen
dmpUserTypeEnum = DmpUserType; dmpUserTypeEnum = DmpUserType;
dmpUserTypeEnumValues = this.enumUtils.getEnumValues<DmpUserType>(DmpUserType); dmpUserTypeEnumValues = this.enumUtils.getEnumValues<DmpUserType>(DmpUserType);
dmpUserRoleEnumValues = this.enumUtils.getEnumValues<DmpUserRole>(DmpUserRole); dmpUserRoleEnumValues = this.enumUtils.getEnumValues<DmpUserRole>(DmpUserRole);
fileTransformerEntityTypeEnum = FileTransformerEntityType;
permissionPerSection: Map<Guid, string[]>; permissionPerSection: Map<Guid, string[]>;
@ -119,7 +123,7 @@ export class DmpEditorComponent extends BaseEditor<DmpEditorModel, Dmp> implemen
} }
protected get canFinalize(): boolean { protected get canFinalize(): boolean {
return !this.isDeleted && !this.isFinalized && (this.hasPermission(this.authService.permissionEnum.EditDmp) || this.item?.authorizationFlags?.some(x => x === AppPermission.EditDmp)); return !this.isDeleted && !this.isNew && this.canEdit && this.isLockedByUser && !this.isFinalized && this.item.status == DmpStatus.Draft && (this.hasPermission(this.authService.permissionEnum.EditDmp) || this.item?.authorizationFlags?.some(x => x === AppPermission.EditDmp));
} }
protected canEditSection(id: Guid): boolean { protected canEditSection(id: Guid): boolean {
@ -169,7 +173,8 @@ export class DmpEditorComponent extends BaseEditor<DmpEditorModel, Dmp> implemen
public descriptionService: DescriptionService, public descriptionService: DescriptionService,
public titleService: Title, public titleService: Title,
private analyticsService: AnalyticsService, private analyticsService: AnalyticsService,
private breadcrumbService: BreadcrumbService private breadcrumbService: BreadcrumbService,
public fileTransformerService: FileTransformerService,
) { ) {
const descriptionLabel: string = route.snapshot.data['entity']?.label; const descriptionLabel: string = route.snapshot.data['entity']?.label;
if (descriptionLabel) { if (descriptionLabel) {
@ -308,9 +313,9 @@ export class DmpEditorComponent extends BaseEditor<DmpEditorModel, Dmp> implemen
); );
} }
formSubmit(): void { formSubmit(onSuccess?: (response) => void): void {
this.formService.removeAllBackEndErrors(this.formGroup); this.formService.removeAllBackEndErrors(this.formGroup);
this.persistEntity(); this.persistEntity(onSuccess);
} }
discardChanges() { discardChanges() {
@ -348,7 +353,7 @@ export class DmpEditorComponent extends BaseEditor<DmpEditorModel, Dmp> implemen
setTimeout(x => { setTimeout(x => {
if (this.isNew) this.step = 0; if (this.isNew) this.step = 0;
else this.step = this.step > 0 ? this.step - 1 : 0; else this.step = this.step > 0 ? this.step - 1 : 0;
this.ngOnInit(); this.refreshOnNavigateToData();
}); });
} }
}); });
@ -378,6 +383,39 @@ export class DmpEditorComponent extends BaseEditor<DmpEditorModel, Dmp> implemen
} }
} }
public saveAndClose(): void {
this.formSubmit((data) => {
this.uiNotificationService.snackBarNotification(this.isNew ? this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-CREATION') : this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);
this.formGroup = null;
this.router.navigate([this.routerUtils.generateUrl('/plans/')]);
});
}
finalize() {
const dialogRef = this.dialog.open(DmpFinalizeDialogComponent, {
maxWidth: '500px',
restoreFocus: false,
autoFocus: false,
data: {
dmp: this.item
}
});
dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe((result: DmpFinalizeDialogOutput) => {
if (result && !result.cancelled) {
this.dmpService.finalize(this.item.id, result.descriptionsToBeFinalized)
.pipe(takeUntil(this._destroyed))
.subscribe(data => {
this.onCallbackDeleteSuccess()
this.router.navigate([this.routerUtils.generateUrl(['/plans/overview', this.item.id.toString()], '/')])
}, (error: any) => {
this.onCallbackError(error)
});
}
});
}
clearErrorModel() { clearErrorModel() {
this.editorModel.validationErrorModel.clear(); this.editorModel.validationErrorModel.clear();
this.formService.validateAllFormFields(this.formGroup); this.formService.validateAllFormFields(this.formGroup);

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

@ -90,7 +90,7 @@
<button mat-raised-button cdkFocusInitial (click)="close()" class="cancel-btn">{{ 'DMP-FINALISE-DIALOG.ACTIONS.CANCEL' | translate }}</button> <button mat-raised-button cdkFocusInitial (click)="close()" class="cancel-btn">{{ 'DMP-FINALISE-DIALOG.ACTIONS.CANCEL' | translate }}</button>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<button mat-raised-button [disabled]="getFinalizedDescriptions().length === 0 && descriptionsToBeFinalized.length === 0" class="submit-btn" (click)="onSubmit()">{{ 'DMP-FINALISE-DIALOG.ACTIONS.SUBMIT' | translate }}</button> <button mat-raised-button [disabled]="!isDmpValid || getFinalizedDescriptions().length === 0 && descriptionsToBeFinalized.length === 0" class="submit-btn" (click)="onSubmit()">{{ 'DMP-FINALISE-DIALOG.ACTIONS.SUBMIT' | translate }}</button>
</div> </div>
</div> </div>
</div> </div>

6
dmp-frontend/src/assets/i18n/en.json
View File

@ -1695,7 +1695,11 @@
"OR-CONTINUE-WITH": "or continue with", "OR-CONTINUE-WITH": "or continue with",
"REMOVE-CONTACT": "Remove Contact", "REMOVE-CONTACT": "Remove Contact",
"SEARCH-CONTACT": "Search Contact", "SEARCH-CONTACT": "Search Contact",
"REMOVE-USER": "Remove User" "REMOVE-USER": "Remove User",
"EXPORT": "Export",
"SAVE-AND-CLOSE":"Save & Close",
"SAVE-AND-CONTINUE": "Save & Continue",
"FINALIZE": "Finalize"
}, },
"PLACEHOLDER": { "PLACEHOLDER": {
"DESCRIPTION": "Fill with description", "DESCRIPTION": "Fill with description",