Migrate schedule delete dialog to Material.

This commit is contained in:
Alexis Lahouze 2017-09-21 23:41:26 +02:00
parent f632722916
commit 73de67db73
2 changed files with 27 additions and 35 deletions

View File

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

View File

@ -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) => {
dialogRef.afterClosed().subscribe((schedule: Schedule) => {
if(schedule) {
this.delete(schedule);
}
}, (reason) => function(reason) {
this.logger.error("Delete dialog failed", reason);
});
}