From 2869c3284860d09bbd5e1d6964795cceb646a006 Mon Sep 17 00:00:00 2001
From: Scott Berg <saberg3@wisc.edu>
Date: Fri, 15 Feb 2019 14:50:20 -0600
Subject: [PATCH] Add generic confirm dialog.
---
.../confirm-dialog.component.html | 13 +++++
.../confirm-dialog.component.scss | 5 ++
.../confirm-dialog.component.spec.ts | 24 ++++++++++
.../confirm-dialog.component.ts | 48 +++++++++++++++++++
src/app/shared/shared.module.ts | 10 +++-
5 files changed, 99 insertions(+), 1 deletion(-)
create mode 100644 src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.html
create mode 100644 src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.scss
create mode 100644 src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.spec.ts
create mode 100644 src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.ts
diff --git a/src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.html b/src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.html
new file mode 100644
index 0000000..a9c1b14
--- /dev/null
+++ b/src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.html
@@ -0,0 +1,13 @@
+<mat-toolbar class="dialog-toolbar">
+ <h1 class="dialog-toolbar-title">{{title}}</h1>
+ <button mat-button mat-dialog-close class="close-btn" aria-label="Close note dialog"><i class="material-icons">clear</i></button>
+</mat-toolbar>
+<mat-dialog-content id="confirmation-dialog" class="mat-typography dialog-with-toolbar">
+ <mat-dialog-content>
+ <p class="dialog-text" *ngFor="let line of text">{{line}}</p>
+ </mat-dialog-content>
+ <mat-dialog-actions align="end">
+ <button mat-button (click)="cancel()" aria-label="Cancel">{{cancelText}}</button>
+ <button mat-button [color]="confirmColor" mat-raised-button (click)="confirm()" aria-label="Confirm">{{confirmText}}</button>
+ </mat-dialog-actions>
+</mat-dialog-content>
\ No newline at end of file
diff --git a/src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.scss b/src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.scss
new file mode 100644
index 0000000..9a4c055
--- /dev/null
+++ b/src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.scss
@@ -0,0 +1,5 @@
+.dialog-text {
+ color: #7e7e7e;
+ font-size: 16px;
+ margin-top: 1.2em;
+}
diff --git a/src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.spec.ts b/src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.spec.ts
new file mode 100644
index 0000000..a2014a2
--- /dev/null
+++ b/src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RemoveCourseConfirmDialogComponent } from './remove-course-confirm-dialog.component';
+
+describe('RemoveCourseConfirmDialogComponent', () => {
+ let component: RemoveCourseConfirmDialogComponent;
+ let fixture: ComponentFixture<RemoveCourseConfirmDialogComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [RemoveCourseConfirmDialogComponent],
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(RemoveCourseConfirmDialogComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.ts b/src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.ts
new file mode 100644
index 0000000..a11b249
--- /dev/null
+++ b/src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.ts
@@ -0,0 +1,48 @@
+import { Component, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+@Component({
+ selector: 'cse-confirm-dialog',
+ templateUrl: './confirm-dialog.component.html',
+ styleUrls: ['./confirm-dialog.component.scss'],
+})
+export class ConfirmDialogComponent {
+ title: string;
+ text: string[];
+ cancelText: string;
+ confirmText: string;
+ confirmColor: string;
+
+ constructor(
+ private dialogRef: MatDialogRef<ConfirmDialogComponent>,
+ @Inject(MAT_DIALOG_DATA) data: any,
+ ) {
+ // this.course = data.course;
+ // this.type = data.type;
+ const {
+ title = 'Are you sure?',
+ text = 'Are you sure you want to do this?',
+ cancelText = 'Cancel',
+ confirmText = 'Confirm',
+ confirmColor = 'primary',
+ } = data;
+
+ this.title = title;
+ this.text = text;
+ this.cancelText = cancelText;
+ this.confirmText = confirmText;
+ this.confirmColor = confirmColor;
+
+ if (typeof text === 'string') {
+ this.text = [text];
+ }
+ }
+
+ confirm() {
+ this.dialogRef.close({ confirmed: true });
+ }
+
+ cancel() {
+ this.dialogRef.close({ confirmed: false });
+ }
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 648ca93..afda02c 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -26,6 +26,8 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatFormFieldModule } from '@angular/material/form-field';
import { CourseDetailsDialogComponent } from '../degree-planner/dialogs/course-details-dialog/course-details-dialog.component';
+import { ConfirmDialogComponent } from './dialogs/confirm-dialog/confirm-dialog.component';
+
const modules = [
CommonModule,
FormsModule,
@@ -57,6 +59,12 @@ const pipes = [
@NgModule({
imports: [modules],
exports: [modules, pipes, CourseDetailsComponent],
- declarations: [pipes, CourseDetailsComponent, CourseDetailsDialogComponent],
+ entryComponents: [ConfirmDialogComponent],
+ declarations: [
+ pipes,
+ CourseDetailsComponent,
+ CourseDetailsDialogComponent,
+ ConfirmDialogComponent,
+ ],
})
export class SharedModule {}
--
GitLab