Started implementing of inserting new books

frontend/package.json

@@ -12,10 +12,10 @@
   },
   "dependencies": {
     "axios": "^0.17.0",
-    "jquery": "^3.2.1",
     "semantic-ui-css": "^2.2.12",
     "vue": "^2.5.2",
     "vue-awesome": "^2.3.4",
+    "vue-multiselect": "^2.0.6",
     "vue-paginate": "^3.5.1",
     "vue-resource": "^1.3.4",
     "vue-router": "^3.0.1"

frontend/src/components/Books.vue

@@ -186,8 +186,7 @@ export default {
           }
         })
         .catch(e => {
-          // TODO: proper error handling
-          console.log(e)
+          this.error = e
         })
     },
     editBook (book) {

frontend/src/components/BooksAddEdit.vue

@@ -0,0 +1,138 @@
+<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>

frontend/src/components/HelloWorld.vue

@@ -1,53 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <h2>Essential Links</h2>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
-      <br>
-      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
-    </ul>
-    <h2>Ecosystem</h2>
-    <ul>
-      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
-      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
-      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  data () {
-    return {
-      msg: 'Welcome to Your Vue.js App'
-    }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h1, h2 {
-  font-weight: normal;
-}
-
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-
-a {
-  color: #42b983;
-}
-</style>

frontend/src/main.js

@@ -17,6 +17,12 @@ import Icon from 'vue-awesome/components/Icon'
 // Paginate import
 import VuePaginate from 'vue-paginate'
 
+// Multiselect import
+import Multiselect from 'vue-multiselect'
+
+// Multiselect globally
+Vue.component('multiselect', Multiselect)
+
 // Icons setup
 Vue.component('icon', Icon)
 

frontend/src/router/index.js

@@ -3,6 +3,7 @@ import Router from 'vue-router'
 import Home from '@/components/Home'
 import Login from '@/components/Login'
 import Books from '@/components/Books'
+import BooksAddEdit from '@/components/BooksAddEdit'
 
 Vue.use(Router)
 
@@ -22,6 +23,11 @@ export default new Router({
       path: '/books',
       name: 'Books',
       component: Books
+    },
+    {
+      path: '/books/add',
+      name: 'Add Book',
+      component: BooksAddEdit
     }
   ],
   linkActiveClass: 'active'

models/books_add.go

@@ -28,7 +28,7 @@ func AddBook(book Book) (newBook Book, err error) {
 		}
 	}
 
-	_, exists, err = GetPublisherByID(book.Publisher)
+	_, exists, err = GetPublisherByID(publisherid)
 	if err != nil {
 		return Book{}, err
 	}