147 lines
3.9 KiB
Vue
147 lines
3.9 KiB
Vue
<template>
|
|
<div v-if="user.authenticated">
|
|
<h1>{{ book.Title }}</h1>
|
|
|
|
<div class="ui info message" v-if="loading">
|
|
<icon name="refresh" spin></icon>
|
|
<span v-lang.general.loading></span>
|
|
</div>
|
|
|
|
<div v-if="!loading">
|
|
|
|
<router-link :to="{ name: 'book-edit', params: { id: bookID} }" class="ui teal labeled icon button" style="float: right;">
|
|
<i class="edit icon"></i>
|
|
<span v-lang.general.edit></span>
|
|
</router-link>
|
|
|
|
<list :infos="bookList" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import auth from '../auth'
|
|
import {HTTP} from '../http-common'
|
|
// import router from '../router'
|
|
|
|
export default {
|
|
name: 'Book',
|
|
data () {
|
|
return {
|
|
user: auth.user,
|
|
book: {},
|
|
allStatus: [],
|
|
bookID: this.$route.params.id,
|
|
bookList: {},
|
|
AuthorList: []
|
|
}
|
|
},
|
|
created () {
|
|
this.loadStatus()
|
|
this.loadBook()
|
|
},
|
|
watch: {
|
|
// call again the method if the route changes
|
|
'$route': 'loadBook'
|
|
},
|
|
methods: {
|
|
errorNotification (e) {
|
|
// Build the notification text from error response
|
|
let err = e.message
|
|
if (e.response.data.Message) {
|
|
err += '<br/>' + e.response.data.Message
|
|
}
|
|
|
|
// Fire a notification
|
|
this.$notify({
|
|
type: 'error',
|
|
title: this.langGeneral.error,
|
|
text: err
|
|
})
|
|
},
|
|
loadBook () {
|
|
this.loading = true
|
|
this.book = {}
|
|
HTTP.get(`books/` + this.bookID)
|
|
.then(response => {
|
|
this.book = response.data
|
|
|
|
// Get all authors and build an array with them
|
|
let authors = this.book.Authors
|
|
for (const au in authors) {
|
|
this.AuthorList.push({
|
|
content: authors[au].Forename + ' ' + authors[au].Lastname,
|
|
link: {
|
|
name: 'author-show',
|
|
params: {
|
|
id: authors[au].ID
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
// Make Status a name, not an id
|
|
this.book.Status = this.getStatusByID(this.book.Status)
|
|
this.loading = false
|
|
|
|
// Build the list object
|
|
this.bookList = [
|
|
{
|
|
header: this.translate('books').gridColumns.isbn,
|
|
content: this.book.Isbn
|
|
},
|
|
{
|
|
header: this.translate('books').gridColumns.year,
|
|
content: this.book.Year
|
|
},
|
|
{
|
|
header: this.translate('books').gridColumns.price,
|
|
content: this.book.Price
|
|
},
|
|
{
|
|
header: this.translate('books').gridColumns.status,
|
|
content: this.book.Status
|
|
},
|
|
{
|
|
header: this.translate('books').gridColumns.publisher,
|
|
content: this.book.Publisher.Name,
|
|
link: {
|
|
name: 'publisher-show',
|
|
params: {
|
|
id: this.book.Publisher.ID
|
|
}
|
|
}
|
|
},
|
|
{
|
|
header: this.translate('books').gridColumns.authors,
|
|
content: this.AuthorList
|
|
}
|
|
]
|
|
})
|
|
.catch(e => {
|
|
this.loading = false
|
|
this.errorNotification(e)
|
|
})
|
|
},
|
|
loadStatus: function () {
|
|
HTTP.get('status')
|
|
.then(response => {
|
|
this.allStatus = response.data
|
|
})
|
|
.catch(e => {
|
|
this.errorNotification(e)
|
|
})
|
|
},
|
|
getStatusByID: function (id) {
|
|
// TODO: is there a better way to do this?
|
|
for (const i in this.allStatus) {
|
|
if (this.allStatus[i].ID === id) {
|
|
return this.allStatus[i].Name
|
|
}
|
|
}
|
|
return ''
|
|
}
|
|
}
|
|
}
|
|
</script>
|