From b6d710ec674d015839c727380774e16ae2e3c045 Mon Sep 17 00:00:00 2001 From: Alexis Lahouze Date: Sat, 16 Sep 2017 19:47:43 +0200 Subject: [PATCH] Begin to migrato to angular/material. --- src/accounts/account.module.ts | 4 ++ src/accounts/accountEditModal.component.ts | 40 ++++++------- src/accounts/accountList.component.ts | 70 ++++++++++++---------- 3 files changed, 61 insertions(+), 53 deletions(-) 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 compteSolde courantSolde pointéDécouvert autoriséActions
+ + + + + + + + + - - - - + + + + - - - -
Nom du compteSolde courantSolde 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) { }); };