US06: Add an owner creation component to the UI

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},

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,

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>

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;
+    }
+  }
+}

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