alahouze/accountant-ui
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Migrate schedule delete dialog to Material.

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/scheduler/scheduleDeleteModal.component.ts
View File

@ -1,49 +1,34 @@
// vim: set tw=80 ts=2 sw=2 sts=2: // vim: set tw=80 ts=2 sw=2 sts=2:
import { Component, Input } from '@angular/core'; import { Component, Inject } from '@angular/core';
import { MD_DIALOG_DATA } from '@angular/material';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { Schedule } from './schedule';
@Component({ @Component({
selector: 'schedule-delete-modal', selector: 'schedule-delete-modal',
template: ` template: `
<div class="modal-header"> <h3 md-dialog-title>{{ title() }}</h3>
<h3 class="modal-title" id="modal-title">{{ title() }}</h3>
</div>
<div class="modal-body" id="modal-body"> <md-dialog-content>
<p> Do you really want to delete schedule #{{ data.schedule.id }} with label:<br/>
Do you really want to delete schedule #{{ schedule.id }} with label:<br/> {{ data.schedule.label }}
{{ schedule.label }} </md-dialog-content>
</p>
</div>
<div class="modal-footer"> <md-dialog-actions>
<button class="btn btn-danger" (click)="submit()"> <button md-raised-button color="warn" [md-dialog-close]="data.schedule">
Yes Yes
</button> </button>
<button class="btn btn-default" (click)="cancel()"> <button md-raised-button md-dialog-close>
No No
</button> </button>
</div> </md-dialog-actions>
` `
}) })
export class ScheduleDeleteModalComponent { export class ScheduleDeleteModalComponent {
@Input() schedule: Schedule constructor(
@Inject(MD_DIALOG_DATA) private data: any
constructor(public activeModal: NgbActiveModal) {} ) {}
title(): string { title(): string {
return "Delete schedule #" + this.schedule.id; return "Delete schedule #" + this.data.schedule.id;
}
submit(): void {
this.activeModal.close(this.schedule);
}
cancel(): void {
this.activeModal.dismiss("closed");
} }
} }

15
src/scheduler/scheduleList.component.ts
View File

@ -1,5 +1,6 @@
// vim: set tw=80 ts=2 sw=2 sts=2 : // vim: set tw=80 ts=2 sw=2 sts=2 :
import { Component, Inject, OnInit } from '@angular/core'; import { Component, Inject, OnInit } from '@angular/core';
import { MdDialog } from '@angular/material';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs/Rx'; import { Observable } from 'rxjs/Rx';
@ -114,6 +115,7 @@ export class ScheduleListComponent implements OnInit {
private ngbModal: NgbModal, private ngbModal: NgbModal,
private route: ActivatedRoute, private route: ActivatedRoute,
private schedules: ScheduleDataSource, private schedules: ScheduleDataSource,
private mdDialog: MdDialog,
) {} ) {}
ngOnInit() { ngOnInit() {
@ -165,13 +167,18 @@ export class ScheduleListComponent implements OnInit {
}; };
confirmDelete(schedule: Schedule) { confirmDelete(schedule: Schedule) {
const modal = this.ngbModal.open(ScheduleDeleteModalComponent); let dialogRef = this.mdDialog.open(ScheduleDeleteModalComponent, {
data: {
schedule: schedule,
}
});
modal.componentInstance.schedule = schedule; dialogRef.afterClosed().subscribe((schedule: Schedule) => {
if(schedule) {
modal.result.then((schedule: Schedule) => {
this.delete(schedule); this.delete(schedule);
}
}, (reason) => function(reason) { }, (reason) => function(reason) {
this.logger.error("Delete dialog failed", reason);
}); });
} }