Added Books grid view

frontend/src/App.vue

@@ -6,17 +6,12 @@
       <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>
+    <div class="ui divider"></div>
     <router-view/>
   </div>
 </template>
@@ -40,7 +35,11 @@ export default {
 </script>
 
 <style>
+  *, *:hover, *:active, *:focus{
+    outline: none;
+  }
+
   #app{
-    margin: 2em 1em 0;
+    margin: 2em 1em;
   }
 </style>

frontend/src/components/Books.vue

@@ -1,10 +1,21 @@
 <template>
   <div v-if="user.authenticated">
     <h1>{{ booksTitle }}</h1>
-    <table class="ui celled table">
+    <form id="search">
+      <div class="ui icon input">
+        <input placeholder="Search..." type="text" v-model="searchQuery">
+        <i class="search icon"></i>
+      </div>
+    </form>
+    <grid
+      :data="books"
+      :columns="gridColumns"
+      :filter-key="searchQuery">
+    </grid>
+   <!-- <table class="ui celled table">
       <thead>
         <tr>
-          <th>Title</th>
+          <th><a @click="sortBy('Title')">Title</a></th>
           <th>ISBN</th>
           <th>Year</th>
           <th>Price</th>
@@ -24,7 +35,7 @@
           <td><a class="button">Do</a> </td>
         </tr>
       </tbody>
-    </table>
+    </table>-->
   </div>
 </template>
 
@@ -38,18 +49,35 @@ export default {
     return {
       user: auth.user,
       booksTitle: 'Books Overview',
-      books: []
+      books: [],
+      searchQuery: '',
+      gridColumns: ['Title', 'ISBN', 'Year', 'Price', 'Status', 'Publisher']
     }
   },
   methods: {
-    logout () {
-      auth.logout()
+    sortBy (sortKey) {
+      this.reverse = (this.sortKey === sortKey) ? !this.reverse : false
+
+      this.sortKey = sortKey
     }
   },
   created () {
     HTTP.get(`books`)
       .then(response => {
-        this.books = response.data
+        // this.books = response.data
+        let bs = response.data
+        let i = 0
+        for (const b in bs) {
+          this.books[i] = {
+            Title: bs[b].Title,
+            ISBN: bs[b].Isbn,
+            Year: bs[b].Year,
+            Price: bs[b].Price + '€',
+            Status: bs[b].Status,
+            Publisher: bs[b].PublisherFull.Name
+          }
+          i++
+        }
       })
       .catch(e => {
         this.errors.push(e)

frontend/src/components/Grid.vue

@@ -0,0 +1,80 @@
+<template>
+  <table class="ui celled table">
+    <thead>
+      <tr>
+        <th v-for="key in columns"
+          @click="sortBy(key)"
+          :class="{ active: sortKey == key }">
+          {{ key | capitalize }}
+          &nbsp;&nbsp;
+          <icon :name="sortOrders[key] > 0 ? 'sort-asc' : 'sort-desc'"></icon>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="entry in filteredData">
+        <td v-for="key in columns">
+          {{entry[key]}}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+  import Icon from 'vue-awesome/components/Icon'
+
+  export default {
+    components: {Icon},
+    name: 'grid',
+    props: {
+      data: Array,
+      columns: Array,
+      filterKey: String
+    },
+    data: function () {
+      var sortOrders = {}
+      this.columns.forEach(function (key) {
+        sortOrders[key] = 1
+      })
+      return {
+        sortKey: '',
+        sortOrders: sortOrders
+      }
+    },
+    computed: {
+      filteredData: function () {
+        var sortKey = this.sortKey
+        var filterKey = this.filterKey && this.filterKey.toLowerCase()
+        var order = this.sortOrders[sortKey] || 1
+        var data = this.data
+        if (filterKey) {
+          data = data.filter(function (row) {
+            return Object.keys(row).some(function (key) {
+              return String(row[key]).toLowerCase().indexOf(filterKey) > -1
+            })
+          })
+        }
+        if (sortKey) {
+          data = data.slice().sort(function (a, b) {
+            a = a[sortKey]
+            b = b[sortKey]
+            return (a === b ? 0 : a > b ? 1 : -1) * order
+          })
+        }
+        return data
+      }
+    },
+    filters: {
+      capitalize: function (str) {
+        return str.charAt(0).toUpperCase() + str.slice(1)
+      }
+    },
+    methods: {
+      sortBy: function (key) {
+        this.sortKey = key
+        this.sortOrders[key] = this.sortOrders[key] * -1
+      }
+    }
+  }
+</script>

frontend/src/main.js

@@ -5,16 +5,21 @@ import App from './App'
 import router from './router'
 import auth from './auth'
 
-// or import all icons if you don't care about bundle size
+// Grid import
+import Grid from './components/Grid'
+// Font-awesome icons import
 import 'vue-awesome/icons'
-/* Register component with one of 2 methods */
 import Icon from 'vue-awesome/components/Icon'
 
-// globally (in your main .js file)
+// Icons setup
 Vue.component('icon', Icon)
+
 // Check the user's auth status when the app starts
 auth.checkAuth()
 
+// Register Grid component
+Vue.component('grid', Grid)
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

frontend/src/router/index.js

@@ -23,5 +23,6 @@ export default new Router({
       name: 'Books',
       component: Books
     }
-  ]
+  ],
+  linkActiveClass: 'active'
 })