Finish migration of account list to material.

This commit is contained in:
Alexis Lahouze 2017-09-17 01:28:58 +02:00
parent 3c6ebea602
commit 82670ce86b
4 changed files with 166 additions and 45 deletions

View File

@ -0,0 +1,34 @@
import { Injectable } from '@angular/core';
import { DataSource } from '@angular/cdk/collections';
import { Observable } from 'rxjs/Rx';
import { Account } from './account';
import { AccountBalances } from './accountBalances';
import { AccountBalancesService } from './accountBalances.service';
import { AccountService } from './account.service';
@Injectable()
export class AccountDataSource extends DataSource<Account> {
constructor(
private accountService: AccountService,
private accountBalancesService: AccountBalancesService,
) {
super();
}
connect(): Observable<Account[]> {
return this.accountService.query().map((accounts: Account[]) => {
for(let account of accounts) {
this.accountBalancesService
.get(account.id)
.subscribe((accountBalances: AccountBalances) => {
account.balances = accountBalances;
})
}
return accounts;
});
}
disconnect() {}
}

View File

@ -6,6 +6,7 @@ import { ReactiveFormsModule } from '@angular/forms';
import { import {
MdButtonModule, MdButtonModule,
MdDialogModule, MdDialogModule,
MdIconModule,
MdInputModule, MdInputModule,
MdListModule, MdListModule,
MdTableModule, MdTableModule,
@ -20,6 +21,7 @@ import { ToastrModule } from 'ngx-toastr';
import { AccountService } from './account.service'; import { AccountService } from './account.service';
import { AccountBalancesService } from './accountBalances.service'; import { AccountBalancesService } from './accountBalances.service';
import { AccountListComponent } from './accountList.component'; import { AccountListComponent } from './accountList.component';
import { AccountDataSource } from './account.dataSource';
import { AccountDeleteModalComponent } from './accountDeleteModal.component'; import { AccountDeleteModalComponent } from './accountDeleteModal.component';
import { AccountEditModalComponent } from './accountEditModal.component'; import { AccountEditModalComponent } from './accountEditModal.component';
import { AccountFormComponent } from './accountForm.component'; import { AccountFormComponent } from './accountForm.component';
@ -37,6 +39,7 @@ import { AccountListState } from './account.states'
]), ]),
MdButtonModule, MdButtonModule,
MdDialogModule, MdDialogModule,
MdIconModule,
MdInputModule, MdInputModule,
MdListModule, MdListModule,
MdTableModule, MdTableModule,
@ -46,6 +49,7 @@ import { AccountListState } from './account.states'
], ],
providers: [ providers: [
AccountService, AccountService,
AccountDataSource,
AccountBalancesService, AccountBalancesService,
DailyBalanceService, DailyBalanceService,
], ],

View File

@ -11,7 +11,8 @@ import { AccountFormComponent } from './accountForm.component';
<h3 md-dialog-tiitle>{{ title() }}</h3> <h3 md-dialog-tiitle>{{ title() }}</h3>
<md-dialog-content> <md-dialog-content>
<account-form [account]="account" (submit)="submit()" #accountForm="accountForm"></account-form> <account-form [account]="account" (submit)="submit()" #accountForm="accountForm">
</account-form>
</md-dialog-content> </md-dialog-content>
<md-dialog-actions> <md-dialog-actions>

View File

