Finish migration of account list to material.

src/accounts/account.dataSource.ts

@@ -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() {}
+}

src/accounts/account.module.ts

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

src/accounts/accountEditModal.component.ts

@@ -11,7 +11,8 @@ import { AccountFormComponent } from './accountForm.component';
 <h3 md-dialog-tiitle>{{ title() }}</h3>
 
 <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-actions>

src/accounts/accountList.component.ts

@@ -1,5 +1,5 @@
 // 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 { Observable } from 'rxjs/Rx';
 
@@ -8,47 +8,100 @@ import { ToastrService } from 'ngx-toastr';
 
 import { Account } from './account';
 import { AccountBalances } from './accountBalances';
+import { AccountDataSource } from './account.dataSource';
 import { AccountService } from './account.service';
+import { AccountDeleteModalComponent } from './accountDeleteModal.component';
 import { AccountEditModalComponent } from './accountEditModal.component';
 
 @Component({
   selector: 'account-list',
   template: `
-<div class="row">
-  <div class="col s12">
-    <table class="bordered highlight responsive-table">
-      <thead>
-        <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
+<div class="containerX">
+  <div class="container">
+    <button md-fab color="primary" (click)="add()">
+      <md-icon>add</md-icon>
     </button>
-          </td>
-        </tr>
+  </div>
 
-        <tr *ngFor="let account of accounts"
-          [account-row]="account" (needsReload)="load()">
-        </tr>
-      </tbody>
-    </table>
+  <div class="container">
+    <md-table #table [dataSource]="accounts">
+      <ng-container mdColumnDef="name">
+        <md-header-cell *mdHeaderCellDef>Nom du compte</md-header-cell>
+        <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>
     `,
 })
-export class AccountListComponent implements OnInit {
-  accounts: Account[];
+export class AccountListComponent {
+  displayedColumns: String[] = [
+    'name', 'current', 'pointed', 'authorizedOverdraft', 'actions'
+  ];
 
   constructor(
+    private accounts: AccountDataSource,
     private accountService: AccountService,
     private toastrService: ToastrService,
     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() {
+    this.modify(new Account());
+  };
+
+  /*
+   * Modify an account.
+   */
+  modify(account: Account) {
     let dialogRef = this.mdDialog.open(AccountEditModalComponent, {
       data: {
-        account: new Account(),
+        account: account,
       }
     });
 
@@ -87,7 +135,7 @@ export class AccountListComponent implements OnInit {
       }
     }, (reason) => function(reason) {
     });
-  };
+  }
 
   /*
    * Save account.
@@ -95,8 +143,6 @@ export class AccountListComponent implements OnInit {
   save(account) {
     this.accountService.create(account).subscribe(account => {
       this.toastrService.success('Account #' + account.id + ' saved.');
-
-      this.load();
     }, 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
+      );
+    });
+  };
 };