From 123c9badaa89438de7465a8e3c3acfdb338fcd79 Mon Sep 17 00:00:00 2001
From: Ivaylo Ivanov <me@ivayloivanov.eu>
Date: Sun, 22 Mar 2020 16:25:40 +0100
Subject: [PATCH] US06: Add an owner creation component to the UI

---
 .../src/app/app-routing.module.ts             |  2 +
 frontend/wendys-friends/src/app/app.module.ts |  4 +-
 .../add-owner/add-owner.component.html        | 25 +++++++
 .../add-owner/add-owner.component.scss        |  0
 .../add-owner/add-owner.component.ts          | 66 +++++++++++++++++++
 .../src/app/service/owner.service.ts          |  8 +++
 6 files changed, 104 insertions(+), 1 deletion(-)
 create mode 100644 frontend/wendys-friends/src/app/component/add-owner/add-owner.component.html
 create mode 100644 frontend/wendys-friends/src/app/component/add-owner/add-owner.component.scss
 create mode 100644 frontend/wendys-friends/src/app/component/add-owner/add-owner.component.ts

diff --git a/frontend/wendys-friends/src/app/app-routing.module.ts b/frontend/wendys-friends/src/app/app-routing.module.ts
index d46925c..a553566 100644
--- a/frontend/wendys-friends/src/app/app-routing.module.ts
+++ b/frontend/wendys-friends/src/app/app-routing.module.ts
@@ -5,11 +5,13 @@ import { HorseComponent } from './component/horse/horse.component';
 import { ListHorsesComponent } from './component/list-horses/list-horses.component'
 import { AddHorseComponent } from './component/add-horse/add-horse.component';
 import { UpdateHorseComponent } from './component/update-horse/update-horse.component';
