Commit 9c36a93d authored by Ivaylo Ivanov's avatar Ivaylo Ivanov

US07: Make it possible to edit owners through the UI

parent 6376282c
......@@ -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},
......
......@@ -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,
......
<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>
\ No newline at end of file
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;
}
}
}
......@@ -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);
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment