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

add dmp delete dialog where dmp has descriptions

This commit is contained in:
amentis 2024-05-14 15:13:00 +03:00
parent 9cdbf46ba7
commit cbbf70d3f6
9 changed files with 177 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
dmp-frontend/src/app/ui/dmp/dmp-delete-dialog/dmp-delete-dialog.component.html Normal file
View File

@ -0,0 +1,22 @@
<div class="dmp-delete-dialog">
<div class="row mt-3">
<div mat-dialog-title class="col-12 pr-1 d-flex justify-content-between">
<span class="mr-3 title">{{'DMP-DELETE-DIALOG.WARNING' | translate}}</span>
<mat-icon class="close-icon" (click)="close()">close</mat-icon>
</div>
</div>
<div class="row d-flex flex-row mb-2">
<div class="col message pb-4 pl-3">{{'DMP-DELETE-DIALOG.DELETE-ITEM' | translate}}</div>
</div>
<div class="row mt-3 mr-3 mb-3">
<ng-container *ngIf="descriptions">
<ul class="error-list">
<li *ngFor="let description of descriptions">{{description.label}}</li>
</ul>
</ng-container>
</div>
<div class="row" style="justify-content: space-between;">
<div class="col-auto"><button mat-raised-button type="button" class="cancel-btn" (click)="cancel()">{{'DMP-DELETE-DIALOG.ACTIONS.CANCEL' | translate}}</button></div>
<div class="col-auto"><button mat-raised-button type="button" (click)="confirm()" class="delete-btn">{{'DMP-DELETE-DIALOG.ACTIONS.DELETE' | translate}}</button></div>
</div>
</div>

55
dmp-frontend/src/app/ui/dmp/dmp-delete-dialog/dmp-delete-dialog.component.scss Normal file
View File

@ -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;
}
}

31
dmp-frontend/src/app/ui/dmp/dmp-delete-dialog/dmp-delete-dialog.component.ts Normal file
View File

@ -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<DmpDeleteDialogComponent>,
@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);
}
}

13
dmp-frontend/src/app/ui/dmp/dmp-delete-dialog/dmp-delete-dialog.module.ts Normal file
View File

@ -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() { }
}

2
dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.module.ts
View File

@ -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,

33
dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.ts
View File

@ -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)

30
dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.ts
View File

@ -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)

2
dmp-frontend/src/app/ui/dmp/overview/dmp-overview.module.ts
View File

@ -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,

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

@ -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",