Implement Operation edit component.

src/operations/operation.module.ts

@@ -2,8 +2,8 @@
 
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
 import { NgLoggerModule, Level } from '@nsalaun/ng-logger';
@@ -22,15 +22,13 @@ import { OperationListComponent } from './operationList.component';
 import { OperationNewComponent } from './operationNew.component';
 import { OperationEditComponent } from './operationEdit.component';
 import { OperationDeleteModalComponent } from './operationDeleteModal.component';
-import { OperationFormComponent } from './operationForm.component';
-import { OperationEditModalComponent } from './operationEditModal.component';
 import { OperationRoutes } from './operation.states';
 
 @NgModule({
   imports: [
     HttpClientModule,
     CommonModule,
-    ReactiveFormsModule,
+    FormsModule,
     RouterModule.forChild(
       OperationRoutes
     ),
@@ -53,12 +51,9 @@ import { OperationRoutes } from './operation.states';
     OperationEditComponent,
     OperationNewComponent,
     OperationDeleteModalComponent,
-    OperationFormComponent,
-    OperationEditModalComponent,
   ],
   entryComponents: [
     OperationDeleteModalComponent,
-    OperationEditModalComponent,
     OperationListComponent,
   ]
 })

src/operations/operation.states.ts

@@ -14,5 +14,5 @@ export const OperationRoutes: Routes = [{
   component: OperationNewComponent,
 }, {
   path: 'account/:accountId/operations/:operationId/edit',
-  component: OperationEditComponent,
+  component: OperationNewComponent,
 }];

src/operations/operationNew.component.ts

@@ -16,24 +16,86 @@ import { OperationFormComponent } from './operationForm.component';
   template: `
 <div>
   <div class="row">
-    <operation-form (submit)="submit()" #operationForm="operationForm">
-    </operation-form>
+    <form novalidate (keyup.enter)="submit()" #form="ngForm">
+      <div class="form-group">
+        <label for="operation-date">Date</label>
+
+        <input class="form-control"
+          [class.has-danger]="operationDate.errors"
+          id="operation-date" name="operationDate"
+          [(ngModel)]="operation.operation_date" #operationDate="ngModel"
+          [textMask]="{mask: dateMask}"
+          placeholder="Operation date" required>
+
+        <div class="help-block text-danger" *ngIf="operationDate.errors">
+          <small class="form-text" *ngIf="operationDate.errors.required">
+            The operation date is required.
+          </small>
+        </div>
       </div>
 
-  <div class="row">
-    <button class="btn btn-primary" [disabled]="!operationForm.form.valid" (click)="submit()">
+      <div class="form-group">
+        <label for="label">Label</label>
+
+        <input class="form-control"
+          [class.has-danger]="label.errors"
+          id="label" name="label"
+          [(ngModel)]="operation.label" #label="ngModel"
+          placeholder="Label" required>
+
+        <div class="help-block text-danger" *ngIf="label.errors">
+          <small class="form-text" *ngIf="label.errors.required">
+            The operation label is required.
+          </small>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="value">Montant</label>
+
+        <input class="form-control"
+          [class.has-errors]="value.errors"
+          id="value" name="value"
+          [(ngModel)]="operation.value" #value="ngModel"
+          type="number" placeholder="Value" required>
+
+        <div class="help-block text-danger" *ngIf="value.errors">
+          <small class="form-text" *ngIf="value.errors.required">
+            The operation value is required.
+          </small>
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="category">Catégorie</label>
+
+        <input class="form-control"
+          [class.has-errors]="category.errors"
+          id="category" name="category"
+          [(ngModel)]="operation.category" #category="ngModel"
+          placeholder="Category" required>
+
+        <div class="help-block text-danger" *ngIf="category.errors">
+          <small class="form-text" *ngIf="category.errors.required">
+            The operation category is required.
+          </small>
+        </div>
+      </div>
+
+      <button class="btn btn-primary" [disabled]="!form.valid" (click)="submit()">
         Save
       </button>
 
       <button class="btn btn-default" (click)="cancel()">
         Cancel
       </button>
+    </form>
   </div>
 </div>
   `
 })
 export class OperationNewComponent {
-  @ViewChild('operationForm') operationForm: OperationFormComponent;
+  public operation = new Operation();
 
   constructor(
     private location: Location,
@@ -44,18 +106,27 @@ export class OperationNewComponent {
     private operationService: OperationService
   ) {}
 
-  submit(): void {
+  ngOnInit() {
+    let operationId = this.activatedRoute.snapshot.paramMap.get('operationId');
+
+    if (operationId) {
+      // Load Operation
+      this.operationService.get(
+        +operationId
+      ).subscribe((operation: Operation) => {
+        this.operation = operation;
+
+        this.logger.info(operation);
+      });
+    } else {
       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.operation.account_id = +accountId;
+    }
+  }
 
-    this.save(operation);
+  submit(): void {
+    this.save(this.operation);
   }
 
   /*

src/operations/operationRow.component.ts

@@ -41,11 +41,11 @@ import { OperationEditModalComponent } from './operationEditModal.component';
 <td>
   <div class="btn-group btn-group-sm">
     <!-- Edit operation, for non-canceled operation. -->
-    <button type="button" class="btn btn-success"
+    <a class="btn btn-success"
       *ngIf="!operation.canceled"
-      (click)="modify(operation)" title="edit">
+      routerLink="/account/{{account.id}}/operations/{{ operation.id }}/edit" title="edit">
       <span class="fa fa-pencil-square-o"></span>
-    </button>
+    </a>
 
     <!-- Toggle pointed operation, for non-canceled operations. -->
     <button type="button" class="btn btn-secondary"