Add Schedule Form component.

src/scheduler/schedule.module.ts

@@ -12,6 +12,7 @@ import { ToastrModule } from 'ngx-toastr';
 
 import { ScheduleService } from './schedule.service';
 import { ScheduleDeleteModalComponent } from './scheduleDeleteModal.component';
+import { ScheduleFormComponent } from './scheduleForm.component';
 import { ScheduleRowComponent } from './scheduleRow.component';
 import { ScheduleListComponent } from './scheduleList.component';
 
@@ -47,11 +48,13 @@ export function accountIdServiceFactory(i: any) {
   ],
   declarations: [
     ScheduleDeleteModalComponent,
+    ScheduleFormComponent,
     ScheduleListComponent,
     ScheduleRowComponent
   ],
   entryComponents: [
     ScheduleDeleteModalComponent,
+    ScheduleFormComponent,
     ScheduleListComponent,
     ScheduleRowComponent
   ]

src/scheduler/scheduleForm.component.ts

@@ -0,0 +1,86 @@
+// vim: set tw=80 ts=2 sw=2 sts=2 :
+import { AfterViewChecked, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+
+import { Logger } from '@nsalaun/ng-logger';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+import { Schedule } from './schedule';
+
+@Component({
+  selector: 'schedule-form',
+  template: `
+<form class="form-horizontal simple-form" novalidate (submit)="submit()" #form="ngForm">
+  <div class="form-group">
+    <label class="col-sm-4 control-label" for="start-date">Date de début</label>
+    <div class="col-sm-8">
+      <input class="form-control" id="start-date" name="start_date"
+        type="text" [(ngModel)]="schedule.start_date"
+        bs-datepicker data-date-format="yyyy-MM-dd" data-timezone="UTC"
+        placeholder="Schedule start date">
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label class="col-sm-4 control-label" for="stop-date">Date de fin</label>
+    <div class="col-sm-8">
+      <input class="form-control" id="stop-date" name="stop_date"
+        type="text" [(ngModel)]="schedule.stop_date"
+        bs-datepicker data-date-format="yyyy-MM-dd" data-timezone="UTC"
+        placeholder="Schedule stop date">
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label class="col-sm-4 control-label" for="day">Jour</label>
+    <div class="col-sm-8">
+      <input class="form-control" id="day" name="day"
+        [(ngModel)]="schedule.day" type="number" placeholder="Day">
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label class="col-sm-4 control-label" for="frequency">Fréquence</label>
+    <div class="col-sm-8">
+      <input class="form-control" id="frequency" name="frequency"
+        [(ngModel)]="schedule.frequency" type="number" placeholder="Frequency">
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label class="col-sm-4 control-label" for="label">Label</label>
+    <div class="col-sm-8">
+      <input class="form-control" id="label" name="label"
+        [(ngModel)]="schedule.label" type="text" placeholder="Label">
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label class="col-sm-4 control-label" for="value">Montant</label>
+    <div class="col-sm-8">
+      <input class="form-control" id="value" name="value"
+        [(ngModel)]="schedule.value" type="number" placeholder="Value">
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label class="col-sm-4 control-label" for="category">Catégorie</label>
+    <div class="col-sm-8">
+      <input class="form-control" id="category" name="category"
+        [(ngModel)]="schedule.category" type="text" placeholder="Category">
+    </div>
+  </div>
+</form>
+  `
+})
+export class ScheduleFormComponent implements  AfterViewChecked {
+  @Input() schedule: Schedule;
+  @Output() onValid: EventEmitter<boolean> = new EventEmitter<boolean>();
+  @ViewChild('form') form: NgForm;
+
+  constructor() {}
+
+  ngAfterViewChecked() {
+    this.onValid.emit(this.form.form.valid);
+  }
+}