Added notifications + redirect instead of messages on top

frontend/package.json

@@ -17,6 +17,7 @@
     "vue-awesome": "^2.3.4",
     "vue-multilanguage": "^3.0.5",
     "vue-multiselect": "^2.0.6",
+    "vue-notification": "^1.3.4",
     "vue-paginate": "^3.5.1",
     "vue-resource": "^1.3.4",
     "vue-router": "^3.0.1"

frontend/src/App.vue

@@ -20,6 +20,7 @@
     <button @click="language = 'en'">EN</button>
     <button @click="language = 'de'">DE</button>
     <button @click="language = 'fr'">FR</button>
+    <notifications position="bottom left" />
   </div>
 </template>
 

frontend/src/components/AuthorOverview.vue

@@ -7,15 +7,7 @@
       <span v-lang.general.loading></span>
     </div>
 
-    <div class="ui negative message" v-if="error">
+    <div v-if="!loading">
-      <div class="header" v-lang.general.error></div>
-      {{ error.message }}
-      <p v-if="error.response.data">
-        {{ error.response.data.Message }}
-      </p>
-    </div>
-
-    <div v-if="!loading && !error">
 
       <router-link :to="{ name: 'author-edit', params: { id: authorID} }" class="ui teal labeled icon button" style="float: right;">
         <i class="edit icon"></i>
@@ -46,8 +38,6 @@
       return {
         user: auth.user,
         author: {},
-        error: '',
-        success: '',
         authorID: this.$route.params.id
       }
     },
@@ -69,7 +59,18 @@
           })
           .catch(e => {
             this.loading = false
-            this.error = e
+            // Build the notification text from error response
+            let err = e.message
+            if (e.response.data) {
+              err += '<br/>' + e.response.data.Message
+            }
+
+            // Fire a notification
+            this.$notify({
+              type: 'error',
+              title: this.langGeneral.error,
+              text: err
+            })
           })
       }
     }

frontend/src/components/Authors.vue

@@ -7,20 +7,7 @@
       <span v-lang.general.loading></span>
     </div>
 
-    <div class="ui negative message" v-if="error">
+    <div v-if="!loading">
-      <div class="header" v-lang.genral.error></div>
-      {{ error.message }}
-      <p v-if="error.response.data">
-      {{ error.response.data.Message }}
-      </p>
-    </div>
-
-    <div class="ui positive message" v-if="success">
-      <div class="header" v-lang.general.success></div>
-      {{ success }}
-    </div>
-
-    <div v-if="!loading && !error">
 
       <router-link to="/authors/add" class="ui green labeled icon button" style="float: right;">
         <i class="plus icon"></i>
@@ -106,8 +93,6 @@ export default {
       ],
       loading: false,
       paginate: ['authors'],
-      error: '',
-      success: '',
       allStatus: [],
       showModal: false
     }
