Upgrade Schedule component to Angular4.

src/scheduler/index.ts

@@ -62,15 +62,9 @@ export default angular.module('accountant.scheduler', [
 
     .factory('scheduleService', downgradeInjectable(ScheduleService))
 
-    .component('scheduleComponent', {
+    .directive('scheduleComponent', downgradeComponent({
-        bindings: {
+        component: ScheduleComponent
-            accountId: '<',
+    }))
-            $modal: '<'
-        },
-        templateUrl: schedulerTmpl,
-        controller: ScheduleComponent,
-        controllerAs: 'schedulerCtrl'
-    })
 
     .run(function($transitions, accountIdService) {
         $transitions.onSuccess({}, (transition) => {

src/scheduler/schedule.component.ts

@@ -1,3 +1,4 @@
+import { Component, Inject, OnInit } from '@angular/core';
 import { Observable } from 'rxjs/Rx';
 
 import { Logger } from '@nsalaun/ng-logger';
@@ -7,22 +8,61 @@ import { ToastrService } from 'ngx-toastr';
 import { ScheduleService } from './schedule.service';
 import { Schedule } from './schedule';
 
-var scheduleFormTmpl   = require('./schedule.form.tmpl.html'),
+var scheduleFormTmpl   = require('./schedule.form.tmpl.html');
-    scheduleDeleteTmpl = require('./schedule.delete.tmpl.html');
 
-export class ScheduleComponent {
+@Component({
+    selector: 'schedule-list',
+    template: `
+<div class="row">
+  <table class="table table-striped table-condensed table-hover">
+    <thead>
+      <tr>
+        <th class="col-md-1">Date de d&eacute;but</th>
+        <th class="col-md-1">Date de fin</th>
+        <th class="col-md-1">Jour</th>
+        <th class="col-md-1">Fr&eacute;q.</th>
+        <th>Libell&eacute; de l'op&eacute;ration</th>
+        <th class="col-md-1">Montant</th>
+        <th class="col-md-2">Cat&eacute;gorie</th>
+        <th class="col-md-1">Actions</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr>
+        <td colspan="8">
+          <button class="btn btn-success" (click)="add()">
+            Ajouter
+          </button>
+        </td>
+      </tr>
+
+      <tr *ngFor="let schedule of schedules"
+          [schedule-row]="schedule" (needsReload)="load()">
+      </tr>
+    </tbody>
+  </table>
+</div>
+    `
+})
+export class ScheduleComponent implements OnInit {
     accountId: number;
-    operations = [];
+    schedules = [];
 
     constructor(
         private toastrService: ToastrService,
         private scheduleService: ScheduleService,
         private logger: Logger,
-        private $modal,
+        @Inject('$modal') private $modal,
-        private accountIdService
+        @Inject('accountIdService') private accountIdService
     ) {}
 
     $onInit() {
+        this.ngOnInit();
+    }
+
+    ngOnInit() {
+        this.logger.log("ngOnInit");
         this.accountId = this.accountIdService.get();
         // Load operations on controller initialization.
         this.load();
@@ -35,112 +75,13 @@ export class ScheduleComponent {
         var schedule = new Schedule();
         schedule.account_id = this.accountId;
 
-        return this.modify(schedule);
+        var title = "New schedule";
-    };
-
-    /*
-     * Load operations.
-     */
-    load() {
-        return this.scheduleService.query(this.accountId)
-            .subscribe((schedules: Schedule[]) => {
-                this.operations = schedules;
-            }, (reason) => {
-                this.logger.log("Got error", reason);
-            }
-        );
-    };
-
-    /*
-     * Save operation.
-     */
-    save(operation: Schedule) {
-        let subscription: Observable<Schedule>;
-
-        if(operation.id) {
-            this.logger.log("updating schedule", operation);
-            subscription = this.scheduleService.update(operation);
-        } else {
-            this.logger.log("creating schedule", operation);
-            subscription = this.scheduleService.create(operation);
-        }
-
-        return subscription.subscribe((operation: Schedule) => {
-            this.toastrService.success('Scheduled operation #' + operation.id + ' saved.');
-
-            this.load();
-
-            return operation;
-        }, (result) => {
-            this.toastrService.error(
-                'Error while saving scheduled operation: ' + result.message
-            );
-        });
-    };
-
-    /*
-     * Delete an operation and return a promise.
-     */
-    confirmDelete(operation: Schedule) {
-        var title = "Delete operation #" + operation.id;
-
-        this.$modal({
-            templateUrl: scheduleDeleteTmpl,
-            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) => {
-                    this.delete(operation);
-                }
-            }
-        });
-    };
-
-    /*
-     * Delete operation.
-     */
-    delete(operation: Schedule) {
-        var id = operation.id;
-
-        return this.scheduleService.delete(operation).subscribe(() => {
-            this.toastrService.success('Scheduled operation #' + id + ' deleted.');
-
-            this.load();
-
-            return operation;
-        }, (result) => {
-            this.toastrService.error(
-                'An error occurred while trying to delete scheduled operation #' +
-                id + ':<br />' + result
-            );
-        });
-    };
-
-    /*
-     * Open the popup to modify the operation, save it on confirm.
-     * @returns a promise.
-     */
-    modify(operation: Schedule) {
-        // FIXME Alexis Lahouze 2017-06-15 i18n
-        var title = "Operation";
-
-        if (operation.id) {
-            title = title + " #" + operation.id;
-        }
 
         this.$modal({
           templateUrl: scheduleFormTmpl,
-            controller: function($scope, title, operation, $save) {
+          controller: function($scope, title, schedule, $save) {
             $scope.title = title;
-                $scope.operation = operation;
+            $scope.operation = schedule;
             $scope.$save = () => {
               $scope.$hide();
               $save($scope.operation);
@@ -148,11 +89,39 @@ export class ScheduleComponent {
           },
           locals: {
             title: title,
-                operation: operation,
+            schedule: schedule,
-                $save: (operation) => {
+            $save: (schedule) => {
-                    this.save(operation);
+              this.save(schedule);
             }
           }
         });
     };
+
+    load() {
+        this.logger.log("Loading schedules for accountId", this.accountId);
+        if(!this.accountId) {
+            return;
+        }
+
+        this.scheduleService.query(this.accountId)
+            .subscribe((schedules: Schedule[]) => {
+                this.logger.log("Schedules loaded.", schedules);
+                this.schedules = schedules;
+            }, (reason) => {
+                this.logger.log("Got error", reason);
+            }
+        );
+    };
+
+    save(schedule: Schedule) {
+        return this.scheduleService.update(schedule).subscribe((schedule: Schedule) => {
+            this.toastrService.success('Schedule #' + schedule.id + ' saved.');
+
+            this.load();
+        }, (result) => {
+            this.toastrService.error(
+                'Error while saving schedule: ' + result.message
+            );
+        });
+    };
 };

src/scheduler/schedule.module.ts

@@ -13,6 +13,7 @@ import { ToastrModule } from 'ngx-toastr';
 import { ScheduleService } from './schedule.service';
 import { ScheduleDeleteModalComponent } from './scheduleDeleteModal.component';
 import { ScheduleRowComponent } from './scheduleRow.component';
+import { ScheduleComponent } from './schedule.component';
 
 export function $modalServiceFactory(i: any) {
   return i.get('$modal');
@@ -46,10 +47,12 @@ export function accountIdServiceFactory(i: any) {
   ],
   declarations: [
     ScheduleDeleteModalComponent,
+    ScheduleComponent,
     ScheduleRowComponent
   ],
   entryComponents: [
     ScheduleDeleteModalComponent,
+    ScheduleComponent,
     ScheduleRowComponent
   ]
 })