Library/frontend/src/components/AuthorOverview.vue

79 lines
1.9 KiB
Vue

<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>&nbsp;&nbsp;
<span v-lang.general.loading></span>
</div>
<div v-if="!loading">
<router-link :to="{ name: 'author-edit', params: { id: authorID} }" class="ui teal labeled icon button" style="float: right;">
<i class="edit icon"></i>
<span v-lang.general.edit></span>
</router-link>
<div class="ui list">
<div class="item">
<div class="header" v-lang.authors.forename></div>
{{ author.Forename }}
</div>
<div class="item">
<div class="header" v-lang.authors.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: {},
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
// Build the notification text from error response
let err = e.message
if (e.response.data) {
err += '<br/>' + e.response.data.Message
}
// Fire a notification
this.$notify({
type: 'error',
title: this.langGeneral.error,
text: err
})
})
}
}
}
</script>