139 lines
4.0 KiB
Vue
139 lines
4.0 KiB
Vue
<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="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" 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" 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>
|
|
|
|
<script>
|
|
import {HTTP} from '../http-common'
|
|
|
|
export default {
|
|
name: 'BooksAddEdit',
|
|
data () {
|
|
return {
|
|
error: '',
|
|
book: {
|
|
Title: '',
|
|
Isbn: '',
|
|
Year: (new Date()).getFullYear(),
|
|
Price: null,
|
|
Status: 0,
|
|
PublisherFull: {
|
|
ID: 0,
|
|
Name: ''
|
|
},
|
|
Authors: []
|
|
},
|
|
publishers: [],
|
|
authors: [],
|
|
addPublisherForm: false,
|
|
addAuthorForm: false
|
|
}
|
|
},
|
|
created () {
|
|
this.loadPublishers()
|
|
},
|
|
methods: {
|
|
loadPublishers: function () {
|
|
HTTP.get('publishers')
|
|
.then(response => {
|
|
this.publishers = response.data
|
|
})
|
|
.catch(e => {
|
|
this.error = e
|
|
})
|
|
},
|
|
toggleAddPublisher: function () {
|
|
this.addPublisherForm = !this.addPublisherForm
|
|
this.book.PublisherFull = {ID: 0, Name: ''}
|
|
},
|
|
toggleAddAuthor: function () {
|
|
this.addAuthorForm = !this.addAuthorForm
|
|
},
|
|
insertNewBook: function () {
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
|
|
<style>
|
|
.multiselect__input {
|
|
border: none !important;
|
|
margin-top: -0.5rem !important;
|
|
margin-left: -0.5rem !important;
|
|
}
|
|
|
|
.add-publisher-btn, .add-author-btn{
|
|
float: right;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.multiselect, .field input.add-publisher {
|
|
width: 97% !important;
|
|
}
|
|
</style>
|