Added show a single author

frontend/src/components/AuthorOverview.vue

@@ -0,0 +1,83 @@
+<template>
+  <div v-if="user.authenticated">
+    <h1>{{ author.Forename }} {{ author.Lastname }}</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: 'author-edit', params: { id: authorID} }" 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">
+            Forename
+          </div>
+          {{ author.Forename }}
+        </div>
+        <div class="item">
+          <div class="header">
+            Lastname
+          </div>
+          {{ author.Lastname }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import auth from '../auth'
+  import {HTTP} from '../http-common'
+
+  export default {
+    name: 'Author',
+    data () {
+      return {
+        user: auth.user,
+        author: {},
+        error: '',
+        success: '',
+        authorID: this.$route.params.id
+      }
+    },
+    created () {
+      this.loadAuthor()
+    },
+    watch: {
+      // call again the method if the route changes
+      '$route': 'loadAuthor'
+    },
+    methods: {
+      loadAuthor () {
+        this.loading = true
+        this.author = {}
+        HTTP.get(`authors/` + this.authorID)
+          .then(response => {
+            this.author = response.data
+            this.loading = false
+          })
+          .catch(e => {
+            this.loading = false
+            this.error = e
+          })
+      }
+    }
+  }
+</script>

frontend/src/components/Authors.vue

@@ -156,7 +156,7 @@ export default {
           for (const b in bs) {
             this.authors[i] = {
               ID: {content: bs[b].ID, hide: true}, // Don't show the ID
-              Name: {content: bs[b].Forename + ' ' + bs[b].Lastname, link: '/author/' + bs[b].ID} // Add a link to the element
+              Name: {content: bs[b].Forename + ' ' + bs[b].Lastname, link: '/authors/' + bs[b].ID} // Add a link to the element
             }
 
             // increment dat shit

frontend/src/components/BookOverview.vue

@@ -145,34 +145,3 @@
     }
   }
 </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/components/Books.vue

@@ -157,7 +157,7 @@ export default {
           for (const b in bs) {
             this.books[i] = {
               ID: {content: bs[b].ID, hide: true}, // Don't show the ID
-              Title: {content: bs[b].Title, link: '/book/' + bs[b].ID}, // Add a link to the element
+              Title: {content: bs[b].Title, link: '/books/' + bs[b].ID}, // Add a link to the element
               ISBN: {content: bs[b].Isbn}, // We can also just use the content column
               Year: bs[b].Year,
               Price: bs[b].Price + '€',

frontend/src/router/index.js

@@ -7,6 +7,7 @@ import BooksAddEdit from '@/components/BooksAddEdit'
 import BookOverview from '@/components/BookOverview'
 import Authors from '@/components/Authors'
 import AuthorsAddEdit from '@/components/AuthorsAddEdit'
+import AuthorOverview from '@/components/AuthorOverview'
 import Publishers from '@/components/Publishers'
 import PublishersAddEdit from '@/components/PublishersAddEdit'
 
@@ -59,6 +60,11 @@ export default new Router({
       name: 'author-edit',
       component: AuthorsAddEdit
     },
+    {
+      path: '/authors/:id',
+      name: 'author-show',
+      component: AuthorOverview
+    },
     {
       path: '/publishers',
       name: 'publishers',