From 4837b847ea8e26ac5a445b030fbf42831a3e64d0 Mon Sep 17 00:00:00 2001
From: Antoine Rey <antoine.rey@gmail.com>
Date: Tue, 28 Mar 2017 18:33:26 +0200
Subject: [PATCH 1/2] Add validation on the owner add page

---
 .../owners/owner-add/owner-add.component.html | 73 +++++++++++--------
 1 file changed, 42 insertions(+), 31 deletions(-)

diff --git a/src/app/owners/owner-add/owner-add.component.html b/src/app/owners/owner-add/owner-add.component.html
index 76977e34..49af1cd4 100644
--- a/src/app/owners/owner-add/owner-add.component.html
+++ b/src/app/owners/owner-add/owner-add.component.html
@@ -22,46 +22,57 @@ <h2>
       New Owner
     </h2>
     <form (ngSubmit)="onSubmit(ownerForm.value)" #ownerForm="ngForm" class="form-horizontal">
-      <div class="form-group has-feedback">
-        <div class="form-group" hidden="true">
-          <input type="text" name="id" hidden="true" class="form-control" id="id" [(ngModel)]="owner.id"/>
-        </div>
-        <div class="form-group ">
-          <label class="col-sm-2 control-label">First Name</label>
-          <div class="col-sm-10">
-            <input id="firstName" name="firstName" class="form-control" type="text" [(ngModel)]="owner.firstName"/>
-          </div>
+      <div class="form-group" hidden="true">
+        <input type="text" hidden="true" class="form-control" id="id" [(ngModel)]="owner.id" name="id"/>
+      </div>
+      <div class="form-group has-feedback" [class.has-success]="firstName.dirty && firstName.valid" [class.has-error]="firstName.dirty &&  !firstName.valid">
+        <label for="firstName" class="col-sm-2 control-label">First Name</label>
+        <div class="col-sm-10">
+          <input type="text" class="form-control" id="firstName" [(ngModel)]="owner.firstName" minlength="2" required name="firstName" #firstName="ngModel"/>
+          <span class="glyphicon form-control-feedback" [class.glyphicon-ok]="firstName.valid" [class.glyphicon-remove]="!firstName.valid" aria-hidden="true"></span>
+          <span class="help-block" *ngIf="firstName.dirty && firstName.hasError('required')">First name is required</span>
+          <span class="help-block" *ngIf="firstName.dirty && firstName.hasError('minlength')">First name must be at least 2 characters long</span>
         </div>
-        <div class="form-group ">
-          <label class="col-sm-2 control-label">Last Name</label>
-          <div class="col-sm-10">
-            <input id="lastName" name="lastName" class="form-control" type="text" [(ngModel)]="owner.lastName"/>
-          </div>
+      </div>
+      <div class="form-group has-feedback" [class.has-success]="lastName.dirty && lastName.valid" [class.has-error]="lastName.dirty && !lastName.valid">
+        <label for="lastName" class="col-sm-2 control-label">Last Name</label>
+        <div class="col-sm-10">
+          <input type="text" class="form-control" id="lastName" [(ngModel)]="owner.lastName" name="lastName" minlength="2" required #lastName="ngModel"/>
+          <span class="glyphicon form-control-feedback" [class.glyphicon-ok]="lastName.valid" [class.glyphicon-remove]="!lastName.valid" aria-hidden="true"></span>
+          <span class="help-block" *ngIf="lastName.dirty && lastName.hasError('required')">Last name is required</span>
+          <span class="help-block" *ngIf="lastName.dirty && lastName.hasError('minlength')">Last name must be at least 2 characters long</span>
         </div>
-        <div class="form-group ">
-          <label class="col-sm-2 control-label">Address</label>
-          <div class="col-sm-10">
-            <input id="address" name="address" class="form-control" type="text" [(ngModel)]="owner.address"/>
-          </div>
+      </div>
+      <div class="form-group has-feedback" [class.has-success]="address.dirty && address.valid" [class.has-error]="address.dirty && !address.valid">
+        <label for="address" class="col-sm-2 control-label">Address</label>
+        <div class="col-sm-10">
+          <input type="text" class="form-control" id="address" [(ngModel)]="owner.address" name="address" required #address="ngModel"/>
+          <span class="glyphicon form-control-feedback" [class.glyphicon-ok]="address.valid" [class.glyphicon-remove]="!address.valid" aria-hidden="true"></span>
+          <span class="help-block" *ngIf="address.dirty && address.hasError('required')">Address is required</span>
         </div>
