Render insights overview page

api/src/database/migrations/20210525A-add-insights.ts

@@ -5,6 +5,7 @@ export async function up(knex: Knex): Promise<void> {
 		table.uuid('id').primary();
 		table.string('name');
 		table.string('icon', 30);
+		table.text('note');
 		table.timestamp('date_created').defaultTo(knex.fn.now());
 		table.uuid('user_created').references('id').inTable('directus_users').onDelete('SET NULL');
 	});
@@ -28,6 +29,6 @@ export async function up(knex: Knex): Promise<void> {
 }
 
 export async function down(knex: Knex): Promise<void> {
-	await knex.schema.dropTable('directus_dashboards');
 	await knex.schema.dropTable('directus_panels');
+	await knex.schema.dropTable('directus_dashboards');
 }

app/src/lang/translations/en-US.yaml

@@ -540,6 +540,11 @@ toggle: Toggle
 icon_on: Icon On
 icon_off: Icon Off
 label: Label
+insights: Insights
+dashboard: Dashboard
+panel: Panel
+no_dashboards: No Dashboards
+no_dashboards_copy: You don’t have any Dashboards yet.
 image_url: Image Url
 alt_text: Alternative Text
 media: Media

app/src/modules/insights/index.ts

@@ -0,0 +1,34 @@
+import { defineModule } from '@/modules/define';
+import InsightsOverview from './routes/overview.vue';
+import InsightsDashboard from './routes/dashboard.vue';
+
+export default defineModule({
+	id: 'insights',
+	name: '$t:insights',
+	icon: 'dashboard',
+	routes: [
+		{
+			name: 'insights-overview',
+			path: '/',
+			component: InsightsOverview,
+		},
+		{
+			name: 'insights-dashboard',
+			path: '/:primaryKey',
+			component: InsightsDashboard,
+			props: true,
+		},
+	],
+	order: 30,
+	preRegisterCheck(user, permissions) {
+		const admin = user.role.admin_access;
+
+		if (admin) return true;
+
+		const permission = permissions.find(
+			(permission) => permission.collection === 'directus_dashboards' && permission.action === 'read'
+		);
+
+		return !!permission;
+	},
+});

app/src/modules/insights/routes/dashboard.vue

@@ -0,0 +1,5 @@
+<template>
+	<private-view title="Insights">
+		<div>Dashboard</div>
+	</private-view>
+</template>

app/src/modules/insights/routes/overview.vue

@@ -0,0 +1,78 @@
+<template>
+	<private-view :title="$t('insights')">
+		<template #title-outer:prepend>
+			<v-button rounded disabled icon secondary>
+				<v-icon name="dashboard" />
+			</v-button>
+		</template>
+
+		<v-table
+			v-if="dashboards.length > 0"
+			:headers.sync="tableHeaders"
+			:items="dashboards"
+			show-resize
+			fixed-header
+			@click:row="navigateToDashboard"
+		>
+			<template #item.icon="{ item }">
+				<v-icon class="icon" :name="item.icon" />
+			</template>
+		</v-table>
+
+		<v-info icon="dashboard" :title="$t('no_dashboards')" v-else center>
+			{{ $t('no_dashboards_copy') }}
+		</v-info>
+	</private-view>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from '@vue/composition-api';
+import { useInsightsStore, usePermissionsStore } from '@/stores';
+import i18n from '@/lang';
+import { Dashboard } from '@/types';
+import router from '@/router';
+
+export default defineComponent({
+	name: 'InsightsOverview',
+	setup() {
+		const insightsStore = useInsightsStore();
+		const permissionsStore = usePermissionsStore();
+
+		const createAllowed = computed<boolean>(() => {
+			return permissionsStore.hasPermission('directus_dashboards', 'create');
+		});
+
+		const tableHeaders = [
+			{
+				text: '',
+				value: 'icon',
+				width: 42,
+				sortable: false,
+			},
+			{
+				text: i18n.t('name'),
+				value: 'name',
+				width: 240,
+			},
+			{
+				text: i18n.t('note'),
+				value: 'note',
+				width: 360,
+			},
+		];
+
+		return { dashboards: insightsStore.state.dashboards, createAllowed, tableHeaders, navigateToDashboard };
+
+		function navigateToDashboard(dashboard: Dashboard) {
+			router.push(`/insights/${dashboard.id}`);
+		}
+	},
+});
+</script>
+
+<style scoped>
+.v-table {
+	padding: var(--content-padding);
+	padding-top: 0;
+}
+</style>

app/src/stores/insights.ts

@@ -9,7 +9,10 @@ export const useInsightsStore = createStore({
 	}),
 	actions: {
 		async hydrate() {
-			const response = await api.get('/dashboards', { params: { limit: -1, fields: ['*', 'panels.*'] } });
+			const response = await api.get('/dashboards', {
+				params: { limit: -1, fields: ['*', 'panels.*'], sort: ['name'] },
+			});
+
 			this.state.dashboards = response.data.data;
 		},
 		dehydrate() {

app/src/stores/permissions.ts

@@ -47,5 +47,10 @@ export const usePermissionsStore = createStore({
 				) || null
 			);
 		},
+		hasPermission(collection: string, action: Permission['action']) {
+			const userStore = useUserStore();
+			if (userStore.state.currentUser?.role?.admin_access === true) return true;
+			return !!this.getPermissionsForUser(collection, action);
+		},
 	},
 });