Add prompt modal. Minor style updates

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

src/app/shared/dialogs/confirm-dialog/confirm-dialog.component.spec.ts

 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();
   });

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?',

src/app/shared/dialogs/dialogs.scss

+.dialog-text {
+  color: #7e7e7e;
+  font-size: 16px;
+  margin-top: 1.2em;
+}

src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.html

+<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

src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.spec.ts

+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();
+  });
+});

src/app/shared/dialogs/prompt-dialog/prompt-dialog.component.ts

+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 });
+  }
+}

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 {}