Add not found route

This commit is contained in:
rijkvanzanten
2021-05-25 18:29:33 -04:00
parent c79b48e08f
commit a64af87bd4
2 changed files with 58 additions and 4 deletions

View File

@@ -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>

View File

@@ -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>