Added better notification handling

package-lock.json

@@ -1205,18 +1205,6 @@
         "long": "^3.2.0"
       }
     },
-    "@websanova/vue-dot": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@websanova/vue-dot/-/vue-dot-0.1.1.tgz",
-      "integrity": "sha512-xOroPXFJPs8HpGWHgX4yAk7y7Fce+w7omnGUrzowMI9P5JWTFftE1uBXA5Pm+wdp8nK9E1vgV7gWWrh8llohNA==",
-      "dev": true
-    },
-    "@websanova/vue-env": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/@websanova/vue-env/-/vue-env-0.6.2.tgz",
-      "integrity": "sha512-ExigiAGJlr7C+U0Y2Y3MmCQ7lJIeMvAjnkzJ1b7X9xBTTUyJQ7M8ReLVZJREZcZx2+NGurpLJE/wJQgBpmn2XQ==",
-      "dev": true
-    },
     "abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -4031,12 +4019,6 @@
         "is-obj": "^1.0.0"
       }
     },
-    "dotenv": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-6.0.0.tgz",
-      "integrity": "sha512-FlWbnhgjtwD+uNLUGHbMykMOYQaTivdHEmYwAKFjn6GKe/CqY0fNae93ZHTd20snh9ZLr8mTzIL9m0APQ1pjQg==",
-      "dev": true
-    },
     "duplexer": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
@@ -12491,7 +12473,8 @@
     "vue-notification": {
       "version": "1.3.13",
       "resolved": "https://registry.npmjs.org/vue-notification/-/vue-notification-1.3.13.tgz",
-      "integrity": "sha512-GBCpsd+usRF2EhLWl2/rzNWErYnlo+HoKV7G0LL6c/Iy2eo2ikpwVXlDAUepOQaeq0hJoDu0oyUfhKBRL1AosA=="
+      "integrity": "sha512-GBCpsd+usRF2EhLWl2/rzNWErYnlo+HoKV7G0LL6c/Iy2eo2ikpwVXlDAUepOQaeq0hJoDu0oyUfhKBRL1AosA==",
+      "dev": true
     },
     "vue-router": {
       "version": "3.0.1",

package.json

@@ -9,8 +9,7 @@
   },
   "dependencies": {
     "bulma": "^0.7.1",
-    "vue": "^2.5.17",
+    "vue": "^2.5.17"
-    "vue-notification": "^1.3.13"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.0.1",
@@ -19,6 +18,7 @@
     "axios": "^0.18.0",
     "node-sass": "^4.9.3",
     "sass-loader": "^7.1.0",
+    "vue-notification": "^1.3.13",
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.5.17"
   },

src/App.vue

@@ -33,12 +33,14 @@
 				<router-view/>
 			</div>
 		</div>
+		<notifications position="bottom left" />
 	</div>
 </template>
 
 <script>
     import auth from './auth'
     import {HTTP} from './http-common'
+	import message from './message'
 
     export default {
         name: 'app',
@@ -78,20 +80,20 @@
                                     this.$set(this.namespaces[n], 'lists', response.data)
                                 })
                                 .catch(e => {
-                                    this.loading = false
+                                    this.handleError(e)
-                                    // eslint-disable-next-line
-                                    console.log(e)
                                 })
                         }
 
                         this.loading = false
                     })
                     .catch(e => {
-                        this.loading = false
+                        this.handleError(e)
-                        // eslint-disable-next-line
-                        console.log(e)
                     })
             },
+            handleError(e) {
+                this.loading = false
+                message.error(e, this)
+            }
         },
     }
 </script>

src/main.js

@@ -7,6 +7,10 @@ import '../node_modules/bulma/bulma.sass'
 
 Vue.config.productionTip = false
 
+// Notifications
+import Notifications from 'vue-notification'
+Vue.use(Notifications)
+
 // Check the user's auth status when the app starts
 auth.checkAuth()
 

src/message/index.js

@@ -0,0 +1,16 @@
+export default {
+    error(e, context) {
+        // Build the notification text from error response
+        let err = e.message
+        if (e.response && e.response.data && e.response.data.message) {
+            err += '<br/>' + e.response.data.message
+        }
+
+        // Fire a notification
+        context.$notify({
+            type: 'error',
+            title: 'Error',
+            text: err
+        })
+    }
+}