-        <div class="form-group ">
-          <label class="col-sm-2 control-label">City</label>
-          <div class="col-sm-10">
-            <input id="city" name="city" class="form-control" type="text" [(ngModel)]="owner.city"/>
-          </div>
+      </div>
+      <div class="form-group has-feedback" [class.has-success]="city.dirty && city.valid" [class.has-error]="city.dirty && !city.valid">
+        <label for="city" class="col-sm-2 control-label">City</label>
+        <div class="col-sm-10">
+          <input type="text" class="form-control" id="city" [(ngModel)]="owner.city" name="city" required #city="ngModel"/>
+          <span class="glyphicon form-control-feedback" [class.glyphicon-ok]="city.valid" [class.glyphicon-remove]="!city.valid" aria-hidden="true"></span>
+          <span class="help-block" *ngIf="city.dirty && city.hasError('required')">City is required</span>
         </div>
-        <div class="form-group ">
-          <label class="col-sm-2 control-label">Telephone</label>
-          <div class="col-sm-10">
-            <input id="telephone" name="telephone" class="form-control" type="text" [(ngModel)]="owner.telephone"/>
-          </div>
+      </div>
+      <div class="form-group has-feedback" [class.has-success]="telephone.dirty && telephone.valid" [class.has-error]="telephone.dirty && !telephone.valid">
+        <label for="telephone" class="col-sm-2 control-label">Telephone</label>
+        <div class="col-sm-10">
+          <input type="text" class="form-control" id="telephone" [(ngModel)]="owner.telephone" name="telephone" required maxlength="10" pattern="^[0-9]{0,10}$" #telephone="ngModel"/>
+          <span class="glyphicon form-control-feedback" [class.glyphicon-ok]="telephone.valid" [class.glyphicon-remove]="!telephone.valid" aria-hidden="true"></span>
+          <span class="help-block" *ngIf="telephone.dirty && telephone.hasError('required')">Phone number is required</span>
+          <span class="help-block" *ngIf="telephone.dirty && telephone.hasError('maxlength')">Phone number cannot be more than 10 digits long</span>
+          <span class="help-block" *ngIf="telephone.dirty && telephone.hasError('pattern')" >Phone number only accept digits</span>
         </div>
-
       </div>
       <div class="form-group">
         <div class="col-sm-offset-2 col-sm-10">
           <button class="btn btn-default" type="button" (click)="gotoOwnersList()">Back</button>
-          <button class="btn btn-default" type="submit" [disabled]="added_success">Add Owner</button>
+          <button class="btn btn-default" type="submit" [disabled]="!ownerForm.valid">Add Owner</button>
         </div>
       </div>
     </form>

From 26310ca7e1f21963c7942dafdb40a7d96dbf7126 Mon Sep 17 00:00:00 2001
From: Antoine Rey <antoine.rey@gmail.com>
Date: Tue, 28 Mar 2017 18:41:41 +0200
Subject: [PATCH 2/2] After save or update, redirect user to the owner detail
 page

---
 src/app/owners/owner-add/owner-add.component.ts   | 5 ++---
 src/app/owners/owner-edit/owner-edit.component.ts | 6 +++++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/app/owners/owner-add/owner-add.component.ts b/src/app/owners/owner-add/owner-add.component.ts
index f76ee9cb..b35b0020 100644
--- a/src/app/owners/owner-add/owner-add.component.ts
+++ b/src/app/owners/owner-add/owner-add.component.ts
@@ -34,7 +34,6 @@ export class OwnerAddComponent implements OnInit {
 
   owner: Owner;
   errorMessage: string;
-  added_success: boolean = false;
 
   constructor(private ownerService: OwnerService, private router: Router) {
     this.owner = <Owner>{};
@@ -47,8 +46,8 @@ export class OwnerAddComponent implements OnInit {
     owner.id = null;
     this.ownerService.addOwner(owner).subscribe(
       new_owner => {
-        this.added_success = true;
-        return this.owner = new_owner;
+        this.owner = new_owner;
+        this.gotoOwnersList();
       },
       error => this.errorMessage = <any>error
     );
diff --git a/src/app/owners/owner-edit/owner-edit.component.ts b/src/app/owners/owner-edit/owner-edit.component.ts
index 2aecfec3..1097e60f 100644
--- a/src/app/owners/owner-edit/owner-edit.component.ts
+++ b/src/app/owners/owner-edit/owner-edit.component.ts
@@ -47,6 +47,7 @@ export class OwnerEditComponent implements OnInit {
   }
 
   onSubmit(owner) {
+    var that = this;
     this.ownerService.updateOwner(owner.id.toString(), owner).subscribe(
       get_result,
       get_error
@@ -61,7 +62,8 @@ export class OwnerEditComponent implements OnInit {
     function get_result(update_status) {
       console.log(update_status);
       if (update_status.status === 204) {
-        return console.log('update success');
+        console.log('update success');
+        that.gotoOwnerDetail(owner);
       } else {
         return console.log('update failed');
       }
@@ -72,4 +74,6 @@ export class OwnerEditComponent implements OnInit {
     this.router.navigate(['/owners', owner.id]);
   }
 
+
+
 }