From 9b1f7bcfa0f08239304ebbdd2b7956f063867f8d Mon Sep 17 00:00:00 2001
From: Ivaylo Ivanov <me@ivayloivanov.eu>
Date: Wed, 25 Mar 2020 14:29:22 +0100
Subject: [PATCH] US10: Add an owner input to both horse forms, make it
 possible to open the horse page through the list

---
 .../add-horse/add-horse.component.html         | 11 +++++++++++
 .../component/add-horse/add-horse.component.ts | 18 +++++++++++++++---
 .../src/app/component/horse/horse.component.ts |  7 +++++--
 .../list-horses/list-horses.component.html     |  6 ++----
 .../update-horse/update-horse.component.html   | 16 ++++++++++++++--
 .../update-horse/update-horse.component.ts     | 15 ++++++++++++++-
 6 files changed, 61 insertions(+), 12 deletions(-)

diff --git a/frontend/wendys-friends/src/app/component/add-horse/add-horse.component.html b/frontend/wendys-friends/src/app/component/add-horse/add-horse.component.html
index db14c5b..5395959 100644
--- a/frontend/wendys-friends/src/app/component/add-horse/add-horse.component.html
+++ b/frontend/wendys-friends/src/app/component/add-horse/add-horse.component.html
@@ -56,6 +56,17 @@
       <input type="file" class="form-control-file" name="image" id="image" (change)="handleImageInput($event.target.files)" required>
     </div>
 
+    <div class="form-group">
+      <label for="race">Owner</label>
+      <select class="form-control" name="owner" [(ngModel)]="horse.owner">
+        <option *ngFor="let owner of owners"
+          [value]="owner.id">
+          {{ owner.name }}
+      </option>
+      </select>
+    </div>
+
     <button type="submit" class="btn btn-success" [disabled]="!horseForm.form.valid" (submit)="addHorse()">Submit</button>
+    <a class="btn btn-light float-right" href="horse">Cancel</a>
   </form>
 </div>
\ No newline at end of file
diff --git a/frontend/wendys-friends/src/app/component/add-horse/add-horse.component.ts b/frontend/wendys-friends/src/app/component/add-horse/add-horse.component.ts
index cbd27c1..85969cd 100644
--- a/frontend/wendys-friends/src/app/component/add-horse/add-horse.component.ts
+++ b/frontend/wendys-friends/src/app/component/add-horse/add-horse.component.ts
@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { Horse } from '../../dto/horse';
+import { Owner } from '../../dto/owner';
 import { HorseService } from '../../service/horse.service';
