US09: Add a list component for the owners

frontend/wendys-friends/src/app/app-routing.module.ts

@@ -7,13 +7,15 @@ 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';
 import { UpdateOwnerComponent } from './component/update-owner/update-owner.component';
+import { ListOwnersComponent } from './component/list-owners/list-owners.component';
 
 
 const routes: Routes = [
   {path: '', redirectTo: 'owner', pathMatch: 'full'},
-  {path: 'owner', component: OwnerComponent},
+  {path: 'owner', component: ListOwnersComponent},
   {path: 'owner/add', component: AddOwnerComponent},
   {path: 'owner/:id/edit', component: UpdateOwnerComponent},
+  {path: 'owner/:id', component: OwnerComponent},
   {path: 'horse', component: ListHorsesComponent},
   {path: 'horse/add', component: AddHorseComponent},
   {path: 'horse/:id/edit', component: UpdateHorseComponent},

frontend/wendys-friends/src/app/app.module.ts

@@ -13,6 +13,7 @@ import { UpdateHorseComponent } from './component/update-horse/update-horse.comp
 import { ListHorsesComponent } from './component/list-horses/list-horses.component';
 import { AddOwnerComponent } from './component/add-owner/add-owner.component';
 import { UpdateOwnerComponent } from './component/update-owner/update-owner.component';
+import { ListOwnersComponent } from './component/list-owners/list-owners.component';
 
 @NgModule({
   declarations: [
@@ -24,7 +25,8 @@ import { UpdateOwnerComponent } from './component/update-owner/update-owner.comp
     UpdateHorseComponent,
     ListHorsesComponent,
     AddOwnerComponent,
-    UpdateOwnerComponent
+    UpdateOwnerComponent,
+    ListOwnersComponent
   ],
   imports: [
     BrowserModule,

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

@@ -0,0 +1,38 @@
+<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 class="container">
+  <h1>Horse Owners List</h1>
+  <form class="search-form" id="searchForm" (ngSubmit)="loadFilteredOwners()" #searchForm="ngForm">
+    <div class="row">
+      <div class="col">
+        <input type="text" class="form-control" name="name" [(ngModel)]="filters.name" placeholder="Name">
+      </div>
+      <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i></button>
+      <button type="button" onclick="document.getElementById('searchForm').reset();" class="btn btn-danger"><i class="fas fa-times"></i></button>
+    </div>
+  </form>
+  <table class="table">
+    <thead>
+      <tr>
+        <th scope="col">#</th>
+        <th scope="col">Name</th>
+        <th scope="col">Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let owner of owners; let id = index">
+        <td>{{ id + 1 }}</td>
+        <td>{{ owner.name }}</td>
+        <td>
+          <a class="btn btn-success" href="owner/{{ owner.id }}/edit"><i class="fas fa-edit"></i></a>
+          <button class="btn btn-danger"><i class="fas fa-trash"></i></button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>

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

@@ -0,0 +1,8 @@
+.search-form{
+    margin-top: 1%;
+    margin-bottom: 3%;
+}
+
+.btn {
+    margin-left: 0.5%;
+}

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

@@ -0,0 +1,88 @@
+import { Component, OnInit } from '@angular/core';
+import { Owner } from '../../dto/owner';
+import { OwnerService } from '../../service/owner.service';
+import { HttpParams } from '@angular/common/http';
+
+@Component({
+  selector: 'app-list-owners',
+  templateUrl: './list-owners.component.html',
+  styleUrls: ['./list-owners.component.scss']
+})
+export class ListOwnersComponent implements OnInit {
+  error = false;
+  errorMessage = '';
+  owners: Array<Owner>;
+  filters: {
+    name: string
+  };
+
+  constructor(private ownerService: OwnerService) { }
+
+  ngOnInit(): void {
+    // Nullify queries
+    this.filters = {
+      name: ""
+    };
+    this.loadAllOwners();
+  }
+
+  /**
+   * Error flag will be deactivated, which clears the error message
+   */
+  vanishError() {
+    this.error = false;
+  }
+
+  /**
+   * Loads all owners from the database
+   */
+  private loadAllOwners() {
+    console.log("GET all owners from API");
+    this.ownerService.getAllOwners().subscribe(
+      (owners: Array<Owner>) => {
+        this.owners = owners;
+      },
+      error => {
+        this.defaultServiceErrorHandling(error);
+      }
+    );
+  }
+
+  /**
+   * Load filtered owners from the database
+   */
+  public loadFilteredOwners() {
+    console.log("GET filtered owners from API");
+
+    console.log(this.filters);
+    // Create HttpParams for the sorting
+    let params: HttpParams = new HttpParams();
+    if(this.filters.name != null && this.filters.name.length !== 0)
+      params = params.set('name', this.filters.name);
+
+    this.ownerService.getFilteredOwners(params).subscribe(
+      (owners: Array<Owner>) => {
+        this.owners = owners;
+      },
+      error => {
+        this.owners = null;
+        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;
+    }
+  }
+
+}

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

@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {HttpClient} from '@angular/common/http';
+import {HttpClient, HttpParams} from '@angular/common/http';
 import {Globals} from '../global/globals';
 import {Observable} from 'rxjs';
 import {Owner} from '../dto/owner';
@@ -23,6 +23,23 @@ export class OwnerService {
     return this.httpClient.get<Owner>(this.messageBaseUri + '/' + id);
   }
 
+  /**
+   * Loads all owners from the backend
+   */
+  getAllOwners(): Observable<Array<Owner>> {
+    console.log('Load all owners');
+    return this.httpClient.get<Array<Owner>>(this.messageBaseUri);
+  }
+
+  /**
+   * Load all owners from the backend that correspond to a filter
+   * @param filter to use
+   */
+  getFilteredOwners(filter: HttpParams): Observable<Array<Owner>> {
+    console.log('Load all filtered owners');
+    return this.httpClient.get<Array<Owner>>(this.messageBaseUri, { params: filter });
+  }
+
   /**
    * Adds a specific owner to the backend and loads it if successful
    * @param owner