Add Shecdule Row Component.

src/scheduler/scheduleRow.component.ts

@@ -0,0 +1,138 @@
+// 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 { ToastrService } from 'ngx-toastr';
+
+import { ScheduleService } from './schedule.service';
+import { Schedule } from './schedule';
+
+var scheduleFormTmpl   = require('./schedule.form.tmpl.html'),
+    scheduleDeleteTmpl = require('./schedule.delete.tmpl.html');
+
+@Component({
+  selector: 'tr[schedule-row]',
+  host: {
+    "[id]": "schedule.id",
+  },
+  template: `
+<td class="col-md-1">{{ schedule.start_date | date: "yyyy-MM-dd" }}</td>
+
+
+<td>{{ schedule.stop_date | date: "yyyy-MM-dd" }}</td>
+
+<td>{{ schedule.day }}</td>
+
+<td>{{ schedule.frequency }}</td>
+
+<td>{{ schedule.label }}</td>
+
+<td>{{ schedule.value | currency:"EUR":true }}</td>
+
+<td>{{ schedule.category }}</td>
+
+<td>
+  <div class="btn-group btn-group-xs">
+    <!-- Edit operation. -->
+    <button type="button" class="btn btn-default"
+      (click)="modify()" title="edit">
+      <span class="fa fa-pencil-square-o"></span>
+    </button>
+
+    <!-- Remove operation. -->
+    <button type="button" class="btn btn-default"
+      [hidden]="!schedule.id"
+      (click)="confirmDelete()"
+      title="remove">
+      <span class="fa fa-trash"></span>
+    </button>
+  </div>
+</td>
+  `
+})
+export class ScheduleRowComponent {
+  @Input('schedule-row') schedule: Schedule;
+  @Output() needsReload: EventEmitter<void> = new EventEmitter<void>();
+
+  constructor(
+    private scheduleService: ScheduleService,
+    private logger: Logger,
+    private toastrService: ToastrService,
+    @Inject('$modal') private $modal
+  ) {}
+
+  save(schedule: Schedule) {
+    return this.scheduleService.create(schedule).subscribe((schedule: Schedule) => {
+      this.toastrService.success('Schedule #' + schedule.id + ' saved.');
+
+      this.needsReload.emit();
+    }, result => {
+      this.toastrService.error(
+        'Error while saving schedule: ' + result.message
+      );
+    });
+  }
+
+  confirmDelete() {
+    var title = "Delete schedule #" + this.schedule.id;
+
+    this.$modal({
+      templateUrl: scheduleDeleteTmpl,
+      controller: function($scope, title, schedule, $delete) {
+        $scope.title = title;
+        $scope.operation = schedule;
+        $scope.$delete = () => {
+          $scope.$hide();
+          $delete($scope.operation);
+        };
+      },
+      locals: {
+        title: title,
+        schedule: this.schedule,
+        $delete: (schedule) => {
+          this.delete(schedule);
+        }
+      }
+    });
+  }
+
+  delete(schedule: Schedule) {
+    var id = schedule.id;
+
+    return this.scheduleService.delete(schedule).subscribe(() => {
+      this.toastrService.success('Schedule #' + id + ' deleted.');
+
+      this.needsReload.emit();
+    }, result => {
+      this.toastrService.error(
+        'An error occurred while trying to delete schedule #' + id + ':<br />'
+        + result.message
+      );
+    });
+  }
+
+  modify() {
+    // FIXME Alexis Lahouze 2017-06-15 i18n
+    var title = "Modify schedule #" + this.schedule.id;
+
+    this.$modal({
+      templateUrl: scheduleFormTmpl,
+      controller: function($scope, title, schedule, $save) {
+        $scope.title = title;
+        $scope.operation = schedule;
+        $scope.$save = () => {
+          $scope.$hide();
+          $save($scope.operation);
+        };
+      },
+      locals: {
+        title: title,
+        schedule: this.schedule,
+        $save: (operation) => {
+          this.save(operation);
+        }
+      }
+    });
+  }
+}