From 13670f0317c91b33740911c94f167a2df3269be8 Mon Sep 17 00:00:00 2001
From: Alexis Lahouze <xals@lahouze.org>
Date: Sun, 13 Aug 2017 12:28:10 +0200
Subject: [PATCH] Migrate to reactive forms in operation module.

---
 src/operations/operation.module.ts            |   4 +-
 .../operationEditModal.component.ts           |  19 ++-
 src/operations/operationForm.component.ts     | 114 +++++++++++++-----
 3 files changed, 104 insertions(+), 33 deletions(-)

diff --git a/src/operations/operation.module.ts b/src/operations/operation.module.ts
index 1417b49..33c5f74 100644
--- a/src/operations/operation.module.ts
+++ b/src/operations/operation.module.ts
@@ -2,7 +2,7 @@
 
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { RouterModule } from '@angular/router';
 
@@ -26,7 +26,7 @@ import { OperationListState } from './operation.states'
   imports: [
     HttpClientModule,
     CommonModule,
-    FormsModule,
+    ReactiveFormsModule,
     RouterModule.forChild([
       OperationListState
     ]),
diff --git a/src/operations/operationEditModal.component.ts b/src/operations/operationEditModal.component.ts
index 987287a..eee4260 100644
--- a/src/operations/operationEditModal.component.ts
+++ b/src/operations/operationEditModal.component.ts
@@ -1,9 +1,10 @@
 // vim: set tw=80 ts=2 sw=2 sts=2:
-import { Component, Input } from '@angular/core';
+import { Component, Input, ViewChild } from '@angular/core';
 
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
 import { Operation } from './operation';
+import { OperationFormComponent } from './operationForm.component';
 
 @Component({
   selector: 'operation-edit-modal',
@@ -13,11 +14,11 @@ import { Operation } from './operation';
 </div>
 
 <div class="modal-body" id="modal-body">
-  <operation-form [(operation)]="operation" (onValid)="valid=$event"></operation-form>
+  <operation-form [operation]="operation" (submit)="submit()" #operationForm="operationForm"></operation-form>
 </div>
 
 <div class="modal-footer">
-  <button class="btn btn-primary" [disabled]="!valid" (click)="submit()">
+  <button class="btn btn-primary" [disabled]="!operationForm.form.valid" (click)="submit()">
     Save
   </button>
 
@@ -29,6 +30,7 @@ import { Operation } from './operation';
 })
 export class OperationEditModalComponent {
   @Input() operation: Operation;
+  @ViewChild('operationForm') operationForm: OperationFormComponent;
 
   valid: boolean = false;
 
@@ -43,7 +45,16 @@ export class OperationEditModalComponent {
   }
 
   submit(): void {
-    this.activeModal.close(this.operation);
+    let formModel = this.operationForm.form.value;
+    let operation = Object.assign({}, this.operation);
+
+    operation.id = this.operation.id;
+    operation.operation_date = formModel.operationDate;
+    operation.label = formModel.label;
+    operation.value = formModel.value;
+    operation.category = formModel.category;
+
+    this.activeModal.close(operation);
   }
 
   cancel(): void {
diff --git a/src/operations/operationForm.component.ts b/src/operations/operationForm.component.ts
index 2ace4f3..ac71bae 100644
--- a/src/operations/operationForm.component.ts
+++ b/src/operations/operationForm.component.ts
@@ -1,62 +1,122 @@
 // 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 { Component, OnInit, OnChanges, Input, Output, EventEmitter } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 import { Operation } from './operation';
 
 @Component({
   selector: 'operation-form',
+  exportAs: 'operationForm',
   template: `
-<form class="form-horizontal simple-form" novalidate (submit)="submit()" #form="ngForm">
-  <div class="form-group">
+<form novalidate (keyup.enter)="submit()" [formGroup]="form">
+  <div class="form-group row">
     <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"
+
+    <div class="col-sm-8"
+      [class.has-danger]="operationDate.errors">
+      <input class="form-control"
+        id="operation-date" formControlName="operationDate"
         [textMask]="{mask: dateMask}"
         placeholder="Operation date">
+
+      <div class="help-block text-danger" *ngIf="operationDate.errors">
+        <p *ngIf="operationDate.errors.required">The operation date is required.</p>
+      </div>
     </div>
   </div>
 
-  <div class="form-group">
+  <div class="form-group row">
     <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">
+
+    <div class="col-sm-8"
+      [class.has-danger]="label.errors">
+      <input class="form-control"
+        id="label" formControlName="label"
+        placeholder="Label">
+
+      <div class="help-block text-danger" *ngIf="label.errors">
+        <p *ngIf="label.errors.required">The operation label is required.</p>
+      </div>
     </div>
   </div>
 
-  <div class="form-group">
+  <div class="form-group row">
     <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">
+
+    <div class="col-sm-8"
+      [class.has-errors]="value.errors">
+      <input class="form-control"
+        id="value" formControlName="value"
+        type="number" placeholder="Value">
+
+      <div class="help-block text-danger" *ngIf="value.errors">
+        <p *ngIf="value.errors.required">The operation value is required.</p>
+      </div>
     </div>
   </div>
 
-  <div class="form-group">
+  <div class="form-group row">
     <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">
+
+    <div class="col-sm-8"
+      [class.has-errors]="category.errors">
+      <input class="form-control"
+        id="category" formControlName="category"
+        placeholder="Category">
+
+      <div class="help-block text-danger" *ngIf="category.errors">
+        <p *ngIf="category.errors.required">The operation category is required.</p>
+      </div>
     </div>
   </div>
 </form>
   `
 })
-export class OperationFormComponent implements AfterViewChecked {
+export class OperationFormComponent implements OnInit {
+  public form: FormGroup;
   @Input() operation: Operation;
-  @Output() onValid: EventEmitter<boolean> = new EventEmitter<boolean>();
-  @ViewChild('form') form: NgForm;
+  @Output() submitEventEmitter: EventEmitter<void> = new EventEmitter<void>();
 
   //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() {}
+  constructor(private formBuilder: FormBuilder) {}
 
-  ngAfterViewChecked() {
-    this.onValid.emit(this.form.form.valid);
+  ngOnInit() {
+    this.form = this.formBuilder.group({
+      operationDate: ['', Validators.required],
+      label: ['', Validators.required],
+      value: ['', Validators.required],
+      category: ['', Validators.required],
+    });
+
+    this.form.patchValue({
+      operationDate: this.operation.operation_date,
+      label: this.operation.label,
+      value: this.operation.value,
+      category: this.operation.category,
+    });
+  }
+
+  submit() {
+    if(this.form.valid) {
+      this.submitEventEmitter.emit();
+    }
+  }
+
+  get operationDate() {
+    return this.form.get('operationDate');
+  }
+
+  get label() {
+    return this.form.get('label');
+  }
+
+  get value() {
+    return this.form.get('value');
+  }
+
+  get category() {
+    return this.form.get('category');
   }
 }