@@ -144,6 +129,20 @@ export default {
     }
   },
   methods: {
+    errorNotification (e) {
+      // Build the notification text from error response
+      let err = e.message
+      if (e.response.data) {
+        err += '<br/>' + e.response.data.Message
+      }
+
+      // Fire a notification
+      this.$notify({
+        type: 'error',
+        title: this.langGeneral.error,
+        text: err
+      })
+    },
     loadAuthors () {
       this.loading = true
       this.authors = []
@@ -162,11 +161,12 @@ export default {
             // increment dat shit
             i++
           }
+
           this.loading = false
         })
         .catch(e => {
           this.loading = false
-          this.error = e
+          this.errorNotification(e)
         })
     },
     gridBtnClicked (opt, gridObject) {
@@ -180,14 +180,19 @@ export default {
       this.$on('delete-submit', function () {
         HTTP.delete('authors/' + obj.ID.content)
           .then(response => {
-            console.log(response)
             if (response.status === 200 && response.data.Message === 'success') {
-              this.success = this.translate('authors').deleteSuccess
+              // Fire a notification
+              this.$notify({
+                type: 'success',
+                title: this.langGeneral.success,
+                text: this.translate('authors').deleteSuccess
+              })
               this.loadAuthors()
             }
           })
           .catch(e => {
-            this.error = e
+            this.errorNotification(e)
+            this.loadAuthors()
           })
         this.showModal = false
       })

frontend/src/components/AuthorsAddEdit.vue

@@ -1,13 +1,5 @@
 <template>
   <div>
-    <div class="ui negative message" v-if="error">
-      <div class="header" v-lang.general.error></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" v-lang.general.success></div>
       {{ success }}
@@ -31,12 +23,12 @@
 
 <script>
   import {HTTP} from '../http-common'
+  import router from '../router'
 
   export default {
     name: 'AuthorsAddEdit',
     data () {
       return {
-        error: '',
         success: '',
         loading: false,
         authorID: this.$route.params.id,
@@ -58,7 +50,7 @@
             this.edit = true
           })
           .catch(e => {
-            this.error = e
+            this.errorNotification(e)
           })
       }
       this.loading = false
@@ -69,9 +61,27 @@
       }
     },
     methods: {
+      errorNotification (e) {
+        // Build the notification text from error response
+        let err = e.message
+        if (e.response.data) {
+          err += '<br/>' + e.response.data.Message
+        }
+
+        // Fire a notification
+        this.$notify({
+          type: 'error',
+          title: this.langGeneral.error,
+          text: err
+        })
+      },
       insertOrUpdateAuthor: function () {
         if (this.author.Lastname === '') {
-          this.error = {message: this.translate('authors').errorNoTitle}
+          // Fire a notification
+          this.$notify({
+            type: 'warn',
+            text: this.translate('authors').errorNoTitle
+          })
         } else {
           this.loading = true
 
@@ -81,25 +91,38 @@
             HTTP.post('authors/' + this.author.ID, {author: this.author})
               .then(response => {
                 this.loading = false
-                this.success = this.translate('authors').updatedSuccess
+
-                this.error = ''
+                // Fire a notification
+                this.$notify({
+                  type: 'success',
+                  title: this.translate('general').success,
+                  text: this.translate('authors').updatedSuccess
+                })
               })
               .catch(e => {
                 this.loading = false
-                this.error = e
+                this.errorNotification(e)
               })
           } else { // insert a new author
             HTTP.put('authors', {author: this.author})
               .then(response => {
                 this.loading = false
-                this.success = this.translate('authors').insertedSuccess
+
-                this.error = ''
+                // Fire a notification
+                this.$notify({
+                  type: 'success',
+                  title: this.translate('general').success,
+                  text: this.translate('authors').insertedSuccess
+                })
               })
               .catch(e => {
                 this.loading = false
-                this.error = e
+                this.errorNotification(e)
               })
           }
+
+          // Redirect to books list
+          router.push({ name: 'authors' })
         }
       }
     }

frontend/src/components/BookOverview.vue

@@ -7,16 +7,7 @@
       <span v-lang.general.loading></span>
     </div>
 
-    <div class="ui negative message" v-if="error">
+    <div v-if="!loading">
-      <div class="header" v-lang.general.error>
-      </div>
-      {{ error.message }}
-      <p v-if="error.response.data">
-        {{ error.response.data.Message }}
-      </p>
-    </div>
-
-    <div v-if="!loading && !error">
 
       <router-link :to="{ name: 'book-edit', params: { id: bookID} }" class="ui teal labeled icon button" style="float: right;">
         <i class="edit icon"></i>
@@ -71,8 +62,6 @@
       return {
         user: auth.user,
         book: {},
-        error: '',
-        success: '',
         allStatus: [],
         bookID: this.$route.params.id
       }
@@ -86,6 +75,20 @@
       '$route': 'loadBook'
     },
     methods: {
+      errorNotification (e) {
+        // Build the notification text from error response
+        let err = e.message
+        if (e.response.data) {
+          err += '<br/>' + e.response.data.Message
+        }
+
+        // Fire a notification
+        this.$notify({
+          type: 'error',
+          title: this.langGeneral.error,
+          text: err
+        })
+      },
       loadBook () {
         this.loading = true
         this.book = {}
@@ -108,7 +111,7 @@
           })
           .catch(e => {
             this.loading = false
-            this.error = e
+            this.errorNotification(e)
           })
       },
       loadStatus: function () {
@@ -117,7 +120,7 @@
             this.allStatus = response.data
           })
           .catch(e => {
-            this.error = e
+            this.errorNotification(e)
           })
       },
       getStatusByID: function (id) {

frontend/src/components/Books.vue

@@ -7,20 +7,7 @@
       <template v-lang.general.loading></template>
     </div>
 
-    <div class="ui negative message" v-if="error">
+    <div v-if="!loading">
-      <div class="header" v-lang.general.error></div>
-      {{ error.message }}
-      <p v-if="error.response.data">
-      {{ error.response.data.Message }}
-      </p>
-    </div>
-
-    <div class="ui positive message" v-if="success">
-      <div class="header" v-lang.general.success></div>
-      {{ success }}
-    </div>
-
-    <div v-if="!loading && !error">
 
       <router-link to="/books/add" class="ui green labeled icon button" style="float: right;">
         <i class="plus icon"></i>
@@ -107,8 +94,6 @@ export default {
       ],
       loading: false,
       paginate: ['books'],
-      error: '',
-      success: '',
       allStatus: [],
       showModal: false
     }
@@ -160,6 +145,20 @@ export default {
     }
   },
   methods: {
+    errorNotification (e) {
+      // Build the notification text from error response
+      let err = e.message
+      if (e.response.data) {
+        err += '<br/>' + e.response.data.Message
+      }
+
+      // Fire a notification
+      this.$notify({
+        type: 'error',
+        title: this.langGeneral.error,
+        text: err
+      })
+    },
     loadBooks () {
       this.loading = true
       this.books = []
@@ -201,7 +200,7 @@ export default {
         })
         .catch(e => {
           this.loading = false
-          this.error = e
+          this.errorNotification(e)
         })
     },
     loadStatus: function () {
@@ -210,7 +209,7 @@ export default {
           this.allStatus = response.data
         })
         .catch(e => {
-          this.error = e
+          this.errorNotification(e)
         })
     },
     getStatusByID: function (id) {
@@ -234,13 +233,18 @@ export default {
         HTTP.delete('books/' + obj.ID.content)
           .then(response => {
             if (response.status === 200 && response.data.Message === 'success') {
-              this.success = this.langBook.deleteSuccess
+              // Fire a notification
-              this.loadBooks()
+              this.$notify({
+                type: 'success',
+                title: this.langGeneral.success,
+                text: this.langBook.deleteSuccess
+              })
             }
           })
           .catch(e => {
-            this.error = e
+            this.errorNotification(e)
           })
+        this.loadBooks()
         this.showModal = false
       })
     },

frontend/src/components/BooksAddEdit.vue

@@ -1,19 +1,6 @@
 <template>
   <div>
-    <div class="ui negative message" v-if="error">
+    <form class="ui form" :class="{ loading: loading }" @submit.prevent="insertNewBook">
-      <div class="header" v-lang.general.error></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" v-lang.general.success></div>
-      {{ success }}
-    </div>
-
-    <form class="ui form" :class="{ loading: loading }" v-if="!success" @submit.prevent="insertNewBook">
       <div class="field">
         <label v-lang.books.gridColumns.title></label>
         <input name="title" :placeholder="langBooks.gridColumns.title" type="text" v-model="book.Title" required v-focus>
@@ -103,13 +90,12 @@
 
 <script>
   import {HTTP} from '../http-common'
+  import router from '../router'
 
   export default {
     name: 'BooksAddEdit',
     data () {
       return {
-        error: '',
-        success: '',
         loading: false,
         bookID: this.$route.params.id,
         edit: false,
@@ -170,19 +156,33 @@
             }
           })
           .catch(e => {
-            this.error = e
+            this.errorNotification(e)
           })
       }
       this.loading = false
     },
     methods: {
+      errorNotification (e) {
+        // Build the notification text from error response
+        let err = e.message
+        if (e.response.data) {
+          err += '<br/>' + e.response.data.Message
+        }
+
+        // Fire a notification
+        this.$notify({
+          type: 'error',
+          title: this.langGeneral.error,
+          text: err
+        })
+      },
       loadPublishers: function () {
         HTTP.get('publishers')
           .then(response => {
             this.publishers = response.data
           })
           .catch(e => {
-            this.error = e
+            this.errorNotification(e)
           })
       },
       loadAuthors: function () {
@@ -198,7 +198,7 @@
             }
           })
           .catch(e => {
-            this.error = e
+            this.errorNotification(e)
           })
       },
       loadStatus: function () {
@@ -207,7 +207,7 @@
             this.allStatus = response.data
           })
           .catch(e => {
-            this.error = e
+            this.errorNotification(e)
           })
       },
       toggleAddPublisher: function () {
@@ -226,7 +226,11 @@
       },
       insertNewBook: function () {
         if (this.book.Title === '') {
-          this.error = {message: this.translate('books').errorNoTitle}
+          // Fire a notification
+          this.$notify({
+            type: 'warn',
+            text: this.translate('books').errorNoTitle
+          })
         } else {
           this.loading = true
 
@@ -270,25 +274,37 @@
             HTTP.post('books/' + this.book.ID, {book: this.book})
               .then(response => {
                 this.loading = false
-                this.success = this.translate('books').updatedSuccess
+
-                this.error = ''
+                // Fire a notification
+                this.$notify({
+                  type: 'success',
+                  title: this.translate('general').success,
+                  text: this.translate('books').updatedSuccess
+                })
               })
               .catch(e => {
                 this.loading = false
-                this.error = e
+                this.errorNotification(e)
               })
           } else { // insert a new book
             HTTP.put('books', {book: this.book})
               .then(response => {
                 this.loading = false
-                this.success = this.translate('books').insertedSuccess
+                // Fire a notification
-                this.error = ''
+                this.$notify({
+                  type: 'success',
+                  title: this.translate('general').success,
+                  text: this.translate('books').insertedSuccess
+                })
               })
               .catch(e => {
                 this.loading = false
-                this.error = e
+                this.errorNotification(e)
               })
           }
+
+          // Redirect to books list
+          router.push({ name: 'books' })
         }
       }
     }

frontend/src/components/Grid.vue

@@ -72,7 +72,6 @@
       for (const d in data) {
         let ii = 0
         for (const dd in d) {
-          console.log(dd)
           if (dd.content === '') {
             this.data[i][ii] = dd
           } else {

frontend/src/components/PublisherOverview.vue

@@ -7,16 +7,7 @@
       <span v-lang.general.loading></span>
     </div>
 
-    <div class="ui negative message" v-if="error">
+    <div v-if="!loading">
-      <div class="header" v-lang.genral.error></div>
-      {{ error.message }}
-      <p v-if="error.response.data">
-        {{ error.response.data.Message }}
-      </p>
-    </div>
-
-    <div v-if="!loading && !error">
-
       <router-link :to="{ name: 'publisher-edit', params: { id: publisherID} }" class="ui teal labeled icon button" style="float: right;">
         <i class="edit icon"></i>
         <span v-lang.general.edit></span>
@@ -42,8 +33,6 @@
       return {
         user: auth.user,
         publisher: {},
-        error: '',
-        success: '',
         publisherID: this.$route.params.id
       }
     },
@@ -65,7 +54,18 @@
           })
           .catch(e => {
             this.loading = false
-            this.error = e
+            // Build the notification text from error response
+            let err = e.message
+            if (e.response.data) {
+              err += '<br/>' + e.response.data.Message
+            }
+
+            // Fire a notification
+            this.$notify({
+              type: 'error',
+              title: this.langGeneral.error,
+              text: err
+            })
           })
       }
     }

frontend/src/components/Publishers.vue

@@ -7,20 +7,7 @@
       <span v-lang.general.loading></span>
     </div>
 
-    <div class="ui negative message" v-if="error">
+    <div v-if="!loading">
-      <div class="header" v-lang.genral.error></div>
-      {{ error.message }}
-      <p v-if="error.response.data">
-        {{ error.response.data.Message }}
-      </p>
-    </div>
-
-    <div class="ui positive message" v-if="success">
-      <div class="header" v-lang.general.success></div>
-      {{ success }}
-    </div>
-
-    <div v-if="!loading && !error">
 
       <router-link to="/publishers/add" class="ui green labeled icon button" style="float: right;">
         <i class="plus icon"></i>
@@ -106,8 +93,6 @@ export default {
       ],
       loading: false,
       paginate: ['publishers'],
-      error: '',
-      success: '',
       allStatus: [],
       showModal: false
     }
