Library/frontend/src/components/AuthorsAddEdit.vue

131 lines
3.6 KiB
Vue

<template>
<div>
<div class="ui positive message" v-if="success">
<div class="header" v-lang.general.success></div>
{{ success }}
</div>
<form class="ui form" v-bind:class="{ loading: loading }" v-if="!success" @submit.prevent="insertOrUpdateAuthor">
<div class="field">
<label v-lang.authors.forename></label>
<input name="forename" :placeholder="langAuthors.forename" type="text" v-model="author.forename" v-focus>
</div>
<div class="field">
<label v-lang.authors.lastname></label>
<input name="lastname" :placeholder="langAuthors.lastname" type="text" v-model="author.lastname" required>
</div>
<button class="ui blue button" type="submit" v-lang.general.submit></button>
</form>
</div>
</template>
<script>
import {HTTP} from '../http-common'
import router from '../router'
export default {
name: 'AuthorsAddEdit',
data () {
return {
success: '',
loading: false,
authorid: this.$route.params.id,
edit: false,
author: {
forename: '',
lastname: ''
}
}
},
created () {
this.loading = true
// Look if we're in edit mode and get the author infos if nessesary
if (this.authorid) {
HTTP.get('authors/' + this.authorid)
.then(response => {
this.author = response.data
this.edit = true
})
.catch(e => {
this.errorNotification(e)
})
}
this.loading = false
},
computed: {
langAuthors () {
return this.translate('authors')
}
},
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
})
},
insertOrUpdateAuthor: function () {
if (this.author.lastname === '') {
// Fire a notification
this.$notify({
type: 'warn',
text: this.translate('authors').errorNoTitle
})
} else {
this.loading = true
// Finally Send it
// If we want to newly insert it, make a different request
if (this.edit) {
HTTP.post('authors/' + this.author.id, {author: this.author})
.then(response => {
this.loading = false
// Fire a notification
this.$notify({
type: 'success',
title: this.translate('general').success,
text: this.translate('authors').updatedSuccess
})
})
.catch(e => {
this.loading = false
this.errorNotification(e)
})
} else { // insert a new author
HTTP.put('authors', {author: this.author})
.then(response => {
this.loading = false
// Fire a notification
this.$notify({
type: 'success',
title: this.translate('general').success,
text: this.translate('authors').insertedSuccess
})
})
.catch(e => {
this.loading = false
this.errorNotification(e)
})
}
// Redirect to books list
router.push({ name: 'authors' })
}
}
}
}
</script>