Started implementing edit book

frontend/src/auth/index.js

@@ -27,7 +27,7 @@ export default {
 
         // Redirect if nessecary
         if (redirect) {
-          router.go(redirect)
+          router.push({ name: redirect })
         }
       })
       .catch(e => {

frontend/src/components/Books.vue

@@ -12,9 +12,9 @@
         An error occured.
       </div>
       {{ error.message }}
-      <template v-if="error.response">
-      {{ error.response.Message }}
-      </template>
+      <p v-if="error.response.data">
+      {{ error.response.data.Message }}
+      </p>
     </div>
 
     <div class="ui positive message" v-if="success">
@@ -36,10 +36,6 @@
         Refresh
       </button>
 
-      <pre>
-        {{allStatus}}
-      </pre>
-
       <form id="search">
         <div class="ui icon input">
           <input placeholder="Search for anything..." type="text" v-model="searchQuery">
@@ -83,6 +79,7 @@
 <script>
 import auth from '../auth'
 import {HTTP} from '../http-common'
+import router from '../router'
 
 export default {
   name: 'Home',
@@ -92,7 +89,7 @@ export default {
       booksTitle: 'Books Overview',
       books: [],
       searchQuery: '',
-      gridColumns: ['Title', 'ISBN', 'Year', 'Price', 'Author', 'Publisher', 'Status'],
+      gridColumns: ['Title', 'ISBN', 'Year', 'Price', 'Author', 'Publisher', 'Quantity', 'Status'],
       gridButtons: [
         {
           text: 'Delete',
@@ -158,6 +155,7 @@ export default {
               Price: bs[b].Price + '€',
               Author: '',
               Publisher: bs[b].PublisherFull.Name,
+              Quantity: bs[b].Quantity,
               Status: bs[b].Status
             }
 
@@ -205,7 +203,6 @@ export default {
       opt.action(gridObject)
     },
     deleteBook (obj) {
-      console.log(obj.ID.content, 'delete')
       HTTP.delete('books/' + obj.ID.content)
         .then(response => {
           console.log(response)
@@ -219,7 +216,7 @@ export default {
         })
     },
     editBook (book) {
-      console.log(book, 'edit')
+      router.push({ name: 'book-edit', params: { id: book.ID.content } })
     }
   }
 }

frontend/src/components/BooksAddEdit.vue

@@ -38,6 +38,10 @@
           <label>Year</label>
           <input name="year" placeholder="Year" type="number" min="1800" v-model.number="book.Year">
         </div>
+        <div class="field">
+          <label>Quantity</label>
+          <input placeholder="Quantity" type="number" min="0" v-model.number="book.Quantity">
+        </div>
       </div>
 
       <div class="field" v-if="!addPublisherForm">
@@ -111,12 +115,15 @@
         error: '',
         success: '',
         loading: false,
+        bookID: this.$route.params.id,
+        edit: false,
         book: {
           Title: '',
           Isbn: '',
           Year: (new Date()).getFullYear(),
           Price: null,
           Status: 0,
+          Quantity: 0,
           PublisherFull: {
             ID: 0,
             Name: ''
@@ -133,9 +140,33 @@
       }
     },
     created () {
+      this.loading = true
       this.loadPublishers()
       this.loadAuthors()
       this.loadStatus()
+
+      // Look if we're in edit mode and get the book infos if nessesary
+      if (this.bookID) {
+        HTTP.get('books/' + this.bookID)
+          .then(response => {
+            this.book = response.data
+            this.edit = true
+
+            // Loop through all authors and reverse them
+            let as = this.book.Authors
+
+            for (const i in as) {
+              this.book.Authors[i] = {
+                ID: as[i].ID,
+                Name: as[i].Forename + ' ' + as[i].Lastname
+              }
+            }
+          })
+          .catch(e => {
+            this.error = e
+          })
+      }
+      this.loading = false
     },
     methods: {
       loadPublishers: function () {
@@ -224,16 +255,28 @@
         }
 
         // Finally Send it
-        HTTP.put('books', {book: this.book})
-          .then(response => {
-            this.loading = false
-            console.log(response)
-            this.success = 'The book was successfully inserted!'
-          })
-          .catch(e => {
-            this.loading = false
-            this.error = e
-          })
+        // If we want to newly insert it, make a different request
+        if (this.edit) {
+          HTTP.put('books/' + this.book.ID, {book: this.book})
+            .then(response => {
+              this.loading = false
+              this.success = 'The book was successfully updated!'
+            })
+            .catch(e => {
+              this.loading = false
+              this.error = e
+            })
+        } else { // insert a new book
+          HTTP.put('books', {book: this.book})
+            .then(response => {
+              this.loading = false
+              this.success = 'The book was successfully inserted!'
+            })
+            .catch(e => {
+              this.loading = false
+              this.error = e
+            })
+        }
       }
     }
   }

frontend/src/components/Login.vue

@@ -69,7 +69,7 @@
           password: this.credentials.password
         }
 
-        auth.login(this, credentials, '/home')
+        auth.login(this, credentials, 'home')
       }
     }
   }

frontend/src/router/index.js

@@ -11,22 +11,27 @@ export default new Router({
   routes: [
     {
       path: '/home',
-      name: 'Home',
+      name: 'home',
       component: Home
     },
     {
       path: '/login',
-      name: 'Login',
+      name: 'login',
       component: Login
     },
     {
       path: '/books',
-      name: 'Books',
+      name: 'books',
       component: Books
     },
     {
       path: '/books/add',
-      name: 'Add Book',
+      name: 'add-book',
+      component: BooksAddEdit
+    },
+    {
+      path: '/books/:id/edit',
+      name: 'book-edit',
       component: BooksAddEdit
     }
   ],

routes/routes.go

@@ -86,6 +86,7 @@ func RegisterRoutes(e *echo.Echo) {
 	// Manage Books
 	a.PUT("/books", apiv1.BookAdd)
 	a.DELETE("/books/:id", apiv1.BookDelete)
+	a.POST("/books/:id", apiv1.BookDelete)
 
 	// Manage Authors
 	a.PUT("/authors", apiv1.AuthorAdd)