From 161fe3d1c07d88ba29b3bd37034738bc525648be Mon Sep 17 00:00:00 2001 From: alvaromm2 Date: Thu, 5 Aug 2021 17:11:07 +0200 Subject: [PATCH] tweak: enhance delete confirm dialog --- .../confirm-delete-dialog.component.html | 14 ++++++ .../confirm-delete-dialog.component.scss | 9 ++++ .../confirm-delete-dialog.component.ts | 44 +++++++++++++++++++ .../component/sidebar/sidebar.component.ts | 35 +++++++++++---- tower-web/src/app/modules/main/main.module.ts | 2 + 5 files changed, 95 insertions(+), 9 deletions(-) create mode 100644 tower-web/src/app/modules/main/component/confirm-delete-dialog/confirm-delete-dialog.component.html create mode 100644 tower-web/src/app/modules/main/component/confirm-delete-dialog/confirm-delete-dialog.component.scss create mode 100644 tower-web/src/app/modules/main/component/confirm-delete-dialog/confirm-delete-dialog.component.ts diff --git a/tower-web/src/app/modules/main/component/confirm-delete-dialog/confirm-delete-dialog.component.html b/tower-web/src/app/modules/main/component/confirm-delete-dialog/confirm-delete-dialog.component.html new file mode 100644 index 00000000..8ad01713 --- /dev/null +++ b/tower-web/src/app/modules/main/component/confirm-delete-dialog/confirm-delete-dialog.component.html @@ -0,0 +1,14 @@ + + + + + Name doesn't match + + + + + + + diff --git a/tower-web/src/app/modules/main/component/confirm-delete-dialog/confirm-delete-dialog.component.scss b/tower-web/src/app/modules/main/component/confirm-delete-dialog/confirm-delete-dialog.component.scss new file mode 100644 index 00000000..e3bfc663 --- /dev/null +++ b/tower-web/src/app/modules/main/component/confirm-delete-dialog/confirm-delete-dialog.component.scss @@ -0,0 +1,9 @@ +.actions{ + display: flex; + flex-direction: row; + justify-content: space-around; +} + +.form-field--full-width{ + width: 100%; +} diff --git a/tower-web/src/app/modules/main/component/confirm-delete-dialog/confirm-delete-dialog.component.ts b/tower-web/src/app/modules/main/component/confirm-delete-dialog/confirm-delete-dialog.component.ts new file mode 100644 index 00000000..daa0a674 --- /dev/null +++ b/tower-web/src/app/modules/main/component/confirm-delete-dialog/confirm-delete-dialog.component.ts @@ -0,0 +1,44 @@ +import { CommonModule } from '@angular/common'; +import { Component, Inject, NgModule } from '@angular/core'; +import { FormControl, ReactiveFormsModule } from '@angular/forms'; +import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef, MatFormFieldModule, MatInputModule } from '@angular/material'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { Observable } from 'rxjs'; +import { map, startWith } from 'rxjs/operators'; + +@Component({ + selector: 'wt-confirm-delete-dialog', + templateUrl: './confirm-delete-dialog.component.html', + styleUrls: ['./confirm-delete-dialog.component.scss'] +}) +export class ConfirmDeleteDialogComponent { + + public control: FormControl = new FormControl(); + public message!: string; + public noMatch$: Observable = this.control.valueChanges.pipe(startWith([undefined]), map(value => value !== this.data.runName)); + + constructor(@Inject(MAT_DIALOG_DATA) private data: {runName: string}, private dialogRef: MatDialogRef) { + this.message = `Please confirm the deletion of the workflow '${data.runName}' typing its name below (operation is not recoverable):` + } + + public confirmDelete(): void { + this.dialogRef.close(true); + } +} + + +@NgModule({ + imports: [ + CommonModule, + MatDialogModule, + NoopAnimationsModule, + ReactiveFormsModule, + MatInputModule, + MatFormFieldModule + ], + declarations: [ConfirmDeleteDialogComponent], + exports: [ConfirmDeleteDialogComponent, MatDialogModule] +}) +export class ConfirmDeleteDialogModule{ + +} diff --git a/tower-web/src/app/modules/main/component/sidebar/sidebar.component.ts b/tower-web/src/app/modules/main/component/sidebar/sidebar.component.ts index f36c9e3f..8b368371 100644 --- a/tower-web/src/app/modules/main/component/sidebar/sidebar.component.ts +++ b/tower-web/src/app/modules/main/component/sidebar/sidebar.component.ts @@ -15,10 +15,12 @@ import {WorkflowService} from "src/app/modules/main/service/workflow.service"; import {AuthService} from "src/app/modules/main/service/auth.service"; import {NotificationService} from "src/app/modules/main/service/notification.service"; import { ActivatedRoute, Router, NavigationEnd, Params } from '@angular/router'; -import {debounceTime, distinctUntilChanged, filter} from 'rxjs/operators'; +import {debounceTime, distinctUntilChanged, filter, takeUntil} from 'rxjs/operators'; import {FormControl} from "@angular/forms"; import {FilteringParams} from "../../util/filtering-params"; - +import { Subject } from 'rxjs'; +import { MatDialog } from '@angular/material/dialog'; +import { ConfirmDeleteDialogComponent} from '../confirm-delete-dialog/confirm-delete-dialog.component'; declare let $: any; @Component({ @@ -28,6 +30,8 @@ declare let $: any; }) export class SidebarComponent implements OnInit, OnDestroy, OnChanges { + private destroy$ = new Subject(); + @Input() workflows: Workflow[]; @@ -55,7 +59,8 @@ export class SidebarComponent implements OnInit, OnDestroy, OnChanges { private authService: AuthService, private workflowService: WorkflowService, private router: Router, - private route: ActivatedRoute) {} + private route: ActivatedRoute, + private dialog: MatDialog) {} ngOnInit() { @@ -94,6 +99,7 @@ export class SidebarComponent implements OnInit, OnDestroy, OnChanges { ngOnDestroy(): void { // TODO: Decide if this line required or not. It breaks routing. // this.router.navigate(['/']); + this.destroy$.next(); } collapseSidebar(): void { @@ -144,13 +150,24 @@ export class SidebarComponent implements OnInit, OnDestroy, OnChanges { } deleteWorkflow(workflow: Workflow): void { - const confirm = prompt(`Please confirm the deletion of the workflow '${workflow.data.runName}' typing its name below (operation is not recoverable):`); - if (confirm != workflow.data.runName) { - return; - } - this.workflowToDelete = workflow; - this.onDeleteWorkflow.next(workflow); + this.dialog.open(ConfirmDeleteDialogComponent, { + data: { + runName: workflow.data.runName + }, + maxWidth: '90%', + width: '300px', + hasBackdrop: true, + disableClose: true + }).afterClosed() + .pipe(takeUntil(this.destroy$)).subscribe( + confirmDelete => { + if(confirmDelete){ + this.workflowToDelete = workflow; + this.onDeleteWorkflow.next(workflow); + } + } + ); } } diff --git a/tower-web/src/app/modules/main/main.module.ts b/tower-web/src/app/modules/main/main.module.ts index 0f558b86..5200944a 100644 --- a/tower-web/src/app/modules/main/main.module.ts +++ b/tower-web/src/app/modules/main/main.module.ts @@ -49,6 +49,7 @@ import { TreeListComponent } from "./component/tree-list/TreeListComponent"; import { WorkflowStatusIconComponent } from "../../workflow-status-icon/workflow-status-icon.component"; import { TaskDetailsComponent } from "./component/task-details/task-details.component"; import {AppConfigService} from './service/app-config.service'; +import { ConfirmDeleteDialogModule } from './component/confirm-delete-dialog/confirm-delete-dialog.component'; /* * Main application routing strategy @@ -118,6 +119,7 @@ const appInitializerFn = (appConfig: AppConfigService) => { FormsModule, ChartistModule, ReactiveFormsModule, + ConfirmDeleteDialogModule ], providers: [ AppConfigService,