From 062b6e853a10c5aa51d63f46f035b804827f38f7 Mon Sep 17 00:00:00 2001 From: Kelly McDonald Date: Tue, 26 Jan 2021 10:00:13 -0500 Subject: [PATCH] Added better looking dialog box --- .../confirm-dialog.component.html | 12 +++++++++ .../confirm-dialog.component.scss | 3 +++ .../confirm-dialog.component.spec.ts | 25 +++++++++++++++++ .../confirm-dialog.component.ts | 27 +++++++++++++++++++ .../delete-file-dialog.component.ts | 1 + src/app/_interfaces/dialog-data.ts | 7 +++++ src/app/app.module.ts | 2 ++ src/app/modeler/modeler.component.ts | 23 +++++++++++----- 8 files changed, 94 insertions(+), 6 deletions(-) create mode 100644 src/app/_dialogs/confirm-dialog/confirm-dialog.component.html create mode 100644 src/app/_dialogs/confirm-dialog/confirm-dialog.component.scss create mode 100644 src/app/_dialogs/confirm-dialog/confirm-dialog.component.spec.ts create mode 100644 src/app/_dialogs/confirm-dialog/confirm-dialog.component.ts diff --git a/src/app/_dialogs/confirm-dialog/confirm-dialog.component.html b/src/app/_dialogs/confirm-dialog/confirm-dialog.component.html new file mode 100644 index 0000000..690e062 --- /dev/null +++ b/src/app/_dialogs/confirm-dialog/confirm-dialog.component.html @@ -0,0 +1,12 @@ + + +

{{data.title}}

+ +

{{data.message}}

