From cbbf70d3f6c8e8ecdf1e8bcfe3013dae1e0fefe9 Mon Sep 17 00:00:00 2001 From: amentis Date: Tue, 14 May 2024 15:13:00 +0300 Subject: [PATCH] add dmp delete dialog where dmp has descriptions --- .../dmp-delete-dialog.component.html | 22 ++++++++ .../dmp-delete-dialog.component.scss | 55 +++++++++++++++++++ .../dmp-delete-dialog.component.ts | 31 +++++++++++ .../dmp-delete-dialog.module.ts | 13 +++++ .../dmp-editor-blueprint/dmp-editor.module.ts | 2 + .../dmp-listing-item.component.ts | 33 +++++++---- .../ui/dmp/overview/dmp-overview.component.ts | 30 +++++++--- .../ui/dmp/overview/dmp-overview.module.ts | 2 + dmp-frontend/src/assets/i18n/en.json | 8 +++ 9 files changed, 177 insertions(+), 19 deletions(-) create mode 100644 dmp-frontend/src/app/ui/dmp/dmp-delete-dialog/dmp-delete-dialog.component.html create mode 100644 dmp-frontend/src/app/ui/dmp/dmp-delete-dialog/dmp-delete-dialog.component.scss create mode 100644 dmp-frontend/src/app/ui/dmp/dmp-delete-dialog/dmp-delete-dialog.component.ts create mode 100644 dmp-frontend/src/app/ui/dmp/dmp-delete-dialog/dmp-delete-dialog.module.ts diff --git a/dmp-frontend/src/app/ui/dmp/dmp-delete-dialog/dmp-delete-dialog.component.html b/dmp-frontend/src/app/ui/dmp/dmp-delete-dialog/dmp-delete-dialog.component.html new file mode 100644 index 000000000..efcb85594 --- /dev/null +++ b/dmp-frontend/src/app/ui/dmp/dmp-delete-dialog/dmp-delete-dialog.component.html @@ -0,0 +1,22 @@ +
+
+
+ {{'DMP-DELETE-DIALOG.WARNING' | translate}} + close +
+
+
+
{{'DMP-DELETE-DIALOG.DELETE-ITEM' | translate}}
+
+
+ +
    +
  • {{description.label}}
    • +
