Separate account row from account list.

src/accounts/account.module.ts

@@ -16,6 +16,7 @@ import { AccountListComponent } from './accountList.component';
 import { AccountDeleteModalComponent } from './accountDeleteModal.component';
 import { AccountEditModalComponent } from './accountEditModal.component';
 import { AccountFormComponent } from './accountForm.component';
+import { AccountRowComponent } from './accountRow.component';
 
 @NgModule({
   imports: [
@@ -35,13 +36,15 @@ import { AccountFormComponent } from './accountForm.component';
     AccountListComponent,
     AccountDeleteModalComponent,
     AccountEditModalComponent,
-    AccountFormComponent
+    AccountFormComponent,
+    AccountRowComponent
   ],
   entryComponents: [
     AccountListComponent,
     AccountDeleteModalComponent,
     AccountEditModalComponent,
-    AccountFormComponent
+    AccountFormComponent,
+    AccountRowComponent
   ]
 })
 export class AccountModule {}

src/accounts/accountList.component.ts

@@ -1,6 +1,5 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :
-import { CurrencyPipe } from '@angular/common';
+import { Component, Inject, OnInit } from '@angular/core';
-import { Component, Inject } from '@angular/core';
 import { Observable } from 'rxjs/Rx';
 
 import { Logger } from '@nsalaun/ng-logger';
@@ -10,8 +9,6 @@ import { ToastrService } from 'ngx-toastr';
 import { Account } from './account';
 import { AccountBalances } from './accountBalances';
 import { AccountService } from './account.service';
