diff --git a/src/accounts/account.module.ts b/src/accounts/account.module.ts
index 735b174..6831e77 100644
--- a/src/accounts/account.module.ts
+++ b/src/accounts/account.module.ts
@@ -3,6 +3,7 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
+import { MdButtonModule, MdDialogModule, MdTableModule } from '@angular/material';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
@@ -28,6 +29,9 @@ import { AccountListState } from './account.states'
RouterModule.forChild([
AccountListState
]),
+ MdButtonModule,
+ MdDialogModule,
+ MdTableModule,
NgLoggerModule,
ToastrModule,
NgbModule
diff --git a/src/accounts/accountEditModal.component.ts b/src/accounts/accountEditModal.component.ts
index ae859bd..85709ff 100644
--- a/src/accounts/accountEditModal.component.ts
+++ b/src/accounts/accountEditModal.component.ts
@@ -1,7 +1,6 @@
// vim: set tw=80 ts=2 sw=2 sts=2:
-import { Component, Input, ViewChild } from '@angular/core';
-
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { Component, Inject, Input, ViewChild } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
import { Account } from './account';
import { AccountFormComponent } from './accountForm.component';
@@ -9,33 +8,36 @@ import { AccountFormComponent } from './accountForm.component';
@Component({
selector: 'account-edit-modal',
template: `
-
+{{ title() }}
-
+
+
+
-
+
`
})
export class AccountEditModalComponent {
- @Input() account: Account;
+ private account: Account;
@ViewChild('accountForm') accountForm: AccountFormComponent;
- constructor(private activeModal: NgbActiveModal) {}
+ constructor(
+ @Inject(MD_DIALOG_DATA) public data: any,
+ public dialogRef: MdDialogRef,
+ ) {
+ this.account = data.account;
+ }
title(): string {
- if(this.account.id) {
+ if(this.account && this.account.id) {
return "Account #" + this.account.id;
} else {
return "New account";
@@ -50,10 +52,6 @@ export class AccountEditModalComponent {
account.name = formModel.name;
account.authorized_overdraft = formModel.authorizedOverdraft;
- this.activeModal.close(account);
- }
-
- cancel(): void {
- this.activeModal.dismiss("closed");
+ this.dialogRef.close(account);
}
}
diff --git a/src/accounts/accountList.component.ts b/src/accounts/accountList.component.ts
index a9d48c8..3718287 100644
--- a/src/accounts/accountList.component.ts
+++ b/src/accounts/accountList.component.ts
@@ -1,9 +1,9 @@
// vim: set tw=80 ts=2 sw=2 sts=2 :
import { Component, Inject, OnInit } from '@angular/core';
+import { MdDialog } from '@angular/material';
import { Observable } from 'rxjs/Rx';
import { Logger } from '@nsalaun/ng-logger';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
import { Account } from './account';
@@ -15,31 +15,33 @@ import { AccountEditModalComponent } from './accountEditModal.component';
selector: 'account-list',
template: `
-
-
-
- Nom du compte |
- Solde courant |
- Solde pointé |
- Découvert autorisé |
- Actions |
-
-
+
+
+
+
+ Nom du compte |
+ Solde courant |
+ Solde pointé |
+ Découvert autorisé |
+ Actions |
+
+
-
-
-
-
- |
-
+
+
+
+
+ |
+
-
-
-
-
+
+
+
+
+
`,
})
@@ -50,7 +52,7 @@ export class AccountListComponent implements OnInit {
private accountService: AccountService,
private toastrService: ToastrService,
private logger: Logger,
- private ngbModal: NgbModal
+ private mdDialog: MdDialog,
) {
}
@@ -70,15 +72,19 @@ export class AccountListComponent implements OnInit {
* Add an empty account.
*/
add() {
- const modal = this.ngbModal.open(AccountEditModalComponent, {
- size: 'lg'
+ let dialogRef = this.mdDialog.open(AccountEditModalComponent, {
+ data: {
+ account: new Account(),
+ }
});
- modal.componentInstance.account = new Account();
-
- modal.result.then((account: Account) => {
- this.logger.log("Modal closed => save account", account);
- this.save(account);
+ dialogRef.afterClosed().subscribe((account: Account) => {
+ if(account) {
+ this.logger.log("Modal closed => save account", account);
+ this.save(account);
+ } else {
+ this.logger.log("Modal dismissed");
+ }
}, (reason) => function(reason) {
});
};