Add Operation Form component.

src/operations/operation.module.ts

@@ -15,6 +15,7 @@ import { CategoryService } from './category.service';
 import { OperationService } from './operation.service';
 import { OperationListComponent } from './operationList.component';
 import { OperationDeleteModalComponent } from './operationDeleteModal.component';
+import { OperationFormComponent } from './operationForm.component';
 
 export function $modalServiceFactory(i: any) {
   return i.get('$modal');
@@ -51,6 +52,7 @@ export function accountIdServiceFactory(i: any) {
     OperationRowComponent,
     OperationListComponent,
     OperationDeleteModalComponent,
+    OperationFormComponent,
   ],
   entryComponents: [
     BalanceChartComponent,
@@ -58,6 +60,7 @@ export function accountIdServiceFactory(i: any) {
     OperationRowComponent,
     OperationListComponent,
     OperationDeleteModalComponent,
+    OperationFormComponent,
   ]
 })
 export class OperationModule {}

src/operations/operationForm.component.ts

@@ -0,0 +1,63 @@
+// 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 { Operation } from './operation';
+
+@Component({
+  selector: 'operation-form',
+  template: `
+<form class="form-horizontal simple-form">
+  <div class="form-group">
+    <label class="col-sm-4 control-label" for="operation-date">Date</label>
+    <div class="col-sm-8">
+      <input class="form-control" id="operation-date" name="operation_date"
+        type="text" [(ngModel)]="operation.operation_date"
+        [textMask]="{mask: dateMask}"
+        placeholder="Operation date">
+    </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)]="operation.label" type="text" placeholder="Label">
+      </input>
+    </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)]="operation.value" type="number" placeholder="Value">
+      </input>
+    </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)]="operation.category" type="text" placeholder="Category">
+      </input>
+    </div>
+  </div>
+</form>
+  `
+})
+export class OperationFormComponent implements AfterViewChecked {
+  @Input() operation: Operation;
+  @Output() onValid: EventEmitter<boolean> = new EventEmitter<boolean>();
+  @ViewChild('form') form: NgForm;
+
+  //dateMask = [/\d{4}/, '-', /0[1-9]|1[0-2]/, '-', /[0-2]\d|3[0-1]/];
+  dateMask = ['2', '0', /\d/, /\d/, '-', /[0-1]/, /\d/, '-', /[0-3]/, /\d/];
+
+  constructor() {}
+
+  ngAfterViewChecked() {
+    this.onValid.emit(this.form.form.valid);
+  }
+}