Added show a single author
This commit is contained in:
parent
301c325d85
commit
8a8bd44a21
|
@ -0,0 +1,83 @@
|
||||||
|
<template>
|
||||||
|
<div v-if="user.authenticated">
|
||||||
|
<h1>{{ author.Forename }} {{ author.Lastname }}</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: 'author-edit', params: { id: authorID} }" 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">
|
||||||
|
Forename
|
||||||
|
</div>
|
||||||
|
{{ author.Forename }}
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="header">
|
||||||
|
Lastname
|
||||||
|
</div>
|
||||||
|
{{ author.Lastname }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import auth from '../auth'
|
||||||
|
import {HTTP} from '../http-common'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Author',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
user: auth.user,
|
||||||
|
author: {},
|
||||||
|
error: '',
|
||||||
|
success: '',
|
||||||
|
authorID: this.$route.params.id
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
this.loadAuthor()
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// call again the method if the route changes
|
||||||
|
'$route': 'loadAuthor'
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
loadAuthor () {
|
||||||
|
this.loading = true
|
||||||
|
this.author = {}
|
||||||
|
HTTP.get(`authors/` + this.authorID)
|
||||||
|
.then(response => {
|
||||||
|
this.author = response.data
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
.catch(e => {
|
||||||
|
this.loading = false
|
||||||
|
this.error = e
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -156,7 +156,7 @@ export default {
|
||||||
for (const b in bs) {
|
for (const b in bs) {
|
||||||
this.authors[i] = {
|
this.authors[i] = {
|
||||||
ID: {content: bs[b].ID, hide: true}, // Don't show the ID
|
ID: {content: bs[b].ID, hide: true}, // Don't show the ID
|
||||||
Name: {content: bs[b].Forename + ' ' + bs[b].Lastname, link: '/author/' + bs[b].ID} // Add a link to the element
|
Name: {content: bs[b].Forename + ' ' + bs[b].Lastname, link: '/authors/' + bs[b].ID} // Add a link to the element
|
||||||
}
|
}
|
||||||
|
|
||||||
// increment dat shit
|
// increment dat shit
|
||||||
|
|
|
@ -145,34 +145,3 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</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>
|
|
||||||
|
|
|
@ -157,7 +157,7 @@ export default {
|
||||||
for (const b in bs) {
|
for (const b in bs) {
|
||||||
this.books[i] = {
|
this.books[i] = {
|
||||||
ID: {content: bs[b].ID, hide: true}, // Don't show the ID
|
ID: {content: bs[b].ID, hide: true}, // Don't show the ID
|
||||||
Title: {content: bs[b].Title, link: '/book/' + bs[b].ID}, // Add a link to the element
|
Title: {content: bs[b].Title, link: '/books/' + bs[b].ID}, // Add a link to the element
|
||||||
ISBN: {content: bs[b].Isbn}, // We can also just use the content column
|
ISBN: {content: bs[b].Isbn}, // We can also just use the content column
|
||||||
Year: bs[b].Year,
|
Year: bs[b].Year,
|
||||||
Price: bs[b].Price + '€',
|
Price: bs[b].Price + '€',
|
||||||
|
|
|
@ -7,6 +7,7 @@ import BooksAddEdit from '@/components/BooksAddEdit'
|
||||||
import BookOverview from '@/components/BookOverview'
|
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 AuthorOverview from '@/components/AuthorOverview'
|
||||||
import Publishers from '@/components/Publishers'
|
import Publishers from '@/components/Publishers'
|
||||||
import PublishersAddEdit from '@/components/PublishersAddEdit'
|
import PublishersAddEdit from '@/components/PublishersAddEdit'
|
||||||
|
|
||||||
|
@ -59,6 +60,11 @@ export default new Router({
|
||||||
name: 'author-edit',
|
name: 'author-edit',
|
||||||
component: AuthorsAddEdit
|
component: AuthorsAddEdit
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/authors/:id',
|
||||||
|
name: 'author-show',
|
||||||
|
component: AuthorOverview
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/publishers',
|
path: '/publishers',
|
||||||
name: 'publishers',
|
name: 'publishers',
|
||||||
|
|
Loading…
Reference in New Issue