US09: Add a list component for the owners
This commit is contained in:
parent
5ffbe6c225
commit
5c8e2c1c39
|
|
@ -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},
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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">×</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>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
.search-form{
|
||||
margin-top: 1%;
|
||||
margin-bottom: 3%;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-left: 0.5%;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
Reference in New Issue