Added author display to books list

frontend/src/components/Books.vue

@@ -8,7 +8,7 @@
     <div v-if="!loading">
       <form id="search">
         <div class="ui icon input">
-          <input placeholder="Search..." type="text" v-model="searchQuery">
+          <input placeholder="Search for anything..." type="text" v-model="searchQuery">
           <i class="search icon"></i>
         </div>
       </form>
@@ -36,6 +36,9 @@
           }"
         >
         </paginate-links>
+        <div v-if="$refs.paginator">
+          Viewing {{$refs.paginator.pageItemsCount}} results
+        </div>
       </div>
     </div>
   </div>
@@ -53,7 +56,7 @@ export default {
       booksTitle: 'Books Overview',
       books: [],
       searchQuery: '',
-      gridColumns: ['Title', 'ISBN', 'Year', 'Price', 'Status', 'Publisher'],
+      gridColumns: ['Title', 'ISBN', 'Year', 'Price', 'Author', 'Publisher', 'Status'],
       loading: false,
       paginate: ['books']
     }
@@ -92,8 +95,18 @@ export default {
               ISBN: bs[b].Isbn,
               Year: bs[b].Year,
               Price: bs[b].Price + '€',
-              Status: bs[b].Status,
+              Author: '',
-              Publisher: bs[b].PublisherFull.Name
+              Publisher: bs[b].PublisherFull.Name,
+              Status: bs[b].Status
+            }
+
+            // Get all authors and concat them into one singe string
+            let authors = bs[b].Authors
+            for (const au in authors) {
+              this.books[i].Author += authors[au].Forename + ' ' + authors[au].Lastname
+              if (authors.length > au + 1) {
+                this.books[i].Author += ', '
+              }
             }
             i++
           }