From 7efd40c1c0a7d31e4ded26adebb02509145125f9 Mon Sep 17 00:00:00 2001
From: Scott Berg <saberg3@wisc.edu>
Date: Mon, 18 Feb 2019 09:24:08 -0600
Subject: [PATCH] Add prompt modal. Minor style updates
---
.../degree-planner.component.ts | 21 +++--
.../confirm-dialog.component.spec.ts | 12 +--
.../confirm-dialog.component.ts | 4 +-
src/app/shared/dialogs/dialogs.scss | 5 ++
.../prompt-dialog.component.html | 19 +++++
.../prompt-dialog.component.scss | 0
.../prompt-dialog.component.spec.ts | 24 ++++++
.../prompt-dialog/prompt-dialog.component.ts | 78 +++++++++++++++++++
src/app/shared/shared.module.ts | 4 +-
9 files changed, 151 insertions(+), 16 deletions(-)
create mode 100644 src/app/shared/dialogs/dialogs.scss
create mode 100644 src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.html
create mode 100644 src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.scss
create mode 100644 src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.spec.ts
create mode 100644 src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.ts
diff --git a/src/app/degree-planner/degree-planner.component.ts b/src/app/degree-planner/degree-planner.component.ts
index 56f961e..4e60993 100644
--- a/src/app/degree-planner/degree-planner.component.ts
+++ b/src/app/degree-planner/degree-planner.component.ts
@@ -58,6 +58,7 @@ import {
ModifyPlanDialogComponent,
DialogMode,
} from './dialogs/modify-plan-dialog/modify-plan-dialog.component';
+import { PromptDialogComponent } from '@app/shared/dialogs/prompt-dialog/prompt-dialog.component';
import {
ToggleAcademicYear,
CloseCourseSearch,
@@ -157,15 +158,23 @@ export class DegreePlannerComponent implements OnInit {
}
public onRenamePlanClick(currentPlan: DegreePlan) {
- const data: DialogMode = { mode: 'rename', oldName: currentPlan.name };
+ // const data: DialogMode = { mode: 'rename', oldName: currentPlan.name };
this.dialog
- .open(ModifyPlanDialogComponent, { data })
+ .open(PromptDialogComponent, {
+ data: {
+ initalValue: currentPlan.name,
+ title: 'Rename Degree Plan',
+ confirmText: 'Save',
+ inputName: 'Plan name',
+ },
+ })
.afterClosed()
- .subscribe((result: { name: string } | undefined) => {
- if (result !== undefined && typeof result.name === 'string') {
- const newName = result.name;
+ .subscribe((result: { confirmed: boolean; value: string }) => {
+ const { confirmed, value } = result;
+
+ if (confirmed) {
const { roadmapId } = currentPlan;
- const action = new ChangePlanName({ roadmapId, newName });
+ const action = new ChangePlanName({ roadmapId, newName: value });
this.store.dispatch(action);
}
});
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
index a2014a2..7e59fd8 100644
--- a/src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.spec.ts
+++ b/src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.spec.ts
@@ -1,19 +1,19 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { RemoveCourseConfirmDialogComponent } from './remove-course-confirm-dialog.component';
+import { ConfirmDialogComponent } from './confirm-dialog.component';
-describe('RemoveCourseConfirmDialogComponent', () => {
- let component: RemoveCourseConfirmDialogComponent;
- let fixture: ComponentFixture<RemoveCourseConfirmDialogComponent>;
+describe('ConfirmDialogComponent', () => {
+ let component: ConfirmDialogComponent;
+ let fixture: ComponentFixture<ConfirmDialogComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
- declarations: [RemoveCourseConfirmDialogComponent],
+ declarations: [ConfirmDialogComponent],
}).compileComponents();
}));
beforeEach(() => {
- fixture = TestBed.createComponent(RemoveCourseConfirmDialogComponent);
+ fixture = TestBed.createComponent(ConfirmDialogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
diff --git a/src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.ts b/src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.ts
index a11b249..aca338b 100644
--- a/src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.ts
+++ b/src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.ts
@@ -4,7 +4,7 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
@Component({
selector: 'cse-confirm-dialog',
templateUrl: './confirm-dialog.component.html',
- styleUrls: ['./confirm-dialog.component.scss'],
+ styleUrls: ['../dialogs.scss'],
})
export class ConfirmDialogComponent {
title: string;
@@ -17,8 +17,6 @@ export class ConfirmDialogComponent {
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?',
diff --git a/src/app/shared/dialogs/dialogs.scss b/src/app/shared/dialogs/dialogs.scss
new file mode 100644
index 0000000..9a4c055
--- /dev/null
+++ b/src/app/shared/dialogs/dialogs.scss
@@ -0,0 +1,5 @@
+.dialog-text {
+ color: #7e7e7e;
+ font-size: 16px;
+ margin-top: 1.2em;
+}
diff --git a/src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.html b/src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.html
new file mode 100644
index 0000000..f3f169b
--- /dev/null
+++ b/src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.html
@@ -0,0 +1,19 @@
+<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>
+
+ <form [formGroup]='inputForm' (ngSubmit)="confirm()" fxLayout="column" fxLayoutAlign="space-around none" style="padding: 12px 22px;">
+ <mat-form-field>
+ <input matInput [placeholder]="inputName" formControlName="value">
+ </mat-form-field>
+ </form>
+ </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/prompt-dialog/prompt-dialog.component.scss b/src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.spec.ts b/src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.spec.ts
new file mode 100644
index 0000000..d230d5d
--- /dev/null
+++ b/src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PromptDialogComponent } from './prompt-dialog.component';
+
+describe('PromptDialogComponent', () => {
+ let component: PromptDialogComponent;
+ let fixture: ComponentFixture<PromptDialogComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [PromptDialogComponent],
+ }).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(PromptDialogComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.ts b/src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.ts
new file mode 100644
index 0000000..c049e41
--- /dev/null
+++ b/src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.ts
@@ -0,0 +1,78 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+
+// Form imports
+import {
+ FormBuilder,
+ FormGroup,
+ FormControl,
+ Validators,
+} from '@angular/forms';
+
+@Component({
+ selector: 'cse-prompt-dialog',
+ templateUrl: './prompt-dialog.component.html',
+ styleUrls: ['../dialogs.scss'],
+})
+export class PromptDialogComponent implements OnInit {
+ title: string;
+ text: string[];
+ inputName: string;
+ placeholder?: string;
+ tooltip?: string;
+ cancelText: string;
+ confirmText: string;
+ confirmColor: string;
+
+ inputForm: FormGroup;
+ initalValue: string;
+
+ constructor(
+ private dialogRef: MatDialogRef<PromptDialogComponent>,
+ private fb: FormBuilder,
+ @Inject(MAT_DIALOG_DATA) data: any,
+ ) {
+ const {
+ title = 'User Input Required',
+ text = [],
+ inputName = 'Data',
+ initalValue = '',
+ placeholder,
+ tooltip,
+ cancelText = 'Cancel',
+ confirmText = 'Confirm',
+ confirmColor = 'primary',
+ } = data;
+
+ this.title = title;
+ this.text = text;
+ this.inputName = inputName;
+ this.placeholder = placeholder;
+ this.tooltip = tooltip;
+ this.cancelText = cancelText;
+ this.confirmText = confirmText;
+ this.confirmColor = confirmColor;
+ this.initalValue = initalValue;
+
+ if (typeof text === 'string') {
+ this.text = [text];
+ }
+ }
+
+ ngOnInit() {
+ // Deafults for input form
+ this.inputForm = this.fb.group({
+ value: this.initalValue,
+ });
+ }
+
+ confirm() {
+ const { value } = this.inputForm.value;
+ this.dialogRef.close({ confirmed: true, value });
+ }
+
+ cancel() {
+ const { value } = this.inputForm.value;
+ this.dialogRef.close({ confirmed: false, value });
+ }
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index afda02c..4eea8fc 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -27,6 +27,7 @@ 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';
+import { PromptDialogComponent } from './dialogs/prompt-dialog/prompt-dialog.component';
const modules = [
CommonModule,
@@ -59,12 +60,13 @@ const pipes = [
@NgModule({
imports: [modules],
exports: [modules, pipes, CourseDetailsComponent],
- entryComponents: [ConfirmDialogComponent],
+ entryComponents: [ConfirmDialogComponent, PromptDialogComponent],
declarations: [
pipes,
CourseDetailsComponent,
CourseDetailsDialogComponent,
ConfirmDialogComponent,
+ PromptDialogComponent,
],
})
export class SharedModule {}
--
GitLab