Added Books overview to Frontend

assets/src/components/App.vue

@@ -19,7 +19,6 @@ export default {
   },
 
   methods: {
-
     logout() {
       auth.logout()
     }

frontend/src/App.vue

@@ -1,22 +1,46 @@
 <template>
   <div id="app">
+    <div class="ui secondary menu" v-if="user.authenticated">
+      <router-link to="/home" class="item">Home</router-link>
+      <router-link to="/books" class="item">Books</router-link>
+      <router-link to="/authors" class="item">Authors</router-link>
+      <router-link to="/publishers" class="item">Publishers</router-link>
+      <div class="right menu">
+        <div class="item">
+          <div class="ui icon input">
+            <input placeholder="Search..." type="text">
+            <i class="search link icon"></i>
+          </div>
+        </div>
+        <a class="ui item" @click="logout()">
+          Logout
+        </a>
+      </div>
+    </div>
     <router-view/>
   </div>
 </template>
 
 <script>
+import auth from './auth'
+
 export default {
-  name: 'app'
+  name: 'app',
+  data () {
+    return {
+      user: auth.user
+    }
+  },
+  methods: {
+    logout () {
+      auth.logout()
+    }
+  }
 }
 </script>
 
 <style>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+  #app{
+    margin: 2em 1em 0;
+  }
 </style>

frontend/src/components/Books.vue

@@ -0,0 +1,59 @@
+<template>
+  <div v-if="user.authenticated">
+    <h1>{{ booksTitle }}</h1>
+    <table class="ui celled table">
+      <thead>
+        <tr>
+          <th>Title</th>
+          <th>ISBN</th>
+          <th>Year</th>
+          <th>Price</th>
+          <th>Status</th>
+          <th>Publisher</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="book in books">
+          <td>{{ book.Title }}</td>
+          <td>{{ book.Isbn }}</td>
+          <td>{{ book.Year }}</td>
+          <td>{{ book.Price }}€</td>
+          <td>{{ book.Status }}</td>
+          <td>{{ book.PublisherFull.Name }}</td>
+          <td><a class="button">Do</a> </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import auth from '../auth'
+import {HTTP} from '../http-common'
+
+export default {
+  name: 'Home',
+  data () {
+    return {
+      user: auth.user,
+      booksTitle: 'Books Overview',
+      books: []
+    }
+  },
+  methods: {
+    logout () {
+      auth.logout()
+    }
+  },
+  created () {
+    HTTP.get(`books`)
+      .then(response => {
+        this.books = response.data
+      })
+      .catch(e => {
+        this.errors.push(e)
+      })
+  }
+}
+</script>

frontend/src/components/Home.vue

@@ -1,8 +1,5 @@
 <template>
   <div>
-    <div v-if="user.authenticated">
-
-    </div>
     <p v-if="user.authenticated">Logged in. <a @click="logout()">Logout</a></p>
     <p v-else-if="!user.authenticated">not logged in. <router-link to="/login">Login</router-link></p>
   </div>

frontend/src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import Home from '@/components/Home'
 import Login from '@/components/Login'
+import Books from '@/components/Books'
 
 Vue.use(Router)
 
@@ -16,6 +17,11 @@ export default new Router({
       path: '/login',
       name: 'Login',
       component: Login
+    },
+    {
+      path: '/books',
+      name: 'Books',
+      component: Books
     }
   ]
 })