From 742b499d83b151f79677e9559d0b5737643d8f08 Mon Sep 17 00:00:00 2001
From: konrad <k@knt.li>
Date: Thu, 23 Nov 2017 14:18:31 +0100
Subject: [PATCH] Added notifications + redirect instead of messages on top

---
 frontend/package.json                         |  1 +
 frontend/src/App.vue                          |  1 +
 frontend/src/components/AuthorOverview.vue    | 25 +++----
 frontend/src/components/Authors.vue           | 45 ++++++------
 frontend/src/components/AuthorsAddEdit.vue    | 57 ++++++++++-----
 frontend/src/components/BookOverview.vue      | 31 ++++----
 frontend/src/components/Books.vue             | 46 ++++++------
 frontend/src/components/BooksAddEdit.vue      | 70 ++++++++++++-------
 frontend/src/components/Grid.vue              |  1 -
 frontend/src/components/PublisherOverview.vue | 26 +++----
 frontend/src/components/Publishers.vue        | 42 ++++++-----
 frontend/src/components/PublishersAddEdit.vue | 58 ++++++++++-----
 frontend/src/lang/en.js                       |  2 +-
 frontend/src/main.js                          |  6 ++
 14 files changed, 249 insertions(+), 162 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index d2a55c8..b02b3b0 100644
--- a/frontend/package.json
+++ b/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"
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 7426bd7..e6fc6d3 100644
--- a/frontend/src/App.vue
+++ b/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>
 
diff --git a/frontend/src/components/AuthorOverview.vue b/frontend/src/components/AuthorOverview.vue
index fb684fd..5684d04 100644
--- a/frontend/src/components/AuthorOverview.vue
+++ b/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 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">
+    <div v-if="!loading">
 
       <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
+            })
           })
       }
     }
diff --git a/frontend/src/components/Authors.vue b/frontend/src/components/Authors.vue
index c284aad..8be307f 100644
--- a/frontend/src/components/Authors.vue
+++ b/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 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">
+    <div v-if="!loading">
 
       <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
       })
diff --git a/frontend/src/components/AuthorsAddEdit.vue b/frontend/src/components/AuthorsAddEdit.vue
index 1259ee6..a1ce65e 100644
--- a/frontend/src/components/AuthorsAddEdit.vue
+++ b/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' })
         }
       }
     }
diff --git a/frontend/src/components/BookOverview.vue b/frontend/src/components/BookOverview.vue
index a03274a..02326f7 100644
--- a/frontend/src/components/BookOverview.vue
+++ b/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 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">
+    <div v-if="!loading">
 
       <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) {
diff --git a/frontend/src/components/Books.vue b/frontend/src/components/Books.vue
index e457303..3d2a639 100644
--- a/frontend/src/components/Books.vue
+++ b/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 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">
+    <div v-if="!loading">
 
       <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
-              this.loadBooks()
+              // Fire a notification
+              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
       })
     },
diff --git a/frontend/src/components/BooksAddEdit.vue b/frontend/src/components/BooksAddEdit.vue
index 7459da8..5e0e4a5 100644
--- a/frontend/src/components/BooksAddEdit.vue
+++ b/frontend/src/components/BooksAddEdit.vue
@@ -1,19 +1,6 @@
 <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 }}
-    </div>
-
-    <form class="ui form" :class="{ loading: loading }" v-if="!success" @submit.prevent="insertNewBook">
+    <form class="ui form" :class="{ loading: loading }" @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
-                this.error = ''
+                // Fire a notification
+                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' })
         }
       }
     }
diff --git a/frontend/src/components/Grid.vue b/frontend/src/components/Grid.vue
index 1247c8b..a9be26c 100644
--- a/frontend/src/components/Grid.vue
+++ b/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 {
diff --git a/frontend/src/components/PublisherOverview.vue b/frontend/src/components/PublisherOverview.vue
index 83461ec..88e0bcc 100644
--- a/frontend/src/components/PublisherOverview.vue
+++ b/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 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">
-
+    <div v-if="!loading">
       <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
+            })
           })
       }
     }
diff --git a/frontend/src/components/Publishers.vue b/frontend/src/components/Publishers.vue
index 8ea8601..a2a0771 100644
--- a/frontend/src/components/Publishers.vue
+++ b/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 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">
+    <div v-if="!loading">
 
       <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
       })
diff --git a/frontend/src/components/PublishersAddEdit.vue b/frontend/src/components/PublishersAddEdit.vue
index 941ae41..fe02351 100644
--- a/frontend/src/components/PublishersAddEdit.vue
+++ b/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' })
         }
       }
     }
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index ef40f46..1c1af90 100644
--- a/frontend/src/lang/en.js
+++ b/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',
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 25b68e7..9915412 100644
--- a/frontend/src/main.js
+++ b/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)