diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 2788ef6..5b47dd2 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -6,17 +6,12 @@
Authors
Publishers
+
@@ -40,7 +35,11 @@ export default {
diff --git a/frontend/src/components/Books.vue b/frontend/src/components/Books.vue
index 6059c5d..8830325 100644
--- a/frontend/src/components/Books.vue
+++ b/frontend/src/components/Books.vue
@@ -1,10 +1,21 @@
{{ booksTitle }}
-
+
+
+
+
@@ -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)
diff --git a/frontend/src/components/Grid.vue b/frontend/src/components/Grid.vue
new file mode 100644
index 0000000..e0f5d66
--- /dev/null
+++ b/frontend/src/components/Grid.vue
@@ -0,0 +1,80 @@
+
+
+
+
+
+ {{ key | capitalize }}
+
+
+ |
+
+
+
+
+
+ {{entry[key]}}
+ |
+
+
+
+
+
+
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 4b3e86b..e2efbe8 100644
--- a/frontend/src/main.js
+++ b/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',
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 62d6724..39ed0cc 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -23,5 +23,6 @@ export default new Router({
name: 'Books',
component: Books
}
- ]
+ ],
+ linkActiveClass: 'active'
})