Migrate schedule edit modal to Material.

src/scheduler/scheduleEditModal.component.ts

@@ -1,5 +1,6 @@
 // vim: set tw=80 ts=2 sw=2 sts=2:
-import { Component, Input, ViewChild } from '@angular/core';
+import { Component, Inject, ViewChild } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
 
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
@@ -9,32 +10,33 @@ import { ScheduleFormComponent } from './scheduleForm.component';
 @Component({
   selector: 'schedule-edit-modal',
   template: `
-<div class="modal-header">
-  <h3 class="modal-title" id="modal-title">{{ title() }}</h3>
-</div>
+<h3 md-dialog-title>{{ title() }}</h3>
 
-<div class="modal-body" id="modal-body">
+<md-dialog-content>
   <schedule-form [schedule]="schedule" (submit)="submit()" #scheduleForm="scheduleForm"></schedule-form>
-</div>
+</md-dialog-content>
 
-<div class="modal-footer">
-  <button class="btn btn-primary" [disabled]="!scheduleForm.form.valid" (click)="submit()">
+<md-dialog-actions>
+  <button md-raised-button color="primary" [disabled]="!scheduleForm?.form.valid" (click)="submit()">
     Save
   </button>
 
-  <button class="btn btn-default" (click)="cancel()">
+  <button md-raised-button color="warn" md-dialog-close>
     Cancel
   </button>
-</div>
+</md-dialog-actions>
   `
 })
 export class ScheduleEditModalComponent {
-  @Input() schedule: Schedule;
+  private schedule: Schedule;
   @ViewChild('scheduleForm') scheduleForm: ScheduleFormComponent;
 
-  valid: boolean = false;
-
-  constructor(private activeModal: NgbActiveModal) {}
+  constructor(
+    @Inject(MD_DIALOG_DATA) public data: any,
+    public dialogRef: MdDialogRef<ScheduleEditModalComponent>,
+  ) {
+    this.schedule = data.schedule;
+  }
 
   title(): string {
     if(this.schedule.id) {
@@ -57,10 +59,6 @@ export class ScheduleEditModalComponent {
     schedule.value = formModel.value;
     schedule.category = formModel.category;
 
-    this.activeModal.close(schedule);
-  }
-
-  cancel(): void {
-    this.activeModal.dismiss("closed");
+    this.dialogRef.close(schedule);
   }
 }

src/scheduler/scheduleList.component.ts

@@ -142,14 +142,16 @@ export class ScheduleListComponent implements OnInit {
   };
 
   modify(schedule: Schedule) {
-    const modal = this.ngbModal.open(ScheduleEditModalComponent, {
-      size: 'lg'
+    let dialogRef = this.mdDialog.open(ScheduleEditModalComponent, {
+      data: {
+        schedule: schedule,
+      }
     });
 
-    modal.componentInstance.schedule = schedule;
-
-    modal.result.then((schedule: Schedule) => {
+    dialogRef.afterClosed().subscribe((schedule: Schedule) => {
+      if(schedule) {
         this.save(schedule);
+      }
     }, (reason) => function(reason) {
     });
   }