Upgrade AccountListComponent to Angular.

src/accounts/account.module.ts

@@ -12,6 +12,7 @@ import { ToastrModule } from 'ngx-toastr';
 
 import { AccountService } from './account.service';
 import { AccountBalancesService } from './accountBalances.service';
+import { AccountListComponent } from './accountList.component';
 import { AccountDeleteModalComponent } from './accountDeleteModal.component';
 import { AccountEditModalComponent } from './accountEditModal.component';
 import { AccountFormComponent } from './accountForm.component';
@@ -31,11 +32,13 @@ import { AccountFormComponent } from './accountForm.component';
     AccountBalancesService,
   ],
   declarations: [
+    AccountListComponent,
     AccountDeleteModalComponent,
     AccountEditModalComponent,
     AccountFormComponent
   ],
   entryComponents: [
+    AccountListComponent,
     AccountDeleteModalComponent,
     AccountEditModalComponent,
     AccountFormComponent

src/accounts/accountList.component.ts

@@ -1,3 +1,5 @@
+import { CurrencyPipe } from '@angular/common';
+import { Component, Inject } from '@angular/core';
 import { Observable } from 'rxjs/Rx';
 
 import { Logger } from '@nsalaun/ng-logger';
@@ -10,6 +12,80 @@ import { AccountService } from './account.service';
 import { AccountBalancesService } from './accountBalances.service';
 import { AccountDeleteModalComponent } from './accountDeleteModal.component';
 import { AccountEditModalComponent } from './accountEditModal.component';
+
+@Component({
+    selector: 'account-list',
+    template: `
+<div class="row">
+  <table class="table table-striped table-condensed table-hover">
+    <thead>
+      <tr>
+        <th>Nom du compte</th>
+        <th class="col-md-1">Solde courant</th>
+        <th class="col-md-1">Solde pointé</th>
+        <th class="col-md-1">Découvert autorisé</th>
+        <th class="col-md-1">Actions</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr>
+        <td colspan="5">
+          <button class="btn btn-success" (click)="add()">
+            Ajouter
+          </button>
+        </td>
+      </tr>
+
+      <tr id="{{ account.id }}"
+        class="form-inline" ng-class="rowClass(account)"
+        *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 {
     static $inject = [
         'AccountService',

src/accounts/index.ts

@@ -20,44 +20,20 @@
 var angular = require('angular');
 
 //declare var angular: angular.IAngularStatic;
-import { downgradeInjectable } from '@angular/upgrade/static';
+import {
+    downgradeInjectable,
+    downgradeComponent
+} from '@angular/upgrade/static';
 
-var ngResource       = require('angular-resource'),
-    ngMessages       = require('angular-messages'),
-    ngUiNotification = require('angular-ui-notification'),
-    ngStrap          = require('angular-strap');
-
-import { Logger } from '@nsalaun/ng-logger';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { ToastrService } from 'ngx-toastr';
-
-var accountsTmpl = require('./accounts.html');
-
-import { AccountBalancesService } from './accountBalances.service';
 import { AccountService } from './account.service';
 import { AccountListComponent } from './accountList.component';
 
-export default angular.module('accountant.accounts', [
-    ngResource,
-    ngMessages,
-    ngUiNotification,
-    ngStrap,
-])
-
-    .factory('ToastrService', downgradeInjectable(ToastrService))
-
-    .factory('Logger', downgradeInjectable(Logger))
-
-    .factory('NgbModal', downgradeInjectable(NgbModal))
-
-    .factory('AccountBalancesService', downgradeInjectable(AccountBalancesService))
+export default angular.module('accountant.accounts', [])
 
     .factory('AccountService', downgradeInjectable(AccountService))
 
-    .component('accountList', {
-        controller: AccountListComponent,
-        controllerAs: 'accountsCtrl',
-        templateUrl: accountsTmpl
-    })
+    .directive('accountList', downgradeComponent({
+        component: AccountListComponent
+    }))
 
     .name;