@ -1,5 +1,5 @@
// 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 } from '@angular/core';
import { MdDialog } from '@angular/material'; import { MdDialog } from '@angular/material';
import { Observable } from 'rxjs/Rx'; import { Observable } from 'rxjs/Rx';
@ -8,47 +8,100 @@ import { ToastrService } from 'ngx-toastr';
import { Account } from './account'; import { Account } from './account';
import { AccountBalances } from './accountBalances'; import { AccountBalances } from './accountBalances';
import { AccountDataSource } from './account.dataSource';
import { AccountService } from './account.service'; import { AccountService } from './account.service';
import { AccountDeleteModalComponent } from './accountDeleteModal.component';
import { AccountEditModalComponent } from './accountEditModal.component'; import { AccountEditModalComponent } from './accountEditModal.component';
@Component({ @Component({
selector: 'account-list', selector: 'account-list',
template: ` template: `
<div class="row"> <div class="containerX">
<div class="col s12"> <div class="container">
<table class="bordered highlight responsive-table"> <button md-fab color="primary" (click)="add()">
<thead> <md-icon>add</md-icon>
<tr>
<th>Nom du compte</th>
<th>Solde courant</th>
<th>Solde pointé</th>
<th>Découvert autorisé</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5">
<button md-raised-button color="primary" (click)="add()">
Ajouter
</button> </button>
</td> </div>
</tr>
<tr *ngFor="let account of accounts" <div class="container">
[account-row]="account" (needsReload)="load()"> <md-table #table [dataSource]="accounts">
</tr> <ng-container mdColumnDef="name">
</tbody> <md-header-cell *mdHeaderCellDef>Nom du compte</md-header-cell>
</table> <md-cell *mdCellDef="let account">
<a [routerLink]="['/account', account.id, 'operations']">
{{ account.name }}
</a>
</md-cell>
</ng-container>
<ng-container mdColumnDef="current">
<md-header-cell *mdHeaderCellDef>Solde courant</md-header-cell>
<md-cell *mdCellDef="let account">
<span
[class.warning]="account.authorized_overdraft < 0 && account.balances?.current < 0"
[class.error]="account.balances?.current < account.authorized_overdraft">
{{ account.balances?.current | currency:"EUR":true }}
</span>
</md-cell>
</ng-container>
<ng-container mdColumnDef="pointed">
<md-header-cell *mdHeaderCellDef>Solde pointé</md-header-cell>
<md-cell *mdCellDef="let account">
<span
[class.warning]="account.authorized_overdraft < 0 && account.balances?.pointed < 0"
[class.error]="account.balances?.pointed < account.authorized_overdraft">
{{ account.balances?.pointed | currency:"EUR":true }}
</span>
</md-cell>
</ng-container>
<ng-container mdColumnDef="authorizedOverdraft">
<md-header-cell *mdHeaderCellDef>Découvert autorisé</md-header-cell>
<md-cell *mdCellDef="let account">
{{ account.authorized_overdraft | currency:"EUR":true }}
</md-cell>
</ng-container>
<ng-container mdColumnDef="actions">
<md-header-cell *mdHeaderCellDef>Actions</md-header-cell>
<md-cell *mdCellDef="let account">
<!-- Edit account. -->
<button md-mini-fab color="primary"
(click)="modify(account)">
<md-icon>mode_edit</md-icon>
</button>
<!-- Delete account, with confirm. -->
<button md-mini-fab color="warn"
(click)="confirmDelete(account)">
<md-icon>delete_forever</md-icon>
</button>
<!-- Open account scheduler. -->
<button md-mini-fab
[hidden]="!account.id"
[routerLink]="['/account', account.id, 'scheduler']">
<md-icon>event</md-icon>
</button>
</md-cell>
</ng-container>
<md-header-row *mdHeaderRowDef="displayedColumns"></md-header-row>
<md-row *mdRowDef="let row; columns: displayedColumns;">
</md-row>
</md-table>
</div> </div>
</div> </div>
`, `,
}) })
export class AccountListComponent implements OnInit { export class AccountListComponent {
accounts: Account[]; displayedColumns: String[] = [
'name', 'current', 'pointed', 'authorizedOverdraft', 'actions'
];
constructor( constructor(
private accounts: AccountDataSource,
private accountService: AccountService, private accountService: AccountService,
private toastrService: ToastrService, private toastrService: ToastrService,
private logger: Logger, private logger: Logger,
@ -56,25 +109,20 @@ export class AccountListComponent implements OnInit {
) { ) {
} }
ngOnInit() {
// Load accounts.
this.load();
}
load() {
this.logger.log("Load accounts.");
this.accountService.query().subscribe(accounts => {
this.accounts = accounts;
});
};
/* /*
* Add an empty account. * Add an empty account.
*/ */
add() { add() {
this.modify(new Account());
};
/*
* Modify an account.
*/
modify(account: Account) {
let dialogRef = this.mdDialog.open(AccountEditModalComponent, { let dialogRef = this.mdDialog.open(AccountEditModalComponent, {
data: { data: {
account: new Account(), account: account,
} }
}); });
@ -87,7 +135,7 @@ export class AccountListComponent implements OnInit {
} }
}, (reason) => function(reason) { }, (reason) => function(reason) {
}); });
}; }
/* /*
* Save account. * Save account.
@ -95,8 +143,6 @@ export class AccountListComponent implements OnInit {
save(account) { save(account) {
this.accountService.create(account).subscribe(account => { this.accountService.create(account).subscribe(account => {
this.toastrService.success('Account #' + account.id + ' saved.'); this.toastrService.success('Account #' + account.id + ' saved.');
this.load();
}, result => { }, result => {
this.logger.error('Error while saving account', account, result); this.logger.error('Error while saving account', account, result);
@ -105,4 +151,40 @@ export class AccountListComponent implements OnInit {
); );
}); });
}; };
/*
* Show a dialog to confirm account deletion.
*/
confirmDelete(account: Account) {
let dialogRef = this.mdDialog.open(AccountDeleteModalComponent, {
data: {
account: account,
}
});
dialogRef.afterClosed().subscribe((account: Account) => {
if(account) {
this.logger.debug("Deleting account", account);
//this.delete(account);
}
});
};
/*
* Delete an account.
*/
delete(account: Account) {
var id = account.id;
this.accountService.delete(account).subscribe(account => {
this.toastrService.success('account #' + id + ' deleted.');
// FIXME Alexis Lahouze 2017-09-17 Remove from array.
}, function(result) {
this.toastrService.error(
'An error occurred while trying to delete account #' +
id + ':<br />' + result
);
});
};
}; };