display vue errors and axios errors in top right popover

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>

6 files changed, 90 insertions, 11 deletions

diff --git a/src/App.vue b/src/App.vue
index 2179ae8e6..cd1e3e06d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,13 @@
 <template>
 	<NcContent app-name="news">
+		<div v-if="app.error" id="warning-box">
+			<div>
+				{{ app.error }}
+			</div>
+			<div>
+				<span style="cursor: pointer;padding: 10px;font-weight: bold;" @click="removeError()">X</span>
+			</div>
+		</div>
 		<div id="news-app">
 			<div id="content-display" :class="{ playing: playingItem }">
 				<Sidebar />
@@ -30,6 +38,7 @@
 <script lang="ts">
 
 import Vue from 'vue'
+import { mapState } from 'vuex'
 import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
 import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import Sidebar from './components/Sidebar.vue'
@@ -45,6 +54,7 @@ export default Vue.extend({
 		playingItem() {
 			return this.$store.state.items.playingItem
 		},
+		...mapState(['app']),
 	},
 	async created() {
 		// fetch folders and feeds to build side bar
@@ -64,6 +74,9 @@ export default Vue.extend({
 				videoElements[i].pause()
 			}
 		},
+		removeError() {
+			this.$store.commit(MUTATIONS.SET_ERROR, undefined)
+		},
 	},
 })
 </script>
@@ -79,6 +92,19 @@ export default Vue.extend({
 		width: 100%;
 	}
 
+	#warning-box {
+		position: absolute;
+    right: 35px;
+		top: 15px;
+    z-index: 5000;
+		padding: 5px 10px;
+		background-color: var(--color-main-background);
+		color: var(--color-main-text);
+		box-shadow: 0 0 6px 0 var(--color-box-shadow);
+		border-radius: var(--border-radius);
+		display: flex;
+	}
+
 	#content-display {
 		display: flex;
 		flex-direction: row;
diff --git a/src/components/feed-display/FeedItemDisplay.vue b/src/components/feed-display/FeedItemDisplay.vue
index d1dde278e..8cc23f085 100644
--- a/src/components/feed-display/FeedItemDisplay.vue
+++ b/src/components/feed-display/FeedItemDisplay.vue
@@ -150,15 +150,7 @@ export default Vue.extend({
 		formatDate(epoch: number): string {
 			return new Date(epoch).toLocaleString()
 		},
-		/**
-		 * Returns UTC formatted datetime in format recognized by `datetime` property
-		 *
-		 * @param {number} epoch date value in epoch format
-		 * @return {string} UTC formatted datetime string (in format yyyy-MM-ddTHH:mm:ssZ)
-		 */
-		formatDatetime(epoch: number): string {
-			return new Date(epoch).toISOString()
-		},
+
 		/**
 		 * Retrieve the feed by id number
 		 *
diff --git a/src/main.js b/src/main.js
index 571646471..98a56a743 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,10 +1,11 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Vuex, { Store } from 'vuex'
+import axios from '@nextcloud/axios'
 
 import App from './App.vue'
 import router from './routes'
-import mainStore from './store'
+import mainStore, { MUTATIONS } from './store'
 
 import { Tooltip } from '@nextcloud/vue'
 
@@ -20,6 +21,19 @@ Vue.directive('tooltip', Tooltip)
 
 const store = new Store(mainStore)
 
+axios.interceptors.response(undefined /* onSuccessCallback is intentionally undefined */,
+	// Any status codes that falls outside the range of 2xx cause this function to trigger
+	function(error) {
+
+		store.commit(MUTATIONS.SET_ERROR, error)
+		return Promise.reject(error)
+	},
+)
+
+Vue.config.errorHandler = function(err) {
+	store.commit(MUTATIONS.SET_ERROR, err)
+}
+
 export default new Vue({
 	router,
 	store,
diff --git a/src/store/app.ts b/src/store/app.ts
new file mode 100644
index 000000000..928c57c7d
--- /dev/null
+++ b/src/store/app.ts
@@ -0,0 +1,43 @@
+export const APPLICATION_ACTION_TYPES = {
+	SET_ERROR_MESSAGE: 'SET_ERROR_MESSAGE',
+}
+
+export const APPLICATION_MUTATION_TYPES = {
+	SET_ERROR: 'SET_ERROR',
+}
+
+type AppInfoState = {
+	error?: any;
+}
+
+const state: AppInfoState = {
+	error: undefined,
+}
+
+const getters = {
+	error(state: AppInfoState) {
+		return state.error
+	},
+}
+
+export const actions = {
+	// async [APPLICATION_ACTION_TYPES.SET_ERROR_MESSAGE]({ commit }: ActionParams) {
+
+	// },
+}
+
+export const mutations = {
+	[APPLICATION_MUTATION_TYPES.SET_ERROR](
+		state: AppInfoState,
+		error: any,
+	) {
+		state.error = error
+	},
+}
+
+export default {
+	state,
+	getters,
+	actions,
+	mutations,
+}
diff --git a/src/store/index.ts b/src/store/index.ts
index aee0d7441..34fae2831 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -4,14 +4,17 @@ import feeds, { FEED_ACTION_TYPES } from './feed'
 import folders, { FOLDER_ACTION_TYPES } from './folder'
 import { FOLDER_MUTATION_TYPES, FEED_MUTATION_TYPES, FEED_ITEM_MUTATION_TYPES } from '../types/MutationTypes'
 import items, { FEED_ITEM_ACTION_TYPES, ItemState } from './item'
+import app, { APPLICATION_ACTION_TYPES, APPLICATION_MUTATION_TYPES } from './app'
 
 export const MUTATIONS = {
+	...APPLICATION_MUTATION_TYPES,
 	...FEED_MUTATION_TYPES,
 	...FOLDER_MUTATION_TYPES,
 	...FEED_ITEM_MUTATION_TYPES,
 }
 
 export const ACTIONS = {
+	...APPLICATION_ACTION_TYPES,
 	...FEED_ACTION_TYPES,
 	...FOLDER_ACTION_TYPES,
 	...FEED_ITEM_ACTION_TYPES,
@@ -30,5 +33,6 @@ export default {
 		feeds,
 		folders,
 		items,
+		app,
 	},
 }
diff --git a/templates/part.content.warnings.php b/templates/part.content.warnings.php
index b791de024..5ee0d85ce 100644
--- a/templates/part.content.warnings.php
+++ b/templates/part.content.warnings.php
@@ -3,7 +3,7 @@
         #cron-warning {
             position: absolute;
             right: 30px;
-            top: 40px;
+            top: 120px;
             z-index: 5;
             padding: 5px;
             background-color: var(--color-main-background);