Merge pull request spring-petclinic#11 from arey/feature/visitlist

Improve display of the visit table

src/app/pets/pet-list/pet-list.component.html

@@ -33,7 +33,7 @@
       </dl>
     </td>
     <td valign="top">
-      <app-visit-list *ngFor="let visit of pet.visits" [visit]="visit"></app-visit-list>
+      <app-visit-list [visits]="pet.visits"></app-visit-list>
     </td>
   </tr>
 

src/app/visits/visit-add/visit-add.component.html

@@ -80,7 +80,7 @@ <h2>New Visit</h2>
     <div class="container">
       <div class="row">
         <div class="col-12 text-center">
-          <app-visit-list *ngFor="let visit of current_pet.visits" [visit]="visit"></app-visit-list>
+          <app-visit-list [visits]="current_pet.visits"></app-visit-list>
         </div>
       </div>
     </div>

src/app/visits/visit-list/visit-list.component.html

@@ -21,17 +21,14 @@
   <tr>
     <th>Visit Date</th>
     <th>Description</th>
+    <th>Actions</th>
   </tr>
   </thead>
-  <tr>
+  <tr *ngFor="let visit of visits">
     <td>{{visit.date}}</td>
     <td>{{visit.description}}</td>
-  </tr>
-  <tr>
     <td>
       <button class="btn btn-default" (click)="editVisit(visit)">Edit Visit</button>
-    </td>
-    <td>
       <button class="btn btn-default" (click)="deleteVisit(visit)">Delete Visit</button>
     </td>
   </tr>

src/app/visits/visit-list/visit-list.component.ts

@@ -32,13 +32,13 @@ import {Router} from '@angular/router';
 })
 export class VisitListComponent implements OnInit {
 
-  @Input() visit: Visit;
+  @Input() visits: Visit[];
   response_status: number;
   delete_success: boolean = false;
   errorMessage: string;
 
   constructor(private router: Router, private visitService: VisitService) {
-    this.visit = <Visit>{};
+    this.visits = [];
   }
 
   ngOnInit() {
@@ -54,7 +54,7 @@ export class VisitListComponent implements OnInit {
         this.response_status = response;
         if (this.response_status === 204) {
           this.delete_success = true;
-          this.visit = <Visit>{};
+          this.visits = [];
         }
       },
       error => this.errorMessage = <any> error);