Upgrade Operation controller.

src/operations/index.ts

@@ -44,18 +44,8 @@ export default angular.module('accountant.operations', [
     accountModule,
 ])
 
-    .factory('toastrService', downgradeInjectable(ToastrService))
+    .directive('operationListComponent', downgradeComponent({
-
+        component: OperationController
-    .factory('operationService', downgradeInjectable(OperationService))
+    }))
-
-    .controller('OperationController', OperationController)
-
-    .directive('balanceChart', downgradeComponent({
-        component: BalanceChartComponent
-    }) as angular.IDirectiveFactory)
-
-    .directive('categoryChart', downgradeComponent({
-        component: CategoryChartComponent
-    }) as angular.IDirectiveFactory)
 
     .name;

src/operations/operation.controller.ts

@@ -11,20 +11,72 @@ import { AccountService } from '../accounts/account.service';
 import { Operation } from './operation';
 import { OperationService } from './operation.service';
 
-export class OperationController {
+@Component({
+    selector: 'operation-list',
+    template: `
+<div>
+  <div class="row">
+    <div class="col-md-9">
+      <balance-chart (onUpdate)="onUpdate($event)"
+        [account]="account"></balance-chart>
+    </div>
+    <div class="col-md-3">
+      <category-chart
+        [minDate]="minDate"
+        [maxDate]="maxDate"
+        [account]="account"></category-chart>
+    </div>
+  </div>
+
+  <div class="row">
+    <table class="table table-striped table-condensed table-hover">
+      <thead>
+        <tr>
+          <th>Date d'op.</th>
+          <th>Libell&eacute; de l'op&eacute;ration</th>
+          <th>Montant</th>
+          <th>Solde</th>
+          <th>Cat&eacute;gorie</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr>
+          <td colspan="6">
+            <button class="btn btn-success" (click)="add()">
+              Ajouter
+            </button>
+          </td>
+        </tr>
+
+        <tr [operation-row]="operation"
+          [account]="account"
+          (needsReload)="load(minDate, maxDate)"
+          *ngFor="let operation of operations">
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+    `
+})
+export class OperationController implements OnInit {
     private account: Account;
     private minDate: Date;
     private maxDate: Date;
     private operations: Operation[];
 
     constructor(
-        private $modal,
+        @Inject("$modal") private $modal,
-        private accountIdService,
+        @Inject("accountIdService") private accountIdService,
         private toastrService: ToastrService,
         private operationService: OperationService,
-        private AccountService: AccountService
+        private accountService: AccountService
-    ){
+    ) {}
-        AccountService.get(this.accountIdService.get()).subscribe(account => {
+
+    ngOnInit() {
+        this.accountService.get(this.accountIdService.get()).subscribe(account => {
             this.account = account
         });
     }
@@ -51,28 +103,10 @@ export class OperationController {
             minDate,
             maxDate
         ).subscribe((operations: Operation[]) => {
-            this.operations = operations;
+            this.operations = operations.reverse();
         });
     };
 
-    /*
-     * Toggle pointed indicator for an operation.
-     */
-    togglePointed(operation, rowform) {
-        operation.pointed = !operation.pointed;
-
-        this.save(operation);
-    };
-
-    /*
-     * Toggle cancel indicator for an operation.
-     */
-    toggleCanceled(operation) {
-        operation.canceled = !operation.canceled;
-
-        this.save(operation);
-    };
-
     /*
      * Save an operation and return a promise.
      */
@@ -100,60 +134,9 @@ export class OperationController {
         });
     };
 
-    /*
-     * Delete an operation and return a promise.
-     */
-    confirmDelete(operation) {
-        var title = "Delete operation #" + operation.id;
-
-        this.$modal({
-            templateUrl: operationDeleteTmpl,
-            controller: function($scope, title, operation, $delete) {
-                $scope.title = title;
-                $scope.operation = operation;
-                $scope.$delete = () => {
-                    $scope.$hide();
-                    $delete($scope.operation);
-                };
-            },
-            locals: {
-                title: title,
-                operation: operation,
-                $delete: (operation: Operation) => {
-                    this.delete(operation);
-                }
-            }
-        });
-    };
-
-    delete(operation) {
-        var id = operation.id;
-
-        return this.operationService.delete(operation).subscribe(() => {
-            this.toastrService.success('Operation #' + id + ' deleted.');
-
-            this.load(this.minDate, this.maxDate);
-
-            return operation;
-        }, (result) => {
-            this.toastrService.error(
-                'An error occurred while trying to delete operation #' +
-                id + ':<br />' + result
-            );
-        });
-    };
-
-    /*
-     * Open the popup to modify the operation, save it on confirm.
-     * @returns a promise.
-     */
     modify(operation) {
         // FIXME Alexis Lahouze 2017-06-15 i18n
-        var title = "Operation";
+        var title = "New operation";
-
-        if (operation.id) {
-            title = title + " #" + operation.id;
-        }
 
         this.$modal({
             templateUrl: operationFormTmpl,

src/operations/operation.module.ts

@@ -13,6 +13,7 @@ import { CategoryChartComponent } from './categoryChart.component';
 import { OperationRowComponent } from './operationRow.component';
 import { CategoryService } from './category.service';
 import { OperationService } from './operation.service';
+import { OperationController } from './operation.controller';
 
 export function $modalServiceFactory(i: any) {
   return i.get('$modal');
@@ -47,11 +48,13 @@ export function accountIdServiceFactory(i: any) {
     BalanceChartComponent,
     CategoryChartComponent,
     OperationRowComponent,
+    OperationController,
   ],
   entryComponents: [
     BalanceChartComponent,
     CategoryChartComponent,
     OperationRowComponent,
+    OperationController,
   ]
 })
 export class OperationModule {}

src/operations/operation.states.ts

@@ -1,11 +1,7 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :
 
-var operationsTmpl = require('./operations.html');
-
 export const OperationListState = {
   name: 'operations',
   url: '/account/:accountId/operations',
-  templateUrl: operationsTmpl,
+  component: 'operationListComponent'
-  controller: 'OperationController',
-  controllerAs: 'operationsCtrl'
 }