+import { AddOwnerComponent } from './component/add-owner/add-owner.component';
 
 
 const routes: Routes = [
   {path: '', redirectTo: 'owner', pathMatch: 'full'},
   {path: 'owner', component: OwnerComponent},
+  {path: 'owner/add', component: AddOwnerComponent},
   {path: 'horse', component: ListHorsesComponent},
   {path: 'horse/add', component: AddHorseComponent},
   {path: 'horse/:id/edit', component: UpdateHorseComponent},
diff --git a/frontend/wendys-friends/src/app/app.module.ts b/frontend/wendys-friends/src/app/app.module.ts
index ade575d..e7ca9c6 100644
--- a/frontend/wendys-friends/src/app/app.module.ts
+++ b/frontend/wendys-friends/src/app/app.module.ts
@@ -11,6 +11,7 @@ import { HorseComponent } from './component/horse/horse.component';
 import { AddHorseComponent } from './component/add-horse/add-horse.component';
 import { UpdateHorseComponent } from './component/update-horse/update-horse.component';
 import { ListHorsesComponent } from './component/list-horses/list-horses.component';
+import { AddOwnerComponent } from './component/add-owner/add-owner.component';
 
 @NgModule({
   declarations: [
@@ -20,7 +21,8 @@ import { ListHorsesComponent } from './component/list-horses/list-horses.compone
     HorseComponent,
     AddHorseComponent,
     UpdateHorseComponent,
-    ListHorsesComponent
+    ListHorsesComponent,
+    AddOwnerComponent
   ],
   imports: [
     BrowserModule,
diff --git a/frontend/wendys-friends/src/app/component/add-owner/add-owner.component.html b/frontend/wendys-friends/src/app/component/add-owner/add-owner.component.html
new file mode 100644
index 0000000..b8d9309
--- /dev/null
+++ b/frontend/wendys-friends/src/app/component/add-owner/add-owner.component.html
@@ -0,0 +1,25 @@
+<div *ngIf="error" class="alert alert-danger alert-dismissible fade show" role="alert">
+  <strong>Error! </strong> {{ errorMessage }}
+  <button type="button" (click)="vanishError()" class="close" data-dismiss="alert" aria-label="Close">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+
+<div *ngIf="success" class="alert alert-success alert-dismissible fade show" role="alert">
+  <p><strong>Success! </strong> Owner {{ success }} has been successfully added. </p>
+  <button type="button" (click)="vanishAlert()" class="close" data-dismiss="alert" aria-label="Close">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+
+<div class="container">
+  <h1>Add new owner</h1>
+  <form (ngSubmit)="addOwner()" #ownerForm="ngForm">
+    <div class="form-group">
+      <label for="name">Name</label>
+      <input type="text" class="form-control" name="name" [(ngModel)]="owner.name" required>
+    </div>
+
+    <button type="submit" class="btn btn-success" [disabled]="!ownerForm.form.valid" (submit)="addOwner()">Submit</button>
+  </form>
+</div>
\ No newline at end of file
diff --git a/frontend/wendys-friends/src/app/component/add-owner/add-owner.component.scss b/frontend/wendys-friends/src/app/component/add-owner/add-owner.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/wendys-friends/src/app/component/add-owner/add-owner.component.ts b/frontend/wendys-friends/src/app/component/add-owner/add-owner.component.ts
new file mode 100644
index 0000000..7db603c
--- /dev/null
+++ b/frontend/wendys-friends/src/app/component/add-owner/add-owner.component.ts
@@ -0,0 +1,66 @@
+import { Component, OnInit } from '@angular/core';
+import { Owner } from '../../dto/owner';
+import { OwnerService } from 'src/app/service/owner.service';
+
+@Component({
+  selector: 'app-add-owner',
+  templateUrl: './add-owner.component.html',
+  styleUrls: ['./add-owner.component.scss']
+})
+export class AddOwnerComponent implements OnInit {
+  error = false;
+  success: string;
+  errorMessage = '';
+  owner: Owner = new Owner(null, null);
+
+  constructor(private ownerService: OwnerService) { }
+
+  ngOnInit(): void {
+  }
+
+  /**
+   * Will be called on a click on the success alert close button
+   */
+  public vanishAlert() {
+    this.success = null;
+  }
+
+  /**
+   * Will be called on a click on the error alert close button
+   */
+  public vanishError() {
+    this.errorMessage = null;
+  }
+
+  /**
+   * Creates a new owner and loads it
+   * @param owner
+   */
+  public addOwner() {
+    console.log("POST owner to API")
+    console.log(this.owner);
+    // TODO: Make it possible for the owner to be added with an owner
+    this.ownerService.addOwner(this.owner).subscribe(
+      (result: Owner) => {
+        this.success = result.name;
+      },
+      error => {
+        this.defaultServiceErrorHandling(error);
+      }
+    );
+  }
+
+  private defaultServiceErrorHandling(error: any) {
+    console.log(error);
+    this.error = true;
+    if (error.status === 0) {
+      // If status is 0, the backend is probably down
+      this.errorMessage = 'The backend seems not to be reachable';
+    } else if (error.error.message === 'No message available') {
+      // If no detailed error message is provided, fall back to the simple error name
+      this.errorMessage = error.error.error;
+    } else {
+      this.errorMessage = error.error.message;
+    }
+  }
+}
diff --git a/frontend/wendys-friends/src/app/service/owner.service.ts b/frontend/wendys-friends/src/app/service/owner.service.ts
index ed45379..c8ee159 100644
--- a/frontend/wendys-friends/src/app/service/owner.service.ts
+++ b/frontend/wendys-friends/src/app/service/owner.service.ts
@@ -23,4 +23,12 @@ export class OwnerService {
     return this.httpClient.get<Owner>(this.messageBaseUri + '/' + id);
   }
 
+  /**
+   * Adds a specific owner to the backend and loads it if successful
+   * @param owner
+   */
+  addOwner(owner: Owner): Observable<Owner> {
+    console.log('Add new owner ' + JSON.stringify(owner));
+    return this.httpClient.post<Owner>(this.messageBaseUri, owner);
+  }
 }