Add panels as extension type

app/src/modules/insights/index.ts

@@ -1,6 +1,7 @@
 import { defineModule } from '@/modules/define';
 import InsightsOverview from './routes/overview.vue';
 import InsightsDashboard from './routes/dashboard.vue';
+import InsightsPanelConfiguration from './routes/panel-configuration.vue';
 
 export default defineModule({
 	id: 'insights',
@@ -17,6 +18,16 @@ export default defineModule({
 			path: '/:primaryKey',
 			component: InsightsDashboard,
 			props: true,
+			children: [
+				{
+					name: 'panel-detail',
+					path: ':panelKey',
+					props: true,
+					components: {
+						detail: InsightsPanelConfiguration,
+					},
+				},
+			],
 		},
 	],
 	order: 30,

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

@@ -8,6 +8,10 @@
 		</template>
 
 		<template #actions>
+			<v-button v-if="editMode" rounded icon outlined :to="`/insights/${currentDashboard.id}/panel/+`">
+				<v-icon name="add" />
+			</v-button>
+
 			<v-button rounded icon @click="editMode = !editMode">
 				<v-icon :name="editMode ? 'check' : 'edit'" />
 			</v-button>
@@ -17,7 +21,11 @@
 			<insights-navigation />
 		</template>
 
-		<div class="workspace" :class="{ editing: editMode }"></div>
+		<div class="workspace" :class="{ editing: editMode }">
+			<!-- <div class="dummy" /> -->
+		</div>
+
+		<router-view name="detail" :dashboard-key="primaryKey" />
 	</private-view>
 </template>
 
@@ -44,7 +52,13 @@ export default defineComponent({
 			insightsStore.state.dashboards.find((dashboard) => dashboard.id === props.primaryKey)
 		);
 
-		return { currentDashboard, editMode };
+		const stagedPanels = ref([]);
+
+		const panels = computed(() => {
+			return currentDashboard.value?.panels || [];
+		});
+
+		return { currentDashboard, editMode, panels };
 	},
 });
 </script>
@@ -61,6 +75,10 @@ export default defineComponent({
 	overflow: visible;
 }
 
+.workspace > * {
+	z-index: 2;
+}
+
 .workspace::before {
 	position: absolute;
 	top: -4px;
@@ -68,7 +86,7 @@ export default defineComponent({
 	display: block;
 	width: calc(100% + 8px);
 	height: calc(100% + 8px);
-	background-image: radial-gradient(#efefef 25%, transparent 25%);
+	background-image: radial-gradient(#efefef 20%, transparent 20%);
 	background-position: -6px -6px;
 	background-size: 20px 20px;
 	opacity: 0;
@@ -80,4 +98,17 @@ export default defineComponent({
 .workspace.editing::before {
 	opacity: 1;
 }
+
+/* .dummy {
+	--pos-x: 5;
+	--pos-y: 5;
+	--width: 5;
+	--height: 5;
+
+	display: block;
+	grid-row: var(--pos-y) / span var(--height);
+	grid-column: var(--pos-x) / span var(--width);
+	background-color: var(--primary);
+	border-radius: var(--border-radius);
+} */
 </style>

app/src/modules/insights/routes/panel-configuration.vue

@@ -0,0 +1,80 @@
+<template>
+	<v-drawer active :title="values.name || $t('panel')">
+		<div class="content">
+			<v-fancy-select class="select" :items="selectItems" v-model="values.type" />
+		</div>
+	</v-drawer>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from '@vue/composition-api';
+import { useInsightsStore } from '@/stores';
+import { getPanels } from '@/panels';
+import { FancySelectItem } from '@/components/v-fancy-select/types';
+
+export default defineComponent({
+	name: 'PanelConfiguration',
+	props: {
+		primaryKey: {
+			type: String,
+			default: '+',
+		},
+		dashboardKey: {
+			type: String,
+			required: true,
+		},
+	},
+	setup(props) {
+		const { panels } = getPanels();
+
+		const insightsStore = useInsightsStore();
+
+		const existing = computed(() =>
+			insightsStore.state.dashboards
+				.find((dashboard) => dashboard.id === props.dashboardKey)!
+				.panels.find((panel) => panel.id === props.primaryKey)
+		);
+
+		const edits = ref({});
+
+		const values = computed(() => {
+			if (existing.value) return { ...existing.value, ...edits.value };
+			return edits.value;
+		});
+
+		const selectItems = computed<FancySelectItem[]>(() => {
+			return panels.value.map((panel) => {
+				const item: FancySelectItem = {
+					text: panel.name,
+					icon: panel.icon,
+					description: panel.description,
+					value: panel.id,
+				};
+
+				return item;
+			});
+		});
+
+		return { existing, values, selectItems };
+	},
+});
+</script>
+
+<style scoped>
+.content {
+	padding: var(--content-padding);
+	padding-top: 0;
+	padding-bottom: var(--content-padding);
+}
+</style>
+
+<!--
+
+type
+options
+--
+toggle name
+icon   color
+note
+
+-->