From 73de67db7326627ffdd2378e2f28b08446c36c2a Mon Sep 17 00:00:00 2001
From: Alexis Lahouze <xals@lahouze.org>
Date: Thu, 21 Sep 2017 23:41:26 +0200
Subject: [PATCH] Migrate schedule delete dialog to Material.

---
 .../scheduleDeleteModal.component.ts          | 45 +++++++------------
 src/scheduler/scheduleList.component.ts       | 17 ++++---
 2 files changed, 27 insertions(+), 35 deletions(-)

diff --git a/src/scheduler/scheduleDeleteModal.component.ts b/src/scheduler/scheduleDeleteModal.component.ts
index 7e21276..e6823a9 100644
--- a/src/scheduler/scheduleDeleteModal.component.ts
+++ b/src/scheduler/scheduleDeleteModal.component.ts
@@ -1,49 +1,34 @@
 // vim: set tw=80 ts=2 sw=2 sts=2:
-import { Component, Input } from '@angular/core';
-
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-
-import { Schedule } from './schedule';
+import { Component, Inject } from '@angular/core';
+import { MD_DIALOG_DATA } from '@angular/material';
 
 @Component({
   selector: 'schedule-delete-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">
-      <p>
-      Do you really want to delete schedule #{{ schedule.id }} with label:<br/>
-      {{ schedule.label }}
-      </p>
-    </div>
+    <md-dialog-content>
+      Do you really want to delete schedule #{{ data.schedule.id }} with label:<br/>
+      {{ data.schedule.label }}
+    </md-dialog-content>
 
-    <div class="modal-footer">
-      <button class="btn btn-danger" (click)="submit()">
+    <md-dialog-actions>
+      <button md-raised-button color="warn" [md-dialog-close]="data.schedule">
         Yes
       </button>
 
-      <button class="btn btn-default" (click)="cancel()">
+      <button md-raised-button md-dialog-close>
         No
       </button>
-    </div>
+    </md-dialog-actions>
   `
 })
 export class ScheduleDeleteModalComponent {
-  @Input() schedule: Schedule
-
-  constructor(public activeModal: NgbActiveModal) {}
+  constructor(
+    @Inject(MD_DIALOG_DATA) private data: any
+  ) {}
 
   title(): string {
-    return "Delete schedule #" + this.schedule.id;
-  }
-
-  submit(): void {
-    this.activeModal.close(this.schedule);
-  }
-
-  cancel(): void {
-    this.activeModal.dismiss("closed");
+    return "Delete schedule #" + this.data.schedule.id;
   }
 }
diff --git a/src/scheduler/scheduleList.component.ts b/src/scheduler/scheduleList.component.ts
index 5765d63..910e286 100644
--- a/src/scheduler/scheduleList.component.ts
+++ b/src/scheduler/scheduleList.component.ts
@@ -1,5 +1,6 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :
 import { Component, Inject, OnInit } from '@angular/core';
+import { MdDialog } from '@angular/material';
 import { ActivatedRoute } from '@angular/router';
 
 import { Observable } from 'rxjs/Rx';
@@ -114,6 +115,7 @@ export class ScheduleListComponent implements OnInit {
     private ngbModal: NgbModal,
     private route: ActivatedRoute,
     private schedules: ScheduleDataSource,
+    private mdDialog: MdDialog,
   ) {}
 
   ngOnInit() {
@@ -165,13 +167,18 @@ export class ScheduleListComponent implements OnInit {
   };
 
   confirmDelete(schedule: Schedule) {
-    const modal = this.ngbModal.open(ScheduleDeleteModalComponent);
+    let dialogRef = this.mdDialog.open(ScheduleDeleteModalComponent, {
+      data: {
+        schedule: schedule,
+      }
+    });
 
-    modal.componentInstance.schedule = schedule;
-
-    modal.result.then((schedule: Schedule) => {
-      this.delete(schedule);
+    dialogRef.afterClosed().subscribe((schedule: Schedule) => {
+      if(schedule) {
+        this.delete(schedule);
+      }
     }, (reason) => function(reason) {
+      this.logger.error("Delete dialog failed", reason);
     });
   }