107 lines
2.8 KiB
Vue
107 lines
2.8 KiB
Vue
<template>
|
|
<div>
|
|
<div class="ui negative message" v-if="error">
|
|
<div class="header">
|
|
An error occured.
|
|
</div>
|
|
{{ error.message }}
|
|
<template v-if="error.response">
|
|
<br/>{{ error.response.data.Message }}
|
|
</template>
|
|
</div>
|
|
|
|
<div class="ui positive message" v-if="success">
|
|
<div class="header">
|
|
Success
|
|
</div>
|
|
{{ success }}
|
|
</div>
|
|
|
|
<form class="ui form" v-bind:class="{ loading: loading }" v-if="!success" @submit.prevent="insertOrUpdateAuthor">
|
|
<div class="field">
|
|
<label>Forename</label>
|
|
<input name="forename" placeholder="Forename" type="text" v-model="author.Forename">
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label>Lastname</label>
|
|
<input name="lastname" placeholder="Lastname" type="text" v-model="author.Lastname" required>
|
|
</div>
|
|
|
|
<button class="ui blue button" type="submit">Submit</button>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {HTTP} from '../http-common'
|
|
|
|
export default {
|
|
name: 'AuthorsAddEdit',
|
|
data () {
|
|
return {
|
|
error: '',
|
|
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.error = e
|
|
})
|
|
}
|
|
this.loading = false
|
|
},
|
|
methods: {
|
|
insertOrUpdateAuthor: function () {
|
|
if (this.author.Lastname === '') {
|
|
this.error = {message: 'Please provide at least a lastname.'}
|
|
} 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
|
|
this.success = 'The author was successfully updated!'
|
|
this.error = ''
|
|
})
|
|
.catch(e => {
|
|
this.loading = false
|
|
this.error = e
|
|
})
|
|
} else { // insert a new author
|
|
HTTP.put('authors', {author: this.author})
|
|
.then(response => {
|
|
this.loading = false
|
|
this.success = 'The author was successfully inserted!'
|
|
this.error = ''
|
|
})
|
|
.catch(e => {
|
|
this.loading = false
|
|
this.error = e
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|