88 lines
2.0 KiB
Vue
88 lines
2.0 KiB
Vue
<template>
|
|
<div v-if="user.authenticated">
|
|
<h1>{{ booksTitle }}</h1>
|
|
<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><a @click="sortBy('Title')">Title</a></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: [],
|
|
searchQuery: '',
|
|
gridColumns: ['Title', 'ISBN', 'Year', 'Price', 'Status', 'Publisher']
|
|
}
|
|
},
|
|
methods: {
|
|
sortBy (sortKey) {
|
|
this.reverse = (this.sortKey === sortKey) ? !this.reverse : false
|
|
|
|
this.sortKey = sortKey
|
|
}
|
|
},
|
|
created () {
|
|
HTTP.get(`books`)
|
|
.then(response => {
|
|
// 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)
|
|
})
|
|
}
|
|
}
|
|
</script>
|