Bootstrap new operation page.

src/operations/operationList.component.ts

@@ -48,9 +48,9 @@ import { OperationEditModalComponent } from './operationEditModal.component';
       <tbody>
         <tr>
           <td colspan="6">
-            <button class="btn btn-success" (click)="add()">
+            <a class="btn btn-success"  routerLink="/account/{{account.id}}/operations/new">
               Ajouter
-            </button>
+            </a>
           </td>
         </tr>
 

src/operations/operationNew.component.ts

@@ -1,19 +1,83 @@
 // vim: set tw=80 ts=2 sw=2 sts=2 :
 
-import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { Component, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
+import { Logger } from '@nsalaun/ng-logger';
+import { ToastrService } from 'ngx-toastr';
+
+import { Operation } from './operation';
+import { OperationService } from './operation.service';
+import { OperationFormComponent } from './operationForm.component';
+
 @Component({
   selector: 'operation-new',
   template: `
 <div>
   <div class="row">
+    <operation-form (submit)="submit()" #operationForm="operationForm">
+    </operation-form>
+  </div>
+
+  <div class="row">
+    <button class="btn btn-primary" [disabled]="!operationForm.form.valid" (click)="submit()">
+      Save
+    </button>
+
+    <button class="btn btn-default" (click)="cancel()">
+      Cancel
+    </button>
   </div>
 </div>
     `
 })
-export class OperationNewComponent implements OnInit {
-    ngOnInit(): void {
+export class OperationNewComponent {
+  @ViewChild('operationForm') operationForm: OperationFormComponent;
 
-    }
+  constructor(
+    private location: Location,
+    private router: Router,
+    private activatedRoute: ActivatedRoute,
+    private logger: Logger,
+    private toastrService: ToastrService,
+    private operationService: OperationService
+  ) {}
+
+  submit(): void {
+    let accountId = this.activatedRoute.snapshot.paramMap.get('accountId');
+    let formModel = this.operationForm.form.value;
+    let operation = new Operation();
+
+    operation.account_id = +accountId;
+    operation.operation_date = formModel.operationDate;
+    operation.label = formModel.label;
+    operation.value = formModel.value;
+    operation.category = formModel.category;
+
+    this.save(operation);
+  }
+
+  /*
+   * Save an operation and return a promise.
+   */
+  save(operation) {
+    operation.confirmed = true;
+
+    return this.operationService.create(operation).subscribe(
+      (operation) => {
+        this.toastrService.success('Operation #' + operation.id + ' saved.');
+
+        this.location.back();
+      }, (result) => {
+        this.toastrService.error(
+          'Error while saving operation: ' + result.message
+        );
+      }
+    );
+  }
+
+  cancel(): void {
+    this.location.back();
+  }
 }