@@ -123,6 +108,20 @@ export default {
     '$route': 'loadPublishers'
   },
   computed: {
+    errorNotification (e) {
+      // Build the notification text from error response
+      let err = e.message
+      if (e.response.data) {
+        err += '<br/>' + e.response.data.Message
+      }
+
+      // Fire a notification
+      this.$notify({
+        type: 'error',
+        title: this.langGeneral.error,
+        text: err
+      })
+    },
     filteredData: function () {
       var filterKey = this.searchQuery && this.searchQuery.toLowerCase()
       var data = this.publishers
@@ -166,7 +165,7 @@ export default {
         })
         .catch(e => {
           this.loading = false
-          this.error = e
+          this.errorNotification(e)
         })
     },
     gridBtnClicked (opt, gridObject) {
@@ -183,12 +182,17 @@ export default {
           .then(response => {
             console.log(response)
             if (response.status === 200 && response.data.Message === 'success') {
-              this.success = this.translate('publishers').deleteSuccess
+              // Fire a notification
+              this.$notify({
+                type: 'success',
+                title: this.langGeneral.success,
+                text: this.translate('publishers').deleteSuccess
+              })
               this.loadPublishers()
             }
           })
           .catch(e => {
-            this.error = e
+            this.errorNotification(e)
           })
         this.showModal = false
       })

frontend/src/components/PublishersAddEdit.vue

@@ -1,13 +1,5 @@
 <template>
   <div>
-    <div class="ui negative message" v-if="error">
-      <div class="header" v-lang.genral.error></div>
-      {{ error.message }}
-      <p v-if="error.response.data">
-        {{ error.response.data.Message }}
-      </p>
-    </div>
-
     <div class="ui positive message" v-if="success">
       <div class="header" v-lang.general.success></div>
       {{ success }}
@@ -25,12 +17,12 @@
 
 <script>
   import {HTTP} from '../http-common'
+  import router from '../router'
 
   export default {
     name: 'PublishersAddEdit',
     data () {
       return {
-        error: '',
         success: '',
         loading: false,
         publisherID: this.$route.params.id,
@@ -51,7 +43,7 @@
             this.edit = true
           })
           .catch(e => {
-            this.error = e
+            this.errorNotification(e)
           })
       }
       this.loading = false
@@ -62,9 +54,28 @@
       }
     },
     methods: {
+      errorNotification (e) {
+        // Build the notification text from error response
+        let err = e.message
+        if (e.response.data) {
+          err += '<br/>' + e.response.data.Message
+        }
+
+        // Fire a notification
+        this.$notify({
+          type: 'error',
+          title: this.langGeneral.error,
+          text: err
+        })
+      },
       insertOrUpdatePublisher: function () {
         if (this.publisher.Lastname === '') {
-          this.error = {message: this.translate('publishers').errorNoName}
+          // Fire a notification
+          this.$notify({
+            type: 'warn',
+            title: this.translate('general').error,
+            text: this.translate('publishers').errorNoName
+          })
         } else {
           this.loading = true
 
@@ -74,25 +85,38 @@
             HTTP.post('publishers/' + this.publisher.ID, {publisher: this.publisher})
               .then(response => {
                 this.loading = false
-                this.success = this.translate('publishers').updatedSuccess
+
-                this.error = ''
+                // Fire a notification
+                this.$notify({
+                  type: 'success',
+                  title: this.translate('general').success,
+                  text: this.translate('publishers').updatedSuccess
+                })
               })
               .catch(e => {
                 this.loading = false
-                this.error = e
+                this.errorNotification(e)
               })
           } else { // insert a new publisher
             HTTP.put('publishers', {publisher: this.publisher})
               .then(response => {
                 this.loading = false
-                this.success = this.translate('publishers').insertedSuccess
+
-                this.error = ''
+                // Fire a notification
+                this.$notify({
+                  type: 'success',
+                  title: this.translate('general').success,
+                  text: this.translate('publishers').insertedSuccess
+                })
               })
               .catch(e => {
                 this.loading = false
-                this.error = e
+                this.errorNotification(e)
               })
           }
+
+          // Redirect to books list
+          router.push({ name: 'publishers' })
         }
       }
     }

frontend/src/lang/en.js

@@ -40,7 +40,7 @@ export default {
     add: 'Add a book',
     deleteHeader: 'Delete this book',
     deleteMsg: 'Are you sure you want to delete this book? <b>This cannot be undone!</b>',
-    deleteSuccess: 'The book was deleted successfully',
+    deleteSuccess: 'The book was deleted successfully.',
     gridColumns: {
       title: 'Title',
       isbn: 'ISBN',

frontend/src/main.js

@@ -28,6 +28,12 @@ import Multiselect from 'vue-multiselect'
 import Multilanguage from 'vue-multilanguage'
 import language from './lang/lang'
 
+// Notifications
+import Notifications from 'vue-notification'
+
+// Notifications
+Vue.use(Notifications)
+
 // Multiselect globally
 Vue.component('multiselect', Multiselect)