From a64af87bd4a4e54f821d61a9e434e642124d320a Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Tue, 25 May 2021 18:29:33 -0400
Subject: [PATCH] Add not found route

---
 app/src/modules/insights/routes/dashboard.vue | 31 ++++++++++++++++---
 app/src/modules/insights/routes/not-found.vue | 31 +++++++++++++++++++
 2 files changed, 58 insertions(+), 4 deletions(-)
 create mode 100644 app/src/modules/insights/routes/not-found.vue

diff --git a/app/src/modules/insights/routes/dashboard.vue b/app/src/modules/insights/routes/dashboard.vue
index 3ae406b6a2..d9baad576e 100644
--- a/app/src/modules/insights/routes/dashboard.vue
+++ b/app/src/modules/insights/routes/dashboard.vue
@@ -1,18 +1,41 @@
 <template>
-	<private-view title="Insights">
+	<insights-not-found v-if="!currentDashboard" />
+	<private-view v-else :title="currentDashboard.name">
+		<template #title-outer:prepend>
+			<v-button rounded disabled icon secondary>
+				<v-icon :name="currentDashboard.icon" />
+			</v-button>
+		</template>
+
 		<template #navigation>
 			<insights-navigation />
 		</template>
-		<div>Dashboard</div>
 	</private-view>
 </template>
 
 <script>
 import InsightsNavigation from '../components/navigation.vue';
-import { defineComponent } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
+import { useInsightsStore } from '@/stores';
+import InsightsNotFound from './not-found.vue';
 
 export default defineComponent({
 	name: 'InsightsDashboard',
-	components: { InsightsNavigation },
+	components: { InsightsNotFound, InsightsNavigation },
+	props: {
+		primaryKey: {
+			type: String,
+			required: true,
+		},
+	},
+	setup(props) {
+		const insightsStore = useInsightsStore();
+
+		const currentDashboard = computed(() =>
+			insightsStore.state.dashboards.find((dashboard) => dashboard.id === props.primaryKey)
+		);
+
+		return { currentDashboard };
+	},
 });
 </script>
diff --git a/app/src/modules/insights/routes/not-found.vue b/app/src/modules/insights/routes/not-found.vue
new file mode 100644
index 0000000000..be8030bd5e
--- /dev/null
+++ b/app/src/modules/insights/routes/not-found.vue
@@ -0,0 +1,31 @@
+<template>
+	<private-view :title="$t('insights')">
+		<template #navigation>
+			<insights-navigation />
+		</template>
+
+		<div class="not-found" v-if="!currentDashboard">
+			<v-info :title="$t('page_not_found')" icon="not_interested">
+				{{ $t('page_not_found_body') }}
+			</v-info>
+		</div>
+	</private-view>
+</template>
+
+<script>
+import { defineComponent } from '@vue/composition-api';
+import InsightsNavigation from '../components/navigation.vue';
+
+export default defineComponent({
+	components: { InsightsNavigation },
+});
+</script>
+
+<style scoped>
+.not-found {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 20vh 0;
+}
+</style>