US10: Add an owner input to both horse forms, make it possible to open the horse page through the list

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>

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;

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));
   }
 
   /**

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>

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>

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;
+      }
+    );
   }
 
   /**