show error messages in ui for nonexistent context, table, view

Signed-off-by: silverkszlo <paguaro@posteo.eu>

Author: silversledge

src/pages/Context.vue

@@ -5,7 +5,13 @@
 <template>
 	<div class="row">
 		<div v-if="loading" class="icon-loading" />
-		<div v-if="!loading && context">
+
+		<div v-else-if="errorMessage" class="error-container">
+			<IconTables :size="64" style="margin-bottom: 1rem;" />
+			<p>{{ errorMessage }}</p>
+		</div>
+
+		<div v-else>
 			<div class="content context">
 				<div class="row first-row">
 					<h1 class="context__title" data-cy="context-title">
@@ -50,11 +56,13 @@ import exportTableMixin from '../shared/components/ncTable/mixins/exportTableMix
 import svgHelper from '../shared/components/ncIconPicker/mixins/svgHelper.js'
 import { useTablesStore } from '../store/store.js'
 import { useDataStore } from '../store/data.js'
+import IconTables from '../shared/assets/icons/IconTables.vue'
 
 export default {
 	components: {
 		MainModals,
 		NcIconSvgWrapper,
+		IconTables,
 		TableWrapper,
 		CustomView,
 	},
@@ -73,6 +81,7 @@ export default {
 			viewSetting: {},
 			context: null,
 			contextResources: [],
+			errorMessage: null,
 		}
 	},
 
@@ -146,49 +155,66 @@ export default {
 				return
 			}
 			this.loading = true
-			this.icon = await this.getContextIcon(this.activeContext.iconName)
 			this.contextResources = []
-			await this.loadContext({ id: this.activeContextId })
-			const index = this.contexts.findIndex(c => parseInt(c.id) === parseInt(this.activeContextId))
-			this.context = this.contexts[index]
 
-			if (this.context && this.context.nodes) {
-				for (const [, node] of Object.entries(this.context.nodes)) {
-					const nodeType = parseInt(node.node_type)
-					if (nodeType === NODE_TYPE_TABLE) {
-						const table = this.tables.find(table => table.id === node.node_id)
-						if (table) {
-							await this.loadColumnsFromBE({
-								view: null,
-								tableId: table.id,
-							})
-							await this.loadRowsFromBE({
-								viewId: null,
-								tableId: table.id,
-							})
-							table.key = (table.id).toString()
-							table.isView = false
-							this.contextResources.push(table)
-						}
+			try {
+				await this.loadContext({ id: this.activeContextId })
+				const index = this.contexts.findIndex(c => parseInt(c.id) === parseInt(this.activeContextId))
+				this.context = this.contexts[index]
+
+				if (!this.context) {
+					this.errorMessage = t('tables', 'This application could not be found')
+					return
+				}
 
-					} else if (nodeType === NODE_TYPE_VIEW) {
-						const view = this.views.find(view => view.id === node.node_id)
-						if (view) {
-							await this.loadColumnsFromBE({
-								view,
-							})
-							await this.loadRowsFromBE({
-								viewId: view.id,
-								tableId: view.tableId,
-							})
-							view.key = 'view-' + (view.id).toString()
-							view.isView = true
-							this.contextResources.push(view)
+				this.icon = await this.getContextIcon(this.activeContext.iconName)
+
+				if (this.context && this.context.nodes) {
+					for (const [, node] of Object.entries(this.context.nodes)) {
+						const nodeType = parseInt(node.node_type)
+						if (nodeType === NODE_TYPE_TABLE) {
+							const table = this.tables.find(table => table.id === node.node_id)
+							if (table) {
+								await this.loadColumnsFromBE({
+									view: null,
+									tableId: table.id,
+								})
+								await this.loadRowsFromBE({
+									viewId: null,
+									tableId: table.id,
+								})
+								table.key = (table.id).toString()
+								table.isView = false
+								this.contextResources.push(table)
+							}
+
+						} else if (nodeType === NODE_TYPE_VIEW) {
+							const view = this.views.find(view => view.id === node.node_id)
+							if (view) {
+								await this.loadColumnsFromBE({
+									view,
+								})
+								await this.loadRowsFromBE({
+									viewId: view.id,
+									tableId: view.tableId,
+								})
+								view.key = 'view-' + (view.id).toString()
+								view.isView = true
+								this.contextResources.push(view)
+							}
 						}
 					}
 				}
+			} catch (e) {
+				if (e.message === 'NOT_FOUND') {
+					this.errorMessage = t('tables', 'This application could not be found')
+				} else {
+					this.errorMessage = t('tables', 'An error occurred while loading the application')
+					console.error(e)
+				}
+			} finally {
+				this.loading = false
 			}
-			this.loading = false
 		},
 		createColumn(isView, element) {
 			emit('tables:column:create', { isView, element })
@@ -235,4 +261,24 @@ export default {
 		padding-left: 0px;
 	}
 }
+
+.error-container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	padding: 2rem;
+	height: 100dvh;
+	min-height: 100%;
+	color: var(--color-text);
+	opacity: 0.6;
+
+	p {
+		font-size: clamp(1.2rem, 4vw, 2rem);
+		font-weight: 600;
+		max-width: 90%;
+		word-wrap: break-word;
+	}
+}
 </style>

src/pages/Table.vue

@@ -4,42 +4,83 @@
 -->
 <template>
 	<div class="main-table-view">
-		<MainWrapper :element="activeTable" :is-view="false" />
-		<MainModals />
+		<div v-if="errorMessage" class="error-container">
+			<IconTables :size="64" style="margin-bottom: 1rem;" />
+			<p>{{ errorMessage }}</p>
+		</div>
+
+		<div v-else-if="!activeTable">
+			<div class="icon-loading" />
+		</div>
+
+		<div v-else>
+			<MainWrapper :element="activeTable" :is-view="false" />
+			<MainModals />
+		</div>
 	</div>
 </template>
 
 <script>
-import { mapState } from 'pinia'
+import { mapState, mapActions } from 'pinia'
 import { useTablesStore } from '../store/store.js'
 import MainWrapper from '../modules/main/sections/MainWrapper.vue'
 import MainModals from '../modules/modals/Modals.vue'
+import IconTables from '../shared/assets/icons/IconTables.vue'
 
 export default {
 	components: {
 		MainWrapper,
 		MainModals,
+		IconTables,
+	},
+
+	data() {
+		return {
+			errorMessage: null,
+		}
 	},
 
 	computed: {
 		...mapState(useTablesStore, ['activeTableId', 'activeTable']),
 	},
 
 	watch: {
-		activeTableId() {
-			if (this.activeTableId && !this.activeTable) {
-				// table does not exists, go to startpage
-				this.$router.push('/').catch(err => err)
-			}
+		'$route.params.tableId': {
+			immediate: true,
+			handler() {
+				this.errorMessage = null // reset previous error
+				this.checkTable()
+			},
 		},
-		activeTable() {
-			if (this.activeTableId && !this.activeTable) {
-				// table does not exists, go to startpage
-				this.$router.push('/').catch(err => err)
+	},
+
+	methods: {
+		...mapActions(useTablesStore, ['loadContextTable', 'setActiveTableId']),
+
+		async checkTable() {
+			const id = this.activeTableId || this.$route.params.tableId
+			if (!id) return
+
+			try {
+				if (!this.activeTableId) {
+					this.setActiveTableId(parseInt(id))
+				}
+
+				if (!this.activeTable) {
+					await this.loadContextTable({ id })
+				}
+			} catch (e) {
+				if (e.message === 'NOT_FOUND') {
+					this.errorMessage = t('tables', 'This table could not be found')
+				} else {
+					this.errorMessage = t('tables', 'An error occurred while loading the table')
+					console.error(e)
+				}
 			}
 		},
 	},
 }
+
 </script>
 <style lang="scss">
 .main-table-view {
@@ -52,6 +93,26 @@ export default {
 	margin: 5mm;
 }
 
+.error-container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	padding: 2rem;
+	height: 100dvh;
+	min-height: 100%;
+	color: var(--color-text);
+	opacity: 0.6;
+
+	p {
+		font-size: clamp(1.2rem, 4vw, 2rem);
+		font-weight: 600;
+		max-width: 90%;
+		word-wrap: break-word;
+	}
+}
+
 @media print {
 	html, body {
 		background: var(--color-main-background, white) !important;

src/pages/View.vue

@@ -4,33 +4,78 @@
 -->
 <template>
 	<div class="main-view-view">
-		<MainWrapper :element="activeView" :is-view="true" />
-		<MainModals />
+		<div v-if="!activeView && errorMessage" class="error-container">
+			<IconTables :size="64" style="margin-bottom: 1rem;" />
+			<p>{{ errorMessage }}</p>
+		</div>
+
+		<div v-else-if="!activeView">
+			<div class="icon-loading" />
+		</div>
+
+		<div v-else>
+			<MainWrapper :element="activeView" :is-view="true" />
+			<MainModals />
+		</div>
 	</div>
 </template>
 
 <script>
-import { mapState } from 'pinia'
+import { mapState, mapActions } from 'pinia'
 import { useTablesStore } from '../store/store.js'
 import MainWrapper from '../modules/main/sections/MainWrapper.vue'
 import MainModals from '../modules/modals/Modals.vue'
+import IconTables from '../shared/assets/icons/IconTables.vue'
 
 export default {
 
 	components: {
 		MainWrapper,
 		MainModals,
+		IconTables,
+	},
+
+	data() {
+		return {
+			errorMessage: null,
+		}
 	},
 
 	computed: {
 		...mapState(useTablesStore, ['activeViewId', 'activeView']),
 	},
 
 	watch: {
-		activeViewId() {
-			if (this.activeViewId && !this.activeView) {
-				// view does not exist, go to startpage
-				this.$router.push('/').catch(err => err)
+		'$route.params.viewId': {
+			immediate: true,
+			handler() {
+				this.errorMessage = null
+				this.checkView()
+			},
+		},
+	},
+
+	methods: {
+		...mapActions(useTablesStore, ['setActiveViewId', 'loadContextView']),
+		async checkView() {
+			const id = this.activeViewId || this.$route.params.viewId
+			if (!id) return
+
+			try {
+				if (!this.activeViewId) {
+					this.setActiveViewId(parseInt(id))
+				}
+
+				if (!this.activeView) {
+					await this.loadContextView({ id })
+				}
+			} catch (e) {
+				if (e.message === 'NOT_FOUND') {
+					this.errorMessage = t('tables', 'This view could not be found')
+				} else {
+					this.errorMessage = t('tables', 'An error occurred while loading the view')
+					console.error(e)
+				}
 			}
 		},
 	},
@@ -40,5 +85,25 @@ export default {
 .main-view-view {
 	width: max-content;
 	min-width: var(--app-content-width, 100%);
+
+.error-container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	padding: 2rem;
+	height: 100dvh;
+	min-height: 100%;
+	color: var(--color-text);
+	opacity: 0.6;
+
+	p {
+		font-size: clamp(1.2rem, 4vw, 2rem);
+		font-weight: 600;
+		max-width: 90%;
+		word-wrap: break-word;
+	}
+}
 }
 </style>