Added show a single book
This commit is contained in:
parent
21b051bac3
commit
301c325d85
178
frontend/src/components/BookOverview.vue
Normal file
178
frontend/src/components/BookOverview.vue
Normal file
|
@ -0,0 +1,178 @@
|
||||||
|
<template>
|
||||||
|
<div v-if="user.authenticated">
|
||||||
|
<h1>{{ book.Title }}</h1>
|
||||||
|
|
||||||
|
<div class="ui info message" v-if="loading">
|
||||||
|
<icon name="refresh" spin></icon>
|
||||||
|
Loading...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ui negative message" v-if="error">
|
||||||
|
<div class="header">
|
||||||
|
An error occured.
|
||||||
|
</div>
|
||||||
|
{{ error.message }}
|
||||||
|
<p v-if="error.response.data">
|
||||||
|
{{ error.response.data.Message }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="!loading && !error">
|
||||||
|
|
||||||
|
<router-link :to="{ name: 'book-edit', params: { id: bookID} }" class="ui teal labeled icon button" style="float: right;">
|
||||||
|
<i class="edit icon"></i>
|
||||||
|
Edit
|
||||||
|
</router-link>
|
||||||
|
|
||||||
|
<div class="ui list">
|
||||||
|
<div class="item">
|
||||||
|
<div class="header">
|
||||||
|
ISBN
|
||||||
|
</div>
|
||||||
|
{{ book.Isbn }}
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="header">
|
||||||
|
Year
|
||||||
|
</div>
|
||||||
|
{{ book.Year }}
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="header">
|
||||||
|
Price
|
||||||
|
</div>
|
||||||
|
{{ book.Price }}
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="header">
|
||||||
|
Status
|
||||||
|
</div>
|
||||||
|
{{ book.Status }}
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="header">
|
||||||
|
Publisher
|
||||||
|
</div>
|
||||||
|
<router-link :to="{ name: 'publisher-show', params: { id: book.PublisherFull.ID} }">
|
||||||
|
{{ book.PublisherFull.Name }}
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="header">
|
||||||
|
Authors
|
||||||
|
</div>
|
||||||
|
<template v-for="(author, index) in book.Authors">
|
||||||
|
<router-link :to="{ name: 'author-show', params: { id: author.ID} }">
|
||||||
|
{{ author.Lastname }} {{ author.Lastname }}
|
||||||
|
</router-link>
|
||||||
|
<template v-if="book.Authors.length > (index + 1)">, </template>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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: {},
|
||||||
|
error: '',
|
||||||
|
success: '',
|
||||||
|
allStatus: [],
|
||||||
|
bookID: this.$route.params.id
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
this.loadStatus()
|
||||||
|
this.loadBook()
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// call again the method if the route changes
|
||||||
|
'$route': 'loadBook'
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
loadBook () {
|
||||||
|
this.loading = true
|
||||||
|
this.book = {}
|
||||||
|
HTTP.get(`books/` + this.bookID)
|
||||||
|
.then(response => {
|
||||||
|
this.book = response.data
|
||||||
|
|
||||||
|
// Get all authors and concat them into one singe string
|
||||||
|
let authors = this.book.Authors
|
||||||
|
for (const au in authors) {
|
||||||
|
this.book.Author += authors[au].Forename + ' ' + authors[au].Lastname
|
||||||
|
if (authors.length > au + 1) {
|
||||||
|
this.book.Author += ', '
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Make Status a name, not an id
|
||||||
|
this.book.Status = this.getStatusByID(this.book.Status)
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
.catch(e => {
|
||||||
|
this.loading = false
|
||||||
|
this.error = e
|
||||||
|
})
|
||||||
|
},
|
||||||
|
loadStatus: function () {
|
||||||
|
HTTP.get('status')
|
||||||
|
.then(response => {
|
||||||
|
this.allStatus = response.data
|
||||||
|
})
|
||||||
|
.catch(e => {
|
||||||
|
this.error = 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>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
a.pagination-link {
|
||||||
|
margin: -5px -1.14286em -18px;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.928571em 1.14286em;
|
||||||
|
color: rgba(0, 0, 0, .87);
|
||||||
|
|
||||||
|
-webkit-transition: background-color 200ms; /* Safari */
|
||||||
|
transition: background-color 200ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.pagination-link:hover {
|
||||||
|
background: rgba(0, 0, 0, .02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-container {
|
||||||
|
margin-top: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -4,6 +4,7 @@ import Home from '@/components/Home'
|
||||||
import Login from '@/components/Login'
|
import Login from '@/components/Login'
|
||||||
import Books from '@/components/Books'
|
import Books from '@/components/Books'
|
||||||
import BooksAddEdit from '@/components/BooksAddEdit'
|
import BooksAddEdit from '@/components/BooksAddEdit'
|
||||||
|
import BookOverview from '@/components/BookOverview'
|
||||||
import Authors from '@/components/Authors'
|
import Authors from '@/components/Authors'
|
||||||
import AuthorsAddEdit from '@/components/AuthorsAddEdit'
|
import AuthorsAddEdit from '@/components/AuthorsAddEdit'
|
||||||
import Publishers from '@/components/Publishers'
|
import Publishers from '@/components/Publishers'
|
||||||
|
@ -38,6 +39,11 @@ export default new Router({
|
||||||
name: 'book-edit',
|
name: 'book-edit',
|
||||||
component: BooksAddEdit
|
component: BooksAddEdit
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/books/:id',
|
||||||
|
name: 'book-show',
|
||||||
|
component: BookOverview
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/authors',
|
path: '/authors',
|
||||||
name: 'authors',
|
name: 'authors',
|
||||||
|
|
Loading…
Reference in New Issue
Block a user