+import { OwnerService } from '../../service/owner.service';
 
 @Component({
   selector: 'app-add-horse',
@@ -12,11 +14,22 @@ export class AddHorseComponent implements OnInit {
   success: string;
   errorMessage = '';
   horse: Horse = new Horse(null, null, null, null, null, null, null, null);
+  owners: Array<Owner>;
   imageToUpload: File = null;
 
-  constructor(private horseService: HorseService) { }
+  constructor(private horseService: HorseService, private ownerService: OwnerService) { }
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    // Get all owners and save them
+    this.ownerService.getAllOwners().subscribe(
+      (owners: Array<Owner>) => {
+        this.owners = owners;
+      },
+      error => {
+        this.owners = null;
+      }
+    );
+  }
 
   /**
    * Will be called on a click on the success alert close button
@@ -39,7 +52,6 @@ export class AddHorseComponent implements OnInit {
   public addHorse() {
     console.log("POST horse to API")
     console.log(this.horse);
-    // TODO: Make it possible for the horse to be added with an owner
     this.horseService.addHorse(this.horse).subscribe(
       (result: Horse) => {
         this.success = result.name;
diff --git a/frontend/wendys-friends/src/app/component/horse/horse.component.ts b/frontend/wendys-friends/src/app/component/horse/horse.component.ts
index 3e92b80..ed47280 100644
--- a/frontend/wendys-friends/src/app/component/horse/horse.component.ts
+++ b/frontend/wendys-friends/src/app/component/horse/horse.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { HorseService } from '../../service/horse.service';
 import { Horse } from '../../dto/horse';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-horse',
@@ -13,10 +14,12 @@ export class HorseComponent implements OnInit {
   errorMessage = '';
   horse: Horse;
 
-  constructor(private horseService: HorseService) { }
+  constructor(private horseService: HorseService, private route: ActivatedRoute) { }
 
   ngOnInit(): void {
-    this.loadHorse(1);
+    // Extract id from url
+    const horseId: string = this.route.snapshot.paramMap.get('id');
+    this.loadHorse(parseInt(horseId));
   }
 
   /**
diff --git a/frontend/wendys-friends/src/app/component/list-horses/list-horses.component.html b/frontend/wendys-friends/src/app/component/list-horses/list-horses.component.html
index 33f9aae..1a8db06 100644
--- a/frontend/wendys-friends/src/app/component/list-horses/list-horses.component.html
+++ b/frontend/wendys-friends/src/app/component/list-horses/list-horses.component.html
@@ -55,8 +55,7 @@
         <th scope="col">Score</th>
         <th scope="col">Birthday</th>
         <th scope="col">Race</th>
-        <th scope="col">Edit</th>
-        <th scope="col">Delete</th>
+        <th scope="col">Actions</th>
       </tr>
     </thead>
     <tbody>
@@ -68,9 +67,8 @@
         <td>{{ horse.birthday }}</td>
         <td>{{ horse.race }}</td>
         <td>
+          <a class="btn btn-primary" href="horse/{{ horse.id }}"><i class="fas fa-external-link-alt"></i></a>
           <a class="btn btn-success" href="horse/{{ horse.id }}/edit"><i class="fas fa-edit"></i></a>
-        </td>
-        <td>
           <button class="btn btn-danger" (click)="deleteHorse(horse.id, horse.name)"><i class="fas fa-trash"></i></button>
         </td>
       </tr>
diff --git a/frontend/wendys-friends/src/app/component/update-horse/update-horse.component.html b/frontend/wendys-friends/src/app/component/update-horse/update-horse.component.html
index c2deaae..88c52e6 100644
--- a/frontend/wendys-friends/src/app/component/update-horse/update-horse.component.html
+++ b/frontend/wendys-friends/src/app/component/update-horse/update-horse.component.html
@@ -6,14 +6,14 @@
   </div>
 
   <div *ngIf="success" class="alert alert-success alert-dismissible fade show" role="alert">
-    <p><strong>Success! </strong> Horse {{ success }} has been successfully added. </p>
+    <p><strong>Success! </strong> Horse {{ success }} has been successfully updated. </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 horse</h1>
+    <h1>Update horse</h1>
     <form (ngSubmit)="updateHorse()" #horseForm="ngForm">
       <div class="form-group">
         <label for="name">Name</label>
@@ -56,6 +56,18 @@
         <input type="file" class="form-control-file" name="image" id="image" (change)="handleImageInput($event.target.files)" required>
       </div>
 
+      <div class="form-group">
+        <label for="race">Owner</label>
+        <select class="form-control" name="owner" [(ngModel)]="horse.owner">
+          <option value="null">No Owner</option>
+          <option *ngFor="let owner of owners"
+            [value]="owner.id"
+            [attr.selected]="horse.owner==owner.id ? true : null">
+            {{ owner.name }}
+        </option>
+        </select>
+      </div>
+
       <button type="submit" class="btn btn-success float-left" [disabled]="!horseForm.form.valid" (submit)="updateHorse()">Submit</button>
       <a class="btn btn-light float-right" href="horse">Cancel</a>
     </form>
diff --git a/frontend/wendys-friends/src/app/component/update-horse/update-horse.component.ts b/frontend/wendys-friends/src/app/component/update-horse/update-horse.component.ts
index 420366a..338d817 100644
--- a/frontend/wendys-friends/src/app/component/update-horse/update-horse.component.ts
+++ b/frontend/wendys-friends/src/app/component/update-horse/update-horse.component.ts
@@ -1,7 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Params} from '@angular/router';
 import { Horse } from '../../dto/horse';
+import { Owner } from '../../dto/owner';
 import { HorseService } from '../../service/horse.service';
+import { OwnerService } from '../../service/owner.service';
 
 @Component({
   selector: 'app-update-horse',
@@ -13,9 +15,10 @@ export class UpdateHorseComponent implements OnInit {
   success: string;
   errorMessage = '';
   horse: Horse = new Horse(null, null, null, null, null, null, null, null);
+  owners: Array<Owner>;
   imageToUpload: File = null;
 
-  constructor(private horseService: HorseService, private route: ActivatedRoute) { }
+  constructor(private horseService: HorseService, private route: ActivatedRoute, private ownerService: OwnerService) { }
 
   ngOnInit(): void {
     // Extract id from url
@@ -30,6 +33,16 @@ export class UpdateHorseComponent implements OnInit {
         this.defaultServiceErrorHandling(error);
       }
     );
+
+    // Get all owners and save them
+    this.ownerService.getAllOwners().subscribe(
+      (owners: Array<Owner>) => {
+        this.owners = owners;
+      },
+      error => {
+        this.owners = null;
+      }
+    );
   }
 
   /**