-import { AccountBalancesService } from './accountBalances.service';
-import { AccountDeleteModalComponent } from './accountDeleteModal.component';
 import { AccountEditModalComponent } from './accountEditModal.component';
 
 @Component({
@@ -38,122 +35,33 @@ import { AccountEditModalComponent } from './accountEditModal.component';
         </td>
       </tr>
 
-      <tr id="{{ account.id }}"
+      <tr *ngFor="let account of accounts"
-        class="form-inline" ng-class="rowClass(account)"
+        [account-row]="account" (needsReload)="load()">
-        *ngFor="let account of accounts">
-        <td>
-          <a href="#!/account/{{ account.id }}/operations">{{ account.name }}</a>
-        </td>
-
-        <td>
-          <span (ngClass)="valueClass(account, account.balances.current)">
-            {{ account.balances?.current | currency:"EUR" }}
-          </span>
-        </td>
-
-        <td>
-          <span ng-class="valueClass(account, account.balancess.pointed)">
-            {{ account.balances?.pointed | currency:"EUR" }}
-          </span>
-        </td>
-
-        <td>{{ account.authorized_overdraft | currency:"EUR" }}</td>
-
-        <td>
-          <div class="btn-group btn-group-xs">
-            <!-- Edit account. -->
-            <button type="button" class="btn btn-success"
-              (click)="modify(account)">
-              <span class="fa fa-pencil-square-o"></span>
-            </button>
-
-            <!-- Delete account, with confirm. -->
-            <button type="button" class="btn btn-default"
-              (click)="confirmDelete(account)">
-              <span class="fa fa-trash-o"></span>
-            </button>
-
-            <!-- Open account scheduler. -->
-            <a class="btn btn-default"
-              [hidden]="!account.id"
-              href="#!/account/{{ account.id }}/scheduler">
-              <span class="fa fa-clock-o"></span>
-            </a>
-          </div>
-        </td>
       </tr>
     </tbody>
   </table>
 </div>
     `,
 })
-export class AccountListComponent {
+export class AccountListComponent implements OnInit {
-  static $inject = [
-    'AccountService',
-    'AccountBalancesService',
-    'ToastrService',
-    'Logger',
-    'NgbModal'
-  ];
-
   accounts: Account[];
 
   constructor(
     private AccountService: AccountService,
-    private AccountBalancesService: AccountBalancesService,
     private ToastrService: ToastrService,
     private Logger: Logger,
     private NgbModal: NgbModal
   ) {
+  }
+
+  ngOnInit() {
     // Load accounts.
     this.load();
   }
 
-  /*
-   * Return the class for an account current value compared to authorized
-   * overdraft.
-   */
-  rowClass(account) {
-    // eslint-disable-next-line camelcase
-    if (!account || !account.authorized_overdraft || !account.current) {
-      return;
-    }
-
-    // eslint-disable-next-line camelcase
-    if (account.current < account.authorized_overdraft) {
-      return 'danger';
-    } else if (account.current < 0) {
-      return 'warning';
-    }
-  };
-
-  /*
-   * Return the class for a value compared to account authorized overdraft.
-   */
-  valueClass(account, value) {
-    if (!account || !value) {
-      return;
-    }
-
-    // eslint-disable-next-line camelcase
-    if (value < account.authorized_overdraft) {
-      return 'text-danger';
-    } else if (value < 0) {
-      return 'text-warning';
-    }
-  };
-
   load() {
     this.AccountService.query().subscribe(accounts => {
-      this.accounts = accounts.map((account: Account) => {
+      this.accounts = accounts;
-        this.Logger.log(account);
-        this.AccountBalancesService
-          .get(account.id)
-          .subscribe((accountBalances: AccountBalances) => {
-            account.balances = accountBalances;
-          })
-        return account;
-      })
     });
   };
 
@@ -178,15 +86,7 @@ export class AccountListComponent {
    * Save account.
    */
   save(account) {
-    var observable: Observable<Account>;
+    this.AccountService.create(account).subscribe(account => {
-
-    if(account.id) {
-      observable = this.AccountService.update(account);
-    } else {
-      observable = this.AccountService.create(account);
-    }
-
-    observable.subscribe(account => {
       this.ToastrService.success('Account #' + account.id + ' saved.');
 
       this.load();
@@ -198,54 +98,4 @@ export class AccountListComponent {
       );
     });
   };
-
-  confirmDelete(account) {
-    const modal = this.NgbModal.open(AccountDeleteModalComponent, {
-      windowClass: 'in'
-    });
-
-    modal.componentInstance.account = account;
-
-    modal.result.then((account: Account) => {
-      this.delete(account);
-    }, (reason) => function(reason) {
-    });
-  };
-
-  /*
-   * Delete an account.
-   */
-  delete(account) {
-    var id = account.id;
-
-    this.AccountService.delete(account).subscribe(account => {
-      this.ToastrService.success('account #' + id + ' deleted.');
-
-      this.load();
-
-      return account;
-    }, function(result) {
-      this.ToastrService.error(
-        'An error occurred while trying to delete account #' +
-        id + ':<br />' + result
-      );
-    });
-  };
-
-  /*
-   * Open the popup to modify the account, save it on confirm.
-   */
-  modify(account) {
-    const modal = this.NgbModal.open(AccountEditModalComponent, {
-      windowClass: 'in'
-    });
-
-    modal.componentInstance.account = account;
-
-    modal.result.then((account: Account) => {
-      this.Logger.log("Modal closed => save account", account);
-      this.save(account);
-    }, (reason) => function(reason) {
-    });
-  };
 };

src/accounts/accountRow.component.ts

@@ -0,0 +1,176 @@
+// vim: set tw=80 ts=2 sw=2 sts=2 :
+import { CurrencyPipe } from '@angular/common';
+import { Component, Inject, Input, Output, EventEmitter, OnInit } from '@angular/core';
+
+import { Logger } from '@nsalaun/ng-logger';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ToastrService } from 'ngx-toastr';
+
+import { Account } from './account';
+import { AccountBalances } from './accountBalances';
+import { AccountBalancesService } from './accountBalances.service';
+import { AccountService } from './account.service';
+import { AccountDeleteModalComponent } from './accountDeleteModal.component';
+import { AccountEditModalComponent } from './accountEditModal.component';
+
+@Component({
+  selector: 'tr[account-row]',
+  host: {
+    "[id]": "account.id",
+    "[class.warning]": "warning",
+    "[class.danger]": "danger"
+  },
+  template: `
+<td>
+  <a href="#!/account/{{ account.id }}/operations">{{ account.name }}</a>
+</td>
+
+<td>
+  <span (ngClass)="valueClass(account, accountBalances?.current)">
+    {{ accountBalances?.current | currency:"EUR" }}
+  </span>
+</td>
+
+<td>
+  <span (ngClass)="valueClass(account, accountBalances?.pointed)">
+    {{ accountBalances?.pointed | currency:"EUR" }}
+  </span>
+</td>
+
+<td>{{ account.authorized_overdraft | currency:"EUR" }}</td>
+
+<td>
+  <div class="btn-group btn-group-xs">
+    <!-- Edit account. -->
+    <button type="button" class="btn btn-success"
+      (click)="modify()">
+      <span class="fa fa-pencil-square-o"></span>
+    </button>
+
+    <!-- Delete account, with confirm. -->
+    <button type="button" class="btn btn-default"
+      (click)="confirmDelete()">
+      <span class="fa fa-trash-o"></span>
+    </button>
+
+    <!-- Open account scheduler. -->
+    <a class="btn btn-default"
+      [hidden]="!account.id"
+      href="#!/account/{{ account.id }}/scheduler">
+      <span class="fa fa-clock-o"></span>
+    </a>
+  </div>
+</td>
+  `
+})
+export class AccountRowComponent implements OnInit {
+  @Input('account-row') account: Account;
+  @Output() needsReload: EventEmitter<void> = new EventEmitter<void>();
+
+  accountBalances: AccountBalances;
+
+  constructor(
+    private accountService: AccountService,
+    private accountBalancesService: AccountBalancesService,
+    private toastrService: ToastrService,
+    private logger: Logger,
+    private modal: NgbModal
+  ) {
+    this.logger.log("AccountRowComponent constructor");
+  }
+
+  ngOnInit() {
+    this.logger.log(this.account);
+    this.accountBalancesService
+      .get(this.account.id)
+      .subscribe((accountBalances: AccountBalances) => {
+        this.accountBalances = accountBalances;
+      })
+  }
+
+  get warning() {
+    return this.account.authorized_overdraft < this.accountBalances.current
+      && this.accountBalances.current < 0;
+  };
+
+  get error() {
+    return this.accountBalances.current < this.account.authorized_overdraft;
+  };
+
+  /*
+   * Return the class for a value compared to account authorized overdraft.
+   */
+  valueClass(value: number) {
+    if (!value) {
+      return;
+    }
+
+    if (value < this.account.authorized_overdraft) {
+      return 'text-danger';
+    } else if (value < 0) {
+      return 'text-warning';
+    }
+  };
+
+  confirmDelete() {
+    const modal = this.modal.open(AccountDeleteModalComponent, {
+      windowClass: 'in'
+    });
+
+    modal.componentInstance.account = this.account;
+
+    modal.result.then((account: Account) => {
+      this.delete(account);
+    }, (reason) => function(reason) {
+    });
+  };
+
+  /*
+   * Delete an account.
+   */
+  delete(account: Account) {
+    var id = account.id;
+
+    this.accountService.delete(account).subscribe(account => {
+      this.toastrService.success('account #' + id + ' deleted.');
+
+      this.needsReload.emit();
+    }, function(result) {
+      this.toastrService.error(
+        'An error occurred while trying to delete account #' +
+        id + ':<br />' + result
+      );
+    });
+  };
+
+  /*
+   * Open the popup to modify the account, save it on confirm.
+   */
+  modify() {
+    const modal = this.modal.open(AccountEditModalComponent, {
+      windowClass: 'in'
+    });
+
+    modal.componentInstance.account = this.account;
+
+    modal.result.then((account: Account) => {
+      this.logger.log("Modal closed => save account", account);
+      this.save(account);
+    }, (reason) => function(reason) {
+    });
+  };
+
+  save(account: Account) {
+    this.accountService.update(account).subscribe((account: Account) => {
+      this.toastrService.success('Account #' + account.id + ' saved.');
+
+      this.needsReload.emit();
+    }, result => {
+      this.logger.error('Error while saving account', account, result);
+
+      this.toastrService.error(
+        'Error while saving account: ' + result.message
+      );
+    });
+  };
+}