Begin to migrato to angular/material.

This commit is contained in:
Alexis Lahouze 2017-09-16 19:47:43 +02:00
parent ca9bccaf92
commit b6d710ec67
3 changed files with 61 additions and 53 deletions

View File

@ -3,6 +3,7 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms';
import { MdButtonModule, MdDialogModule, MdTableModule } from '@angular/material';
import { HttpClientModule } from '@angular/common/http'; import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
@ -28,6 +29,9 @@ import { AccountListState } from './account.states'
RouterModule.forChild([ RouterModule.forChild([
AccountListState AccountListState
]), ]),
MdButtonModule,
MdDialogModule,
MdTableModule,
NgLoggerModule, NgLoggerModule,
ToastrModule, ToastrModule,
NgbModule NgbModule

View File

@ -1,7 +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, Input, ViewChild } from '@angular/core';
import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { Account } from './account'; import { Account } from './account';
import { AccountFormComponent } from './accountForm.component'; import { AccountFormComponent } from './accountForm.component';
@ -9,33 +8,36 @@ import { AccountFormComponent } from './accountForm.component';
@Component({ @Component({
selector: 'account-edit-modal', selector: 'account-edit-modal',
template: ` template: `
<div class="modal-header"> <h2 md-dialog-tiitle>{{ title() }}</h2>
<h3 class="modal-title" id="modal-title">{{ title() }}</h3>
</div>
<div class="modal-body" id="modal-body"> <md-dialog-content>
<account-form [account]="account" (submit)="submit()" #accountForm="accountForm"></account-form> <account-form [account]="account" (submit)="submit()" #accountForm="accountForm"></account-form>
</div> </md-dialog-content>
<div class="modal-footer"> <md-dialog-actions>
<button class="btn btn-primary" [disabled]="!accountForm.form.valid" (click)="submit()"> <button md-raised-button color="primary" [disabled]="!accountForm?.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 AccountEditModalComponent { export class AccountEditModalComponent {
@Input() account: Account; private account: Account;
@ViewChild('accountForm') accountForm: AccountFormComponent; @ViewChild('accountForm') accountForm: AccountFormComponent;
constructor(private activeModal: NgbActiveModal) {} constructor(
@Inject(MD_DIALOG_DATA) public data: any,
public dialogRef: MdDialogRef<AccountEditModalComponent>,
) {
this.account = data.account;
}
title(): string { title(): string {
if(this.account.id) { if(this.account && this.account.id) {
return "Account #" + this.account.id; return "Account #" + this.account.id;
} else { } else {
return "New account"; return "New account";
@ -50,10 +52,6 @@ export class AccountEditModalComponent {
account.name = formModel.name; account.name = formModel.name;
account.authorized_overdraft = formModel.authorizedOverdraft; account.authorized_overdraft = formModel.authorizedOverdraft;
this.activeModal.close(account); this.dialogRef.close(account);
}
cancel(): void {
this.activeModal.dismiss("closed");
} }
} }

View File

@ -1,9 +1,9 @@
// 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 { Observable } from 'rxjs/Rx'; import { Observable } from 'rxjs/Rx';
import { Logger } from '@nsalaun/ng-logger'; import { Logger } from '@nsalaun/ng-logger';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr'; import { ToastrService } from 'ngx-toastr';
import { Account } from './account'; import { Account } from './account';
@ -15,7 +15,8 @@ import { AccountEditModalComponent } from './accountEditModal.component';
selector: 'account-list', selector: 'account-list',
template: ` template: `
<div class="row"> <div class="row">
<table class="table table-sm table-striped table-condensed table-hover"> <div class="col s12">
<table class="bordered highlight responsive-table">
<thead> <thead>
<tr> <tr>
<th>Nom du compte</th> <th>Nom du compte</th>
@ -29,7 +30,7 @@ import { AccountEditModalComponent } from './accountEditModal.component';
<tbody> <tbody>
<tr> <tr>
<td colspan="5"> <td colspan="5">
<button class="btn btn-success" (click)="add()"> <button md-raised-button color="primary" (click)="add()">
Ajouter Ajouter
</button> </button>
</td> </td>
@ -40,6 +41,7 @@ import { AccountEditModalComponent } from './accountEditModal.component';
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
`, `,
}) })
@ -50,7 +52,7 @@ export class AccountListComponent implements OnInit {
private accountService: AccountService, private accountService: AccountService,
private toastrService: ToastrService, private toastrService: ToastrService,
private logger: Logger, private logger: Logger,
private ngbModal: NgbModal private mdDialog: MdDialog,
) { ) {
} }
@ -70,15 +72,19 @@ export class AccountListComponent implements OnInit {
* Add an empty account. * Add an empty account.
*/ */
add() { add() {
const modal = this.ngbModal.open(AccountEditModalComponent, { let dialogRef = this.mdDialog.open(AccountEditModalComponent, {
size: 'lg' data: {
account: new Account(),
}
}); });
modal.componentInstance.account = new Account(); dialogRef.afterClosed().subscribe((account: Account) => {
if(account) {
modal.result.then((account: Account) => {
this.logger.log("Modal closed => save account", account); this.logger.log("Modal closed => save account", account);
this.save(account); this.save(account);
} else {
this.logger.log("Modal dismissed");
}
}, (reason) => function(reason) { }, (reason) => function(reason) {
}); });
}; };