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

Migrate schedule edit modal to Material.

Browse Source
This commit is contained in:
Alexis Lahouze 2017-09-22 00:06:58 +02:00
parent d5160a55fb
commit 877315d6e1
2 changed files with 25 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/scheduler/scheduleEditModal.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, 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'; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
@ -9,32 +10,33 @@ import { ScheduleFormComponent } from './scheduleForm.component';
@Component({ @Component({
selector: 'schedule-edit-modal', selector: 'schedule-edit-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>
<schedule-form [schedule]="schedule" (submit)="submit()" #scheduleForm="scheduleForm"></schedule-form> <schedule-form [schedule]="schedule" (submit)="submit()" #scheduleForm="scheduleForm"></schedule-form>
</div> </md-dialog-content>
<div class="modal-footer"> <md-dialog-actions>
<button class="btn btn-primary" [disabled]="!scheduleForm.form.valid" (click)="submit()"> <button md-raised-button color="primary" [disabled]="!scheduleForm?.form.valid" (click)="submit()">
Save Save
</button> </button>
<button class="btn btn-default" (click)="cancel()"> <button md-raised-button color="warn" md-dialog-close>
Cancel Cancel
</button> </button>
</div> </md-dialog-actions>
` `
}) })
export class ScheduleEditModalComponent { export class ScheduleEditModalComponent {
@Input() schedule: Schedule; private schedule: Schedule;
@ViewChild('scheduleForm') scheduleForm: ScheduleFormComponent; @ViewChild('scheduleForm') scheduleForm: ScheduleFormComponent;
valid: boolean = false; constructor(
@Inject(MD_DIALOG_DATA) public data: any,
constructor(private activeModal: NgbActiveModal) {} public dialogRef: MdDialogRef<ScheduleEditModalComponent>,
) {
this.schedule = data.schedule;
}
title(): string { title(): string {
if(this.schedule.id) { if(this.schedule.id) {
@ -57,10 +59,6 @@ export class ScheduleEditModalComponent {
schedule.value = formModel.value; schedule.value = formModel.value;
schedule.category = formModel.category; schedule.category = formModel.category;
this.activeModal.close(schedule); this.dialogRef.close(schedule);
}
cancel(): void {
this.activeModal.dismiss("closed");
} }
} }

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

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