From 2a0750600572739d93dc610a4d50a8c883420b9e Mon Sep 17 00:00:00 2001
From: Alexis Lahouze <xals@lahouze.org>
Date: Sat, 16 Sep 2017 22:03:12 +0200
Subject: [PATCH] Finish migration of account edit form to material.

---
 src/accounts/account.module.ts             | 10 +++-
 src/accounts/accountEditModal.component.ts |  4 +-
 src/accounts/accountForm.component.ts      | 62 ++++++++--------------
 3 files changed, 33 insertions(+), 43 deletions(-)

diff --git a/src/accounts/account.module.ts b/src/accounts/account.module.ts
index 6831e77..58028f8 100644
--- a/src/accounts/account.module.ts
+++ b/src/accounts/account.module.ts
@@ -3,7 +3,13 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
-import { MdButtonModule, MdDialogModule, MdTableModule } from '@angular/material';
+import {
+  MdButtonModule,
+  MdDialogModule,
+  MdInputModule,
+  MdListModule,
+  MdTableModule,
+} from '@angular/material';
 import { HttpClientModule } from '@angular/common/http';
 import { RouterModule } from '@angular/router';
 
@@ -31,6 +37,8 @@ import { AccountListState } from './account.states'
     ]),
     MdButtonModule,
     MdDialogModule,
+    MdInputModule,
+    MdListModule,
     MdTableModule,
     NgLoggerModule,
     ToastrModule,
diff --git a/src/accounts/accountEditModal.component.ts b/src/accounts/accountEditModal.component.ts
index 85709ff..a66aa86 100644
--- a/src/accounts/accountEditModal.component.ts
+++ b/src/accounts/accountEditModal.component.ts
@@ -8,7 +8,7 @@ import { AccountFormComponent } from './accountForm.component';
 @Component({
   selector: 'account-edit-modal',
   template: `
-<h2 md-dialog-tiitle>{{ title() }}</h2>
+<h3 md-dialog-tiitle>{{ title() }}</h3>
 
 <md-dialog-content>
     <account-form [account]="account" (submit)="submit()" #accountForm="accountForm"></account-form>
@@ -50,7 +50,7 @@ export class AccountEditModalComponent {
 
     account.id = this.account.id;
     account.name = formModel.name;
-    account.authorized_overdraft = formModel.authorizedOverdraft;
+    account.authorized_overdraft = -formModel.authorizedOverdraft;
 
     this.dialogRef.close(account);
   }
diff --git a/src/accounts/accountForm.component.ts b/src/accounts/accountForm.component.ts
index c0b6e5a..c101a68 100644
--- a/src/accounts/accountForm.component.ts
+++ b/src/accounts/accountForm.component.ts
@@ -8,51 +8,33 @@ import { Account } from './account';
   selector: 'account-form',
   exportAs: 'accountForm',
   template: `
-<form novalidate
-  (keyup.enter)="submit()" [formGroup]="form">
-  <div class="form-group row">
-    <label class="col-sm-4 control-label" for="name">
-      Account name
-    </label>
+<form novalidate (keyup.enter)="submit()" [formGroup]="form">
+  <md-list>
+    <md-list-item>
+      <md-form-field>
+        <input mdInput formControlName="name" placeholder="Account name">
 
-    <div class="col-sm-8"
-      [class.has-danger]="name.errors">
-      <input class="form-control"
-        id="name" formControlName="name"
-        placeholder="Account name">
+        <md-error *ngIf="name.errors?.required">The account name is required.</md-error>
+      </md-form-field>
+    </md-list-item>
 
-      <div class="help-block text-danger" *ngIf="name.errors">
-        <p *ngIf="name.errors.required">The account name is required.</p>
-      </div>
-    </div>
-  </div>
-
-  <div class="form-group row">
-    <label class="col-sm-4 control-label" for="authorized-overdraft">
-      Authorized overdraft
-    </label>
-
-    <div class="col-sm-8"
-      [class.has-danger]="authorizedOverdraft.errors">
-      <div class="input-group">
-        <input class="form-control"
-          id="authorized-overdraft" formControlName="authorizedOverdraft"
+    <md-list-item>
+      <md-form-field>
+        <span mdPrefix>-</span>
+        <input mdInput formControlName="authorizedOverdraft"
           placeholder="Authorized overdraft">
+        <span mdSuffix>.00€</span>
 
-        <div class="input-group-addon">.00€</div>
-      </div>
-
-      <div class="help-block text-danger" *ngIf="authorizedOverdraft.errors">
-        <p *ngIf="authorizedOverdraft.errors.required">
+        <md-error *ngIf="authorizedOverdraft.errors?.required">
           The authorized overdraft is required.
-        </p>
+        </md-error>
 
-        <p *ngIf="authorizedOverdraft.errors.max">
+        <md-error *ngIf="authorizedOverdraft.errors?.min">
           The authorized overdraft must be less than or equal to 0.
-        </p>
-      </div>
-    </div>
-  </div>
+        </md-error>
+      </md-form-field>
+    </md-list-item>
+  </md-list>
 </form>
   `
 })
@@ -66,12 +48,12 @@ export class AccountFormComponent implements OnInit {
   ngOnInit() {
     this.form = this.formBuilder.group({
       name: ['', Validators.required],
-      authorizedOverdraft: ['', [Validators.required, Validators.max(0)]],
+      authorizedOverdraft: ['', [Validators.required, Validators.min(0)]],
     });
 
     this.form.patchValue({
       name: this.account.name,
-      authorizedOverdraft: this.account.authorized_overdraft
+      authorizedOverdraft: -this.account.authorized_overdraft
     });
   }