Added Books grid view
This commit is contained in:
parent
a0551527c8
commit
3c7d6d6fd1
|
@ -6,17 +6,12 @@
|
||||||
<router-link to="/authors" class="item">Authors</router-link>
|
<router-link to="/authors" class="item">Authors</router-link>
|
||||||
<router-link to="/publishers" class="item">Publishers</router-link>
|
<router-link to="/publishers" class="item">Publishers</router-link>
|
||||||
<div class="right menu">
|
<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()">
|
<a class="ui item" @click="logout()">
|
||||||
Logout
|
Logout
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="ui divider"></div>
|
||||||
<router-view/>
|
<router-view/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -40,7 +35,11 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
*, *:hover, *:active, *:focus{
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
#app{
|
#app{
|
||||||
margin: 2em 1em 0;
|
margin: 2em 1em;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,10 +1,21 @@
|
||||||
<template>
|
<template>
|
||||||
<div v-if="user.authenticated">
|
<div v-if="user.authenticated">
|
||||||
<h1>{{ booksTitle }}</h1>
|
<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>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Title</th>
|
<th><a @click="sortBy('Title')">Title</a></th>
|
||||||
<th>ISBN</th>
|
<th>ISBN</th>
|
||||||
<th>Year</th>
|
<th>Year</th>
|
||||||
<th>Price</th>
|
<th>Price</th>
|
||||||
|
@ -24,7 +35,7 @@
|
||||||
<td><a class="button">Do</a> </td>
|
<td><a class="button">Do</a> </td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>-->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -38,18 +49,35 @@ export default {
|
||||||
return {
|
return {
|
||||||
user: auth.user,
|
user: auth.user,
|
||||||
booksTitle: 'Books Overview',
|
booksTitle: 'Books Overview',
|
||||||
books: []
|
books: [],
|
||||||
|
searchQuery: '',
|
||||||
|
gridColumns: ['Title', 'ISBN', 'Year', 'Price', 'Status', 'Publisher']
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
logout () {
|
sortBy (sortKey) {
|
||||||
auth.logout()
|
this.reverse = (this.sortKey === sortKey) ? !this.reverse : false
|
||||||
|
|
||||||
|
this.sortKey = sortKey
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
HTTP.get(`books`)
|
HTTP.get(`books`)
|
||||||
.then(response => {
|
.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 => {
|
.catch(e => {
|
||||||
this.errors.push(e)
|
this.errors.push(e)
|
||||||
|
|
|
@ -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 }}
|
||||||
|
|
||||||
|
<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>
|
|
@ -5,16 +5,21 @@ import App from './App'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
import auth from './auth'
|
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'
|
import 'vue-awesome/icons'
|
||||||
/* Register component with one of 2 methods */
|
|
||||||
import Icon from 'vue-awesome/components/Icon'
|
import Icon from 'vue-awesome/components/Icon'
|
||||||
|
|
||||||
// globally (in your main .js file)
|
// Icons setup
|
||||||
Vue.component('icon', Icon)
|
Vue.component('icon', Icon)
|
||||||
|
|
||||||
// Check the user's auth status when the app starts
|
// Check the user's auth status when the app starts
|
||||||
auth.checkAuth()
|
auth.checkAuth()
|
||||||
|
|
||||||
|
// Register Grid component
|
||||||
|
Vue.component('grid', Grid)
|
||||||
|
|
||||||
/* eslint-disable no-new */
|
/* eslint-disable no-new */
|
||||||
new Vue({
|
new Vue({
|
||||||
el: '#app',
|
el: '#app',
|
||||||
|
|
|
@ -23,5 +23,6 @@ export default new Router({
|
||||||
name: 'Books',
|
name: 'Books',
|
||||||
component: Books
|
component: Books
|
||||||
}
|
}
|
||||||
]
|
],
|
||||||
|
linkActiveClass: 'active'
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue