US07: Make it possible to edit owners through the UI

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

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

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

@@ -12,6 +12,7 @@ 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';
+import { UpdateOwnerComponent } from './component/update-owner/update-owner.component';
 
 @NgModule({
   declarations: [
@@ -22,7 +23,8 @@ import { AddOwnerComponent } from './component/add-owner/add-owner.component';
     AddHorseComponent,
     UpdateHorseComponent,
     ListHorsesComponent,
-    AddOwnerComponent
+    AddOwnerComponent,
+    UpdateOwnerComponent
   ],
   imports: [
     BrowserModule,

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

@@ -0,0 +1,26 @@
+<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 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>Update owner</h1>
+    <form (ngSubmit)="updateOwner()" #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 float-left" [disabled]="!ownerForm.form.valid" (submit)="updateOwner()">Submit</button>
+      <a class="btn btn-light float-right" href="owner">Cancel</a>
+    </form>
+  </div>

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

@@ -0,0 +1,78 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Params} from '@angular/router';
+import { Owner } from '../../dto/owner';
+import { OwnerService } from '../../service/owner.service';
+
+@Component({
+  selector: 'app-update-owner',
+  templateUrl: './update-owner.component.html',
+  styleUrls: ['./update-owner.component.scss']
+})
+export class UpdateOwnerComponent implements OnInit {
+  error = false;
+  success: string;
+  errorMessage = '';
+  owner: Owner = new Owner(null, null);
+
+  constructor(private ownerService: OwnerService, private route: ActivatedRoute) { }
+
+  ngOnInit(): void {
+    // Extract id from url
+    const ownerId: string = this.route.snapshot.paramMap.get('id');
+
+    // Get current value of the owner and save it
+    this.ownerService.getOwnerById(parseInt(ownerId, 10)).subscribe(
+      (owner: Owner) => {
+        this.owner = owner;
+      },
+      error => {
+        this.defaultServiceErrorHandling(error);
+      }
+    );
+  }
+
+  /**
+   * 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;
+  }
+
+  /**
+   * Updates a owner and loads it
+   * @param owner
+   */
+  public updateOwner() {
+    console.log("PUT owner to API")
+    console.log(this.owner);
+    this.ownerService.updateOwner(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

@@ -31,4 +31,13 @@ export class OwnerService {
     console.log('Add new owner ' + JSON.stringify(owner));
     return this.httpClient.post<Owner>(this.messageBaseUri, owner);
   }
+
+  /**
+   * Update a specific owner with the supplied values
+   * @param owner
+   */
+  updateOwner(owner: Owner): Observable<Owner> {
+    console.log('Update owner with id ' + owner.id + ': '+ JSON.stringify(owner));
+    return this.httpClient.put<Owner>(this.messageBaseUri + '/' + owner.id, owner);
+  }
 }