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 { 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

View File

@ -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: `
<div class="modal-header">
<h3 class="modal-title" id="modal-title">{{ title() }}</h3>
</div>
<h2 md-dialog-tiitle>{{ title() }}</h2>
<div class="modal-body" id="modal-body">
<md-dialog-content>
<account-form [account]="account" (submit)="submit()" #accountForm="accountForm"></account-form>
</div>
</md-dialog-content>
<div class="modal-footer">
<button class="btn btn-primary" [disabled]="!accountForm.form.valid" (click)="submit()">
<md-dialog-actions>
<button md-raised-button color="primary" [disabled]="!accountForm?.form.valid" (click)="submit()">
Save
</button>
<button class="btn btn-default" (click)="cancel()">
<button md-raised-button color="warn" md-dialog-close>
Cancel
</button>
</div>
</md-dialog-actions>
`
})
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<AccountEditModalComponent>,
) {
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);
}
}

View File

@ -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,7 +15,8 @@ import { AccountEditModalComponent } from './accountEditModal.component';
selector: 'account-list',
template: `
<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>
<tr>
<th>Nom du compte</th>
@ -29,7 +30,7 @@ import { AccountEditModalComponent } from './accountEditModal.component';
<tbody>
<tr>
<td colspan="5">
<button class="btn btn-success" (click)="add()">
<button md-raised-button color="primary" (click)="add()">
Ajouter
</button>
</td>
@ -40,6 +41,7 @@ import { AccountEditModalComponent } from './accountEditModal.component';
</tr>
</tbody>
</table>
</div>
</div>
`,
})
@ -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) => {
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) {
});
};