Finished add new books form
This commit is contained in:
parent
c82068b991
commit
a76f20610a
GPG Key ID:
F40E70337AB24C9B
|
|
@ -1,69 +1,97 @@
|
|||
<template>
|
||||
<form class="ui form">
|
||||
<div class="field">
|
||||
<label>Title</label>
|
||||
<input name="title" placeholder="Title" type="text" v-model="book.Title">
|
||||
</div>
|
||||
<div class="three fields">
|
||||
<div class="field">
|
||||
<label>ISBN</label>
|
||||
<input name="isbn" placeholder="ISBN" type="text" v-model="book.Isbn">
|
||||
<div>
|
||||
<div class="ui negative message" v-if="error">
|
||||
<div class="header">
|
||||
An error occured.
|
||||
</div>
|
||||
{{ error.message }}
|
||||
<template v-if="error.response">
|
||||
{{ error.response.Message }}
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<form class="ui form" v-bind:class="{ loading: loading }">
|
||||
<div class="field">
|
||||
<label>Price</label>
|
||||
<div class="ui right labeled input ">
|
||||
<input name="price" placeholder="Price" type="number" step="0.01" min="0" v-model.number="book.Price">
|
||||
<label class="ui label">€</label>
|
||||
<label>Title</label>
|
||||
<input name="title" placeholder="Title" type="text" v-model="book.Title">
|
||||
</div>
|
||||
<div class="three fields">
|
||||
<div class="field">
|
||||
<label>ISBN</label>
|
||||
<input name="isbn" placeholder="ISBN" type="text" v-model="book.Isbn">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Price</label>
|
||||
<div class="ui right labeled input ">
|
||||
<input name="price" placeholder="Price" type="number" step="0.01" min="0" v-model.number="book.Price">
|
||||
<label class="ui label">€</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Year</label>
|
||||
<input name="year" placeholder="Year" type="number" min="1800" v-model.number="book.Year">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Year</label>
|
||||
<input name="year" placeholder="Year" type="number" min="1800" v-model.number="book.Year">
|
||||
|
||||
<div class="field" v-if="!addPublisherForm">
|
||||
<label>Publisher</label>
|
||||
<a class="ui green icon button add-publisher-btn" @click="toggleAddPublisher()"><i class="plus icon"></i></a>
|
||||
<multiselect
|
||||
v-model="book.PublisherFull"
|
||||
track-by="ID"
|
||||
label="Name"
|
||||
placeholder="Select one"
|
||||
:options="publishers"
|
||||
:searchable="true"
|
||||
:allow-empty="false"
|
||||
class="add-btn-input">
|
||||
</multiselect>
|
||||
</div>
|
||||
<div class="field" v-if="addPublisherForm">
|
||||
<label>Add new Publisher</label>
|
||||
<a class="ui green icon button add-publisher-btn" @click="toggleAddPublisher()"><i class="list icon"></i></a>
|
||||
<input name="name" placeholder="Publisher Name" type="text" v-model="book.PublisherFull.Name" class="add-publisher">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field" v-if="!addPublisherForm">
|
||||
<label>Publisher</label>
|
||||
<a class="ui green icon button add-publisher-btn" @click="toggleAddPublisher()"><i class="plus icon"></i></a>
|
||||
<multiselect
|
||||
v-model="book.PublisherFull"
|
||||
track-by="ID"
|
||||
label="Name"
|
||||
placeholder="Select one"
|
||||
:options="publishers"
|
||||
:searchable="true"
|
||||
:allow-empty="false">
|
||||
</multiselect>
|
||||
</div>
|
||||
<div class="field" v-if="addPublisherForm">
|
||||
<label>Add new Publisher</label>
|
||||
<a class="ui green icon button add-publisher-btn" @click="toggleAddPublisher()"><i class="list icon"></i></a>
|
||||
<input name="name" placeholder="Publisher Name" type="text" v-model="book.PublisherFull.Name" class="add-publisher">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Authors</label>
|
||||
<multiselect
|
||||
v-model="book.Authors"
|
||||
track-by="ID"
|
||||
label="Name"
|
||||
placeholder="Select one or more"
|
||||
:options="authors"
|
||||
:searchable="true"
|
||||
:multiple="true"
|
||||
:allow-empty="false">
|
||||
</multiselect>
|
||||
</div>
|
||||
|
||||
<div class="field" v-if="!addAuthorForm">
|
||||
<label>Authors</label>
|
||||
<a class="ui green icon button add-author-btn" @click="toggleAddAuthor()"><i class="plus icon"></i></a>
|
||||
<multiselect
|
||||
v-model="book.Authors"
|
||||
track-by="ID"
|
||||
label="Name"
|
||||
placeholder="Select one or more"
|
||||
:options="authors"
|
||||
:searchable="true"
|
||||
:multiple="true"
|
||||
:allow-empty="false">
|
||||
</multiselect>
|
||||
</div>
|
||||
<div class="field" v-if="addAuthorForm">
|
||||
<label>Add new Author</label>
|
||||
<a class="ui green icon button add-author-btn" @click="toggleAddAuthor()"><i class="list icon"></i></a>
|
||||
<!-- TODO: insert authors properly -->
|
||||
<input name="name" placeholder="Author Name" type="text" v-model="book.Authors" class="add-publisher">
|
||||
</div>
|
||||
<button class="ui button" type="submit" @click="insertNewBook()">Submit</button>
|
||||
<pre>{{ book }}</pre>
|
||||
</form>
|
||||
<template v-for="(inputModel, index) in addAuthorForm">
|
||||
<div class="field" v-if="addAuthorForm">
|
||||
<label>Add new Author</label>
|
||||
<a class="ui red icon button add-publisher-btn" @click="removeAuthor(index)"><i class="cancel icon"></i></a>
|
||||
<input name="name" placeholder="Author Name" v-model="newAuthors[inputModel.modelName]" type="text" class="add-publisher">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="field">
|
||||
<a class="ui green icon button" @click="addAddAuthor()"><i class="plus icon"></i> Add new Author</a>
|
||||
</div>
|
||||
|
||||
<div class="inline fields">
|
||||
<label>Status</label>
|
||||
<div class="field" v-for="status in allStatus">
|
||||
<div class="ui radio checkbox">
|
||||
<input name="status" :id="status.value" :value="status.value" class="hidden" type="radio" v-model="book.Status"/>
|
||||
<label :for="status.value">{{ status.name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="ui button" type="submit" @click="insertNewBook()">Submit</a>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -74,6 +102,7 @@
|
|||
data () {
|
||||
return {
|
||||
error: '',
|
||||
loading: false,
|
||||
book: {
|
||||
Title: '',
|
||||
Isbn: '',
|
||||
|
|
@ -89,11 +118,28 @@
|
|||
publishers: [],
|
||||
authors: [],
|
||||
addPublisherForm: false,
|
||||
addAuthorForm: false
|
||||
addAuthorForm: [],
|
||||
newAuthors: {},
|
||||
newestAuthor: 0,
|
||||
allStatus: [
|
||||
{
|
||||
name: 'New',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
name: 'Second Hand',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
name: 'Other',
|
||||
value: 3
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadPublishers()
|
||||
this.loadAuthors()
|
||||
},
|
||||
methods: {
|
||||
loadPublishers: function () {
|
||||
|
|
@ -105,15 +151,83 @@
|
|||
this.error = e
|
||||
})
|
||||
},
|
||||
loadAuthors: function () {
|
||||
HTTP.get('authors')
|
||||
.then(response => {
|
||||
let as = response.data
|
||||
|
||||
for (const i in as) {
|
||||
this.authors[i] = {
|
||||
ID: as[i].ID,
|
||||
Name: as[i].Forename + ' ' + as[i].Lastname
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
this.error = e
|
||||
})
|
||||
},
|
||||
toggleAddPublisher: function () {
|
||||
this.addPublisherForm = !this.addPublisherForm
|
||||
this.book.PublisherFull = {ID: 0, Name: ''}
|
||||
},
|
||||
toggleAddAuthor: function () {
|
||||
this.addAuthorForm = !this.addAuthorForm
|
||||
addAddAuthor: function () {
|
||||
this.addAuthorForm.push({
|
||||
modelName: 'newAuthor' + this.newestAuthor
|
||||
})
|
||||
this.newestAuthor++
|
||||
},
|
||||
removeAuthor: function (i) {
|
||||
delete this.newAuthors[this.addAuthorForm[i].modelName]
|
||||
this.addAuthorForm.splice(i, 1)
|
||||
},
|
||||
insertNewBook: function () {
|
||||
this.loading = true
|
||||
|
||||
// Add all newly created authors to it
|
||||
let as = this.newAuthors
|
||||
|
||||
for (const i in as) {
|
||||
this.book.Authors.push({
|
||||
ID: 0,
|
||||
Name: as[i]
|
||||
})
|
||||
}
|
||||
|
||||
// Beautify all Authors aka split the names in forename and lastname
|
||||
for (const i in this.book.Authors) {
|
||||
let author = this.book.Authors[i].Name
|
||||
let firstname = ''
|
||||
let lastname = ''
|
||||
|
||||
// Check if the name contains a space, if so split it up
|
||||
if ((new RegExp(' ')).test(author)) {
|
||||
let split = author.indexOf(' ')
|
||||
let splits = [author.slice(0, split), author.slice(split + 1)]
|
||||
firstname = splits[0]
|
||||
lastname = splits[1]
|
||||
} else {
|
||||
lastname = author
|
||||
}
|
||||
|
||||
// Put it all together
|
||||
this.book.Authors[i] = {
|
||||
ID: this.book.Authors[i].ID,
|
||||
Forename: firstname,
|
||||
Lastname: lastname
|
||||
}
|
||||
}
|
||||
|
||||
// Finally Send it
|
||||
HTTP.put('books', {book: this.book})
|
||||
.then(response => {
|
||||
this.loading = false
|
||||
console.log(response)
|
||||
})
|
||||
.catch(e => {
|
||||
this.loading = false
|
||||
this.error = e
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -127,12 +241,12 @@
|
|||
margin-left: -0.5rem !important;
|
||||
}
|
||||
|
||||
.add-publisher-btn, .add-author-btn{
|
||||
.add-publisher-btn{
|
||||
float: right;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.multiselect, .field input.add-publisher {
|
||||
.add-btn-input, .field input.add-publisher {
|
||||
width: 97% !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue