US10: Show a list of the owned horses on the owner view page

frontend/wendys-friends/src/app/component/list-owners/list-owners.component.html

@@ -29,6 +29,7 @@
         <td>{{ id + 1 }}</td>
         <td>{{ owner.name }}</td>
         <td>
+          <a class="btn btn-primary" href="owner/{{ owner.id }}"><i class="fas fa-external-link-alt"></i></a>
           <a class="btn btn-success" href="owner/{{ owner.id }}/edit"><i class="fas fa-edit"></i></a>
           <button class="btn btn-danger" (click)="deleteOwner(owner.id, owner.name)"><i class="fas fa-trash"></i></button>
         </td>

frontend/wendys-friends/src/app/component/owner/owner.component.html

@@ -6,14 +6,28 @@
 </div>
 
 <div class="container mt-3" *ngIf="owner">
-  <div class="alert alert-success" role="alert">
-    <h4 class="alert-heading">Well done!</h4>
-    <p>Your application is up and running</p>
+  <h1>Owner Info for {{ owner.name }}</h1>
   <hr>
-    <p>This is the name of the owner with id 1 from your backend system:
-      <span class="font-weight-bold">{{owner.name}}</span>
-    </p>
-  </div>
+  <h4>Horses:</h4>
+  <table class="table" *ngIf="horses; else noHorses">
+    <thead>
+      <tr>
+        <th scope="col">#</th>
+        <th scope="col">Name</th>
+        <th scope="col">Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let horse of horses; let id = index">
+        <td>{{ id + 1 }}</td>
+        <td>{{ horse.name }}</td>
+        <td>
+          <a class="btn btn-primary" href="horse/{{ horse.id }}"><i class="fas fa-external-link-alt"></i></a>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <ng-template #noHorses>
+    <p>Owner has no horses assigned.</p>
+  </ng-template>
 </div>
-
-

frontend/wendys-friends/src/app/component/owner/owner.component.ts

@@ -1,6 +1,8 @@
 import {Component, OnInit} from '@angular/core';
 import {OwnerService} from '../../service/owner.service';
 import {Owner} from '../../dto/owner';
+import { ActivatedRoute } from '@angular/router';
+import { Horse } from 'src/app/dto/horse';
 
 @Component({
   selector: 'app-owner',
@@ -12,12 +14,15 @@ export class OwnerComponent implements OnInit {
   error = false;
   errorMessage = '';
   owner: Owner;
+  horses: Array<Horse>
 
-  constructor(private ownerService: OwnerService) {
+  constructor(private ownerService: OwnerService, private route: ActivatedRoute) {
   }
 
   ngOnInit() {
-    this.loadOwner(1);
+    const ownerId: string = this.route.snapshot.paramMap.get('id');
+    this.loadOwner(parseInt(ownerId));
+    this.loadOwnerHorses(parseInt(ownerId));
   }
 
   /**
@@ -42,6 +47,21 @@ export class OwnerComponent implements OnInit {
     );
   }
 
+  /**
+   * Load the horses of the owner
+   * @param id of the owner
+   */
+  private loadOwnerHorses(id: number) {
+    this.ownerService.getOwnerHorses(id).subscribe(
+      (horses: Array<Horse>) => {
+        this.horses = horses;
+      },
+      error => {
+        console.log(error);
+      }
+    );
+  }
+
   private defaultServiceErrorHandling(error: any) {
     console.log(error);
     this.error = true;

frontend/wendys-friends/src/app/service/owner.service.ts

@@ -3,6 +3,7 @@ import {HttpClient, HttpParams} from '@angular/common/http';
 import {Globals} from '../global/globals';
 import {Observable} from 'rxjs';
 import {Owner} from '../dto/owner';
+import { Horse } from '../dto/horse';
 
 @Injectable({
   providedIn: 'root'
@@ -40,6 +41,15 @@ export class OwnerService {
     return this.httpClient.get<Array<Owner>>(this.messageBaseUri, { params: filter });
   }
 
+  /**
+   * Load all horses, owned by the specified owner, from the backend
+   * @param id
+   */
+  getOwnerHorses(id: number): Observable<Array<Horse>> {
+    console.log('Load all horses for owner ' + id);
+    return this.httpClient.get<Array<Horse>>(this.messageBaseUri + '/' + id + '/horses');
+  }
+
   /**
    * Adds a specific owner to the backend and loads it if successful
    * @param owner