Added show a single book

frontend/src/components/BookOverview.vue

@@ -0,0 +1,178 @@
+<template>
+  <div v-if="user.authenticated">
+    <h1>{{ book.Title }}</h1>
+
+    <div class="ui info message" v-if="loading">
+      <icon name="refresh" spin></icon>&nbsp;&nbsp;
+      Loading...
+    </div>
+
+    <div class="ui negative message" v-if="error">
+      <div class="header">
+        An error occured.
+      </div>
+      {{ error.message }}
+      <p v-if="error.response.data">
+        {{ error.response.data.Message }}
+      </p>
+    </div>
+
+    <div v-if="!loading && !error">
+
+      <router-link :to="{ name: 'book-edit', params: { id: bookID} }" class="ui teal labeled icon button" style="float: right;">
+        <i class="edit icon"></i>
+        Edit
+      </router-link>
+
+      <div class="ui list">
+        <div class="item">
+          <div class="header">
+            ISBN
+          </div>
+          {{ book.Isbn }}
+        </div>
+        <div class="item">
+          <div class="header">
+            Year
+          </div>
+          {{ book.Year }}
+        </div>
+        <div class="item">
+          <div class="header">
+            Price
+          </div>
+          {{ book.Price }}
+        </div>
+        <div class="item">
+          <div class="header">
+            Status
+          </div>
+          {{ book.Status }}
+        </div>
+        <div class="item">
+          <div class="header">
+            Publisher
+          </div>
+          <router-link :to="{ name: 'publisher-show', params: { id: book.PublisherFull.ID} }">
+            {{ book.PublisherFull.Name }}
+          </router-link>
+        </div>
+        <div class="item">
+          <div class="header">
+            Authors
+          </div>
+          <template v-for="(author, index) in book.Authors">
+            <router-link :to="{ name: 'author-show', params: { id: author.ID} }">
+              {{ author.Lastname }} {{ author.Lastname }}
+            </router-link>
+              <template v-if="book.Authors.length > (index + 1)">, </template>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import auth from '../auth'
+  import {HTTP} from '../http-common'
+  // import router from '../router'
+
+  export default {
+    name: 'Book',
+    data () {
+      return {
+        user: auth.user,
+        book: {},
+        error: '',
+        success: '',
+        allStatus: [],
+        bookID: this.$route.params.id
+      }
+    },
+    created () {
+      this.loadStatus()
+      this.loadBook()
+    },
+    watch: {
+      // call again the method if the route changes
+      '$route': 'loadBook'
+    },
+    methods: {
+      loadBook () {
+        this.loading = true
+        this.book = {}
+        HTTP.get(`books/` + this.bookID)
+          .then(response => {
+            this.book = response.data
+
+            // Get all authors and concat them into one singe string
+            let authors = this.book.Authors
+            for (const au in authors) {
+              this.book.Author += authors[au].Forename + ' ' + authors[au].Lastname
+              if (authors.length > au + 1) {
+                this.book.Author += ', '
+              }
+            }
+
+            // Make Status a name, not an id
+            this.book.Status = this.getStatusByID(this.book.Status)
+            this.loading = false
+          })
+          .catch(e => {
+            this.loading = false
+            this.error = e
+          })
+      },
+      loadStatus: function () {
+        HTTP.get('status')
+          .then(response => {
+            this.allStatus = response.data
+          })
+          .catch(e => {
+            this.error = e
+          })
+      },
+      getStatusByID: function (id) {
+        // TODO: is there a better way to do this?
+        for (const i in this.allStatus) {
+          if (this.allStatus[i].ID === id) {
+            return this.allStatus[i].Name
+          }
+        }
+        return ''
+      }
+    }
+  }
+</script>
+
+<style>
+  a.pagination-link {
+    margin: -5px -1.14286em -18px;
+    display: block;
+    position: absolute;
+    cursor: pointer;
+    padding: 0.928571em 1.14286em;
+    color: rgba(0, 0, 0, .87);
+
+    -webkit-transition: background-color 200ms; /* Safari */
+    transition: background-color 200ms;
+  }
+
+  a.pagination-link:hover {
+    background: rgba(0, 0, 0, .02);
+  }
+
+  .pagination {
+    padding: 0;
+  }
+
+  .pagination-container {
+    margin-top: 1rem;
+    text-align: center;
+  }
+
+  #search {
+    margin-bottom: 1rem;
+  }
+</style>

frontend/src/router/index.js

@@ -4,6 +4,7 @@ import Home from '@/components/Home'
 import Login from '@/components/Login'
 import Books from '@/components/Books'
 import BooksAddEdit from '@/components/BooksAddEdit'
+import BookOverview from '@/components/BookOverview'
 import Authors from '@/components/Authors'
 import AuthorsAddEdit from '@/components/AuthorsAddEdit'
 import Publishers from '@/components/Publishers'
@@ -38,6 +39,11 @@ export default new Router({
       name: 'book-edit',
       component: BooksAddEdit
     },
+    {
+      path: '/books/:id',
+      name: 'book-show',
+      component: BookOverview
+    },
     {
       path: '/authors',
       name: 'authors',