+ +
+
+
+
+
+
diff --git a/dmp-frontend/src/app/ui/dmp/dmp-delete-dialog/dmp-delete-dialog.component.scss b/dmp-frontend/src/app/ui/dmp/dmp-delete-dialog/dmp-delete-dialog.component.scss new file mode 100644 index 000000000..4c8d6441d --- /dev/null +++ b/dmp-frontend/src/app/ui/dmp/dmp-delete-dialog/dmp-delete-dialog.component.scss @@ -0,0 +1,55 @@ +// ::ng-deep .mat-dialog-container { +// overflow: hidden; +// padding: 20px; +// border-radius: 125px; +// } + +.dmp-delete-dialog { + + padding: 24px; + overflow: hidden; + + .confirmation { + padding-bottom: 20px; + } + + .close-btn { + margin-left: auto; + cursor: pointer; + } + + .warn-text { + // color: #f44336; + + } + + .cancel { + background-color: #aaaaaa; + color: #ffffff; + } + + .cancel-btn { + min-width: 101px; + height: 43px; + background: #ffffff; + border: 1px solid #b5b5b5; + border-radius: 30px; + opacity: 1; + } + + + .delete { + background-color: #ba2c2c; + color: #ffffff; + } + + .delete-btn { + min-width: 101px; + height: 43px; + background: #ffffff; + color: #ba2c2c; + border: 1px solid #ba2c2c; + border-radius: 30px; + opacity: 1; + } +} diff --git a/dmp-frontend/src/app/ui/dmp/dmp-delete-dialog/dmp-delete-dialog.component.ts b/dmp-frontend/src/app/ui/dmp/dmp-delete-dialog/dmp-delete-dialog.component.ts new file mode 100644 index 000000000..462545121 --- /dev/null +++ b/dmp-frontend/src/app/ui/dmp/dmp-delete-dialog/dmp-delete-dialog.component.ts @@ -0,0 +1,31 @@ +import { Component, Inject } from '@angular/core'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { Description } from '@app/core/model/description/description'; + +@Component({ + selector: 'app-dmp-delete-dialog', + templateUrl: './dmp-delete-dialog.component.html', + styleUrls: ['./dmp-delete-dialog.component.scss'] +}) +export class DmpDeleteDialogComponent { + + descriptions: Description[]; + constructor( + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: any + ) { + this.descriptions = data.descriptions; + } + + close() { + this.dialogRef.close(false); + } + + cancel() { + this.dialogRef.close(false); + } + + confirm() { + this.dialogRef.close(true); + } +} diff --git a/dmp-frontend/src/app/ui/dmp/dmp-delete-dialog/dmp-delete-dialog.module.ts b/dmp-frontend/src/app/ui/dmp/dmp-delete-dialog/dmp-delete-dialog.module.ts new file mode 100644 index 000000000..83366e14b --- /dev/null +++ b/dmp-frontend/src/app/ui/dmp/dmp-delete-dialog/dmp-delete-dialog.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CommonUiModule } from '@common/ui/common-ui.module'; +import { DmpDeleteDialogComponent } from './dmp-delete-dialog.component'; + +@NgModule({ + imports: [CommonUiModule, FormsModule], + declarations: [DmpDeleteDialogComponent], + exports: [DmpDeleteDialogComponent] +}) +export class DmpDeleteDialogModule { + constructor() { } +} diff --git a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.module.ts b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.module.ts index 80b7e8fe4..382196446 100644 --- a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.module.ts +++ b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.module.ts @@ -11,6 +11,7 @@ import { DmpUserFieldModule } from '../dmp-user-field/dmp-user-field.module'; import { DmpEditorComponent } from './dmp-editor.component'; import { DmpEditorRoutingModule } from './dmp-editor.routing'; import { DmpFormProgressIndicationModule } from './form-progress-indication/dmp-form-progress-indication.module'; +import { DmpDeleteDialogModule } from '../dmp-delete-dialog/dmp-delete-dialog.module'; @NgModule({ imports: [ @@ -18,6 +19,7 @@ import { DmpFormProgressIndicationModule } from './form-progress-indication/dmp- CommonFormsModule, FormattingModule, ConfirmationDialogModule, + DmpDeleteDialogModule, DmpEditorRoutingModule, RichTextEditorModule, AutoCompleteModule, diff --git a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.ts b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.ts index d5a19d0e0..e4a13e752 100644 --- a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.ts +++ b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.ts @@ -29,6 +29,7 @@ import { NewVersionDmpDialogComponent } from '../../new-version-dialog/dmp-new-v import { AppPermission } from '@app/core/common/enum/permission.enum'; import { FileTransformerEntityType } from '@app/core/common/enum/file-transformer-entity-type'; import { DmpVersionStatus } from '@app/core/common/enum/dmp-version-status'; +import { DmpDeleteDialogComponent } from '../../dmp-delete-dialog/dmp-delete-dialog.component'; @Component({ selector: 'app-dmp-listing-item-component', @@ -168,16 +169,28 @@ export class DmpListingItemComponent extends BaseComponent implements OnInit { } openDeleteDialog(id: Guid) { - const dialogRef = this.dialog.open(ConfirmationDialogComponent, { - maxWidth: '300px', - restoreFocus: false, - data: { - message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'), - confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.DELETE'), - cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL'), - isDeleteConfirmation: true - } - }); + let dialogRef: any; + + if (this.dmp.descriptions && this.dmp.descriptions.length > 0){ + dialogRef = this.dialog.open(DmpDeleteDialogComponent, { + maxWidth: '300px', + data: { + descriptions: this.dmp.descriptions, + } + }); + } else { + dialogRef = this.dialog.open(ConfirmationDialogComponent, { + maxWidth: '300px', + restoreFocus: false, + data: { + message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'), + confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.DELETE'), + cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL'), + isDeleteConfirmation: true + } + }); + } + dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => { if (result) { this.dmpService.delete(id) diff --git a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts index 5fca4b832..acd56a99a 100644 --- a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts +++ b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts @@ -48,6 +48,7 @@ import { DmpFinalizeDialogComponent, DmpFinalizeDialogOutput } from '../dmp-fina import { DmpEditorResolver } from '../dmp-editor-blueprint/dmp-editor.resolver'; import { FileTransformerEntityType } from '@app/core/common/enum/file-transformer-entity-type'; import { DmpVersionStatus } from '@app/core/common/enum/dmp-version-status'; +import { DmpDeleteDialogComponent } from '../dmp-delete-dialog/dmp-delete-dialog.component'; @Component({ selector: 'app-dmp-overview', @@ -373,15 +374,26 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit { // } deleteClicked() { - const dialogRef = this.dialog.open(ConfirmationDialogComponent, { - maxWidth: '300px', - data: { - message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'), - confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.DELETE'), - cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL'), - isDeleteConfirmation: true - } - }); + let dialogRef: any; + if (this.dmp.descriptions && this.dmp.descriptions.length > 0){ + dialogRef = this.dialog.open(DmpDeleteDialogComponent, { + maxWidth: '300px', + data: { + descriptions: this.dmp.descriptions, + } + }); + } else { + dialogRef = this.dialog.open(ConfirmationDialogComponent, { + maxWidth: '300px', + data: { + message: this.language.instant('GENERAL.CONFIRMATION-DIALOG.DELETE-ITEM'), + confirmButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.DELETE'), + cancelButton: this.language.instant('GENERAL.CONFIRMATION-DIALOG.ACTIONS.CANCEL'), + isDeleteConfirmation: true + } + }); + } + dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe(result => { if (result) { this.dmpService.delete(this.dmp.id) diff --git a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.module.ts b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.module.ts index dd5856888..26553c95c 100644 --- a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.module.ts +++ b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.module.ts @@ -10,12 +10,14 @@ import { NgDialogAnimationService } from 'ng-dialog-animation'; import { DmpFinalizeDialogModule } from '../dmp-finalize-dialog/dmp-finalize-dialog.module'; import { DmpOverviewRoutingModule } from './dmp-overview.routing'; import { MultipleChoiceDialogModule } from '@common/modules/multiple-choice-dialog/multiple-choice-dialog.module'; +import { DmpDeleteDialogModule } from '../dmp-delete-dialog/dmp-delete-dialog.module'; @NgModule({ imports: [ CommonUiModule, CommonFormsModule, ConfirmationDialogModule, + DmpDeleteDialogModule, MultipleChoiceDialogModule, FormattingModule, AutoCompleteModule, diff --git a/dmp-frontend/src/assets/i18n/en.json b/dmp-frontend/src/assets/i18n/en.json index 8f50accb6..b8e9bc3ff 100644 --- a/dmp-frontend/src/assets/i18n/en.json +++ b/dmp-frontend/src/assets/i18n/en.json @@ -643,6 +643,14 @@ }, "PLACEHOLDER": "Plan title" }, + "DMP-DELETE-DIALOG": { + "WARNING": "Warning!", + "DELETE-ITEM": "Are you sure to delete this plan? The following descriptions will also be removed:", + "ACTIONS": { + "DELETE": "Delete", + "CANCEL": "Cancel" + } + }, "DMP-OVERVIEW": { "TITLE": "Plan", "PUBLIC": "Public",