+ + +
+ + +
+ diff --git a/src/app/_dialogs/confirm-dialog/confirm-dialog.component.scss b/src/app/_dialogs/confirm-dialog/confirm-dialog.component.scss new file mode 100644 index 0000000..e9de670 --- /dev/null +++ b/src/app/_dialogs/confirm-dialog/confirm-dialog.component.scss @@ -0,0 +1,3 @@ +mat-dialog-container { + padding: 0px !important +} diff --git a/src/app/_dialogs/confirm-dialog/confirm-dialog.component.spec.ts b/src/app/_dialogs/confirm-dialog/confirm-dialog.component.spec.ts new file mode 100644 index 0000000..ccea433 --- /dev/null +++ b/src/app/_dialogs/confirm-dialog/confirm-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ConfirmDialogComponent } from './confirm-dialog.component'; + +describe('ConfirmDialogComponent', () => { + let component: ConfirmDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ConfirmDialogComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ConfirmDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/_dialogs/confirm-dialog/confirm-dialog.component.ts b/src/app/_dialogs/confirm-dialog/confirm-dialog.component.ts new file mode 100644 index 0000000..4eb099e --- /dev/null +++ b/src/app/_dialogs/confirm-dialog/confirm-dialog.component.ts @@ -0,0 +1,27 @@ +import { Component, OnInit, Inject} from '@angular/core'; +import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog'; +import {ConfirmDialogData} from '../../_interfaces/dialog-data'; + +@Component({ + selector: 'app-confirm-dialog', + templateUrl: './confirm-dialog.component.html', + styleUrls: ['./confirm-dialog.component.scss'] +}) +export class ConfirmDialogComponent { + + constructor( + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: ConfirmDialogData + ) { + } + + onConfirm(): void { + // Close the dialog, return true + this.dialogRef.close(true); + } + + onDismiss(): void { + // Close the dialog, return false + this.dialogRef.close(false); + } +} diff --git a/src/app/_dialogs/delete-file-dialog/delete-file-dialog.component.ts b/src/app/_dialogs/delete-file-dialog/delete-file-dialog.component.ts index 6313b5f..2508364 100644 --- a/src/app/_dialogs/delete-file-dialog/delete-file-dialog.component.ts +++ b/src/app/_dialogs/delete-file-dialog/delete-file-dialog.component.ts @@ -27,4 +27,5 @@ export class DeleteFileDialogComponent { this.dialogRef.close(data); } + } diff --git a/src/app/_interfaces/dialog-data.ts b/src/app/_interfaces/dialog-data.ts index 48ce9db..8eb5ffa 100644 --- a/src/app/_interfaces/dialog-data.ts +++ b/src/app/_interfaces/dialog-data.ts @@ -39,6 +39,13 @@ export interface DeleteFileDialogData { fileMeta: FileMeta; } +export interface ConfirmDialogData { + title: string; + message: string; +} + + + export interface DeleteWorkflowSpecDialogData { confirm: boolean; workflowSpec: WorkflowSpec; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4e9f00b..f255d93 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -51,6 +51,7 @@ import {ReferenceFilesComponent} from './reference-files/reference-files.compone import {WorkflowSpecCardComponent} from './workflow-spec-card/workflow-spec-card.component'; import {WorkflowSpecListComponent} from './workflow-spec-list/workflow-spec-list.component'; import {MatSidenavModule} from '@angular/material/sidenav'; +import { ConfirmDialogComponent } from './_dialogs/confirm-dialog/confirm-dialog.component'; @Injectable() export class ThisEnvironment implements AppEnvironment { @@ -100,6 +101,7 @@ export function getBaseHref(platformLocation: PlatformLocation): string { WorkflowSpecCardComponent, ProtocolBuilderComponent, ReferenceFilesComponent, + ConfirmDialogComponent, ], imports: [ BrowserAnimationsModule, diff --git a/src/app/modeler/modeler.component.ts b/src/app/modeler/modeler.component.ts index 36b2d34..b587a9b 100644 --- a/src/app/modeler/modeler.component.ts +++ b/src/app/modeler/modeler.component.ts @@ -4,6 +4,7 @@ import {MatBottomSheet} from '@angular/material/bottom-sheet'; import {MatDialog} from '@angular/material/dialog'; import {MatSnackBar} from '@angular/material/snack-bar'; import {ActivatedRoute, Params, Router} from '@angular/router'; + import { ApiErrorsComponent, ApiService, @@ -17,8 +18,9 @@ import { import {FileMetaDialogComponent} from '../_dialogs/file-meta-dialog/file-meta-dialog.component'; import {NewFileDialogComponent} from '../_dialogs/new-file-dialog/new-file-dialog.component'; import {OpenFileDialogComponent} from '../_dialogs/open-file-dialog/open-file-dialog.component'; +import {ConfirmDialogComponent} from '../_dialogs/confirm-dialog/confirm-dialog.component'; import {BpmnWarning} from '../_interfaces/bpmn-warning'; -import {FileMetaDialogData, NewFileDialogData, OpenFileDialogData} from '../_interfaces/dialog-data'; +import {FileMetaDialogData, NewFileDialogData, OpenFileDialogData, ConfirmDialogData} from '../_interfaces/dialog-data'; import {ImportEvent} from '../_interfaces/import-event'; import {DiagramComponent} from '../diagram/diagram.component'; @@ -125,16 +127,25 @@ export class ModelerComponent implements AfterViewInit { getFileName() { return this.diagramFile ? this.diagramFile.name : this.fileName || 'No file selected'; } - checkSaved(){ + + checkSaved() { if (this.hasChanged()) { - const approve = window.confirm('Unsaved Changes - Are you sure?'); - if (approve) { - this.router.navigate(['/home', this.workflowSpec.name]); - } + const dialogRef = this.dialog.open(ConfirmDialogComponent, { + maxWidth: '300px', + data: { + title: 'Unsaved Changes!', + message : 'Are you sure you want to abandon changes?', + } + }); + dialogRef.afterClosed().subscribe(dialogResult => { + if (dialogResult) { + this.router.navigate(['/home', this.workflowSpec.name]); + }}); } else { this.router.navigate(['/home', this.workflowSpec.name]); } } + onFileSelected($event: Event) { this.diagramFile = ($event.target as HTMLFormElement).files[0]; this.onSubmitFileToOpen();