Merge pull request #83 from spring-petclinic/feature/align-with-backend

Align with new backend API #79
spring-petclinic · Dec 31, 2021 · c4f95a6 · c4f95a6
2 parents bcbaad3 + 5e0f771
commit c4f95a6
Show file tree

Hide file tree

Showing 19 changed files with 107 additions and 44 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "spring-petclinic-angular",
-  "version": "8.0.1",
+  "version": "11.2.11",
   "license": "MIT",
   "scripts": {
     "ng": "ng",

diff --git a/src/app/owners/owner-list/owner-list.component.spec.ts b/src/app/owners/owner-list/owner-list.component.spec.ts
@@ -103,6 +103,7 @@ describe('OwnerListComponent', () => {
         name: 'Leo',
         birthDate: '2010-09-07',
         type: {id: 1, name: 'cat'},
+        ownerId: null,
         owner: null,
         visits: null
       }]

diff --git a/src/app/owners/owner.service.spec.ts b/src/app/owners/owner.service.spec.ts
@@ -94,7 +94,7 @@ describe('OwnerService', () => {
   });
 
   it('search the owner by id', () => {
-    ownerService.getOwnerById('1').subscribe((owners) => {
+    ownerService.getOwnerById(1).subscribe((owners) => {
       expect(owners).toEqual(expectedOwners[0]);
     });
     const id = '1';
@@ -114,7 +114,7 @@ describe('OwnerService', () => {
       city: 'Madison',
       telephone: '6085551023',
       pets: []
-   
+
     };
 
     ownerService
@@ -147,11 +147,11 @@ describe('OwnerService', () => {
       telephone: '6085551023',
       pets: []
     };
-     
+
     ownerService
       .updateOwner(owner.id.toString(), owner)
       .subscribe((data) => expect(data).toEqual(owner, 'updated owner'), fail);
-    
+
     const req = httpTestingController.expectOne(ownerService.entityUrl + '/'+owner.id);
     expect(req.request.method).toEqual('PUT');
     expect(req.request.body).toEqual(owner);
@@ -181,16 +181,16 @@ describe('OwnerService', () => {
 
     httpClientSpy.get.and.returnValue(asyncError(errorResponse));
 
-    ownerService.getOwnerById('1').subscribe((owners) => {
+    ownerService.getOwnerById(1).subscribe((owners) => {
       fail('Should have failed with 404 error'),
       (error: HttpErrorResponse) => {
         expect(error.status).toEqual(404);
         expect(error.error).toContain('404 error');
       }});
-    
+
       const req = httpTestingController.expectOne(
         { method: 'GET', url:ownerService.entityUrl + '/1' });
-  
+
     });
 });
 

diff --git a/src/app/owners/owner.service.ts b/src/app/owners/owner.service.ts
@@ -47,7 +47,7 @@ export class OwnerService {
       .pipe(catchError(this.handlerError('getOwners', [])));
   }
 
-  getOwnerById(ownerId: string): Observable<Owner> {
+  getOwnerById(ownerId: number): Observable<Owner> {
     return this.http
       .get<Owner>(this.entityUrl + '/' + ownerId)
       .pipe(catchError(this.handlerError('getOwnerById', {} as Owner)));
@@ -73,8 +73,12 @@ export class OwnerService {
   }
 
   searchOwners(lastName: string): Observable<Owner[]> {
+    let url = this.entityUrl;
+    if (lastName !== undefined) {
+      url += '?lastName=' + lastName;
+    }
     return this.http
-      .get<Owner[]>(this.entityUrl + '/*/lastname/' + lastName)
+      .get<Owner[]>(url)
       .pipe(catchError(this.handlerError('searchOwners', [])));
   }
 }
diff --git a/src/app/pets/pet-add/pet-add.component.html b/src/app/pets/pet-add/pet-add.component.html
@@ -35,15 +35,15 @@ <h2>
       </div>
       <br/>
 
-      <div class="form-group has-feedback" [class.has-success]="petName.dirty && petName.valid"
-           [class.has-error]="petName.dirty && !petName.valid">
-        <label for="petName" class="col-sm-2 control-label">Name</label>
+      <div class="form-group has-feedback" [class.has-success]="name.dirty && name.valid"
+           [class.has-error]="name.dirty && !name.valid">
+        <label for="name" class="col-sm-2 control-label">Name</label>
         <div class="col-sm-10">
-          <input id="petName" name="petName" required class="form-control" type="text" [(ngModel)]="pet.name"
-                 #petName="ngModel"/>
-          <span class="glyphicon form-control-feedback" [class.glyphicon-ok]="petName.valid"
-                [class.glyphicon-remove]="!petName.valid" aria-hidden="true"></span>
-          <span class="help-block" *ngIf="petName.dirty && petName.hasError('required')">Name is required</span>
+          <input id="name" name="name" required class="form-control" type="text" [(ngModel)]="pet.name"
+                 #name="ngModel"/>
+          <span class="glyphicon form-control-feedback" [class.glyphicon-ok]="name.valid"
+                [class.glyphicon-remove]="!name.valid" aria-hidden="true"></span>
+          <span class="help-block" *ngIf="name.dirty && name.hasError('required')">Name is required</span>
         </div>
       </div>
 

diff --git a/src/app/pets/pet-add/pet-add.component.spec.ts b/src/app/pets/pet-add/pet-add.component.spec.ts
@@ -89,6 +89,7 @@ describe('PetAddComponent', () => {
       name: 'Leo',
       birthDate: '2010-09-07',
       type: {id: 1, name: 'cat'},
+      ownerId: 1,
       owner: {
         id: 1,
         firstName: 'George',

diff --git a/src/app/pets/pet-add/pet-add.component.ts b/src/app/pets/pet-add/pet-add.component.ts
@@ -69,8 +69,8 @@ export class PetAddComponent implements OnInit {
   onSubmit(pet: Pet) {
     pet.id = null;
     pet.owner = this.currentOwner;
-    // format output from datepicker to short string yyyy/mm/dd format
-    pet.birthDate = moment(pet.birthDate).format('YYYY/MM/DD');
+    // format output from datepicker to short string yyyy-mm-dd format (rfc3339)
+    pet.birthDate = moment(pet.birthDate).format('YYYY-MM-DD');
     this.petService.addPet(pet).subscribe(
       newPet => {
         this.pet = newPet;

diff --git a/src/app/pets/pet-edit/pet-edit.component.spec.ts b/src/app/pets/pet-edit/pet-edit.component.spec.ts
@@ -89,6 +89,7 @@ describe('PetEditComponent', () => {
       name: 'Leo',
       birthDate: '2010-09-07',
       type: {id: 1, name: 'cat'},
+      ownerId: 1,
       owner: {
         id: 1,
         firstName: 'George',

diff --git a/src/app/pets/pet-edit/pet-edit.component.ts b/src/app/pets/pet-edit/pet-edit.component.ts
@@ -30,6 +30,7 @@ import {PetType} from '../../pettypes/pettype';
 import {PetTypeService} from '../../pettypes/pettype.service';
 
 import * as moment from 'moment';
+import {OwnerService} from '../../owners/owner.service';
 
 @Component({
   selector: 'app-pet-edit',
@@ -43,7 +44,10 @@ export class PetEditComponent implements OnInit {
   petTypes: PetType[];
   errorMessage: string;
 
-  constructor(private petService: PetService, private petTypeService: PetTypeService, private router: Router,
+  constructor(private petService: PetService,
+              private petTypeService: PetTypeService,
+              private ownerService: OwnerService,
+              private router: Router,
               private route: ActivatedRoute) {
     this.pet = {} as Pet;
     this.currentOwner = {} as Owner;
@@ -61,7 +65,10 @@ export class PetEditComponent implements OnInit {
     this.petService.getPetById(petId).subscribe(
       pet => {
         this.pet = pet;
-        this.currentOwner = this.pet.owner;
+        this.ownerService.getOwnerById(pet.ownerId).subscribe(
+          response => {
+            this.currentOwner = response;
+          });
         this.currentType = this.pet.type;
       },
       error => this.errorMessage = error as any);
@@ -71,8 +78,8 @@ export class PetEditComponent implements OnInit {
   onSubmit(pet: Pet) {
     pet.type = this.currentType;
     const that = this;
-    // format output from datepicker to short string yyyy/mm/dd format
-    pet.birthDate = moment(pet.birthDate).format('YYYY/MM/DD');
+    // format output from datepicker to short string yyyy-mm-dd format (rfc3339)
+    pet.birthDate = moment(pet.birthDate).format('YYYY-MM-DD');
 
     this.petService.updatePet(pet.id.toString(), pet).subscribe(
       res => this.gotoOwnerDetail(this.currentOwner),

diff --git a/src/app/pets/pet-list/pet-list.component.spec.ts b/src/app/pets/pet-list/pet-list.component.spec.ts
@@ -70,6 +70,7 @@ describe('PetListComponent', () => {
       name: 'Leo',
       birthDate: '2010-09-07',
       type: { id: 1, name: 'cat' },
+      ownerId: 1,
       owner: {
         id: 1,
         firstName: 'George',

diff --git a/src/app/pets/pet.service.ts b/src/app/pets/pet.service.ts
@@ -46,15 +46,17 @@ export class PetService {
       );
   }
 
-  getPetById(petId: string): Observable<Pet> {
+  getPetById(petId: number): Observable<Pet> {
     return this.http.get<Pet>(this.entityUrl + '/' + petId)
       .pipe(
         catchError(this.handlerError('getPetById', {} as Pet))
       );
   }
 
   addPet(pet: Pet): Observable<Pet> {
-    return this.http.post<Pet>(this.entityUrl, pet)
+    const ownerId = pet.owner.id;
+    const ownersUrl = environment.REST_API_URL + `owners/${ownerId}/pets`;
+    return this.http.post<Pet>(ownersUrl, pet)
       .pipe(
         catchError(this.handlerError('addPet', pet))
       );

diff --git a/src/app/pets/pet.ts b/src/app/pets/pet.ts
@@ -26,6 +26,7 @@ import {PetType} from '../pettypes/pettype';
 
 export interface Pet {
   id: number;
+  ownerId: number;
   name: string;
   birthDate: string;
   type: PetType;

diff --git a/src/app/visits/visit-add/visit-add.component.spec.ts b/src/app/visits/visit-add/visit-add.component.spec.ts
@@ -36,6 +36,7 @@ import {Observable, of} from 'rxjs';
 import {MatMomentDateModule} from '@angular/material-moment-adapter';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import Spy = jasmine.Spy;
+import {OwnerService} from '../../owners/owner.service';
 
 class PetServiceStub {
   addPet(pet: Pet): Observable<Pet> {
@@ -46,6 +47,9 @@ class PetServiceStub {
   }
 }
 
+class OwnerServiceStub {
+}
+
 class VisitServiceStub {
 }
 
@@ -65,6 +69,7 @@ describe('VisitAddComponent', () => {
       providers: [
         {provide: PetService, useClass: PetServiceStub},
         {provide: VisitService, useClass: VisitServiceStub},
+        {provide: OwnerService, useClass: OwnerServiceStub},
         {provide: Router, useClass: RouterStub},
         {provide: ActivatedRoute, useClass: ActivatedRouteStub}
       ]
@@ -80,6 +85,7 @@ describe('VisitAddComponent', () => {
       name: 'Leo',
       birthDate: '2010-09-07',
       type: {id: 1, name: 'cat'},
+      ownerId: 1,
       owner: {
         id: 1,
         firstName: 'George',

diff --git a/src/app/visits/visit-add/visit-add.component.ts b/src/app/visits/visit-add/visit-add.component.ts
@@ -30,6 +30,7 @@ import {PetType} from '../../pettypes/pettype';
 import {Owner} from '../../owners/owner';
 
 import * as moment from 'moment';
+import {OwnerService} from '../../owners/owner.service';
 
 @Component({
   selector: 'app-visit-add',
@@ -45,7 +46,11 @@ export class VisitAddComponent implements OnInit {
   addedSuccess = false;
   errorMessage: string;
 
-  constructor(private visitService: VisitService, private petService: PetService, private router: Router, private route: ActivatedRoute) {
+  constructor(private visitService: VisitService,
+              private petService: PetService,
+              private ownerService: OwnerService,
+              private router: Router,
+              private route: ActivatedRoute) {
     this.visit = {} as Visit;
     this.currentPet = {} as Pet;
     this.currentOwner = {} as Owner;
@@ -57,11 +62,15 @@ export class VisitAddComponent implements OnInit {
     console.log(this.route.parent);
     const petId = this.route.snapshot.params.id;
     this.petService.getPetById(petId).subscribe(
-      response => {
-        this.currentPet = response;
+      pet => {
+        this.currentPet = pet;
         this.visit.pet = this.currentPet;
         this.currentPetType = this.currentPet.type;
-        this.currentOwner = this.currentPet.owner;
+        this.ownerService.getOwnerById(pet.ownerId).subscribe(
+          owner => {
+            this.currentOwner = owner;
+          }
+        )
       },
       error => this.errorMessage = error as any);
   }
@@ -70,9 +79,8 @@ export class VisitAddComponent implements OnInit {
     visit.id = null;
     const that = this;
 
-    // format output from datepicker to short string yyyy/mm/dd format
-    visit.date = moment(visit.date).format('YYYY/MM/DD');
-
+    // format output from datepicker to short string yyyy-mm-dd format (rfc3339)
+    visit.date = moment(visit.date).format('YYYY-MM-DD');
 
     this.visitService.addVisit(visit).subscribe(
       newVisit => {

diff --git a/src/app/visits/visit-edit/visit-edit.component.spec.ts b/src/app/visits/visit-edit/visit-edit.component.spec.ts
@@ -36,13 +36,24 @@ import {Pet} from '../../pets/pet';
 import {MatMomentDateModule} from '@angular/material-moment-adapter';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import Spy = jasmine.Spy;
+import {OwnerService} from '../../owners/owner.service';
+import {PetService} from '../../pets/pet.service';
 
 class VisitServiceStub {
   getVisitById(visitId: string): Observable<Visit> {
     return of();
   }
 }
 
+class OwnerServiceStub {
+}
+
+class PetServiceStub {
+  getPetById(petId: string): Observable<Pet> {
+    return of();
+  }
+}
+
 describe('VisitEditComponent', () => {
   let component: VisitEditComponent;
   let fixture: ComponentFixture<VisitEditComponent>;
@@ -58,6 +69,8 @@ describe('VisitEditComponent', () => {
       imports: [FormsModule, MatDatepickerModule, MatMomentDateModule],
       providers: [
         {provide: VisitService, useClass: VisitServiceStub},
+        {provide: OwnerService, useClass: OwnerServiceStub},
+        {provide: PetService, useClass: PetServiceStub},
         {provide: Router, useClass: RouterStub},
         {provide: ActivatedRoute, useClass: ActivatedRouteStub}
       ]
@@ -70,6 +83,7 @@ describe('VisitEditComponent', () => {
     component = fixture.componentInstance;
     testPet = {
       id: 1,
+      ownerId: 1,
       name: 'Leo',
       birthDate: '2010-09-07',
       type: {id: 1, name: 'cat'},